Skip to content

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

Implemented isReusable feature. Not fully tested.

parent 98977cab
Showing with 257 additions and 87 deletions
common/static/js/capa/drag_and_drop/draggables.js
...@@ -59,8 +59,156 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -59,8 +59,156 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
} }
function makeDraggableCopy() {
var draggableObj, obj;
draggableObj = {
'originalConfigObj': this.originalConfigObj,
'stateDraggablesIndex': /* this.stateDraggablesIndex */ null, // Will be set.
'id': this.id,
'isReusable': this.isReusable,
'isOriginal': false,
'x': this.x,
'y': this.y,
'zIndex': this.zIndex,
// Not needed, since a copy will never return to a container element.
'containerEl': null,
'iconEl': /* this.iconEl */ null, // Will be created.
'iconElBGColor': this.iconElBGColor,
'iconElPadding': this.iconElPadding,
'iconElBorder': this.iconElBorder,
'iconElLeftOffset': this.iconElLeftOffset,
'iconWidth': this.iconWidth,
'iconHeight': this.iconHeight,
'iconWidthSmall': this.iconWidthSmall,
'iconHeightSmall': this.iconHeightSmall,
'labelEl': /* this.labelEl */ null, // Will be created.
'labelWidth': this.labelWidth,
'hasLoaded': this.hasLoaded,
'inContainer': this.inContainer,
'mousePressed': this.mousePressed,
'onTarget': this.onTarget,
'onTargetIndex': this.onTargetIndex,
'state': this.state,
'mouseDown': this.mouseDown,
'mouseUp': this.mouseUp,
'mouseMove': this.mouseMove,
'checkLandingElement': this.checkLandingElement,
'checkIfOnTarget': this.checkIfOnTarget,
'snapToTarget': this.snapToTarget,
'correctZIndexes': this.correctZIndexes,
'moveBackToSlider': this.moveBackToSlider,
'moveDraggableToTarget': this.moveDraggableToTarget,
'moveDraggableToXY': this.moveDraggableToXY,
'makeDraggableCopy': this.makeDraggableCopy
};
obj = draggableObj.originalConfigObj;
if (obj.icon.length > 0) {
draggableObj.iconEl = $('<img />');
draggableObj.iconEl.attr('src', obj.icon);
draggableObj.iconEl.load(function () {
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);
if (obj.label.length > 0) {
draggableObj.iconEl.css('top', 5);
} else {
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
}
if (obj.label.length > 0) {
draggableObj.labelEl = $(
'<div ' +
'style=" ' +
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'" ' +
'>' +
obj.label +
'</div>'
);
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);
});
draggableObj.labelEl.mouseup(function (event) {
draggableObj.mouseUp.call(draggableObj, event);
});
draggableObj.labelEl.mousemove(function (event) {
draggableObj.mouseMove.call(draggableObj, event);
});
}
});
} else {
if (obj.label.length > 0) {
draggableObj.iconEl = $(
'<div ' +
'style=" ' +
'position: absolute; ' +
'color: black; ' +
'font-size: 0.95em; ' +
'" ' +
'>' +
obj.label +
'</div>'
);
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
}
}
// Attach events to "iconEl".
draggableObj.iconEl.mousedown(function (event) {
draggableObj.mouseDown.call(draggableObj, event);
});
draggableObj.iconEl.mouseup(function (event) {
draggableObj.mouseUp.call(draggableObj, event);
});
draggableObj.iconEl.mousemove(function (event) {
draggableObj.mouseMove.call(draggableObj, event);
});
// Attach events to "containerEl".
draggableObj.containerEl.mousedown(function (event) {
draggableObj.mouseDown.call(draggableObj, event);
});
draggableObj.containerEl.mouseup(function (event) {
draggableObj.mouseUp.call(draggableObj, event);
});
draggableObj.containerEl.mousemove(function (event) {
draggableObj.mouseMove.call(draggableObj, event);
});
draggableObj.stateDraggablesIndex = draggableObj.state.draggables.push(draggableObj);
logme('Returning from draggableCopy.');
return draggableObj;
}
function moveDraggableToXY(newPosition) { function moveDraggableToXY(newPosition) {
var self, offset; var self, offset, draggableCopy;
if (this.hasLoaded === false) { if (this.hasLoaded === false) {
self = this; self = this;
...@@ -72,15 +220,25 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -72,15 +220,25 @@ define(['logme', 'update_input'], function (logme, updateInput) {
return; return;
} }
logme('moveDraggableToXY: isReusable = ' + this.isReusable);
if ((this.isReusable === true) && (this.isOriginal === true)) {
draggableCopy = this.makeDraggableCopy();
draggableCopy.moveDraggableToXY(newPosition);
return;
}
offset = 0; offset = 0;
if (this.state.config.targetOutline === true) { if (this.state.config.targetOutline === true) {
offset = 1; offset = 1;
} }
this.inContainer = false; this.inContainer = false;
this.containerEl.hide();
this.iconEl.detach(); if (this.isOriginal === true) {
this.containerEl.hide();
this.iconEl.detach();
}
this.iconEl.css('background-color', this.iconElBGColor); this.iconEl.css('background-color', this.iconElBGColor);
this.iconEl.css('padding-left', this.iconElPadding); this.iconEl.css('padding-left', this.iconElPadding);
this.iconEl.css('padding-right', this.iconElPadding); this.iconEl.css('padding-right', this.iconElPadding);
...@@ -98,7 +256,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -98,7 +256,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.iconEl.appendTo(this.state.baseImageEl.parent()); this.iconEl.appendTo(this.state.baseImageEl.parent());
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.detach(); if (this.isOriginal === true) {
this.labelEl.detach();
}
this.labelEl.css('background-color', this.state.config.labelBgColor); this.labelEl.css('background-color', this.state.config.labelBgColor);
this.labelEl.css('padding-left', 8); this.labelEl.css('padding-left', 8);
this.labelEl.css('padding-right', 8); this.labelEl.css('padding-right', 8);
...@@ -120,12 +280,14 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -120,12 +280,14 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.zIndex = 1000; this.zIndex = 1000;
this.correctZIndexes(); this.correctZIndexes();
this.state.numDraggablesInSlider -= 1; if (this.isOriginal === true) {
this.state.updateArrowOpacity(); this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity();
}
} }
function moveDraggableToTarget(target) { function moveDraggableToTarget(target) {
var self, offset; var self, offset, draggableCopy;
if (this.hasLoaded === false) { if (this.hasLoaded === false) {
self = this; self = this;
...@@ -137,15 +299,25 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -137,15 +299,25 @@ define(['logme', 'update_input'], function (logme, updateInput) {
return; return;
} }
logme('moveDraggableToTarget: isReusable = ' + this.isReusable);
if ((this.isReusable === true) && (this.isOriginal === true)) {
draggableCopy = this.makeDraggableCopy();
draggableCopy.moveDraggableToTarget(target);
return;
}
offset = 0; offset = 0;
if (this.state.config.targetOutline === true) { if (this.state.config.targetOutline === true) {
offset = 1; offset = 1;
} }
this.inContainer = false; this.inContainer = false;
this.containerEl.hide();
this.iconEl.detach(); if (this.isOriginal === true) {
this.containerEl.hide();
this.iconEl.detach();
}
this.iconEl.css('background-color', this.iconElBGColor); this.iconEl.css('background-color', this.iconElBGColor);
this.iconEl.css('padding-left', this.iconElPadding); this.iconEl.css('padding-left', this.iconElPadding);
this.iconEl.css('padding-right', this.iconElPadding); this.iconEl.css('padding-right', this.iconElPadding);
...@@ -163,7 +335,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -163,7 +335,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.iconEl.appendTo(this.state.baseImageEl.parent()); this.iconEl.appendTo(this.state.baseImageEl.parent());
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.detach(); if (this.isOriginal === true) {
this.labelEl.detach();
}
this.labelEl.css('background-color', this.state.config.labelBgColor); this.labelEl.css('background-color', this.state.config.labelBgColor);
this.labelEl.css('padding-left', 8); this.labelEl.css('padding-left', 8);
this.labelEl.css('padding-right', 8); this.labelEl.css('padding-right', 8);
...@@ -184,14 +358,20 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -184,14 +358,20 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.zIndex = 1000; this.zIndex = 1000;
this.correctZIndexes(); this.correctZIndexes();
this.state.numDraggablesInSlider -= 1; if (this.isOriginal === true) {
this.state.updateArrowOpacity(); this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity();
}
} }
function processDraggable(state, obj) { function processDraggable(state, obj) {
var draggableObj; var draggableObj;
draggableObj = { draggableObj = {
'originalConfigObj': obj,
'stateDraggablesIndex': null,
'id': obj.id, 'id': obj.id,
'isReusable': obj.can_reuse, 'isReusable': obj.can_reuse,
...@@ -235,7 +415,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -235,7 +415,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'moveBackToSlider': moveBackToSlider, 'moveBackToSlider': moveBackToSlider,
'moveDraggableToTarget': moveDraggableToTarget, 'moveDraggableToTarget': moveDraggableToTarget,
'moveDraggableToXY': moveDraggableToXY 'moveDraggableToXY': moveDraggableToXY,
'makeDraggableCopy': makeDraggableCopy
}; };
draggableObj.containerEl = $( draggableObj.containerEl = $(
...@@ -383,98 +565,71 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -383,98 +565,71 @@ define(['logme', 'update_input'], function (logme, updateInput) {
}); });
state.numDraggablesInSlider += 1; state.numDraggablesInSlider += 1;
state.draggables.push(draggableObj); draggableObj.stateDraggablesIndex = state.draggables.push(draggableObj) - 1;
} }
function mouseDown(event) { function mouseDown(event) {
var draggableCopy;
if (this.mousePressed === false) { if (this.mousePressed === false) {
// So that the browser does not perform a default drag. // So that the browser does not perform a default drag.
// If we don't do this, each drag operation will // If we don't do this, each drag operation will
// potentially cause the highlghting of the dragged element. // potentially cause the highlghting of the dragged element.
event.preventDefault(); event.preventDefault();
if ((this.isReusable === true) && (this.isOriginal === true)) {
return;
}
// If this draggable is just being dragged out of the // If this draggable is just being dragged out of the
// container, we must perform some additional tasks. // container, we must perform some additional tasks.
if (this.inContainer === true) { if (this.inContainer === true) {
this.containerEl.hide(); if ((this.isReusable === true) && (this.isOriginal === true)) {
draggableCopy = this.makeDraggableCopy();
draggableCopy.mouseDown(event);
this.iconEl.detach(); return;
this.iconEl.css( }
'background-color', this.iconElBGColor
); if (this.isOriginal === true) {
this.iconEl.css( this.containerEl.hide();
'padding-left', this.iconElPadding this.iconEl.detach();
); }
this.iconEl.css( this.iconEl.css('background-color', this.iconElBGColor);
'padding-right', this.iconElPadding this.iconEl.css('padding-left', this.iconElPadding);
); this.iconEl.css('padding-right', this.iconElPadding);
this.iconEl.css( this.iconEl.css('border', this.iconElBorder);
'border', this.iconElBorder this.iconEl.css('width', this.iconWidth);
); this.iconEl.css('height', this.iconHeight);
this.iconEl.css(
'width',
this.iconWidth
);
this.iconEl.css(
'height',
this.iconHeight
);
this.iconEl.css( this.iconEl.css(
'left', 'left',
event.pageX - event.pageX - this.state.baseImageEl.offset().left - this.iconWidth * 0.5 - this.iconElLeftOffset
this.state.baseImageEl.offset().left -
this.iconWidth * 0.5
- this.iconElLeftOffset
); );
this.iconEl.css( this.iconEl.css(
'top', 'top',
event.pageY - event.pageY - this.state.baseImageEl.offset().top - this.iconHeight * 0.5
this.state.baseImageEl.offset().top -
this.iconHeight * 0.5
);
this.iconEl.appendTo(
this.state.baseImageEl.parent()
); );
this.iconEl.appendTo(this.state.baseImageEl.parent());
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.detach(); if (this.isOriginal === true) {
this.labelEl.css( this.labelEl.detach();
'background-color', this.state.config.labelBgColor }
); this.labelEl.css('background-color', this.state.config.labelBgColor);
this.labelEl.css( this.labelEl.css('padding-left', 8);
'padding-left', 8 this.labelEl.css('padding-right', 8);
); this.labelEl.css('border', '1px solid black');
this.labelEl.css(
'padding-right', 8
);
this.labelEl.css(
'border', '1px solid black'
);
this.labelEl.css( this.labelEl.css(
'left', 'left',
event.pageX - event.pageX - this.state.baseImageEl.offset().left - this.labelWidth * 0.5 - 9 // Account for padding, border.
this.state.baseImageEl.offset().left -
this.labelWidth * 0.5
- 9 // Account for padding, border.
); );
this.labelEl.css( this.labelEl.css(
'top', 'top',
event.pageY - event.pageY - this.state.baseImageEl.offset().top + this.iconHeight * 0.5 + 5
this.state.baseImageEl.offset().top +
this.iconHeight * 0.5 + 5
);
this.labelEl.appendTo(
this.state.baseImageEl.parent()
); );
this.labelEl.appendTo(this.state.baseImageEl.parent());
} }
this.inContainer = false; this.inContainer = false;
this.state.numDraggablesInSlider -= 1; if (this.isOriginal === true) {
this.state.numDraggablesInSlider -= 1;
}
} }
this.zIndex = 1000; this.zIndex = 1000;
...@@ -549,7 +704,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -549,7 +704,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.moveBackToSlider(); this.moveBackToSlider();
this.state.numDraggablesInSlider += 1; if (this.isOriginal === true) {
this.state.numDraggablesInSlider += 1;
}
} }
} else { } else {
if ( if (
...@@ -563,7 +720,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -563,7 +720,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.x = -1; this.x = -1;
this.y = -1; this.y = -1;
this.state.numDraggablesInSlider += 1; if (this.isOriginal === true) {
this.state.numDraggablesInSlider += 1;
}
} else { } else {
this.correctZIndexes(); this.correctZIndexes();
...@@ -572,11 +731,12 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -572,11 +731,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
} }
this.state.updateArrowOpacity(); if (this.isOriginal === true) {
this.state.updateArrowOpacity();
}
updateInput.update(this.state); updateInput.update(this.state);
} }
//
// Determine if a draggable, after it was relased, ends up on a // Determine if a draggable, after it was relased, ends up on a
// target. We do this by iterating over all of the targets, and // target. We do this by iterating over all of the targets, and
// for each one we check whether the draggable's center is // for each one we check whether the draggable's center is
...@@ -585,7 +745,6 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -585,7 +745,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// positionIE is the object as returned by // positionIE is the object as returned by
// //
// this.iconEl.position() // this.iconEl.position()
//
function checkIfOnTarget(positionIE) { function checkIfOnTarget(positionIE) {
var c1, target; var c1, target;
...@@ -732,9 +891,17 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -732,9 +891,17 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// move it back to the slider, placing it in the same position // move it back to the slider, placing it in the same position
// that it was dragged out of. // that it was dragged out of.
function moveBackToSlider() { function moveBackToSlider() {
if (this.isOriginal === false) {
this.iconEl.empty();
if (this.labelEl !== null) {
this.labelEl.empty();
}
this.state.draggables.splice(this.stateDraggablesIndex, 1);
}
this.containerEl.show(); this.containerEl.show();
this.zIndex = this.oldZIndex; this.zIndex = 1;
this.iconEl.detach(); this.iconEl.detach();
this.iconEl.css('border', 'none'); this.iconEl.css('border', 'none');
......
common/static/js/capa/drag_and_drop/main.js
...@@ -69,10 +69,6 @@ define( ...@@ -69,10 +69,6 @@ define(
updateInput.update(state); updateInput.update(state);
} }
}()); }());
setTimeout(function () {
logme('After 1000 ms:', state);
}, 1000);
} }
}); });
......
common/static/js/capa/drag_and_drop/update_input.js
...@@ -198,9 +198,16 @@ define(['logme'], function (logme) { ...@@ -198,9 +198,16 @@ define(['logme'], function (logme) {
function getById(state, type, id) { function getById(state, type, id) {
return (function (c1) { return (function (c1) {
while (c1 < state[type].length) { while (c1 < state[type].length) {
if (state[type][c1].id === id) { if (type === 'draggables') {
return state[type][c1]; if ((state[type][c1].id === id) && (state[type][c1].isOriginal === true)) {
return state[type][c1];
}
} else { // 'targets'
if (state[type][c1].id === id) {
return state[type][c1];
}
} }
c1 += 1; c1 += 1;
} }
......
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