Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed problem with smaller and larger base images. Refactoring. Cleaning of code.

Browse Source
This commit is contained in:
Valera Rozuvan
2013-01-04 11:13:54 +02:00
committed by Alexander Kryklia
parent ad0a7d308c
commit 9817253850
5 changed files with 359 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
common/static/js/capa/drag_and_drop/base_image.js
View File

@@ -16,18 +16,26 @@ define(['logme'], function (logme) {
'style=" ' +
'position: relative; ' +
'margin-bottom: 25px; ' +
'margin-left: auto; ' +
'margin-right: auto; ' +
'" ' +
'></div>'
);
state.baseImageEl = $(
'<img ' +
'src="' + state.config.imageDir + '/' + state.config.base_image + '" ' +
'/>'
state.baseImageEl = $('<img />');
state.baseImageEl.attr(
'src',
state.config.imageDir + '/' + state.config.base_image
);
state.baseImageEl.appendTo(baseImageElContainer);
state.baseImageEl.load(function () {
baseImageElContainer.css('width', this.width);
baseImageElContainer.css('height', this.height);
baseImageElContainer.appendTo(state.containerEl);
state.baseImageEl.appendTo(baseImageElContainer);
baseImageElContainer.appendTo(state.containerEl);
state.baseImageLoaded = true;
});
}
});

289
common/static/js/capa/drag_and_drop/draggables.js
View File

