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 220 additions and 6 deletions
common/static/js/capa/drag_and_drop/draggables.js
...@@ -62,6 +62,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -62,6 +62,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj = { draggableObj = {
'zIndex': objIndex, 'zIndex': objIndex,
'oldZIndex': objIndex,
'labelEl': null, 'labelEl': null,
'hasLoaded': false 'hasLoaded': false
}; };
...@@ -146,6 +147,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -146,6 +147,7 @@ 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 +
...@@ -191,6 +193,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -191,6 +193,7 @@ 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 +
...@@ -341,6 +344,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -341,6 +344,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.oldZIndex = draggableObj.zIndex; draggableObj.oldZIndex = draggableObj.zIndex;
draggableObj.zIndex = 1000; draggableObj.zIndex = 1000;
draggableObj.iconEl.css('z-index', '1000'); draggableObj.iconEl.css('z-index', '1000');
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.css('z-index', '1000');
}
mousePressed = true; mousePressed = true;
state.currentMovingDraggable = draggableObj; state.currentMovingDraggable = draggableObj;
...@@ -468,6 +474,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -468,6 +474,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
} }
if (onTarget.numTextEl !== null) {
onTarget.updateNumTextEl();
}
onTarget = null; onTarget = null;
} }
} }
...@@ -551,6 +561,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -551,6 +561,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
target.draggable.push(draggableObj.id); target.draggable.push(draggableObj.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.
snapToTarget(target); snapToTarget(target);
...@@ -605,23 +619,117 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -605,23 +619,117 @@ 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 c1; var draggablesInMe, c1, c2, highestZIndex;
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',
draggableObj.zIndex
);
}
} else {
for (c1 = 0; c1 < state.draggables.length; c1++) { for (c1 = 0; c1 < state.draggables.length; c1++) {
if ( if (
draggableObj.oldZIndex < draggableObj.oldZIndex <
state.draggables[c1].zIndex state.draggables[c1].zIndex
) { ) {
state.draggables[c1].zIndex -= 1; state.draggables[c1].zIndex -= 1;
state.draggables[c1].oldZIndex = state.draggables[c1].zIndex;
state.draggables[c1].iconEl.css( state.draggables[c1].iconEl.css(
'z-index', 'z-index',
state.draggables[c1].zIndex 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.zIndex = c1;
draggableObj.oldZIndex = c1;
draggableObj.iconEl.css('z-index', 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 // If a draggable was released in a wrong positione, we will
...@@ -630,11 +738,14 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -630,11 +738,14 @@ define(['logme', 'update_input'], function (logme, updateInput) {
function moveBackToSlider() { function moveBackToSlider() {
draggableObj.containerEl.show(); draggableObj.containerEl.show();
draggableObj.zIndex = draggableObj.oldZIndex;
draggableObj.iconEl.detach(); draggableObj.iconEl.detach();
draggableObj.iconEl.css('border', 'none'); draggableObj.iconEl.css('border', 'none');
draggableObj.iconEl.css('background-color', 'transparent'); draggableObj.iconEl.css('background-color', 'transparent');
draggableObj.iconEl.css('padding-left', 0); draggableObj.iconEl.css('padding-left', 0);
draggableObj.iconEl.css('padding-right', 0); draggableObj.iconEl.css('padding-right', 0);
draggableObj.iconEl.css('z-index', draggableObj.zIndex);
draggableObj.iconEl.css( draggableObj.iconEl.css(
'width', 'width',
draggableObj.iconWidthSmall draggableObj.iconWidthSmall
...@@ -664,6 +775,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -664,6 +775,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.labelEl.css('background-color', 'transparent'); draggableObj.labelEl.css('background-color', 'transparent');
draggableObj.labelEl.css('padding-left', 0); draggableObj.labelEl.css('padding-left', 0);
draggableObj.labelEl.css('padding-right', 0); draggableObj.labelEl.css('padding-right', 0);
draggableObj.labelEl.css('z-index', draggableObj.zIndex);
draggableObj.labelEl.css( draggableObj.labelEl.css(
'left', 'left',
50 - draggableObj.labelWidth * 0.5 50 - draggableObj.labelWidth * 0.5
......
common/static/js/capa/drag_and_drop/targets.js
...@@ -19,7 +19,7 @@ define(['logme'], function (logme) { ...@@ -19,7 +19,7 @@ define(['logme'], function (logme) {
return; return;
function processTarget(obj) { function processTarget(obj) {
var targetEl, borderCss; var targetEl, borderCss, numTextEl, targetObj;
borderCss = ''; borderCss = '';
if (state.config.targetOutline === true) { if (state.config.targetOutline === true) {
...@@ -40,14 +40,36 @@ define(['logme'], function (logme) { ...@@ -40,14 +40,36 @@ define(['logme'], function (logme) {
'data-target-id="' + obj.id + '" ' + 'data-target-id="' + obj.id + '" ' +
'></div>' '></div>'
); );
targetEl.appendTo(state.baseImageEl.parent()); targetEl.appendTo(state.baseImageEl.parent());
targetEl.mousedown(function (event) { targetEl.mousedown(function (event) {
event.preventDefault(); 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, 'id': obj.id,
'w': obj.w, 'w': obj.w,
...@@ -56,9 +78,85 @@ define(['logme'], function (logme) { ...@@ -56,9 +78,85 @@ define(['logme'], function (logme) {
'el': targetEl, 'el': targetEl,
'offset': targetEl.position(), '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) { ...@@ -199,6 +199,10 @@ define(['logme'], function (logme) {
draggable.setOnTarget(target); draggable.setOnTarget(target);
target.draggable.push(draggableId); target.draggable.push(draggableId);
if (target.numTextEl !== null) {
target.updateNumTextEl();
}
state.numDraggablesInSlider -= 1; state.numDraggablesInSlider -= 1;
state.updateArrowOpacity(); 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