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 170 additions and 160 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/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