@@ -21,8 +21,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.currentMovingDraggable = null;
$(document).mousemove(function (event) {
normalizeEvent(event);
if (state.currentMovingDraggable !== null) {
state.currentMovingDraggable.iconEl.css(
'left',
@@ -38,6 +36,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
);
if (state.currentMovingDraggable.labelEl !== null) {
state.currentMovingDraggable.labelEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
state.currentMovingDraggable.labelWidth * 0.5
);
state.currentMovingDraggable.labelEl.css(
'top',
event.pageY -
@@ -45,12 +49,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.currentMovingDraggable.iconHeight * 0.5 +
5
);
state.currentMovingDraggable.labelEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
state.currentMovingDraggable.labelWidth * 0.5
);
}
}
});
@@ -99,23 +97,39 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (draggableObj.iconWidth >= draggableObj.iconHeight) {
draggableObj.iconWidthSmall = 60;
draggableObj.iconHeightSmall = draggableObj.iconWidthSmall * (draggableObj.iconHeight / draggableObj.iconWidth);
draggableObj.iconHeightSmall =
draggableObj.iconWidthSmall *
(draggableObj.iconHeight / draggableObj.iconWidth);
} else {
draggableObj.iconHeightSmall = 60;
draggableObj.iconWidthSmall = draggableObj.iconHeightSmall * (draggableObj.iconWidth / draggableObj.iconHeight);
draggableObj.iconWidthSmall =
draggableObj.iconHeightSmall *
(draggableObj.iconWidth / draggableObj.iconHeight);
}
draggableObj.iconEl.css('position', 'absolute');
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall);
draggableObj.iconEl.css('height', draggableObj.iconHeightSmall);
draggableObj.iconEl.css(
'width',
draggableObj.iconWidthSmall
);
draggableObj.iconEl.css(
'height',
draggableObj.iconHeightSmall
);
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
draggableObj.iconEl.css(
'left',
50 - draggableObj.iconWidthSmall * 0.5
);
if (obj.label.length > 0) {
draggableObj.iconEl.css('top', 5);
} else {
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
draggableObj.iconEl.css(
'top',
50 - draggableObj.iconHeightSmall * 0.5
);
}
draggableObj.iconEl.appendTo(draggableObj.containerEl);
@@ -131,12 +145,20 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'</div>'
);
draggableObj.labelEl.appendTo(draggableObj.containerEl);
draggableObj.labelEl.appendTo(
draggableObj.containerEl
);
draggableObj.labelWidth = draggableObj.labelEl.width();
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5);
draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5);
draggableObj.labelEl.css(
'left',
50 - draggableObj.labelWidth * 0.5
);
draggableObj.labelEl.css(
'top',
5 + draggableObj.iconHeightSmall + 5
);
draggableObj.labelEl.mousedown(mouseDown);
draggableObj.labelEl.mouseup(mouseUp);
@@ -168,8 +190,14 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconWidthSmall = draggableObj.iconWidth;
draggableObj.iconHeightSmall = draggableObj.iconHeight;
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
draggableObj.iconEl.css(
'left',
50 - draggableObj.iconWidthSmall * 0.5
);
draggableObj.iconEl.css(
'top',
50 - draggableObj.iconHeightSmall * 0.5
);
} else {
// If no icon and no label, don't create a draggable.
return;
@@ -189,8 +217,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.x = -1;
draggableObj.y = -1;
draggableObj.setInContainer = function (val) { inContainer = val; };
draggableObj.setOnTarget = function (val) { onTarget = val; };
draggableObj.setInContainer = function (val) {
inContainer = val;
};
draggableObj.setOnTarget = function (val) {
onTarget = val;
};
state.draggables.push(draggableObj);
@@ -204,26 +236,58 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function mouseDown(event) {
if (mousePressed === false) {
state.currentMovingDraggable = draggableObj;
normalizeEvent(event);
// So that the browser does not perform a default drag.
// If we don't do this, each drag operation will
// potentially cause the highlghting of the dragged element.
event.preventDefault();
// If this draggable is just being dragged out of the
// container, we must perform some additional tasks.
if (inContainer === true) {
draggableObj.containerEl.hide();
draggableObj.iconEl.detach();
draggableObj.iconEl.css('width', draggableObj.iconWidth);
draggableObj.iconEl.css('height', draggableObj.iconHeight);
draggableObj.iconEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.iconWidth * 0.5);
draggableObj.iconEl.css('top', event.pageY - state.baseImageEl.offset().top - draggableObj.iconHeight * 0.5);
draggableObj.iconEl.appendTo(state.baseImageEl.parent());
draggableObj.iconEl.css(
'width',
draggableObj.iconWidth
);
draggableObj.iconEl.css(
'height',
draggableObj.iconHeight
);
draggableObj.iconEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
draggableObj.iconWidth * 0.5
);
draggableObj.iconEl.css(
'top',
event.pageY -
state.baseImageEl.offset().top -
draggableObj.iconHeight * 0.5
);
draggableObj.iconEl.appendTo(
state.baseImageEl.parent()
);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach();
draggableObj.labelEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.labelWidth * 0.5);
draggableObj.labelEl.css('top', event.pageY - state.baseImageEl.offset().top + draggableObj.iconHeight * 0.5 + 5);
draggableObj.labelEl.appendTo(state.baseImageEl.parent());
draggableObj.labelEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
draggableObj.labelWidth * 0.5
);
draggableObj.labelEl.css(
'top',
event.pageY -
state.baseImageEl.offset().top +
draggableObj.iconHeight * 0.5 + 5
);
draggableObj.labelEl.appendTo(
state.baseImageEl.parent()
);
}
inContainer = false;
@@ -235,7 +299,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl.css('z-index', '1000');
mousePressed = true;
event.preventDefault();
state.currentMovingDraggable = draggableObj;
}
}
@@ -249,8 +313,42 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function mouseMove() {
if (mousePressed === true) {
draggableObj.iconEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.iconWidth * 0.5);
draggableObj.iconEl.css('top', event.pageY - state.baseImageEl.offset().top - draggableObj.iconHeight * 0.5);
// Because we have also attached a 'mousemove' event to the
// 'document' (that will do the same thing), let's tell the
// browser not to bubble up this event. The attached event
// on the 'document' will only be triggered when the mouse
// pointer leaves the draggable while it is in the middle
// of a drag operation (user moves the mouse very quickly).
event.stopPropagation();
draggableObj.iconEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
draggableObj.iconWidth * 0.5
);
draggableObj.iconEl.css(
'top',
event.pageY -
state.baseImageEl.offset().top -
draggableObj.iconHeight * 0.5
);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
draggableObj.labelWidth * 0.5
);
draggableObj.labelEl.css(
'top',
event.pageY -
state.baseImageEl.offset().top +
draggableObj.iconHeight * 0.5 +
5
);
}
}
}
@@ -280,11 +378,22 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.numDraggablesInSlider += 1;
}
} else {
logme(
'baseImageEl.width = ' + state.baseImageEl.width() + '; ' +
'baseImageEl.height = ' + state.baseImageEl.height()
);
if (
(offsetIE.left < 0) ||
(offsetIE.left + draggableObj.iconWidth > state.baseImageEl.width()) ||
(
offsetIE.left + draggableObj.iconWidth >
state.baseImageEl.width()
) ||
(offsetIE.top < 0) ||
(offsetIE.top + draggableObj.iconHeight > state.baseImageEl.height())
(
offsetIE.top + draggableObj.iconHeight >
state.baseImageEl.height()
)
) {
moveBackToSlider();
@@ -295,8 +404,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else {
correctZIndexes();
draggableObj.x = offsetIE.left + draggableObj.iconWidth * 0.5;
draggableObj.y = offsetIE.top + draggableObj.iconHeight * 0.5;
draggableObj.x =
offsetIE.left + draggableObj.iconWidth * 0.5;
draggableObj.y =
offsetIE.top + draggableObj.iconHeight * 0.5;
}
}
@@ -331,16 +442,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
for (c1 = 0; c1 < state.targets.length; c1 += 1) {
target = state.targets[c1];
if (offsetIE.top + draggableObj.iconHeight * 0.5 < target.offset.top) {
if (
offsetIE.top + draggableObj.iconHeight * 0.5 <
target.offset.top
) {
continue;
}
if (offsetIE.top + draggableObj.iconHeight * 0.5 > target.offset.top + target.h) {
if (
offsetIE.top + draggableObj.iconHeight * 0.5 >
target.offset.top + target.h
) {
continue;
}
if (offsetIE.left + draggableObj.iconWidth * 0.5 < target.offset.left) {
if (
offsetIE.left + draggableObj.iconWidth * 0.5 <
target.offset.left
) {
continue;
}
if (offsetIE.left + draggableObj.iconWidth * 0.5 > target.offset.left + target.w) {
if (
offsetIE.left + draggableObj.iconWidth * 0.5 >
target.offset.left + target.w
) {
continue;
}
@@ -358,7 +481,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// another, then we need to remove it's ID from the
// previous target's draggables list, and add it to the
// new target's draggables list.
if ((onTarget !== null) && (onTarget.id !== target.id)) {
if (
(onTarget !== null) &&
(onTarget.id !== target.id)
) {
removeObjIdFromTarget();
onTarget = target;
target.draggable.push(draggableObj.id);
@@ -383,12 +509,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
offset = 1;
}
draggableObj.iconEl.css('left', target.offset.left + 0.5 * target.w - draggableObj.iconWidth * 0.5 + offset);
draggableObj.iconEl.css('top', target.offset.top + 0.5 * target.h - draggableObj.iconHeight * 0.5 + offset);
draggableObj.iconEl.css(
'left',
target.offset.left + 0.5 * target.w -
draggableObj.iconWidth * 0.5 + offset
);
draggableObj.iconEl.css(
'top',
target.offset.top + 0.5 * target.h -
draggableObj.iconHeight * 0.5 + offset
);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.css('left', target.offset.left + 0.5 * target.w - draggableObj.labelWidth * 0.5 + offset);
draggableObj.labelEl.css('top', target.offset.top + 0.5 * target.h + draggableObj.iconHeight * 0.5 + 5 + offset);
draggableObj.labelEl.css(
'left',
target.offset.left + 0.5 * target.w -
draggableObj.labelWidth * 0.5 + offset
);
draggableObj.labelEl.css(
'top',
target.offset.top + 0.5 * target.h +
draggableObj.iconHeight * 0.5 + 5 + offset
);
}
}
@@ -406,7 +548,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
var c1;
for (c1 = 0; c1 < state.draggables.length; c1++) {
if (draggableObj.oldZIndex < state.draggables[c1].zIndex) {
if (
draggableObj.oldZIndex <
state.draggables[c1].zIndex
) {
state.draggables[c1].zIndex -= 1;
state.draggables[c1].iconEl.css(
'z-index',
@@ -427,40 +572,50 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl.detach();
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall);
draggableObj.iconEl.css('height', draggableObj.iconHeightSmall);
draggableObj.iconEl.css(
'width',
draggableObj.iconWidthSmall
);
draggableObj.iconEl.css(
'height',
draggableObj.iconHeightSmall
);
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
draggableObj.iconEl.css(
'left',
50 - draggableObj.iconWidthSmall * 0.5
);
if (draggableObj.labelEl !== null) {
draggableObj.iconEl.css('top', 5);
} else {
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
draggableObj.iconEl.css(
'top',
50 - draggableObj.iconHeightSmall * 0.5
);
}
draggableObj.iconEl.appendTo(draggableObj.containerEl);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach();
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5);
draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5);
draggableObj.labelEl.appendTo(draggableObj.containerEl);
draggableObj.labelEl.css(
'left',
50 - draggableObj.labelWidth * 0.5
);
draggableObj.labelEl.css(
'top',
5 + draggableObj.iconHeightSmall + 5
);
draggableObj.labelEl.appendTo(
draggableObj.containerEl
);
}
inContainer = true;
}
}
}
// In firefox the event does not have a proper pageX and pageY
// coordinates.
function normalizeEvent(event) {
if(!event.offsetX) {
event.offsetX = (event.pageX - $(event.target).offset().left);
event.offsetY = (event.pageY - $(event.target).offset().top);
}
return event;
}
}
});

