Skip to content

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

Rewrote functionality to include labels as separate from the container. Fixed bugs. Refactoring.

parent 792cd34c
Showing with 92 additions and 25 deletions
common/static/js/capa/drag_and_drop/config_parser.js
......@@ -12,6 +12,8 @@ define(['logme'], function (logme) {
returnStatus = true;
logme('imageDir', imageDir);
state.config = {
'imageDir': '/static/' + imageDir + '/images',
'draggables': [],
......
common/static/js/capa/drag_and_drop/scroller.js
......@@ -105,7 +105,9 @@ define(['logme'], function (logme) {
'<div ' +
'style=" ' +
'width: 20000px; ' +
'height: 102px; ' +
'height: 100px; ' +
'border-top: 1px solid #CCC; ' +
'border-bottom: 1px solid #CCC; ' +
'" ' +
'></div>'
);
......@@ -158,7 +160,7 @@ define(['logme'], function (logme) {
// When there are no more hidden draggables, prevent from
// scrolling infinitely.
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 6)) {
if (showElLeftMargin < -102 * (state.numDraggablesInSlider - 6)) {
return;
}
......@@ -192,7 +194,7 @@ define(['logme'], function (logme) {
moveLeftEl.children('div').css('opacity', '1');
moveRightEl.children('div').css('opacity', '1');
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 6)) {
if (showElLeftMargin < -102 * (state.numDraggablesInSlider - 6)) {
moveRightEl.children('div').css('opacity', '.4');
}
if (showElLeftMargin > -102) {
......
common/static/js/capa/drag_and_drop/state.js
......@@ -14,7 +14,9 @@ define([], function () {
// Will indicate when all targetsand draggables have been loaded,
// processed, and postioned intially.
'targetsLoaded': false,
'draggablesLoaded': false
'draggablesLoaded': false,
'numDraggablesInSlider': 0
};
}
});
......
common/static/js/capa/drag_and_drop/update_input.js
......@@ -75,7 +75,12 @@ define(['logme'], function (logme) {
function repositionDraggables(answer) {
var draggableId, draggable, targetId, target, draggablePosition,
c1;
c1, offset;
offset = 0;
if (state.config.targetOutline === true) {
offset = 1;
}
logme(answer);
......@@ -98,22 +103,47 @@ define(['logme'], function (logme) {
continue;
}
(function (c1, draggableId, draggable) {
moveDraggableToBaseImage();
return;
function moveDraggableToBaseImage() {
if (draggable.hasLoaded === false) {
setTimeout(moveDraggableToBaseImage, 50);
return;
}
draggable.setInContainer(false);
draggable.containerEl.hide();
draggable.setInContainer(false);
draggable.iconEl.detach();
draggable.el.detach();
draggable.el.css('border', 'none');
draggable.el.css('position', 'absolute');
draggable.el.css('left', answer.draggables[c1][draggableId][0] - 50);
draggable.el.css('top', answer.draggables[c1][draggableId][1] - 50);
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
);
draggable.iconEl.css(
'top',
target.offset.top + 0.5 * target.h - draggable.iconHeight * 0.5 + offset
);
draggable.el.css('left', target.offset.left + 0.5 * target.w - 50);
draggable.el.css('top', target.offset.top + 0.5 * target.h - 50);
draggable.iconEl.appendTo(state.baseImageEl.parent());
draggable.el.appendTo(state.baseImageEl.parent());
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
draggable.setOnTarget(target);
target.draggable.push(draggableId);
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);
target.draggable.push(draggableId);
}
}(c1, draggableId, draggable));
}
}
} else if (
......@@ -128,17 +158,47 @@ define(['logme'], function (logme) {
continue;
}
draggable.setInContainer(false);
(function (c1, draggableId, draggable) {
moveDraggableToBaseImage();
return;
function moveDraggableToBaseImage() {
if (draggable.hasLoaded === false) {
setTimeout(moveDraggableToBaseImage, 50);
return;
}
draggable.setInContainer(false);
draggable.containerEl.hide();
draggable.iconEl.detach();
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
);
draggable.iconEl.css(
'top',
answer.draggables[c1][draggableId][0] - draggable.iconHeight * 0.5 + offset
);
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][0] - draggable.iconHeight * 0.5 + draggable.iconHeight + 5 + offset);
draggable.el.detach();
draggable.el.css('border', 'none');
draggable.el.css('position', 'absolute');
draggable.el.css('left', answer.draggables[c1][draggableId][0] - 50);
draggable.el.css('top', answer.draggables[c1][draggableId][1] - 50);
draggable.el.appendTo(state.baseImageEl.parent());
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];
}
}(c1, draggableId, draggable));
}
}
} else {
......@@ -147,6 +207,7 @@ define(['logme'], function (logme) {
return;
}
state.numDraggablesInSlider -= 1;
state.updateArrowOpacity();
}
......
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