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 @@
(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
......
common/static/js/capa/drag_and_drop/base_image.js
......@@ -24,10 +24,7 @@ define(['logme'], function (logme) {
state.baseImageEl = $('<img />');
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(
'<span style="color: red;">' +
'ERROR: Image "' + state.config.baseImage + '" was not found!' +
......
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, 'icon')) {
return false;
}
if (!attrIsString(obj, 'label')) {
return false;
}
if (
(attrIsString(obj, 'id') === false) ||
(attrIsString(obj, 'icon') === false) ||
(attrIsString(obj, 'label') === 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;
}
......
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);
}
});
......
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
};
}
});
......
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 = [];
for (c1 = 0; c1 < state.config.targets.length; c1++) {
processTarget(state.config.targets[c1]);
}
return;
c1 += 1;
}
}(0));
} // function Targets(state) {
function processTarget(obj) {
var targetEl, borderCss, numTextEl, targetObj;
function processTarget(state, obj) {
var targetEl, borderCss, numTextEl, targetObj;
borderCss = '';
if (state.config.targetOutline === true) {
borderCss = 'border: 1px dashed gray; ';
}
borderCss = '';
if (state.config.targetOutline === true) {
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 ' +
'style=" ' +
'display: block; ' +
'position: absolute; ' +
'width: ' + obj.w + 'px; ' +
'height: ' + obj.h + 'px; ' +
'width: 24px; ' +
'height: 24px; ' +
'top: ' + obj.y + 'px; ' +
'left: ' + obj.x + 'px; ' +
borderCss +
'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; ' +
'" ' +
'data-target-id="' + obj.id + '" ' +
'></div>'
'>0</div>'
);
targetEl.appendTo(state.baseImageEl.parent());
targetEl.mousedown(function (event) {
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;
}
} else {
numTextEl = null;
}
targetObj = {
'id': obj.id,
targetObj = {
'id': obj.id,
'w': obj.w,
'h': obj.h,
'w': obj.w,
'h': obj.h,
'el': targetEl,
'offset': targetEl.position(),
'el': targetEl,
'offset': targetEl.position(),
'draggable': [],
'draggableList': [],
'targetEl': targetEl,
'targetEl': targetEl,
'numTextEl': numTextEl,
'updateNumTextEl': updateNumTextEl
};
'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)
});
}
'removeDraggable': removeDraggable,
'addDraggable': addDraggable
};
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() {
var draggablesInMe, c1, c2, lowestZIndex, highestZIndex;
state.targets.push(targetObj);
}
if (this.draggable.length === 0) {
return 0;
}
function removeDraggable(draggable) {
this.draggableList.splice(draggable.onTargetIndex, 1);
draggablesInMe = [];
draggable.onTarget = null;
draggable.onTargetIndex = null;
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]);
}
}
}
this.updateNumTextEl();
}
highestZIndex = -10000;
lowestZIndex = 10000;
function addDraggable(draggable) {
draggable.onTarget = this;
draggable.onTargetIndex = this.draggableList.push(draggable) - 1;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
if (draggablesInMe[c1].zIndex < lowestZIndex) {
lowestZIndex = draggablesInMe[c1].zIndex;
}
this.updateNumTextEl();
}
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 (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);
}
if (this.draggableList[c1].zIndex > highestZIndex) {
highestZIndex = this.draggableList[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() {
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) {
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;
......
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