diff --git a/common/static/js/capa/drag_and_drop.js b/common/static/js/capa/drag_and_drop.js
index ce6f4c4559..2a9c2e4011 100644
--- a/common/static/js/capa/drag_and_drop.js
+++ b/common/static/js/capa/drag_and_drop.js
@@ -5,7 +5,7 @@
(function (requirejs, require, define) {
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
diff --git a/common/static/js/capa/drag_and_drop/base_image.js b/common/static/js/capa/drag_and_drop/base_image.js
index cd74267690..d818804be2 100644
--- a/common/static/js/capa/drag_and_drop/base_image.js
+++ b/common/static/js/capa/drag_and_drop/base_image.js
@@ -24,10 +24,7 @@ define(['logme'], function (logme) {
state.baseImageEl = $('![]()
');
- state.baseImageEl.attr(
- 'src',
- state.config.baseImage
- );
+ state.baseImageEl.attr('src', state.config.baseImage);
state.baseImageEl.load(function () {
baseImageElContainer.css('width', this.width);
baseImageElContainer.css('height', this.height);
@@ -42,9 +39,7 @@ define(['logme'], function (logme) {
state.baseImageLoaded = true;
});
state.baseImageEl.error(function () {
- logme(
- 'ERROR: Image "' + state.config.baseImage + '" was not found!'
- );
+ logme('ERROR: Image "' + state.config.baseImage + '" was not found!');
baseImageElContainer.html(
'' +
'ERROR: Image "' + state.config.baseImage + '" was not found!' +
diff --git a/common/static/js/capa/drag_and_drop/config_parser.js b/common/static/js/capa/drag_and_drop/config_parser.js
index 536430101d..e6c1e4d3c1 100644
--- a/common/static/js/capa/drag_and_drop/config_parser.js
+++ b/common/static/js/capa/drag_and_drop/config_parser.js
@@ -7,17 +7,15 @@
define(['logme'], function (logme) {
return configParser;
- function configParser(config, state) {
+ function configParser(state, config) {
state.config = {
'draggables': [],
'baseImage': '',
'targets': [],
- 'onePerTarget': null,
+ 'onePerTarget': null, // Specified by user. No default.
'targetOutline': true,
'labelBgColor': '#d6d6d6',
-
- 'individualTargets': null,
-
+ 'individualTargets': null, // Depends on 'targets'.
'errors': 0 // Number of errors found while parsing config.
};
@@ -156,19 +154,13 @@ define(['logme'], function (logme) {
}
function processDraggable(state, obj) {
- if (!attrIsString(obj, 'id')) {
- return false;
- }
+ if (
+ (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;
}
@@ -178,21 +170,15 @@ define(['logme'], function (logme) {
}
function processTarget(state, obj) {
- if (!attrIsString(obj, 'id')) {
- return false;
- }
+ if (
+ (attrIsString(obj, 'id') === false) ||
- if (!attrIsInteger(obj, 'w')) {
- return false;
- }
- if (!attrIsInteger(obj, 'h')) {
- return false;
- }
+ (attrIsInteger(obj, 'w') === false) ||
+ (attrIsInteger(obj, 'h') === false) ||
- if (!attrIsInteger(obj, 'x')) {
- return false;
- }
- if (!attrIsInteger(obj, 'y')) {
+ (attrIsInteger(obj, 'x') === false) ||
+ (attrIsInteger(obj, 'y') === false)
+ ) {
return false;
}
diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index add445ebb0..1946ed8033 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/common/static/js/capa/drag_and_drop/draggables.js
@@ -10,13 +10,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
};
function init(state) {
- state.draggables = [];
- state.numDraggablesInSlider = 0;
- state.currentMovingDraggable = null;
-
(function (c1) {
while (c1 < state.config.draggables.length) {
- processDraggable(state, state.config.draggables[c1], c1 + 1);
+ processDraggable(state, state.config.draggables[c1]);
c1 += 1
}
}(0));
@@ -121,6 +117,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.x = newPosition.x;
this.y = newPosition.y;
+ this.zIndex = 1000;
+ this.correctZIndexes();
+
this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity();
}
@@ -180,35 +179,49 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.labelEl.appendTo(this.state.baseImageEl.parent());
}
- this.onTarget = target;
- target.draggable.push(this.id);
+ target.addDraggable(this);
- if (target.numTextEl !== null) {
- target.updateNumTextEl();
- }
+ this.zIndex = 1000;
+ this.correctZIndexes();
this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity();
}
- function processDraggable(state, obj, objIndex) {
+ function processDraggable(state, obj) {
var draggableObj;
draggableObj = {
'id': obj.id,
'isReusable': obj.can_reuse,
+ 'isOriginal': true,
'x': -1,
'y': -1,
- 'zIndex': objIndex,
- 'oldZIndex': objIndex,
+ 'zIndex': 1,
+
+ 'containerEl': null,
+
+ 'iconEl': null,
+ 'iconElBGColor': null,
+ 'iconElPadding': null,
+ 'iconElBorder': null,
+ 'iconElLeftOffset': null,
+ 'iconWidth': null,
+ 'iconHeight': null,
+ 'iconWidthSmall': null,
+ 'iconHeightSmall': null,
+
'labelEl': null,
+ 'labelWidth': null,
+
'hasLoaded': false,
'inContainer': true,
'mousePressed': false,
'onTarget': null,
+ 'onTargetIndex': null,
'state': state,
@@ -216,7 +229,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'mouseUp': mouseUp,
'mouseMove': mouseMove,
'checkLandingElement': checkLandingElement,
- 'removeObjIdFromTarget': removeObjIdFromTarget,
'checkIfOnTarget': checkIfOnTarget,
'snapToTarget': snapToTarget,
'correctZIndexes': correctZIndexes,
@@ -234,7 +246,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'display: inline; ' +
'float: left; ' +
'overflow: hidden; ' +
- 'z-index: ' + objIndex + '; ' +
'border-left: 1px solid #CCC; ' +
'border-right: 1px solid #CCC; ' +
'text-align: center; ' +
@@ -252,49 +263,28 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconElLeftOffset = 0;
draggableObj.iconEl = $('![]()
');
- draggableObj.iconEl.attr(
- 'src',
- obj.icon
- );
+ draggableObj.iconEl.attr('src', obj.icon);
draggableObj.iconEl.load(function () {
draggableObj.iconWidth = this.width;
draggableObj.iconHeight = this.height;
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(
- 'left',
- 50 - draggableObj.iconWidthSmall * 0.5
- );
+ draggableObj.iconEl.css('width', draggableObj.iconWidthSmall);
+ draggableObj.iconEl.css('height', draggableObj.iconHeightSmall);
+ 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);
@@ -306,27 +296,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
- 'z-index: ' + objIndex + '; ' +
'" ' +
'>' +
obj.label +
''
);
- 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(function (event) {
draggableObj.mouseDown.call(draggableObj, event);
@@ -358,7 +337,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
- 'z-index: ' + objIndex + '; ' +
'" ' +
'>' +
obj.label +
@@ -372,14 +350,8 @@ 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);
draggableObj.hasLoaded = true;
} else {
@@ -421,6 +393,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// potentially cause the highlghting of the dragged element.
event.preventDefault();
+ if ((this.isReusable === true) && (this.isOriginal === true)) {
+
+ return;
+ }
+
// If this draggable is just being dragged out of the
// container, we must perform some additional tasks.
if (this.inContainer === true) {
@@ -500,7 +477,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.state.numDraggablesInSlider -= 1;
}
- this.oldZIndex = this.zIndex;
this.zIndex = 1000;
this.iconEl.css('z-index', '1000');
if (this.labelEl !== null) {
@@ -532,32 +508,21 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.iconEl.css(
'left',
- event.pageX -
- this.state.baseImageEl.offset().left -
- this.iconWidth * 0.5
- - this.iconElLeftOffset
+ event.pageX - this.state.baseImageEl.offset().left - this.iconWidth * 0.5 - this.iconElLeftOffset
);
this.iconEl.css(
'top',
- event.pageY -
- this.state.baseImageEl.offset().top -
- this.iconHeight * 0.5
+ event.pageY - this.state.baseImageEl.offset().top - this.iconHeight * 0.5
);
if (this.labelEl !== null) {
this.labelEl.css(
'left',
- event.pageX -
- this.state.baseImageEl.offset().left -
- this.labelWidth * 0.5
- - 9 // Acoount for padding, border.
+ event.pageX - this.state.baseImageEl.offset().left - this.labelWidth * 0.5 - 9 // Acoount for padding, border.
);
this.labelEl.css(
'top',
- event.pageY -
- this.state.baseImageEl.offset().top +
- this.iconHeight * 0.5 +
- 5
+ event.pageY - this.state.baseImageEl.offset().top + this.iconHeight * 0.5 + 5
);
}
}
@@ -578,23 +543,20 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if (this.checkIfOnTarget(positionIE) === true) {
this.correctZIndexes();
} else {
+ if (this.onTarget !== null) {
+ this.onTarget.removeDraggable(this);
+ }
+
this.moveBackToSlider();
- this.removeObjIdFromTarget();
this.state.numDraggablesInSlider += 1;
}
} else {
if (
(positionIE.left < 0) ||
- (
- positionIE.left + this.iconWidth >
- this.state.baseImageEl.width()
- ) ||
+ (positionIE.left + this.iconWidth > this.state.baseImageEl.width()) ||
(positionIE.top < 0) ||
- (
- positionIE.top + this.iconHeight >
- this.state.baseImageEl.height()
- )
+ (positionIE.top + this.iconHeight > this.state.baseImageEl.height())
) {
this.moveBackToSlider();
@@ -605,10 +567,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else {
this.correctZIndexes();
- this.x =
- positionIE.left + this.iconWidth * 0.5;
- this.y =
- positionIE.top + this.iconHeight * 0.5;
+ this.x = positionIE.left + this.iconWidth * 0.5;
+ this.y = positionIE.top + this.iconHeight * 0.5;
}
}
@@ -616,26 +576,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
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
// target. We do this by iterating over all of the targets, and
@@ -647,9 +587,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// this.iconEl.position()
//
function checkIfOnTarget(positionIE) {
- var c1, target, targetFound;
-
- targetFound = false;
+ var c1, target;
for (c1 = 0; c1 < this.state.targets.length; c1 += 1) {
target = this.state.targets[c1];
@@ -660,75 +598,52 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// against), then go to next target.
if (
(this.state.config.onePerTarget === true) &&
- (target.draggable.length === 1) &&
- (target.draggable[0] !== this.id)
+ (target.draggableList.length === 1) &&
+ (target.draggableList[0].id !== this.id)
) {
continue;
}
// Check if the draggable's center coordinate is within
// the target's dimensions. If not, go to next target.
- if (
- positionIE.top + this.iconHeight * 0.5 <
- target.offset.top
- ) {
+ if (positionIE.top + this.iconHeight * 0.5 < target.offset.top) {
continue;
}
- if (
- positionIE.top + this.iconHeight * 0.5 >
- target.offset.top + target.h
- ) {
+ if (positionIE.top + this.iconHeight * 0.5 > target.offset.top + target.h) {
continue;
}
- if (
- positionIE.left + this.iconWidth * 0.5 <
- target.offset.left
- ) {
+ if (positionIE.left + this.iconWidth * 0.5 < target.offset.left) {
continue;
}
- if (
- positionIE.left + this.iconWidth * 0.5 >
- target.offset.left + target.w
- ) {
+ if (positionIE.left + this.iconWidth * 0.5 > target.offset.left + target.w) {
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
- // 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
// new target's draggables list.
- if (
- (this.onTarget !== null) &&
- (this.onTarget.id !== target.id)
- ) {
- this.removeObjIdFromTarget();
- this.onTarget = target;
- target.draggable.push(this.id);
+ if ((this.onTarget !== null) && (this.onTarget.id !== target.id)) {
+ this.onTarget.removeDraggable(this);
+ target.addDraggable(this);
}
// If the draggable was moved from the slider to a
// target, remember the target, and add ID to the
// target's draggables list.
else if (this.onTarget === null) {
- this.onTarget = target;
- target.draggable.push(this.id);
- }
-
- if (target.numTextEl !== null) {
- target.updateNumTextEl();
+ target.addDraggable(this);
}
// Reposition the draggable so that it's center
// coincides with the center of the target.
this.snapToTarget(target);
- break;
+ // Target was found.
+ return true;
}
- return targetFound;
+ // Target was not found.
+ return false;
}
function snapToTarget(target) {
@@ -771,101 +686,45 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// ordering of the visibility (z-index) of the other draggables
// will not change.
function correctZIndexes() {
- var draggablesInMe, c1, c2, highestZIndex;
+ var c1, highestZIndex;
+
+ highestZIndex = -10000;
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;
-
- for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
+ if (this.onTarget.draggableList.length > 0) {
+ for (c1 = 0; c1 < this.onTarget.draggableList.length; c1 += 1) {
if (
- (draggablesInMe[c1].zIndex > highestZIndex) &&
- (draggablesInMe[c1].zIndex !== 1000)
+ (this.onTarget.draggableList[c1].zIndex > highestZIndex) &&
+ (this.onTarget.draggableList[c1].zIndex !== 1000)
) {
- highestZIndex = draggablesInMe[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
- );
- }
+ highestZIndex = this.onTarget.draggableList[c1].zIndex;
}
}
} else {
- highestZIndex = this.onTarget.draggable.length;
- }
-
- this.zIndex = highestZIndex;
- this.oldZIndex = highestZIndex;
-
- this.iconEl.css(
- 'z-index',
- this.zIndex
- );
- if (this.labelEl !== null) {
- this.labelEl.css(
- 'z-index',
- this.zIndex
- );
+ highestZIndex = 0;
}
} else {
for (c1 = 0; c1 < this.state.draggables.length; c1++) {
- if (
- this.oldZIndex <
- this.state.draggables[c1].zIndex
- ) {
- this.state.draggables[c1].zIndex -= 1;
- this.state.draggables[c1].oldZIndex = 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
- );
+ if (this.inContainer === false) {
+ if (
+ (this.state.draggables[c1].zIndex > highestZIndex) &&
+ (this.state.draggables[c1].zIndex !== 1000)
+ ) {
+ highestZIndex = this.state.draggables[c1].zIndex;
}
}
}
+ }
- this.zIndex = c1;
- this.oldZIndex = c1;
- this.iconEl.css('z-index', c1);
+ if (highestZIndex === -10000) {
+ highestZIndex = 0;
+ }
- if (this.labelEl !== null) {
- this.labelEl.css('z-index', c1);
- }
+ this.zIndex = highestZIndex + 1;
+
+ this.iconEl.css('z-index', highestZIndex);
+ if (this.labelEl !== null) {
+ this.labelEl.css('z-index', highestZIndex);
}
}
diff --git a/common/static/js/capa/drag_and_drop/main.js b/common/static/js/capa/drag_and_drop/main.js
index 7eb4f5101e..e7b02dec47 100644
--- a/common/static/js/capa/drag_and_drop/main.js
+++ b/common/static/js/capa/drag_and_drop/main.js
@@ -5,10 +5,8 @@
(function (requirejs, require, define) {
define(
- ['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller',
- 'draggables', 'targets', 'update_input'],
- function (logme, State, configParser, Container, BaseImage, Scroller,
- Draggables, Targets, updateInput) {
+ ['logme', 'state', 'config_parser', 'container', 'base_image', 'scroller', 'draggables', 'targets', 'update_input'],
+ function (logme, State, configParser, Container, BaseImage, Scroller, Draggables, Targets, updateInput) {
return Main;
function Main() {
@@ -45,7 +43,7 @@ define(
state = State(problemId);
- if (configParser(config, state) !== true) {
+ if (configParser(state, config) !== true) {
logme('ERROR: Could not make sense of the JSON configuration options.');
return;
@@ -70,11 +68,11 @@ define(
if (updateInput.check(state) === false) {
updateInput.update(state);
}
-
- setTimeout(function () {
- logme('state.draggables', state.draggables);
- }, 500);
}());
+
+ setTimeout(function () {
+ logme('After 1000 ms:', state);
+ }, 1000);
}
});
diff --git a/common/static/js/capa/drag_and_drop/state.js b/common/static/js/capa/drag_and_drop/state.js
index 99dd7dc8e4..d99b90872f 100644
--- a/common/static/js/capa/drag_and_drop/state.js
+++ b/common/static/js/capa/drag_and_drop/state.js
@@ -9,11 +9,24 @@ define([], function () {
function State(problemId) {
return {
- 'problemId': problemId,
+ 'config': null,
+ 'baseImageEl': null,
'baseImageLoaded': false,
- 'numDraggablesInSlider': 0
+ 'containerEl': null,
+
+ 'sliderEl': null,
+
+ 'problemId': problemId,
+
+ 'draggables': [],
+ 'numDraggablesInSlider': 0,
+ 'currentMovingDraggable': null,
+
+ 'targets': [],
+
+ 'updateArrowOpacity': null
};
}
});
diff --git a/common/static/js/capa/drag_and_drop/targets.js b/common/static/js/capa/drag_and_drop/targets.js
index dbec5e199d..40828ffba3 100644
--- a/common/static/js/capa/drag_and_drop/targets.js
+++ b/common/static/js/capa/drag_and_drop/targets.js
@@ -8,146 +8,166 @@ define(['logme'], function (logme) {
return Targets;
function Targets(state) {
- var c1;
+ (function (c1) {
+ while (c1 < state.config.targets.length) {
+ processTarget(state, state.config.targets[c1]);
- state.targets = [];
+ c1 += 1;
+ }
+ }(0));
+ } // function Targets(state) {
- for (c1 = 0; c1 < state.config.targets.length; c1++) {
- processTarget(state.config.targets[c1]);
+ function processTarget(state, obj) {
+ var targetEl, borderCss, numTextEl, targetObj;
+
+ borderCss = '';
+ if (state.config.targetOutline === true) {
+ borderCss = 'border: 1px dashed gray; ';
}
- return;
+ targetEl = $(
+ ''
+ );
+ targetEl.appendTo(state.baseImageEl.parent());
+ targetEl.mousedown(function (event) {
+ event.preventDefault();
+ });
- function processTarget(obj) {
- var targetEl, borderCss, numTextEl, targetObj;
-
- borderCss = '';
- if (state.config.targetOutline === true) {
- borderCss = 'border: 1px dashed gray; ';
- }
-
- targetEl = $(
+ if (state.config.onePerTarget === false) {
+ numTextEl = $(
''
+ '>0'
);
- targetEl.appendTo(state.baseImageEl.parent());
- targetEl.mousedown(function (event) {
+ } else {
+ numTextEl = null;
+ }
+
+ targetObj = {
+ 'id': obj.id,
+
+ 'w': obj.w,
+ 'h': obj.h,
+
+ 'el': targetEl,
+ 'offset': targetEl.position(),
+
+ 'draggableList': [],
+
+ 'targetEl': targetEl,
+
+ 'numTextEl': numTextEl,
+ 'updateNumTextEl': updateNumTextEl,
+
+ 'removeDraggable': removeDraggable,
+ 'addDraggable': addDraggable
+ };
+
+ if (state.config.onePerTarget === false) {
+ numTextEl.appendTo(state.baseImageEl.parent());
+ numTextEl.mousedown(function (event) {
event.preventDefault();
});
+ numTextEl.mouseup(function () {
+ cycleDraggableOrder.call(targetObj)
+ });
+ }
- if (state.config.onePerTarget === false) {
- numTextEl = $(
- '0
'
- );
+ state.targets.push(targetObj);
+ }
+
+ function removeDraggable(draggable) {
+ this.draggableList.splice(draggable.onTargetIndex, 1);
+
+ draggable.onTarget = null;
+ draggable.onTargetIndex = null;
+
+ this.updateNumTextEl();
+ }
+
+ function addDraggable(draggable) {
+ draggable.onTarget = this;
+ draggable.onTargetIndex = this.draggableList.push(draggable) - 1;
+
+ this.updateNumTextEl();
+ }
+
+ /*
+ * 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;
+ }
+
+ if (this.draggableList[c1].zIndex > highestZIndex) {
+ highestZIndex = this.draggableList[c1].zIndex;
+ }
+ }
+
+ for (c1 = 0; c1 < this.draggableList.length; c1 += 1) {
+ if (this.draggableList[c1].zIndex === lowestZIndex) {
+ this.draggableList[c1].zIndex = highestZIndex;
} else {
- numTextEl = null;
+ this.draggableList[c1].zIndex -= 1;
}
- targetObj = {
- 'id': obj.id,
-
- 'w': obj.w,
- 'h': obj.h,
-
- 'el': targetEl,
- 'offset': targetEl.position(),
-
- 'draggable': [],
-
- 'targetEl': targetEl,
-
- 'numTextEl': numTextEl,
- 'updateNumTextEl': updateNumTextEl
- };
-
- if (state.config.onePerTarget === false) {
- numTextEl.appendTo(state.baseImageEl.parent());
- numTextEl.mousedown(function (event) {
- event.preventDefault();
- });
- numTextEl.mouseup(function () {
- cycleDraggableOrder.call(targetObj)
- });
- }
-
- state.targets.push(targetObj);
- }
-
- function cycleDraggableOrder() {
- var draggablesInMe, c1, c2, lowestZIndex, highestZIndex;
-
- if (this.draggable.length === 0) {
- return 0;
- }
-
- draggablesInMe = [];
-
- for (c1 = 0; c1 < this.draggable.length; c1 += 1) {
- for (c2 = 0; c2 < state.draggables.length; c2 += 1) {
- if (this.draggable[c1] === state.draggables[c2].id) {
- draggablesInMe.push(state.draggables[c2]);
- }
- }
- }
-
- highestZIndex = -10000;
- lowestZIndex = 10000;
-
- for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
- if (draggablesInMe[c1].zIndex < lowestZIndex) {
- lowestZIndex = draggablesInMe[c1].zIndex;
- }
-
- if (draggablesInMe[c1].zIndex > highestZIndex) {
- highestZIndex = draggablesInMe[c1].zIndex;
- }
- }
-
- for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
- if (draggablesInMe[c1].zIndex === lowestZIndex) {
- 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);
- }
+ 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 Targets(state) {
+ }
function updateNumTextEl() {
- this.numTextEl.html(this.draggable.length);
+ if (this.numTextEl !== null) {
+ this.numTextEl.html(this.draggableList.length);
+ }
}
});
diff --git a/common/static/js/capa/drag_and_drop/update_input.js b/common/static/js/capa/drag_and_drop/update_input.js
index 6c2b72f6c2..e9c6222058 100644
--- a/common/static/js/capa/drag_and_drop/update_input.js
+++ b/common/static/js/capa/drag_and_drop/update_input.js
@@ -13,8 +13,6 @@ define(['logme'], function (logme) {
function update(state) {
var draggables, tempObj;
- logme('state.problemId = ' + state.problemId);
-
draggables = [];
if (state.config.individualTargets === false) {
@@ -37,9 +35,9 @@ define(['logme'], function (logme) {
(function (c1) {
while (c1 < state.targets.length) {
(function (c2) {
- while (c2 < state.targets[c1].draggable.length) {
+ while (c2 < state.targets[c1].draggableList.length) {
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);
tempObj = null;