Skip to content

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

Refactoring and cleaning of code.

parent a228c163
Showing with 185 additions and 394 deletions
common/static/js/capa/drag_and_drop/base_image.js
...@@ -26,8 +26,10 @@ define(['logme'], function (logme) { ...@@ -26,8 +26,10 @@ define(['logme'], function (logme) {
state.baseImageEl.attr('src', state.config.baseImage); state.baseImageEl.attr('src', state.config.baseImage);
state.baseImageEl.load(function () { state.baseImageEl.load(function () {
baseImageElContainer.css('width', this.width); baseImageElContainer.css({
baseImageElContainer.css('height', this.height); 'width': this.width,
'height': this.height
});
state.baseImageEl.appendTo(baseImageElContainer); state.baseImageEl.appendTo(baseImageElContainer);
baseImageElContainer.appendTo(state.containerEl); baseImageElContainer.appendTo(state.containerEl);
......
common/static/js/capa/drag_and_drop/draggables.js
...@@ -60,81 +60,37 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -60,81 +60,37 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
function makeDraggableCopy(callbackFunc) { function makeDraggableCopy(callbackFunc) {
var draggableObj, obj; var draggableObj, property;
draggableObj = { // Make a full proper copy of the draggable object, with some modifications.
'uniqueId': /* this.uniqueId */ this.state.getUniqueId(), // Is newly set. draggableObj = {};
for (property in this) {
'originalConfigObj': this.originalConfigObj, if (this.hasOwnProperty(property) === true) {
'stateDraggablesIndex': /* this.stateDraggablesIndex */ null, // Will be set. draggableObj[property] = this[property];
}
'id': this.id, }
// The modifications to the draggable copy.
'isReusable': this.isReusable, draggableObj.isOriginal = false; // This new draggable is a copy.
'isOriginal': false, draggableObj.uniqueId = draggableObj.state.getUniqueId(); // Is newly set.
draggableObj.stateDraggablesIndex = null; // Will be set.
'x': this.x, draggableObj.containerEl = null; // Not needed, since a copy will never return to a container element.
'y': this.y, draggableObj.iconEl = null; // Will be created.
draggableObj.labelEl = null; // Will be created.
'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) { // Create DOM elements and attach events.
if (draggableObj.originalConfigObj.icon.length > 0) {
draggableObj.iconEl = $('<img />'); draggableObj.iconEl = $('<img />');
draggableObj.iconEl.attr('src', obj.icon); draggableObj.iconEl.attr('src', draggableObj.originalConfigObj.icon);
draggableObj.iconEl.load(function () { draggableObj.iconEl.load(function () {
draggableObj.iconEl.css('position', 'absolute'); draggableObj.iconEl.css({
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall); 'position': 'absolute',
draggableObj.iconEl.css('height', draggableObj.iconHeightSmall); 'width': draggableObj.iconWidthSmall,
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5); 'height': draggableObj.iconHeightSmall,
'left': 50 - draggableObj.iconWidthSmall * 0.5,
if (obj.label.length > 0) { 'top': ((draggableObj.originalConfigObj.label.length > 0) ? 5 : 50 - draggableObj.iconHeightSmall * 0.5)
draggableObj.iconEl.css('top', 5); });
} else {
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
}
if (obj.label.length > 0) { if (draggableObj.originalConfigObj.label.length > 0) {
draggableObj.labelEl = $( draggableObj.labelEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
...@@ -143,34 +99,18 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -143,34 +99,18 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'font-size: 0.95em; ' + 'font-size: 0.95em; ' +
'" ' + '" ' +
'>' + '>' +
obj.label + draggableObj.originalConfigObj.label +
'</div>' '</div>'
); );
draggableObj.labelEl.css({
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5); 'left': 50 - draggableObj.labelWidth * 0.5,
draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5); '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);
}); });
draggableObj.attachMouseEventsTo('labelEl');
} }
// Attach events to "iconEl". draggableObj.attachMouseEventsTo('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);
});
draggableObj.stateDraggablesIndex = draggableObj.state.draggables.push(draggableObj); draggableObj.stateDraggablesIndex = draggableObj.state.draggables.push(draggableObj);
...@@ -181,7 +121,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -181,7 +121,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
return; return;
} else { } else {
if (obj.label.length > 0) { if (draggableObj.originalConfigObj.label.length > 0) {
draggableObj.iconEl = $( draggableObj.iconEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
...@@ -190,26 +130,16 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -190,26 +130,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'font-size: 0.95em; ' + 'font-size: 0.95em; ' +
'" ' + '" ' +
'>' + '>' +
obj.label + draggableObj.originalConfigObj.label +
'</div>' '</div>'
); );
draggableObj.iconEl.css({
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5); 'left': 50 - draggableObj.iconWidthSmall * 0.5,
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5); '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);
}); });
draggableObj.attachMouseEventsTo('iconEl');
draggableObj.stateDraggablesIndex = draggableObj.state.draggables.push(draggableObj); draggableObj.stateDraggablesIndex = draggableObj.state.draggables.push(draggableObj);
setTimeout(function () { setTimeout(function () {
...@@ -218,94 +148,33 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -218,94 +148,33 @@ define(['logme', 'update_input'], function (logme, updateInput) {
return; return;
} }
function moveDraggableToXY(newPosition) {
var self, offset;
if (this.hasLoaded === false) {
self = this;
setTimeout(function () {
self.moveDraggableToXY(newPosition);
}, 50);
return;
}
if ((this.isReusable === true) && (this.isOriginal === true)) {
this.makeDraggableCopy(function (draggableCopy) {
draggableCopy.moveDraggableToXY(newPosition);
});
return;
}
offset = 0;
if (this.state.config.targetOutline === true) {
offset = 1;
} }
this.inContainer = false;
if (this.isOriginal === true) {
this.containerEl.hide();
this.iconEl.detach();
} }
this.iconEl.css('background-color', this.iconElBGColor);
this.iconEl.css('padding-left', this.iconElPadding);
this.iconEl.css('padding-right', this.iconElPadding);
this.iconEl.css('border', this.iconElBorder);
this.iconEl.css('width', this.iconWidth);
this.iconEl.css('height', this.iconHeight);
this.iconEl.css(
'left',
newPosition.x - this.iconWidth * 0.5 + offset - this.iconElLeftOffset
);
this.iconEl.css(
'top',
newPosition.y - this.iconHeight * 0.5 + offset
);
this.iconEl.appendTo(this.state.baseImageEl.parent());
if (this.labelEl !== null) { function attachMouseEventsTo(element) {
if (this.isOriginal === true) { var self;
this.labelEl.detach();
}
this.labelEl.css('background-color', this.state.config.labelBgColor);
this.labelEl.css('padding-left', 8);
this.labelEl.css('padding-right', 8);
this.labelEl.css('border', '1px solid black');
this.labelEl.css(
'left',
newPosition.x - this.labelWidth * 0.5 + offset - 9 // Account for padding, border.
);
this.labelEl.css(
'top',
newPosition.y - this.iconHeight * 0.5 + this.iconHeight + 5 + offset
);
this.labelEl.appendTo(this.state.baseImageEl.parent());
}
this.x = newPosition.x;
this.y = newPosition.y;
this.zIndex = 1000; self = this;
this.correctZIndexes();
if (this.isOriginal === true) { this[element].mousedown(function (event) {
this.state.numDraggablesInSlider -= 1; self.mouseDown(event);
this.state.updateArrowOpacity(); });
} this[element].mouseup(function (event) {
self.mouseUp(event);
});
this[element].mousemove(function (event) {
self.mouseMove(event);
});
} }
function moveDraggableToTarget(target) { function moveDraggableTo(moveType, target) {
var self, offset; var self, offset;
if (this.hasLoaded === false) { if (this.hasLoaded === false) {
self = this; self = this;
setTimeout(function () { setTimeout(function () {
self.moveDraggableToTarget(target); self.moveDraggableTo(moveType, target);
}, 50); }, 50);
return; return;
...@@ -313,7 +182,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -313,7 +182,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
if ((this.isReusable === true) && (this.isOriginal === true)) { if ((this.isReusable === true) && (this.isOriginal === true)) {
this.makeDraggableCopy(function (draggableCopy) { this.makeDraggableCopy(function (draggableCopy) {
draggableCopy.moveDraggableToTarget(target); draggableCopy.moveDraggableTo(moveType, target);
}); });
return; return;
...@@ -330,42 +199,57 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -330,42 +199,57 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.containerEl.hide(); this.containerEl.hide();
this.iconEl.detach(); this.iconEl.detach();
} }
this.iconEl.css('background-color', this.iconElBGColor); this.iconEl.css({
this.iconEl.css('padding-left', this.iconElPadding); 'background-color': this.iconElBGColor,
this.iconEl.css('padding-right', this.iconElPadding); 'padding-left': this.iconElPadding,
this.iconEl.css('border', this.iconElBorder); 'padding-right': this.iconElPadding,
this.iconEl.css('width', this.iconWidth); 'border': this.iconElBorder,
this.iconEl.css('height', this.iconHeight); 'width': this.iconWidth,
this.iconEl.css( 'height': this.iconHeight
'left', });
target.offset.left + 0.5 * target.w - this.iconWidth * 0.5 + offset - this.iconElLeftOffset if (moveType === 'target') {
); this.iconEl.css({
this.iconEl.css( 'left': target.offset.left + 0.5 * target.w - this.iconWidth * 0.5 + offset - this.iconElLeftOffset,
'top', 'top': target.offset.top + 0.5 * target.h - this.iconHeight * 0.5 + offset
target.offset.top + 0.5 * target.h - this.iconHeight * 0.5 + offset });
); } else {
this.iconEl.css({
'left': target.x - this.iconWidth * 0.5 + offset - this.iconElLeftOffset,
'top': target.y - this.iconHeight * 0.5 + offset
});
}
this.iconEl.appendTo(this.state.baseImageEl.parent()); this.iconEl.appendTo(this.state.baseImageEl.parent());
if (this.labelEl !== null) { if (this.labelEl !== null) {
if (this.isOriginal === true) { if (this.isOriginal === true) {
this.labelEl.detach(); this.labelEl.detach();
} }
this.labelEl.css('background-color', this.state.config.labelBgColor); this.labelEl.css({
this.labelEl.css('padding-left', 8); 'background-color': this.state.config.labelBgColor,
this.labelEl.css('padding-right', 8); 'padding-left': 8,
this.labelEl.css('border', '1px solid black'); 'padding-right': 8,
this.labelEl.css( 'border': '1px solid black'
'left', });
target.offset.left + 0.5 * target.w - this.labelWidth * 0.5 + offset - 9 // Account for padding, border. if (moveType === 'target') {
); this.labelEl.css({
this.labelEl.css( 'left': target.offset.left + 0.5 * target.w - this.labelWidth * 0.5 + offset - 9, // Account for padding, border.
'top', 'top': target.offset.top + 0.5 * target.h + this.iconHeight * 0.5 + 5 + offset
target.offset.top + 0.5 * target.h + this.iconHeight * 0.5 + 5 + offset });
); } else {
this.labelEl.css({
'left': target.x - this.labelWidth * 0.5 + offset - 9, // Account for padding, border.
'top': target.y - this.iconHeight * 0.5 + this.iconHeight + 5 + offset
});
}
this.labelEl.appendTo(this.state.baseImageEl.parent()); this.labelEl.appendTo(this.state.baseImageEl.parent());
} }
if (moveType === 'target') {
target.addDraggable(this); target.addDraggable(this);
} else {
this.x = target.x;
this.y = target.y;
}
this.zIndex = 1000; this.zIndex = 1000;
this.correctZIndexes(); this.correctZIndexes();
...@@ -374,7 +258,6 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -374,7 +258,6 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.state.numDraggablesInSlider -= 1; this.state.numDraggablesInSlider -= 1;
this.state.updateArrowOpacity(); this.state.updateArrowOpacity();
} }
} }
function processDraggable(state, obj) { function processDraggable(state, obj) {
...@@ -382,22 +265,15 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -382,22 +265,15 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj = { draggableObj = {
'uniqueId': state.getUniqueId(), 'uniqueId': state.getUniqueId(),
'originalConfigObj': obj, 'originalConfigObj': obj,
'stateDraggablesIndex': null, 'stateDraggablesIndex': null,
'id': obj.id, 'id': obj.id,
'isReusable': obj.can_reuse, 'isReusable': obj.can_reuse,
'isOriginal': true, 'isOriginal': true,
'x': -1, 'x': -1,
'y': -1, 'y': -1,
'zIndex': 1, 'zIndex': 1,
'containerEl': null, 'containerEl': null,
'iconEl': null, 'iconEl': null,
'iconElBGColor': null, 'iconElBGColor': null,
'iconElPadding': null, 'iconElPadding': null,
...@@ -407,16 +283,13 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -407,16 +283,13 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'iconHeight': null, 'iconHeight': null,
'iconWidthSmall': null, 'iconWidthSmall': null,
'iconHeightSmall': null, 'iconHeightSmall': null,
'labelEl': null, 'labelEl': null,
'labelWidth': null, 'labelWidth': null,
'hasLoaded': false, 'hasLoaded': false,
'inContainer': true, 'inContainer': true,
'mousePressed': false, 'mousePressed': false,
'onTarget': null, 'onTarget': null,
'onTargetIndex': null, 'onTargetIndex': null,
'state': state, 'state': state,
'mouseDown': mouseDown, 'mouseDown': mouseDown,
...@@ -427,11 +300,9 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -427,11 +300,9 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'snapToTarget': snapToTarget, 'snapToTarget': snapToTarget,
'correctZIndexes': correctZIndexes, 'correctZIndexes': correctZIndexes,
'moveBackToSlider': moveBackToSlider, 'moveBackToSlider': moveBackToSlider,
'moveDraggableTo': moveDraggableTo,
'moveDraggableToTarget': moveDraggableToTarget, 'makeDraggableCopy': makeDraggableCopy,
'moveDraggableToXY': moveDraggableToXY, 'attachMouseEventsTo': attachMouseEventsTo
'makeDraggableCopy': makeDraggableCopy
}; };
draggableObj.containerEl = $( draggableObj.containerEl = $(
...@@ -472,17 +343,13 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -472,17 +343,13 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconWidthSmall = draggableObj.iconHeightSmall * (draggableObj.iconWidth / draggableObj.iconHeight); draggableObj.iconWidthSmall = draggableObj.iconHeightSmall * (draggableObj.iconWidth / draggableObj.iconHeight);
} }
draggableObj.iconEl.css('position', 'absolute'); draggableObj.iconEl.css({
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall); 'position': 'absolute',
draggableObj.iconEl.css('height', draggableObj.iconHeightSmall); 'width': draggableObj.iconWidthSmall,
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5); 'height': draggableObj.iconHeightSmall,
'left': 50 - draggableObj.iconWidthSmall * 0.5,
if (obj.label.length > 0) { 'top': ((obj.label.length > 0) ? 5 : 50 - draggableObj.iconHeightSmall * 0.5)
draggableObj.iconEl.css('top', 5); });
} else {
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
}
draggableObj.iconEl.appendTo(draggableObj.containerEl); draggableObj.iconEl.appendTo(draggableObj.containerEl);
if (obj.label.length > 0) { if (obj.label.length > 0) {
...@@ -500,18 +367,12 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -500,18 +367,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.labelEl.appendTo(draggableObj.containerEl); draggableObj.labelEl.appendTo(draggableObj.containerEl);
draggableObj.labelWidth = draggableObj.labelEl.width(); draggableObj.labelWidth = draggableObj.labelEl.width();
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5); draggableObj.labelEl.css({
draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5); 'left': 50 - draggableObj.labelWidth * 0.5,
'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);
}); });
draggableObj.attachMouseEventsTo('labelEl');
} }
draggableObj.hasLoaded = true; draggableObj.hasLoaded = true;
...@@ -546,8 +407,10 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -546,8 +407,10 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconWidthSmall = draggableObj.iconWidth; draggableObj.iconWidthSmall = draggableObj.iconWidth;
draggableObj.iconHeightSmall = draggableObj.iconHeight; draggableObj.iconHeightSmall = draggableObj.iconHeight;
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5); draggableObj.iconEl.css({
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5); 'left': 50 - draggableObj.iconWidthSmall * 0.5,
'top': 50 - draggableObj.iconHeightSmall * 0.5
});
draggableObj.hasLoaded = true; draggableObj.hasLoaded = true;
} else { } else {
...@@ -556,27 +419,8 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -556,27 +419,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} }
} }
// Attach events to "iconEl". draggableObj.attachMouseEventsTo('iconEl');
draggableObj.iconEl.mousedown(function (event) { draggableObj.attachMouseEventsTo('containerEl');
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);
});
state.numDraggablesInSlider += 1; state.numDraggablesInSlider += 1;
draggableObj.stateDraggablesIndex = state.draggables.push(draggableObj) - 1; draggableObj.stateDraggablesIndex = state.draggables.push(draggableObj) - 1;
...@@ -605,38 +449,30 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -605,38 +449,30 @@ define(['logme', 'update_input'], function (logme, updateInput) {
this.containerEl.hide(); this.containerEl.hide();
this.iconEl.detach(); this.iconEl.detach();
} }
this.iconEl.css('background-color', this.iconElBGColor); this.iconEl.css({
this.iconEl.css('padding-left', this.iconElPadding); 'background-color': this.iconElBGColor,
this.iconEl.css('padding-right', this.iconElPadding); 'padding-left': this.iconElPadding,
this.iconEl.css('border', this.iconElBorder); 'padding-right': this.iconElPadding,
this.iconEl.css('width', this.iconWidth); 'border': this.iconElBorder,
this.iconEl.css('height', this.iconHeight); 'width': this.iconWidth,
this.iconEl.css( 'height': this.iconHeight,
'left', 'left': event.pageX - this.state.baseImageEl.offset().left - this.iconWidth * 0.5 - this.iconElLeftOffset,
event.pageX - this.state.baseImageEl.offset().left - this.iconWidth * 0.5 - this.iconElLeftOffset 'top': event.pageY - this.state.baseImageEl.offset().top - this.iconHeight * 0.5
); });
this.iconEl.css(
'top',
event.pageY - 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) {
if (this.isOriginal === true) { if (this.isOriginal === true) {
this.labelEl.detach(); this.labelEl.detach();
} }
this.labelEl.css('background-color', this.state.config.labelBgColor); this.labelEl.css({
this.labelEl.css('padding-left', 8); 'background-color': this.state.config.labelBgColor,
this.labelEl.css('padding-right', 8); 'padding-left': 8,
this.labelEl.css('border', '1px solid black'); 'padding-right': 8,
this.labelEl.css( 'border': '1px solid black',
'left', 'left': event.pageX - this.state.baseImageEl.offset().left - this.labelWidth * 0.5 - 9, // Account for padding, border.
event.pageX - this.state.baseImageEl.offset().left - this.labelWidth * 0.5 - 9 // Account for padding, border. 'top': event.pageY - this.state.baseImageEl.offset().top + this.iconHeight * 0.5 + 5
); });
this.labelEl.css(
'top',
event.pageY - this.state.baseImageEl.offset().top + this.iconHeight * 0.5 + 5
);
this.labelEl.appendTo(this.state.baseImageEl.parent()); this.labelEl.appendTo(this.state.baseImageEl.parent());
} }
...@@ -675,24 +511,16 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -675,24 +511,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// of a drag operation (user moves the mouse very quickly). // of a drag operation (user moves the mouse very quickly).
event.stopPropagation(); event.stopPropagation();
this.iconEl.css( this.iconEl.css({
'left', 'left': event.pageX - this.state.baseImageEl.offset().left - this.iconWidth * 0.5 - this.iconElLeftOffset,
event.pageX - this.state.baseImageEl.offset().left - this.iconWidth * 0.5 - this.iconElLeftOffset 'top': event.pageY - this.state.baseImageEl.offset().top - this.iconHeight * 0.5
); });
this.iconEl.css(
'top',
event.pageY - this.state.baseImageEl.offset().top - this.iconHeight * 0.5
);
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.css( this.labelEl.css({
'left', 'left': event.pageX - this.state.baseImageEl.offset().left - this.labelWidth * 0.5 - 9, // Acoount for padding, border.
event.pageX - this.state.baseImageEl.offset().left - this.labelWidth * 0.5 - 9 // Acoount for padding, border. 'top': event.pageY - this.state.baseImageEl.offset().top + this.iconHeight * 0.5 + 5
); });
this.labelEl.css(
'top',
event.pageY - this.state.baseImageEl.offset().top + this.iconHeight * 0.5 + 5
);
} }
} }
} }
...@@ -779,16 +607,12 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -779,16 +607,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// Check if the draggable's center coordinate is within // Check if the draggable's center coordinate is within
// the target's dimensions. If not, go to next target. // the target's dimensions. If not, go to next target.
if (positionIE.top + this.iconHeight * 0.5 < target.offset.top) { if (
continue; (positionIE.top + this.iconHeight * 0.5 < target.offset.top) ||
} (positionIE.top + this.iconHeight * 0.5 > target.offset.top + target.h) ||
if (positionIE.top + this.iconHeight * 0.5 > target.offset.top + target.h) { (positionIE.left + this.iconWidth * 0.5 < target.offset.left) ||
continue; (positionIE.left + this.iconWidth * 0.5 > target.offset.left + target.w)
} ) {
if (positionIE.left + this.iconWidth * 0.5 < target.offset.left) {
continue;
}
if (positionIE.left + this.iconWidth * 0.5 > target.offset.left + target.w) {
continue; continue;
} }
...@@ -827,24 +651,16 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -827,24 +651,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
offset = 1; offset = 1;
} }
this.iconEl.css( this.iconEl.css({
'left', 'left': target.offset.left + 0.5 * target.w - this.iconWidth * 0.5 + offset - this.iconElLeftOffset,
target.offset.left + 0.5 * target.w - this.iconWidth * 0.5 + offset - this.iconElLeftOffset 'top': target.offset.top + 0.5 * target.h - this.iconHeight * 0.5 + offset
); });
this.iconEl.css(
'top',
target.offset.top + 0.5 * target.h - this.iconHeight * 0.5 + offset
);
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.css( this.labelEl.css({
'left', 'left': target.offset.left + 0.5 * target.w - this.labelWidth * 0.5 + offset - 9, // Acoount for padding, border.
target.offset.left + 0.5 * target.w - this.labelWidth * 0.5 + offset - 9 // Acoount for padding, border. 'top': target.offset.top + 0.5 * target.h + this.iconHeight * 0.5 + 5 + offset
); });
this.labelEl.css(
'top',
target.offset.top + 0.5 * target.h + this.iconHeight * 0.5 + 5 + offset
);
} }
} }
...@@ -908,77 +724,50 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -908,77 +724,50 @@ define(['logme', 'update_input'], function (logme, updateInput) {
var c1; var c1;
if (this.isOriginal === false) { if (this.isOriginal === false) {
this.iconEl.empty();
this.iconEl.remove(); this.iconEl.remove();
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.empty();
this.labelEl.remove(); this.labelEl.remove();
} }
this.state.draggables.splice(this.stateDraggablesIndex, 1); this.state.draggables.splice(this.stateDraggablesIndex, 1);
c1 = 0; for (c1 = 0; c1 < this.state.draggables; c1 += 1) {
while (c1 < this.state.draggables) {
if (this.state.draggables[c1].stateDraggablesIndex > this.stateDraggablesIndex) { if (this.state.draggables[c1].stateDraggablesIndex > this.stateDraggablesIndex) {
this.state.draggables[c1].stateDraggablesIndex -= 1; this.state.draggables[c1].stateDraggablesIndex -= 1;
} }
c1 += 1;
} }
return; return;
} }
this.containerEl.show(); this.containerEl.show();
this.zIndex = 1; this.zIndex = 1;
this.iconEl.detach(); this.iconEl.detach();
this.iconEl.css('border', 'none'); this.iconEl.css({
this.iconEl.css('background-color', 'transparent'); 'border': 'none',
this.iconEl.css('padding-left', 0); 'background-color': 'transparent',
this.iconEl.css('padding-right', 0); 'padding-left': 0,
this.iconEl.css('z-index', this.zIndex); 'padding-right': 0,
this.iconEl.css( 'z-index': this.zIndex,
'width', 'width': this.iconWidthSmall,
this.iconWidthSmall 'height': this.iconHeightSmall,
); 'left': 50 - this.iconWidthSmall * 0.5,
this.iconEl.css( 'top': ((this.labelEl !== null) ? 5 : 50 - this.iconHeightSmall * 0.5)
'height', });
this.iconHeightSmall
);
this.iconEl.css(
'left',
50 - this.iconWidthSmall * 0.5
);
if (this.labelEl !== null) {
this.iconEl.css('top', 5);
} else {
this.iconEl.css(
'top',
50 - this.iconHeightSmall * 0.5
);
}
this.iconEl.appendTo(this.containerEl); this.iconEl.appendTo(this.containerEl);
if (this.labelEl !== null) { if (this.labelEl !== null) {
this.labelEl.detach(); this.labelEl.detach();
this.labelEl.css('border', 'none'); this.labelEl.css({
this.labelEl.css('background-color', 'transparent'); 'border': 'none',
this.labelEl.css('padding-left', 0); 'background-color': 'transparent',
this.labelEl.css('padding-right', 0); 'padding-left': 0,
this.labelEl.css('z-index', this.zIndex); 'padding-right': 0,
this.labelEl.css( 'z-index': this.zIndex,
'left', 'left': 50 - this.labelWidth * 0.5,
50 - this.labelWidth * 0.5 'top': 5 + this.iconHeightSmall + 5
); });
this.labelEl.css( this.labelEl.appendTo(this.containerEl);
'top',
5 + this.iconHeightSmall + 5
);
this.labelEl.appendTo(
this.containerEl
);
} }
this.inContainer = true; this.inContainer = true;
......
common/static/js/capa/drag_and_drop/update_input.js
...@@ -142,7 +142,7 @@ define(['logme'], function (logme) { ...@@ -142,7 +142,7 @@ define(['logme'], function (logme) {
continue; continue;
} }
draggable.moveDraggableToTarget(target); draggable.moveDraggableTo('target', target);
} }
c1 += 1; c1 += 1;
...@@ -170,7 +170,7 @@ define(['logme'], function (logme) { ...@@ -170,7 +170,7 @@ define(['logme'], function (logme) {
continue; continue;
} }
draggable.moveDraggableToXY({ draggable.moveDraggableTo('XY', {
'x': answer.draggables[c1][draggableId][0], 'x': answer.draggables[c1][draggableId][0],
'y': answer.draggables[c1][draggableId][1] 'y': answer.draggables[c1][draggableId][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