Skip to content

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

Refactoring of Drag and Drop complete. Draggable properties isUsable, isOriginal… 

Refactoring of Drag and Drop complete. Draggable properties isUsable, isOriginal included, but functionality connected with them is not complete. Found and fixed bug with z-index ordering.
parent f1588738
Showing with 265 additions and 396 deletions
common/static/js/capa/drag_and_drop.js
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
(function (requirejs, require, define) { (function (requirejs, require, define) {
requirejs.config({ requirejs.config({
'baseUrl': '/static/js/capa/drag_and_drop/', 'baseUrl': '/static/js/capa/drag_and_drop/'
}); });
// The current JS file will be loaded and run each time. It will require a // The current JS file will be loaded and run each time. It will require a
......
common/static/js/capa/drag_and_drop/base_image.js
...@@ -24,10 +24,7 @@ define(['logme'], function (logme) { ...@@ -24,10 +24,7 @@ define(['logme'], function (logme) {
state.baseImageEl = $('<img />'); state.baseImageEl = $('<img />');
state.baseImageEl.attr( state.baseImageEl.attr('src', state.config.baseImage);
'src',
state.config.baseImage
);
state.baseImageEl.load(function () { state.baseImageEl.load(function () {
baseImageElContainer.css('width', this.width); baseImageElContainer.css('width', this.width);
baseImageElContainer.css('height', this.height); baseImageElContainer.css('height', this.height);
...@@ -42,9 +39,7 @@ define(['logme'], function (logme) { ...@@ -42,9 +39,7 @@ define(['logme'], function (logme) {
state.baseImageLoaded = true; state.baseImageLoaded = true;
}); });
state.baseImageEl.error(function () { state.baseImageEl.error(function () {
logme( logme('ERROR: Image "' + state.config.baseImage + '" was not found!');
'ERROR: Image "' + state.config.baseImage + '" was not found!'
);
baseImageElContainer.html( baseImageElContainer.html(
'<span style="color: red;">' + '<span style="color: red;">' +
'ERROR: Image "' + state.config.baseImage + '" was not found!' + 'ERROR: Image "' + state.config.baseImage + '" was not found!' +
......
common/static/js/capa/drag_and_drop/config_parser.js
...@@ -7,17 +7,15 @@ ...@@ -7,17 +7,15 @@
define(['logme'], function (logme) { define(['logme'], function (logme) {
return configParser; return configParser;
function configParser(config, state) { function configParser(state, config) {
state.config = { state.config = {
'draggables': [], 'draggables': [],
'baseImage': '', 'baseImage': '',
'targets': [], 'targets': [],
'onePerTarget': null, 'onePerTarget': null, // Specified by user. No default.
'targetOutline': true, 'targetOutline': true,
'labelBgColor': '#d6d6d6', 'labelBgColor': '#d6d6d6',
'individualTargets': null, // Depends on 'targets'.
'individualTargets': null,
'errors': 0 // Number of errors found while parsing config. 'errors': 0 // Number of errors found while parsing config.
}; };
...@@ -156,19 +154,13 @@ define(['logme'], function (logme) { ...@@ -156,19 +154,13 @@ define(['logme'], function (logme) {
} }
function processDraggable(state, obj) { function processDraggable(state, obj) {
if (!attrIsString(obj, 'id')) { if (
return false; (attrIsString(obj, 'id') === false) ||
} (attrIsString(obj, 'icon') === false) ||
(attrIsString(obj, 'label') === false) ||
if (!attrIsString(obj, 'icon')) {
return false;
}
if (!attrIsString(obj, 'label')) {
return false;
}
if (!attrIsBoolean(obj, 'can_reuse', false)) { (attrIsBoolean(obj, 'can_reuse', false) === false)
) {
return false; return false;
} }
...@@ -178,21 +170,15 @@ define(['logme'], function (logme) { ...@@ -178,21 +170,15 @@ define(['logme'], function (logme) {
} }
function processTarget(state, obj) { function processTarget(state, obj) {
if (!attrIsString(obj, 'id')) { if (
return false; (attrIsString(obj, 'id') === false) ||
}
if (!attrIsInteger(obj, 'w')) { (attrIsInteger(obj, 'w') === false) ||
return false; (attrIsInteger(obj, 'h') === false) ||
}
if (!attrIsInteger(obj, 'h')) {
return false;
}
if (!attrIsInteger(obj, 'x')) { (attrIsInteger(obj, 'x') === false) ||
return false; (attrIsInteger(obj, 'y') === false)
} ) {
if (!attrIsInteger(obj, 'y')) {
return false; return false;
} }
......
common/static/js/capa/drag_and_drop/draggables.js
...@@ -10,13 +10,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -10,13 +10,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
}; };
function init(state) { function init(state) {
state.draggables = [];
state.numDraggablesInSlider = 0;
state.currentMovingDraggable = null;
(function (c1) { (function (c1) {
while (c1 < state.config.draggables.length) { while (c1 < state.config.draggables.length) {
processDraggable(state, state.config.draggables[c1], c1 + 1); processDraggable(state, state.config.draggables[c1]);
c1 += 1 c1 += 1
} }
}(0)); }(0));
...@@ -121,6 +117,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -121,6 +117,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.x = newPosition.x; this.x = newPosition.x;
this.y = newPosition.y; this.y = newPosition.y;
this.zIndex = 1000;
this.correctZIndexes();
this.state.numDraggablesInSlider -= 1; this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity(); this.state.updateArrowOpacity();
} }
...@@ -180,35 +179,49 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -180,35 +179,49 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.labelEl.appendTo(this.state.baseImageEl.parent()); this.labelEl.appendTo(this.state.baseImageEl.parent());
} }
this.onTarget = target; target.addDraggable(this);
target.draggable.push(this.id);
if (target.numTextEl !== null) { this.zIndex = 1000;
target.updateNumTextEl(); this.correctZIndexes();
}
this.state.numDraggablesInSlider -= 1; this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity(); this.state.updateArrowOpacity();
} }
function processDraggable(state, obj, objIndex) { function processDraggable(state, obj) {
var draggableObj; var draggableObj;
draggableObj = { draggableObj = {
'id': obj.id, 'id': obj.id,
'isReusable': obj.can_reuse, 'isReusable': obj.can_reuse,
'isOriginal': true,
'x': -1, 'x': -1,
'y': -1, 'y': -1,
'zIndex': objIndex, 'zIndex': 1,
'oldZIndex': objIndex,
'containerEl': null,
'iconEl': null,
'iconElBGColor': null,
'iconElPadding': null,
'iconElBorder': null,
'iconElLeftOffset': null,
'iconWidth': null,
'iconHeight': null,
'iconWidthSmall': null,
'iconHeightSmall': null,
'labelEl': null, 'labelEl': null,
'labelWidth': null,
'hasLoaded': false, 'hasLoaded': false,
'inContainer': true, 'inContainer': true,
'mousePressed': false, 'mousePressed': false,
'onTarget': null, 'onTarget': null,
'onTargetIndex': null,
'state': state, 'state': state,
...@@ -216,7 +229,6 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -216,7 +229,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'mouseUp': mouseUp, 'mouseUp': mouseUp,
'mouseMove': mouseMove, 'mouseMove': mouseMove,
'checkLandingElement': checkLandingElement, 'checkLandingElement': checkLandingElement,
'removeObjIdFromTarget': removeObjIdFromTarget,
'checkIfOnTarget': checkIfOnTarget, 'checkIfOnTarget': checkIfOnTarget,
'snapToTarget': snapToTarget, 'snapToTarget': snapToTarget,
'correctZIndexes': correctZIndexes, 'correctZIndexes': correctZIndexes,
...@@ -234,7 +246,6 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -234,7 +246,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'display: inline; ' + 'display: inline; ' +
'float: left; ' + 'float: left; ' +
'overflow: hidden; ' + 'overflow: hidden; ' +
'z-index: ' + objIndex + '; ' +
'border-left: 1px solid #CCC; ' + 'border-left: 1px solid #CCC; ' +
'border-right: 1px solid #CCC; ' + 'border-right: 1px solid #CCC; ' +
'text-align: center; ' + 'text-align: center; ' +
...@@ -252,49 +263,28 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -252,49 +263,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconElLeftOffset = 0; draggableObj.iconElLeftOffset = 0;
draggableObj.iconEl = $('<img />'); draggableObj.iconEl = $('<img />');
draggableObj.iconEl.attr( draggableObj.iconEl.attr('src', obj.icon);
'src',
obj.icon
);
draggableObj.iconEl.load(function () { draggableObj.iconEl.load(function () {
draggableObj.iconWidth = this.width; draggableObj.iconWidth = this.width;
draggableObj.iconHeight = this.height; draggableObj.iconHeight = this.height;
if (draggableObj.iconWidth >= draggableObj.iconHeight) { if (draggableObj.iconWidth >= draggableObj.iconHeight) {
draggableObj.iconWidthSmall = 60; draggableObj.iconWidthSmall = 60;
draggableObj.iconHeightSmall = draggableObj.iconHeightSmall = draggableObj.iconWidthSmall * (draggableObj.iconHeight / draggableObj.iconWidth);
draggableObj.iconWidthSmall *
(draggableObj.iconHeight / draggableObj.iconWidth);
} else { } else {
draggableObj.iconHeightSmall = 60; draggableObj.iconHeightSmall = 60;
draggableObj.iconWidthSmall = draggableObj.iconWidthSmall = draggableObj.iconHeightSmall * (draggableObj.iconWidth / draggableObj.iconHeight);
draggableObj.iconHeightSmall *
(draggableObj.iconWidth / draggableObj.iconHeight);
} }
draggableObj.iconEl.css('position', 'absolute'); draggableObj.iconEl.css('position', 'absolute');
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall);
draggableObj.iconEl.css( draggableObj.iconEl.css('height', draggableObj.iconHeightSmall);
'width', draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
draggableObj.iconWidthSmall
);
draggableObj.iconEl.css(
'height',
draggableObj.iconHeightSmall
);
draggableObj.iconEl.css(
'left',
50 - draggableObj.iconWidthSmall * 0.5
);
if (obj.label.length > 0) { if (obj.label.length > 0) {
draggableObj.iconEl.css('top', 5); draggableObj.iconEl.css('top', 5);
} else { } else {
draggableObj.iconEl.css( draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
'top',
50 - draggableObj.iconHeightSmall * 0.5
);
} }
draggableObj.iconEl.appendTo(draggableObj.containerEl); draggableObj.iconEl.appendTo(draggableObj.containerEl);
...@@ -306,27 +296,16 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -306,27 +296,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'position: absolute; ' + 'position: absolute; ' +
'color: black; ' + 'color: black; ' +
'font-size: 0.95em; ' + 'font-size: 0.95em; ' +
'z-index: ' + objIndex + '; ' +
'" ' + '" ' +
'>' + '>' +
obj.label + obj.label +
'</div>' '</div>'
); );
draggableObj.labelEl.appendTo( draggableObj.labelEl.appendTo(draggableObj.containerEl);
draggableObj.containerEl
);
draggableObj.labelWidth = draggableObj.labelEl.width(); draggableObj.labelWidth = draggableObj.labelEl.width();
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5);
draggableObj.labelEl.css( draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5);
'left',
50 - draggableObj.labelWidth * 0.5
);
draggableObj.labelEl.css(
'top',
5 + draggableObj.iconHeightSmall + 5
);
draggableObj.labelEl.mousedown(function (event) { draggableObj.labelEl.mousedown(function (event) {
draggableObj.mouseDown.call(draggableObj, event); draggableObj.mouseDown.call(draggableObj, event);
...@@ -358,7 +337,6 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -358,7 +337,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'position: absolute; ' + 'position: absolute; ' +
'color: black; ' + 'color: black; ' +
'font-size: 0.95em; ' + 'font-size: 0.95em; ' +
'z-index: ' + objIndex + '; ' +
'" ' + '" ' +
'>' + '>' +
obj.label + obj.label +
...@@ -372,14 +350,8 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -372,14 +350,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconWidthSmall = draggableObj.iconWidth; draggableObj.iconWidthSmall = draggableObj.iconWidth;
draggableObj.iconHeightSmall = draggableObj.iconHeight; draggableObj.iconHeightSmall = draggableObj.iconHeight;
draggableObj.iconEl.css( draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
'left', draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
50 - draggableObj.iconWidthSmall * 0.5
);
draggableObj.iconEl.css(
'top',
50 - draggableObj.iconHeightSmall * 0.5
);
draggableObj.hasLoaded = true; draggableObj.hasLoaded = true;
} else { } else {
...@@ -421,6 +393,11 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -421,6 +393,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// potentially cause the highlghting of the dragged element. // potentially cause the highlghting of the dragged element.
event.preventDefault(); event.preventDefault();
if ((this.isReusable === true) && (this.isOriginal === true)) {
return;
}
// If this draggable is just being dragged out of the // If this draggable is just being dragged out of the
// container, we must perform some additional tasks. // container, we must perform some additional tasks.
if (this.inContainer === true) { if (this.inContainer === true) {
...@@ -500,7 +477,6 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -500,7 +477,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.state.numDraggablesInSlider -= 1; this.state.numDraggablesInSlider -= 1;
} }
this.oldZIndex = this.zIndex;
this.zIndex = 1000; this.zIndex = 1000;
this.iconEl.css('z-index', '1000'); this.iconEl.css('z-index', '1000');
if (this.labelEl !== null) { if (this.labelEl !== null) {
...@@ -532,32 +508,21 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -532,32 +508,21 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.iconEl.css( this.iconEl.css(
'left', 'left',
event.pageX - event.pageX - this.state.baseImageEl.offset().left - this.iconWidth * 0.5 - this.iconElLeftOffset
this.state.baseImageEl.offset().left -
this.iconWidth * 0.5
- this.iconElLeftOffset
); );
this.iconEl.css( this.iconEl.css(
'top', 'top',
event.pageY - event.pageY - this.state.baseImageEl.offset().top - this.iconHeight * 0.5
this.state.baseImageEl.offset().top -
this.iconHeight * 0.5
); );
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.css( this.labelEl.css(
'left', 'left',
event.pageX - event.pageX - this.state.baseImageEl.offset().left - this.labelWidth * 0.5 - 9 // Acoount for padding, border.
this.state.baseImageEl.offset().left -
this.labelWidth * 0.5
- 9 // Acoount for padding, border.
); );
this.labelEl.css( this.labelEl.css(
'top', 'top',
event.pageY - event.pageY - this.state.baseImageEl.offset().top + this.iconHeight * 0.5 + 5
this.state.baseImageEl.offset().top +
this.iconHeight * 0.5 +
5
); );
} }
} }
...@@ -578,23 +543,20 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -578,23 +543,20 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (this.checkIfOnTarget(positionIE) === true) { if (this.checkIfOnTarget(positionIE) === true) {
this.correctZIndexes(); this.correctZIndexes();
} else { } else {
if (this.onTarget !== null) {
this.onTarget.removeDraggable(this);
}
this.moveBackToSlider(); this.moveBackToSlider();
this.removeObjIdFromTarget();
this.state.numDraggablesInSlider += 1; this.state.numDraggablesInSlider += 1;
} }
} else { } else {
if ( if (
(positionIE.left < 0) || (positionIE.left < 0) ||
( (positionIE.left + this.iconWidth > this.state.baseImageEl.width()) ||
positionIE.left + this.iconWidth >
this.state.baseImageEl.width()
) ||
(positionIE.top < 0) || (positionIE.top < 0) ||
( (positionIE.top + this.iconHeight > this.state.baseImageEl.height())
positionIE.top + this.iconHeight >
this.state.baseImageEl.height()
)
) { ) {
this.moveBackToSlider(); this.moveBackToSlider();
...@@ -605,10 +567,8 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -605,10 +567,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else { } else {
this.correctZIndexes(); this.correctZIndexes();
this.x = this.x = positionIE.left + this.iconWidth * 0.5;
positionIE.left + this.iconWidth * 0.5; this.y = positionIE.top + this.iconHeight * 0.5;
this.y =
positionIE.top + this.iconHeight * 0.5;
} }
} }
...@@ -616,26 +576,6 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -616,26 +576,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
updateInput.update(this.state); updateInput.update(this.state);
} }
function removeObjIdFromTarget() {
var c1;
if (this.onTarget !== null) {
for (c1 = 0; c1 < this.onTarget.draggable.length; c1 += 1) {
if (this.onTarget.draggable[c1] === this.id) {
this.onTarget.draggable.splice(c1, 1);
break;
}
}
if (this.onTarget.numTextEl !== null) {
this.onTarget.updateNumTextEl();
}
this.onTarget = null;
}
}
// //
// Determine if a draggable, after it was relased, ends up on a // Determine if a draggable, after it was relased, ends up on a
// target. We do this by iterating over all of the targets, and // target. We do this by iterating over all of the targets, and
...@@ -647,9 +587,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -647,9 +587,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// this.iconEl.position() // this.iconEl.position()
// //
function checkIfOnTarget(positionIE) { function checkIfOnTarget(positionIE) {
var c1, target, targetFound; var c1, target;
targetFound = false;
for (c1 = 0; c1 < this.state.targets.length; c1 += 1) { for (c1 = 0; c1 < this.state.targets.length; c1 += 1) {
target = this.state.targets[c1]; target = this.state.targets[c1];
...@@ -660,75 +598,52 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -660,75 +598,52 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// against), then go to next target. // against), then go to next target.
if ( if (
(this.state.config.onePerTarget === true) && (this.state.config.onePerTarget === true) &&
(target.draggable.length === 1) && (target.draggableList.length === 1) &&
(target.draggable[0] !== this.id) (target.draggableList[0].id !== this.id)
) { ) {
continue; continue;
} }
// Check if the draggable's center coordinate is within // Check if the draggable's center coordinate is within
// the target's dimensions. If not, go to next target. // the target's dimensions. If not, go to next target.
if ( if (positionIE.top + this.iconHeight * 0.5 < target.offset.top) {
positionIE.top + this.iconHeight * 0.5 <
target.offset.top
) {
continue; continue;
} }
if ( if (positionIE.top + this.iconHeight * 0.5 > target.offset.top + target.h) {
positionIE.top + this.iconHeight * 0.5 >
target.offset.top + target.h
) {
continue; continue;
} }
if ( if (positionIE.left + this.iconWidth * 0.5 < target.offset.left) {
positionIE.left + this.iconWidth * 0.5 <
target.offset.left
) {
continue; continue;
} }
if ( if (positionIE.left + this.iconWidth * 0.5 > target.offset.left + target.w) {
positionIE.left + this.iconWidth * 0.5 >
target.offset.left + target.w
) {
continue; continue;
} }
// If we got here, then our draggable is on top of a
// target.
targetFound = true;
// If the draggable was moved from one target to // If the draggable was moved from one target to
// another, then we need to remove it's ID from the // another, then we need to remove it from the
// previous target's draggables list, and add it to the // previous target's draggables list, and add it to the
// new target's draggables list. // new target's draggables list.
if ( if ((this.onTarget !== null) && (this.onTarget.id !== target.id)) {
(this.onTarget !== null) && this.onTarget.removeDraggable(this);
(this.onTarget.id !== target.id) target.addDraggable(this);
) {
this.removeObjIdFromTarget();
this.onTarget = target;
target.draggable.push(this.id);
} }
// If the draggable was moved from the slider to a // If the draggable was moved from the slider to a
// target, remember the target, and add ID to the // target, remember the target, and add ID to the
// target's draggables list. // target's draggables list.
else if (this.onTarget === null) { else if (this.onTarget === null) {
this.onTarget = target; target.addDraggable(this);
target.draggable.push(this.id);
}
if (target.numTextEl !== null) {
target.updateNumTextEl();
} }
// Reposition the draggable so that it's center // Reposition the draggable so that it's center
// coincides with the center of the target. // coincides with the center of the target.
this.snapToTarget(target); this.snapToTarget(target);
break; // Target was found.
return true;
} }
return targetFound; // Target was not found.
return false;
} }
function snapToTarget(target) { function snapToTarget(target) {
...@@ -771,101 +686,45 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -771,101 +686,45 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// ordering of the visibility (z-index) of the other draggables // ordering of the visibility (z-index) of the other draggables
// will not change. // will not change.
function correctZIndexes() { function correctZIndexes() {
var draggablesInMe, c1, c2, highestZIndex; var c1, highestZIndex;
if (this.state.config.individualTargets === true) {
if (this.onTarget.draggable.length > 0) {
draggablesInMe = [];
for (c1 = 0; c1 < this.onTarget.draggable.length; c1 += 1) {
for (c2 = 0; c2 < this.state.draggables.length; c2 += 1) {
if (
this.onTarget.draggable[c1] ===
this.state.draggables[c2].id
) {
draggablesInMe.push(this.state.draggables[c2]);
}
}
}
highestZIndex = -10000; highestZIndex = -10000;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) { if (this.state.config.individualTargets === true) {
if (this.onTarget.draggableList.length > 0) {
for (c1 = 0; c1 < this.onTarget.draggableList.length; c1 += 1) {
if ( if (
(draggablesInMe[c1].zIndex > highestZIndex) && (this.onTarget.draggableList[c1].zIndex > highestZIndex) &&
(draggablesInMe[c1].zIndex !== 1000) (this.onTarget.draggableList[c1].zIndex !== 1000)
) { ) {
highestZIndex = draggablesInMe[c1].zIndex; highestZIndex = this.onTarget.draggableList[c1].zIndex;
}
}
if (highestZIndex === -10000) {
highestZIndex = this.onTarget.draggable.length;
} else if (highestZIndex < this.oldZIndex) {
highestZIndex = this.oldZIndex;
} else {
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
draggablesInMe[c1].zIndex -= 1;
draggablesInMe[c1].oldZIndex -= 1;
draggablesInMe[c1].iconEl.css(
'z-index',
draggablesInMe[c1].zIndex
);
if (draggablesInMe[c1].labelEl !== null) {
draggablesInMe[c1].labelEl.css(
'z-index',
draggablesInMe[c1].zIndex
);
}
} }
} }
} else { } else {
highestZIndex = this.onTarget.draggable.length; highestZIndex = 0;
}
this.zIndex = highestZIndex;
this.oldZIndex = highestZIndex;
this.iconEl.css(
'z-index',
this.zIndex
);
if (this.labelEl !== null) {
this.labelEl.css(
'z-index',
this.zIndex
);
} }
} else { } else {
for (c1 = 0; c1 < this.state.draggables.length; c1++) { for (c1 = 0; c1 < this.state.draggables.length; c1++) {
if ( if (this.inContainer === false) {
this.oldZIndex < if (
this.state.draggables[c1].zIndex (this.state.draggables[c1].zIndex > highestZIndex) &&
) { (this.state.draggables[c1].zIndex !== 1000)
this.state.draggables[c1].zIndex -= 1; ) {
this.state.draggables[c1].oldZIndex = this.state.draggables[c1].zIndex; highestZIndex = this.state.draggables[c1].zIndex;
this.state.draggables[c1].iconEl.css(
'z-index',
this.state.draggables[c1].zIndex
);
if (this.state.draggables[c1].labelEl !== null) {
this.state.draggables[c1].labelEl.css(
'z-index',
this.state.draggables[c1].zIndex
);
} }
} }
} }
}
this.zIndex = c1; if (highestZIndex === -10000) {
this.oldZIndex = c1; highestZIndex = 0;
this.iconEl.css('z-index', c1); }
if (this.labelEl !== null) { this.zIndex = highestZIndex + 1;
this.labelEl.css('z-index', c1);
} this.iconEl.css('z-index', highestZIndex);
if (this.labelEl !== null) {
this.labelEl.css('z-index', highestZIndex);
} }
} }
......
common/static/js/capa/drag_and_drop/main.js
...@@ -5,10 +5,8 @@ ...@@ -5,10 +5,8 @@
(function (requirejs, require, define) { (function (requirejs, require, define) {
define( define(
['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller', ['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller', 'draggables', 'targets', 'update_input'],
'draggables', 'targets', 'update_input'], function (logme, State, configParser, Container, BaseImage, Scroller, Draggables, Targets, updateInput) {
function (logme, State, configParser, Container, BaseImage, Scroller,
Draggables, Targets, updateInput) {
return Main; return Main;
function Main() { function Main() {
...@@ -45,7 +43,7 @@ define( ...@@ -45,7 +43,7 @@ define(
state = State(problemId); state = State(problemId);
if (configParser(config, state) !== true) { if (configParser(state, config) !== true) {
logme('ERROR: Could not make sense of the JSON configuration options.'); logme('ERROR: Could not make sense of the JSON configuration options.');
return; return;
...@@ -70,11 +68,11 @@ define( ...@@ -70,11 +68,11 @@ define(
if (updateInput.check(state) === false) { if (updateInput.check(state) === false) {
updateInput.update(state); updateInput.update(state);
} }
setTimeout(function () {
logme('state.draggables', state.draggables);
}, 500);
}()); }());
setTimeout(function () {
logme('After 1000 ms:', state);
}, 1000);
} }
}); });
......
common/static/js/capa/drag_and_drop/state.js
...@@ -9,11 +9,24 @@ define([], function () { ...@@ -9,11 +9,24 @@ define([], function () {
function State(problemId) { function State(problemId) {
return { return {
'problemId': problemId, 'config': null,
'baseImageEl': null,
'baseImageLoaded': false, 'baseImageLoaded': false,
'numDraggablesInSlider': 0 'containerEl': null,
'sliderEl': null,
'problemId': problemId,
'draggables': [],
'numDraggablesInSlider': 0,
'currentMovingDraggable': null,
'targets': [],
'updateArrowOpacity': null
}; };
} }
}); });
......
common/static/js/capa/drag_and_drop/targets.js
...@@ -8,146 +8,166 @@ define(['logme'], function (logme) { ...@@ -8,146 +8,166 @@ define(['logme'], function (logme) {
return Targets; return Targets;
function Targets(state) { function Targets(state) {
var c1; (function (c1) {
while (c1 < state.config.targets.length) {
processTarget(state, state.config.targets[c1]);
state.targets = []; c1 += 1;
}
for (c1 = 0; c1 < state.config.targets.length; c1++) { }(0));
processTarget(state.config.targets[c1]); } // function Targets(state) {
}
return;
function processTarget(obj) { function processTarget(state, obj) {
var targetEl, borderCss, numTextEl, targetObj; var targetEl, borderCss, numTextEl, targetObj;
borderCss = ''; borderCss = '';
if (state.config.targetOutline === true) { if (state.config.targetOutline === true) {
borderCss = 'border: 1px dashed gray; '; borderCss = 'border: 1px dashed gray; ';
} }
targetEl = $( targetEl = $(
'<div ' +
'style=" ' +
'display: block; ' +
'position: absolute; ' +
'width: ' + obj.w + 'px; ' +
'height: ' + obj.h + 'px; ' +
'top: ' + obj.y + 'px; ' +
'left: ' + obj.x + 'px; ' +
borderCss +
'" ' +
'data-target-id="' + obj.id + '" ' +
'></div>'
);
targetEl.appendTo(state.baseImageEl.parent());
targetEl.mousedown(function (event) {
event.preventDefault();
});
if (state.config.onePerTarget === false) {
numTextEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'display: block; ' + 'display: block; ' +
'position: absolute; ' + 'position: absolute; ' +
'width: ' + obj.w + 'px; ' + 'width: 24px; ' +
'height: ' + obj.h + 'px; ' + 'height: 24px; ' +
'top: ' + obj.y + 'px; ' + 'top: ' + obj.y + 'px; ' +
'left: ' + obj.x + 'px; ' + 'left: ' + (obj.x + obj.w - 24) + 'px; ' +
borderCss + 'border: 1px solid black; ' +
'text-align: center; ' +
'z-index: 500; ' +
'background-color: white; ' +
'font-size: 0.95em; ' +
'color: #009fe2; ' +
'cursor: pointer; ' +
'" ' + '" ' +
'data-target-id="' + obj.id + '" ' + '>0</div>'
'></div>'
); );
targetEl.appendTo(state.baseImageEl.parent()); } else {
targetEl.mousedown(function (event) { numTextEl = null;
event.preventDefault(); }
});
if (state.config.onePerTarget === false) {
numTextEl = $(
'<div ' +
'style=" ' +
'display: block; ' +
'position: absolute; ' +
'width: 24px; ' +
'height: 24px; ' +
'top: ' + obj.y + 'px; ' +
'left: ' + (obj.x + obj.w - 24) + 'px; ' +
'border: 1px solid black; ' +
'text-align: center; ' +
'z-index: 500; ' +
'background-color: white; ' +
'font-size: 0.95em; ' +
'color: #009fe2; ' +
'cursor: pointer; ' +
'" ' +
'>0</div>'
);
} else {
numTextEl = null;
}
targetObj = { targetObj = {
'id': obj.id, 'id': obj.id,
'w': obj.w, 'w': obj.w,
'h': obj.h, 'h': obj.h,
'el': targetEl, 'el': targetEl,
'offset': targetEl.position(), 'offset': targetEl.position(),
'draggable': [], 'draggableList': [],
'targetEl': targetEl, 'targetEl': targetEl,
'numTextEl': numTextEl, 'numTextEl': numTextEl,
'updateNumTextEl': updateNumTextEl 'updateNumTextEl': updateNumTextEl,
};
if (state.config.onePerTarget === false) { 'removeDraggable': removeDraggable,
numTextEl.appendTo(state.baseImageEl.parent()); 'addDraggable': addDraggable
numTextEl.mousedown(function (event) { };
event.preventDefault();
});
numTextEl.mouseup(function () {
cycleDraggableOrder.call(targetObj)
});
}
state.targets.push(targetObj); if (state.config.onePerTarget === false) {
numTextEl.appendTo(state.baseImageEl.parent());
numTextEl.mousedown(function (event) {
event.preventDefault();
});
numTextEl.mouseup(function () {
cycleDraggableOrder.call(targetObj)
});
} }
function cycleDraggableOrder() { state.targets.push(targetObj);
var draggablesInMe, c1, c2, lowestZIndex, highestZIndex; }
if (this.draggable.length === 0) { function removeDraggable(draggable) {
return 0; this.draggableList.splice(draggable.onTargetIndex, 1);
}
draggablesInMe = []; draggable.onTarget = null;
draggable.onTargetIndex = null;
for (c1 = 0; c1 < this.draggable.length; c1 += 1) { this.updateNumTextEl();
for (c2 = 0; c2 < state.draggables.length; c2 += 1) { }
if (this.draggable[c1] === state.draggables[c2].id) {
draggablesInMe.push(state.draggables[c2]);
}
}
}
highestZIndex = -10000; function addDraggable(draggable) {
lowestZIndex = 10000; draggable.onTarget = this;
draggable.onTargetIndex = this.draggableList.push(draggable) - 1;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) { this.updateNumTextEl();
if (draggablesInMe[c1].zIndex < lowestZIndex) { }
lowestZIndex = draggablesInMe[c1].zIndex;
}
if (draggablesInMe[c1].zIndex > highestZIndex) { /*
highestZIndex = draggablesInMe[c1].zIndex; * function cycleDraggableOrder
} *
* Parameters:
* none - This function does not expect any parameters.
*
* Returns:
* undefined - The return value of this function is not used.
*
* Description:
* Go through all draggables that are on the current target, and decrease their
* z-index by 1, making sure that the bottom-most draggable ends up on the top.
*/
function cycleDraggableOrder() {
var c1, lowestZIndex, highestZIndex;
if (this.draggableList.length === 0) {
return;
}
highestZIndex = -10000;
lowestZIndex = 10000;
for (c1 = 0; c1 < this.draggableList.length; c1 += 1) {
if (this.draggableList[c1].zIndex < lowestZIndex) {
lowestZIndex = this.draggableList[c1].zIndex;
} }
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) { if (this.draggableList[c1].zIndex > highestZIndex) {
if (draggablesInMe[c1].zIndex === lowestZIndex) { highestZIndex = this.draggableList[c1].zIndex;
draggablesInMe[c1].zIndex = highestZIndex;
draggablesInMe[c1].oldZIndex = highestZIndex;
} else {
draggablesInMe[c1].zIndex -= 1;
draggablesInMe[c1].oldZIndex -= 1;
}
draggablesInMe[c1].iconEl.css('z-index', draggablesInMe[c1].zIndex);
if (draggablesInMe[c1].labelEl !== null) {
draggablesInMe[c1].labelEl.css('z-index', draggablesInMe[c1].zIndex);
}
} }
} }
} // function Targets(state) {
for (c1 = 0; c1 < this.draggableList.length; c1 += 1) {
if (this.draggableList[c1].zIndex === lowestZIndex) {
this.draggableList[c1].zIndex = highestZIndex;
} else {
this.draggableList[c1].zIndex -= 1;
}
this.draggableList[c1].iconEl.css('z-index', this.draggableList[c1].zIndex);
if (this.draggableList[c1].labelEl !== null) {
this.draggableList[c1].labelEl.css('z-index', this.draggableList[c1].zIndex);
}
}
}
function updateNumTextEl() { function updateNumTextEl() {
this.numTextEl.html(this.draggable.length); if (this.numTextEl !== null) {
this.numTextEl.html(this.draggableList.length);
}
} }
}); });
......
common/static/js/capa/drag_and_drop/update_input.js
...@@ -13,8 +13,6 @@ define(['logme'], function (logme) { ...@@ -13,8 +13,6 @@ define(['logme'], function (logme) {
function update(state) { function update(state) {
var draggables, tempObj; var draggables, tempObj;
logme('state.problemId = ' + state.problemId);
draggables = []; draggables = [];
if (state.config.individualTargets === false) { if (state.config.individualTargets === false) {
...@@ -37,9 +35,9 @@ define(['logme'], function (logme) { ...@@ -37,9 +35,9 @@ define(['logme'], function (logme) {
(function (c1) { (function (c1) {
while (c1 < state.targets.length) { while (c1 < state.targets.length) {
(function (c2) { (function (c2) {
while (c2 < state.targets[c1].draggable.length) { while (c2 < state.targets[c1].draggableList.length) {
tempObj = {}; tempObj = {};
tempObj[state.targets[c1].draggable[c2]] = state.targets[c1].id; tempObj[state.targets[c1].draggableList[c2].id] = state.targets[c1].id;
draggables.push(tempObj); draggables.push(tempObj);
tempObj = null; tempObj = null;
......
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