21
common/static/js/capa/drag_and_drop/main.js
View File

@@ -60,13 +60,22 @@ define(
Container(state);
BaseImage(state);
Targets(state);
Scroller(state);
Draggables(state);
// Update the input element, checking first that it is not filled with
// an answer from the server.
updateInput(state, true);
(function addContent() {
if (state.baseImageLoaded !== true) {
setTimeout(addContent, 50);
return;
}
Targets(state);
Scroller(state);
Draggables(state);
// Update the input element, checking first that it is not filled with
// an answer from the server.
updateInput(state, true);
}());
}
});

5
common/static/js/capa/drag_and_drop/state.js
View File

@@ -11,10 +11,7 @@ define([], function () {
return {
'problemId': problemId,
// Will indicate when all targetsand draggables have been loaded,
// processed, and postioned intially.
'targetsLoaded': false,
'draggablesLoaded': false,
'baseImageLoaded': false,
'numDraggablesInSlider': 0
};

144
common/static/js/capa/drag_and_drop/update_input.js
View File

@@ -39,7 +39,8 @@ define(['logme'], function (logme) {
for (c1 = 0; c1 < state.targets.length; c1++) {
for (c2 = 0; c2 < state.targets[c1].draggable.length; c2++) {
tempObj = {};
tempObj[state.targets[c1].draggable[c2]] = state.targets[c1].id;
tempObj[state.targets[c1].draggable[c2]] =
state.targets[c1].id;
draggables.push(tempObj);
}
@@ -80,20 +81,37 @@ define(['logme'], function (logme) {
}
if (
((typeof answer.use_targets === 'boolean') && (answer.use_targets === true)) ||
((typeof answer.use_targets === 'string') && (answer.use_targets === 'true'))
(
(typeof answer.use_targets === 'boolean') &&
(answer.use_targets === true)
) ||
(
(typeof answer.use_targets === 'string') &&
(answer.use_targets === 'true')
)
) {
for (c1 = 0; c1 < answer.draggables.length; c1++) {
for (draggableId in answer.draggables[c1]) {
if ((draggable = getDraggableById(draggableId)) === null) {
logme('ERROR: In answer there exists a draggable ID "' + draggableId + '". No draggable with this ID could be found.');
if (
(draggable = getDraggableById(draggableId)) ===
null
) {
logme(
'ERROR: In answer there exists a ' +
'draggable ID "' + draggableId + '". No ' +
'draggable with this ID could be found.'
);
continue;
}
targetId = answer.draggables[c1][draggableId];
if ((target = getTargetById(targetId)) === null) {
logme('ERROR: In answer there exists a target ID "' + targetId + '". No target with this ID could be found.');
logme(
'ERROR: In answer there exists a target ' +
'ID "' + targetId + '". No target with this ' +
'ID could be found.'
);
continue;
}
@@ -112,27 +130,44 @@ define(['logme'], function (logme) {
draggable.containerEl.hide();
draggable.iconEl.detach();
draggable.iconEl.css('width', draggable.iconWidth);
draggable.iconEl.css('height', draggable.iconHeight);
draggable.iconEl.css(
'width',
draggable.iconWidth
);
draggable.iconEl.css(
'height',
draggable.iconHeight
);
draggable.iconEl.css(
'left',
target.offset.left + 0.5 * target.w - draggable.iconWidth * 0.5 + offset
target.offset.left + 0.5 * target.w -
draggable.iconWidth * 0.5 + offset
);
draggable.iconEl.css(
'top',
target.offset.top + 0.5 * target.h - draggable.iconHeight * 0.5 + offset
target.offset.top + 0.5 * target.h -
draggable.iconHeight * 0.5 + offset
);
draggable.iconEl.appendTo(
state.baseImageEl.parent()
);
draggable.iconEl.appendTo(state.baseImageEl.parent());
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
draggable.labelEl.css('left', target.offset.left + 0.5 * target.w - draggable.labelWidth * 0.5 + offset);
draggable.labelEl.css('top', target.offset.top + 0.5 * target.h + draggable.iconHeight * 0.5 + 5 + offset);
draggable.labelEl.appendTo(state.baseImageEl.parent());
draggable.labelEl.css(
'left',
target.offset.left + 0.5 * target.w -
draggable.labelWidth * 0.5 + offset
);
draggable.labelEl.css(
'top',
target.offset.top + 0.5 * target.h +
draggable.iconHeight * 0.5 + 5 +
offset
);
draggable.labelEl.appendTo(
state.baseImageEl.parent()
);
}
draggable.setOnTarget(target);
@@ -145,13 +180,26 @@ define(['logme'], function (logme) {
}
}
} else if (
((typeof answer.use_targets === 'boolean') && (answer.use_targets === false)) ||
((typeof answer.use_targets === 'string') && (answer.use_targets === 'false'))
(
(typeof answer.use_targets === 'boolean') &&
(answer.use_targets === false)
) ||
(
(typeof answer.use_targets === 'string') &&
(answer.use_targets === 'false')
)
) {
for (c1 = 0; c1 < answer.draggables.length; c1++) {
for (draggableId in answer.draggables[c1]) {
if ((draggable = getDraggableById(draggableId)) === null) {
logme('ERROR: In answer there exists a draggable ID "' + draggableId + '". No draggable with this ID could be found.');
if (
(draggable = getDraggableById(draggableId)) ===
null
) {
logme(
'ERROR: In answer there exists a ' +
'draggable ID "' + draggableId + '". No ' +
'draggable with this ID could be found.'
);
continue;
}
@@ -170,31 +218,50 @@ define(['logme'], function (logme) {
draggable.containerEl.hide();
draggable.iconEl.detach();
draggable.iconEl.css('width', draggable.iconWidth);
draggable.iconEl.css('height', draggable.iconHeight);
draggable.iconEl.css(
'width',
draggable.iconWidth
);
draggable.iconEl.css(
'height',
draggable.iconHeight
);
draggable.iconEl.css(
'left',
answer.draggables[c1][draggableId][0] - draggable.iconWidth * 0.5 + offset
answer.draggables[c1][draggableId][0] -
draggable.iconWidth * 0.5 + offset
);
draggable.iconEl.css(
'top',
answer.draggables[c1][draggableId][1] - draggable.iconHeight * 0.5 + offset
answer.draggables[c1][draggableId][1] -
draggable.iconHeight * 0.5 + offset
);
draggable.iconEl.appendTo(
state.baseImageEl.parent()
);
draggable.iconEl.appendTo(state.baseImageEl.parent());
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
draggable.labelEl.css('left', answer.draggables[c1][draggableId][0] - draggable.iconWidth * 0.5 - draggable.labelWidth * 0.5 + offset);
draggable.labelEl.css('top', answer.draggables[c1][draggableId][1] - draggable.iconHeight * 0.5 + draggable.iconHeight + 5 + offset);
draggable.labelEl.appendTo(state.baseImageEl.parent());
draggable.labelEl.css(
'left',
answer.draggables[c1][draggableId][0] -
draggable.labelWidth * 0.5 + offset
);
draggable.labelEl.css(
'top',
answer.draggables[c1][draggableId][1] -
draggable.iconHeight * 0.5 +
draggable.iconHeight + 5 + offset
);
draggable.labelEl.appendTo(
state.baseImageEl.parent()
);
}
draggable.x = answer.draggables[c1][draggableId][0];
draggable.y = answer.draggables[c1][draggableId][1];
draggable.x =
answer.draggables[c1][draggableId][0];
draggable.y =
answer.draggables[c1][draggableId][1];
state.numDraggablesInSlider -= 1;
state.updateArrowOpacity();
@@ -203,7 +270,10 @@ define(['logme'], function (logme) {
}
}
} else {
logme('ERROR: The type of answer.targets is not supported. answer.targets = ', answer.targets);
logme(
'ERROR: The type of answer.targets is not supported. ' +
'answer.targets = ', answer.targets
);
return;
}