Skip to content

E
edx-platform
Commit 22014f7f by Valera Rozuvan Committed by Alexander Kryklia
Options

New feature: Clicking on number for multiple icons on target will cycle all… 

New feature: Clicking on number for multiple icons on target will cycle all icons on target. Fixed bug with z-order ordering.
parent f1577025
Showing with 232 additions and 18 deletions
common/static/js/capa/drag_and_drop/draggables.js
......@@ -62,6 +62,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj = {
'zIndex': objIndex,
'oldZIndex': objIndex,
'labelEl': null,
'hasLoaded': false
};
......@@ -146,6 +147,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'z-index: ' + objIndex + '; ' +
'" ' +
'>' +
obj.label +
......@@ -191,6 +193,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'z-index: ' + objIndex + '; ' +
'" ' +
'>' +
obj.label +
......@@ -341,6 +344,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.oldZIndex = draggableObj.zIndex;
draggableObj.zIndex = 1000;
draggableObj.iconEl.css('z-index', '1000');
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.css('z-index', '1000');
}
mousePressed = true;
state.currentMovingDraggable = draggableObj;
......@@ -468,6 +474,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
}
}
if (onTarget.numTextEl !== null) {
onTarget.updateNumTextEl();
}
onTarget = null;
}
}
......@@ -551,6 +561,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
target.draggable.push(draggableObj.id);
}
if (target.numTextEl !== null) {
target.updateNumTextEl();
}
// Reposition the draggable so that it's center
// coincides with the center of the target.
snapToTarget(target);
......@@ -605,23 +619,117 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// ordering of the visibility (z-index) of the other draggables
// will not change.
function correctZIndexes() {
var c1;
var draggablesInMe, c1, c2, highestZIndex;
for (c1 = 0; c1 < state.draggables.length; c1++) {
if (
draggableObj.oldZIndex <
state.draggables[c1].zIndex
) {
state.draggables[c1].zIndex -= 1;
state.draggables[c1].iconEl.css(
if (state.individualTargets === true) {
logme('In correctZIndexes.');
if (onTarget.draggable.length > 0) {
logme('onTarget.draggable.length > 0');
draggablesInMe = [];
for (c1 = 0; c1 < onTarget.draggable.length; c1 += 1) {
for (c2 = 0; c2 < state.draggables.length; c2 += 1) {
if (
onTarget.draggable[c1] ===
state.draggables[c2].id
) {
draggablesInMe.push(state.draggables[c2]);
}
}
}
highestZIndex = -10000;
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
if (
(draggablesInMe[c1].zIndex > highestZIndex) &&
(draggablesInMe[c1].zIndex !== 1000)
) {
highestZIndex = draggablesInMe[c1].zIndex;
}
}
if (highestZIndex === -10000) {
highestZIndex = onTarget.draggable.length;
} else if (highestZIndex < draggableObj.oldZIndex) {
highestZIndex = draggableObj.oldZIndex;
} else {
for (c1 = 0; c1 < draggablesInMe.length; c1 += 1) {
logme('draggablesInMe[' + c1 + '].id = ' + draggablesInMe[c1].id);
logme('draggablesInMe[' + c1 + '].zIndex = ' + draggablesInMe[c1].zIndex);
logme('draggablesInMe[' + c1 + '].oldZIndex = ' + draggablesInMe[c1].oldZIndex);
}
logme('----------------');
logme('highestZIndex = ' + highestZIndex);
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 {
logme('highestZIndex = onTarget.draggable.length');
highestZIndex = onTarget.draggable.length;
}
draggableObj.zIndex = highestZIndex;
draggableObj.oldZIndex = highestZIndex;
draggableObj.iconEl.css(
'z-index',
draggableObj.zIndex
);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.css(
'z-index',
state.draggables[c1].zIndex
draggableObj.zIndex
);
}
}
} else {
for (c1 = 0; c1 < state.draggables.length; c1++) {
if (
draggableObj.oldZIndex <
state.draggables[c1].zIndex
) {
state.draggables[c1].zIndex -= 1;
state.draggables[c1].oldZIndex = state.draggables[c1].zIndex;
state.draggables[c1].iconEl.css(
'z-index',
state.draggables[c1].zIndex
);
if (state.draggables[c1].labelEl !== null) {
state.draggables[c1].labelEl.css(
'z-index',
state.draggables[c1].zIndex
);
}
}
}
draggableObj.zIndex = c1;
draggableObj.oldZIndex = c1;
draggableObj.iconEl.css('z-index', c1);
draggableObj.zIndex = c1;
draggableObj.iconEl.css('z-index', c1);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.css('z-index', c1);
}
}
}
// If a draggable was released in a wrong positione, we will
......@@ -630,11 +738,14 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function moveBackToSlider() {
draggableObj.containerEl.show();
draggableObj.zIndex = draggableObj.oldZIndex;
draggableObj.iconEl.detach();
draggableObj.iconEl.css('border', 'none');
draggableObj.iconEl.css('background-color', 'transparent');
draggableObj.iconEl.css('padding-left', 0);
draggableObj.iconEl.css('padding-right', 0);
draggableObj.iconEl.css('z-index', draggableObj.zIndex);
draggableObj.iconEl.css(
'width',
draggableObj.iconWidthSmall
......@@ -664,6 +775,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.labelEl.css('background-color', 'transparent');
draggableObj.labelEl.css('padding-left', 0);
draggableObj.labelEl.css('padding-right', 0);
draggableObj.labelEl.css('z-index', draggableObj.zIndex);
draggableObj.labelEl.css(
'left',
50 - draggableObj.labelWidth * 0.5
......
common/static/js/capa/drag_and_drop/targets.js
......@@ -19,7 +19,7 @@ define(['logme'], function (logme) {
return;
function processTarget(obj) {
var targetEl, borderCss;
var targetEl, borderCss, numTextEl, targetObj;
borderCss = '';
if (state.config.targetOutline === true) {
......@@ -40,14 +40,36 @@ define(['logme'], function (logme) {
'data-target-id="' + obj.id + '" ' +
'></div>'
);
targetEl.appendTo(state.baseImageEl.parent());
targetEl.mousedown(function (event) {
event.preventDefault();
});
state.targets.push({
if (state.config.one_per_target === 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 = {
'id': obj.id,
'w': obj.w,
......@@ -56,9 +78,85 @@ define(['logme'], function (logme) {
'el': targetEl,
'offset': targetEl.position(),
'draggable': []
});
'draggable': [],
'targetEl': targetEl,
'numTextEl': numTextEl,
'updateNumTextEl': updateNumTextEl
};
if (state.config.one_per_target === 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) {
logme(
'draggablesInMe[' + c1 + '].id = ' + draggablesInMe[c1].id,
'draggablesInMe[' + c1 + '].zIndex = ' + draggablesInMe[c1].zIndex,
'draggablesInMe[' + c1 + '].oldZIndex = ' + draggablesInMe[c1].oldZIndex
);
}
logme('------------------');
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);
}
}
}
} // function Targets(state) {
function updateNumTextEl() {
this.numTextEl.html(this.draggable.length);
}
});
......
common/static/js/capa/drag_and_drop/update_input.js
......@@ -199,6 +199,10 @@ define(['logme'], function (logme) {
draggable.setOnTarget(target);
target.draggable.push(draggableId);
if (target.numTextEl !== null) {
target.updateNumTextEl();
}
state.numDraggablesInSlider -= 1;
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