Skip to content

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

Rewrote functionality to include labels as separate from the container. Fixed bugs. Refactoring.

parent 792cd34c
Showing with 242 additions and 53 deletions
common/static/js/capa/drag_and_drop/config_parser.js
......@@ -12,6 +12,8 @@ define(['logme'], function (logme) {
returnStatus = true;
logme('imageDir', imageDir);
state.config = {
'imageDir': '/static/' + imageDir + '/images',
'draggables': [],
......
common/static/js/capa/drag_and_drop/draggables.js
......@@ -11,11 +11,13 @@ define(['logme', 'update_input'], function (logme, updateInput) {
var c1;
state.draggables = [];
state.numDraggablesInSlider = 0;
for (c1 = 0; c1 < state.config.draggables.length; c1 += 1) {
processDraggable(state.config.draggables[c1], c1 + 1);
}
state.updateArrowOpacity();
state.currentMovingDraggable = null;
$(document).mousemove(function (event) {
......@@ -34,17 +36,35 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.baseImageEl.offset().top -
state.currentMovingDraggable.iconHeight * 0.5
);
if (state.currentMovingDraggable.labelEl !== null) {
state.currentMovingDraggable.labelEl.css(
'top',
event.pageY -
state.baseImageEl.offset().top +
state.currentMovingDraggable.iconHeight * 0.5 +
5
);
state.currentMovingDraggable.labelEl.css(
'left',
event.pageX -
state.baseImageEl.offset().left -
state.currentMovingDraggable.labelWidth * 0.5
);
}
}
});
return;
function processDraggable(obj, objIndex) {
var inContainer, mousePressed, onTarget, draggableObj, marginCss;
draggableObj = {};
var inContainer, mousePressed, onTarget, draggableObj;
draggableObj.zIndex = objIndex;
draggableObj = {
'zIndex': objIndex,
'labelEl': null,
'hasLoaded': false
};
draggableObj.containerEl = $(
'<div ' +
......@@ -55,15 +75,19 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'float: left; ' +
'overflow: hidden; ' +
'z-index: ' + objIndex + '; ' +
'border: 1px solid #CCC; ' +
'border-left: 1px solid #CCC; ' +
'border-right: 1px solid #CCC; ' +
'text-align: center; ' +
'position: relative; ' +
'" ' +
'></div>'
);
draggableObj.containerEl.appendTo(state.sliderEl);
if (obj.icon.length > 0) {
draggableObj.hasIcon = true;
draggableObj.iconEl = $('<img />');
draggableObj.iconEl.attr(
'src',
......@@ -73,32 +97,90 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconWidth = this.width;
draggableObj.iconHeight = this.height;
if (draggableObj.iconWidth >= draggableObj.iconHeight) {
draggableObj.iconWidthSmall = 60;
draggableObj.iconHeightSmall = draggableObj.iconWidthSmall * (draggableObj.iconHeight / draggableObj.iconWidth);
} else {
draggableObj.iconHeightSmall = 60;
draggableObj.iconWidthSmall = draggableObj.iconHeightSmall * (draggableObj.iconWidth / draggableObj.iconHeight);
}
draggableObj.iconEl.css('position', 'absolute');
draggableObj.iconEl.css('top', (50 - this.height * 0.5) + 'px');
draggableObj.iconEl.css('left', (50 - this.width * 0.5) + 'px');
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);
}
draggableObj.iconEl.appendTo(draggableObj.containerEl);
});
draggableObj.iconEl.mousedown(mouseDown);
draggableObj.iconEl.mouseup(mouseUp);
draggableObj.iconEl.mousemove(mouseMove);
if (obj.label.length > 0) {
draggableObj.labelEl = $(
'<div ' +
'style=" ' +
'position: absolute; ' +
'" ' +
'>' +
obj.label +
'</div>'
);
draggableObj.labelEl.appendTo(draggableObj.containerEl);
draggableObj.labelWidth = draggableObj.labelEl.width();
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5);
draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5);
draggableObj.labelEl.mousedown(mouseDown);
draggableObj.labelEl.mouseup(mouseUp);
draggableObj.labelEl.mousemove(mouseMove);
}
draggableObj.hasLoaded = true;
});
} else {
// Must fix - add +label support, and just label support.
return;
}
// To make life easier, if there is no icon, but there is a
// label, we will create a label and store it as if it was an
// icon. All the existing code will work, and the user will
// see a label instead of an icon.
if (obj.label.length > 0) {
logme('We have a label length > 0.');
draggableObj.iconEl = $(
'<div ' +
'style=" ' +
'position: absolute; ' +
'" ' +
'>' +
obj.label +
'</div>'
);
draggableObj.iconEl.appendTo(draggableObj.containerEl);
draggableObj.iconWidth = draggableObj.iconEl.width();
draggableObj.iconHeight = draggableObj.iconEl.height();
draggableObj.iconWidthSmall = draggableObj.iconWidth;
draggableObj.iconHeightSmall = draggableObj.iconHeight;
// if (obj.label.length > 0) {
// marginCss = '';
//
// if (obj.icon.length === 0) {
// marginCss = 'margin-top: 38px;';
// }
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
} else {
// If no icon and no label, don't create a draggable.
return;
}
}
// draggableContainerEl.append(
// $('<div style="clear: both; text-align: center; ' + marginCss + ' ">' + obj.label + '</div>')
// );
// }
draggableObj.iconEl.mousedown(mouseDown);
draggableObj.iconEl.mouseup(mouseUp);
draggableObj.iconEl.mousemove(mouseMove);
inContainer = true;
mousePressed = false;
......@@ -114,6 +196,12 @@ define(['logme', 'update_input'], function (logme, updateInput) {
state.draggables.push(draggableObj);
state.numDraggablesInSlider += 1;
if (obj.icon.length === 0) {
draggableObj.hasLoaded = true;
}
return;
function mouseDown(event) {
......@@ -125,11 +213,23 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.containerEl.hide();
draggableObj.iconEl.detach();
draggableObj.iconEl.css('width', draggableObj.iconWidth);
draggableObj.iconEl.css('height', draggableObj.iconHeight);
draggableObj.iconEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.iconWidth * 0.5);
draggableObj.iconEl.css('top', event.pageY - state.baseImageEl.offset().top - draggableObj.iconHeight * 0.5);
draggableObj.iconEl.appendTo(state.baseImageEl.parent());
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach();
draggableObj.labelEl.css('left', event.pageX - state.baseImageEl.offset().left - draggableObj.labelWidth * 0.5);
draggableObj.labelEl.css('top', event.pageY - state.baseImageEl.offset().top + draggableObj.iconHeight * 0.5 + 5);
draggableObj.labelEl.appendTo(state.baseImageEl.parent());
}
inContainer = false;
state.numDraggablesInSlider -= 1;
}
draggableObj.oldZIndex = draggableObj.zIndex;
......@@ -178,6 +278,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
} else {
moveBackToSlider();
removeObjIdFromTarget();
state.numDraggablesInSlider += 1;
}
} else {
if (
......@@ -190,6 +292,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.x = -1;
draggableObj.y = -1;
state.numDraggablesInSlider += 1;
} else {
correctZIndexes();
......@@ -283,6 +387,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
draggableObj.iconEl.css('left', target.offset.left + 0.5 * target.w - draggableObj.iconWidth * 0.5 + offset);
draggableObj.iconEl.css('top', target.offset.top + 0.5 * target.h - draggableObj.iconHeight * 0.5 + offset);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.css('left', target.offset.left + 0.5 * target.w - draggableObj.labelWidth * 0.5 + offset);
draggableObj.labelEl.css('top', target.offset.top + 0.5 * target.h + draggableObj.iconHeight * 0.5 + 5 + offset);
}
}
// Go through all of the draggables subtract 1 from the z-index
......@@ -316,17 +425,30 @@ define(['logme', 'update_input'], function (logme, updateInput) {
// move it back to the slider, placing it in the same position
// that it was dragged out of.
function moveBackToSlider() {
var c1;
draggableObj.containerEl.show();
draggableObj.iconEl.detach();
draggableObj.iconEl.css('top', (50 - draggableObj.iconHeight * 0.5) + 'px');
draggableObj.iconEl.css('left', (50 - draggableObj.iconWidth * 0.5) + 'px');
draggableObj.iconEl.css('width', draggableObj.iconWidthSmall);
draggableObj.iconEl.css('height', draggableObj.iconHeightSmall);
draggableObj.iconEl.css('left', 50 - draggableObj.iconWidthSmall * 0.5);
if (draggableObj.labelEl !== null) {
draggableObj.iconEl.css('top', 5);
} else {
draggableObj.iconEl.css('top', 50 - draggableObj.iconHeightSmall * 0.5);
}
draggableObj.iconEl.appendTo(draggableObj.containerEl);
if (draggableObj.labelEl !== null) {
draggableObj.labelEl.detach();
draggableObj.labelEl.css('left', 50 - draggableObj.labelWidth * 0.5);
draggableObj.labelEl.css('top', 5 + draggableObj.iconHeightSmall + 5);
draggableObj.labelEl.appendTo(draggableObj.containerEl);
}
inContainer = true;
}
}
......
common/static/js/capa/drag_and_drop/scroller.js
......@@ -105,7 +105,9 @@ define(['logme'], function (logme) {
'<div ' +
'style=" ' +
'width: 20000px; ' +
'height: 102px; ' +
'height: 100px; ' +
'border-top: 1px solid #CCC; ' +
'border-bottom: 1px solid #CCC; ' +
'" ' +
'></div>'
);
......@@ -158,7 +160,7 @@ define(['logme'], function (logme) {
// When there are no more hidden draggables, prevent from
// scrolling infinitely.
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 6)) {
if (showElLeftMargin < -102 * (state.numDraggablesInSlider - 6)) {
return;
}
......@@ -192,7 +194,7 @@ define(['logme'], function (logme) {
moveLeftEl.children('div').css('opacity', '1');
moveRightEl.children('div').css('opacity', '1');
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 6)) {
if (showElLeftMargin < -102 * (state.numDraggablesInSlider - 6)) {
moveRightEl.children('div').css('opacity', '.4');
}
if (showElLeftMargin > -102) {
......
common/static/js/capa/drag_and_drop/state.js
......@@ -14,7 +14,9 @@ define([], function () {
// Will indicate when all targetsand draggables have been loaded,
// processed, and postioned intially.
'targetsLoaded': false,
'draggablesLoaded': false
'draggablesLoaded': false,
'numDraggablesInSlider': 0
};
}
});
......
common/static/js/capa/drag_and_drop/update_input.js
......@@ -75,7 +75,12 @@ define(['logme'], function (logme) {
function repositionDraggables(answer) {
var draggableId, draggable, targetId, target, draggablePosition,
c1;
c1, offset;
offset = 0;
if (state.config.targetOutline === true) {
offset = 1;
}
logme(answer);
......@@ -98,22 +103,47 @@ define(['logme'], function (logme) {
continue;
}
(function (c1, draggableId, draggable) {
moveDraggableToBaseImage();
return;
function moveDraggableToBaseImage() {
if (draggable.hasLoaded === false) {
setTimeout(moveDraggableToBaseImage, 50);
return;
}
draggable.setInContainer(false);
draggable.containerEl.hide();
draggable.setInContainer(false);
draggable.iconEl.detach();
draggable.el.detach();
draggable.el.css('border', 'none');
draggable.el.css('position', 'absolute');
draggable.el.css('left', answer.draggables[c1][draggableId][0] - 50);
draggable.el.css('top', answer.draggables[c1][draggableId][1] - 50);
draggable.iconEl.css('width', draggable.iconWidth);
draggable.iconEl.css('height', draggable.iconHeight);
draggable.iconEl.css(
'left',
target.offset.left + 0.5 * target.w - draggable.iconWidth * 0.5 + offset
);
draggable.iconEl.css(
'top',
target.offset.top + 0.5 * target.h - draggable.iconHeight * 0.5 + offset
);
draggable.el.css('left', target.offset.left + 0.5 * target.w - 50);
draggable.el.css('top', target.offset.top + 0.5 * target.h - 50);
draggable.iconEl.appendTo(state.baseImageEl.parent());
draggable.el.appendTo(state.baseImageEl.parent());
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
draggable.setOnTarget(target);
target.draggable.push(draggableId);
draggable.labelEl.css('left', target.offset.left + 0.5 * target.w - draggable.labelWidth * 0.5 + offset);
draggable.labelEl.css('top', target.offset.top + 0.5 * target.h + draggable.iconHeight * 0.5 + 5 + offset);
draggable.labelEl.appendTo(state.baseImageEl.parent());
}
draggable.setOnTarget(target);
target.draggable.push(draggableId);
}
}(c1, draggableId, draggable));
}
}
} else if (
......@@ -128,17 +158,47 @@ define(['logme'], function (logme) {
continue;
}
draggable.setInContainer(false);
(function (c1, draggableId, draggable) {
moveDraggableToBaseImage();
return;
function moveDraggableToBaseImage() {
if (draggable.hasLoaded === false) {
setTimeout(moveDraggableToBaseImage, 50);
return;
}
draggable.setInContainer(false);
draggable.containerEl.hide();
draggable.iconEl.detach();
draggable.iconEl.css('width', draggable.iconWidth);
draggable.iconEl.css('height', draggable.iconHeight);
draggable.iconEl.css(
'left',
answer.draggables[c1][draggableId][0] - draggable.iconWidth * 0.5 + offset
);
draggable.iconEl.css(
'top',
answer.draggables[c1][draggableId][0] - draggable.iconHeight * 0.5 + offset
);
draggable.iconEl.appendTo(state.baseImageEl.parent());
if (draggable.labelEl !== null) {
draggable.labelEl.detach();
draggable.labelEl.css('left', answer.draggables[c1][draggableId][0] - draggable.iconWidth * 0.5 - draggable.labelWidth * 0.5 + offset);
draggable.labelEl.css('top', answer.draggables[c1][draggableId][0] - draggable.iconHeight * 0.5 + draggable.iconHeight + 5 + offset);
draggable.el.detach();
draggable.el.css('border', 'none');
draggable.el.css('position', 'absolute');
draggable.el.css('left', answer.draggables[c1][draggableId][0] - 50);
draggable.el.css('top', answer.draggables[c1][draggableId][1] - 50);
draggable.el.appendTo(state.baseImageEl.parent());
draggable.labelEl.appendTo(state.baseImageEl.parent());
}
draggable.x = answer.draggables[c1][draggableId][0];
draggable.y = answer.draggables[c1][draggableId][1];
draggable.x = answer.draggables[c1][draggableId][0];
draggable.y = answer.draggables[c1][draggableId][1];
}
}(c1, draggableId, draggable));
}
}
} else {
......@@ -147,6 +207,7 @@ define(['logme'], function (logme) {
return;
}
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