Skip to content

E
edx-platform
Commit 98172538 by Valera Rozuvan Committed by Alexander Kryklia
Options

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

parent ad0a7d30
Showing with 359 additions and 120 deletions
common/static/js/capa/drag_and_drop/base_image.js
......@@ -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;
});
}
});
......
common/static/js/capa/drag_and_drop/draggables.js
......@@ -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',
......@@ -39,18 +37,18 @@ 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 -
state.baseImageEl.offset().top +
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;
}
}
});
......
common/static/js/capa/drag_and_drop/main.js
......@@ -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);
}());
}
});
......
common/static/js/capa/drag_and_drop/state.js
......@@ -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
};
......
common/static/js/capa/drag_and_drop/update_input.js
......@@ -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;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment