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