Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added support for individual targets. Work in progress. Part 7.

Browse Source
This commit is contained in:
Valera Rozuvan
2012-12-26 07:52:28 +02:00
committed by Alexander Kryklia
parent e842415194
commit c34fbbe19f
4 changed files with 175 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
common/static/js/capa/drag_and_drop/draggables.js
View File

@@ -22,7 +22,8 @@ define(['logme'], function (logme) {
return;
function processDraggable(obj, index) {
var draggableContainerEl, imgEl, inContainer, ousePressed;
var draggableContainerEl, imgEl, inContainer, ousePressed,
onTarget;
draggableContainerEl = $(
'<div ' +
@@ -60,6 +61,8 @@ define(['logme'], function (logme) {
inContainer = true;
mousePressed = false;
onTarget = null;
draggableContainerEl.mousedown(mouseDown);
draggableContainerEl.mouseup(mouseUp);
draggableContainerEl.mousemove(mouseMove);
@@ -87,40 +90,149 @@ define(['logme'], function (logme) {
}
}
function mouseUp(event) {
function mouseUp() {
if (mousePressed === true) {
checkLandingElement(event);
checkLandingElement();
}
}
function mouseMove(event) {
function mouseMove() {
if (mousePressed === true) {
draggableContainerEl.css('left', (event.pageX - 50));
draggableContainerEl.css('top', (event.pageY - 50));
event.preventDefault();
}
}
function mouseLeave(event) {
function mouseLeave() {
if (mousePressed === true) {
checkLandingElement(event);
checkLandingElement();
}
}
function checkLandingElement(event) {
var offsetDE, offsetTE, indexes, DEindex;
function checkLandingElement() {
var offsetDE, offsetTE, indexes, DEindex, targetFound;
mousePressed = false;
offsetDE = draggableContainerEl.offset();
offsetTE = state.targetEl.offset();
if (
(offsetDE.left < offsetTE.left) ||
(offsetDE.left + 100 > offsetTE.left + state.targetEl.width()) ||
(offsetDE.top < offsetTE.top) ||
(offsetDE.top + 100 > offsetTE.top + state.targetEl.height())
) {
if (state.individualTargets === false) {
offsetTE = state.targetEl.offset();
if (
(offsetDE.left < offsetTE.left) ||
(offsetDE.left + 100 > offsetTE.left + state.targetEl.width()) ||
(offsetDE.top < offsetTE.top) ||
(offsetDE.top + 100 > offsetTE.top + state.targetEl.height())
) {
moveBackToSlider();
} else {
correctZIndexes();
}
} else if (state.individualTargets === true) {
targetFound = false;
checkIfOnTarget();
if (targetFound === true) {
correctZIndexes();
} else {
moveBackToSlider();
removeObjIdFromTarget();
}
}
return;
function removeObjIdFromTarget() {
var c1;
if (onTarget !== null) {
c1 = 0;
while (c1 < onTarget.draggable.length) {
if (onTarget.draggable[c1] === obj.id) {
onTarget.draggable.splice(c1, 1);
break;
}
c1 += 1;
}
onTarget = null;
}
}
function checkIfOnTarget() {
var c1, c2, target;
c1 = 0;
while (c1 < state.targets.length) {
target = state.targets[c1];
if (offsetDE.top + 50 < target.offset.top) {
c1 += 1;
continue;
}
if (offsetDE.top + 50 > target.offset.top + target.h) {
c1 += 1;
continue;
}
if (offsetDE.left + 50 < target.offset.left) {
c1 += 1;
continue;
}
if (offsetDE.left + 50 > target.offset.left + target.w) {
c1 += 1;
continue;
}
if (state.config.one_per_target === true) {
if (
(target.draggable.length === 1) &&
(target.draggable[0] !== obj.id)
) {
c1 += 1;
continue;
}
}
targetFound = true;
removeObjIdFromTarget();
onTarget = target;
target.draggable.push(obj.id);
snapToTarget(target);
break;
}
}
function snapToTarget(target) {
draggableContainerEl.css('left', (target.offset.left + 0.5 * target.w - 50));
draggableContainerEl.css('top', (target.offset.top + 0.5 * target.h - 50));
}
function correctZIndexes() {
var c1;
c1 = 0;
while (c1 < _draggables.length) {
if (parseInt(draggableContainerEl.attr('data-old-z-index'), 10) < parseInt(_draggables[c1].css('z-index'), 10)) {
_draggables[c1].css('z-index', parseInt(_draggables[c1].css('z-index'), 10) - 1);
}
c1 += 1;
}
draggableContainerEl.css('z-index', c1);
}
function moveBackToSlider() {
var c1;
draggableContainerEl.detach();
draggableContainerEl.css('position', 'static');
@@ -134,35 +246,22 @@ define(['logme'], function (logme) {
});
});
(function (c1) {
while (c1 < indexes.length) {
if ((inContainer === false) && (indexes[c1].index > DEindex)) {
indexes[c1].el.before(draggableContainerEl);
inContainer = true;
}
c1 = 0;
c1 += 1;
while (c1 < indexes.length) {
if ((inContainer === false) && (indexes[c1].index > DEindex)) {
indexes[c1].el.before(draggableContainerEl);
inContainer = true;
}
}(0));
c1 += 1;
}
if (inContainer === false) {
draggableContainerEl.appendTo(state.sliderEl);
inContainer = true;
}
}
(function (c1) {
while (c1 < _draggables.length) {
if (parseInt(draggableContainerEl.attr('data-old-z-index'), 10) < parseInt(_draggables[c1].css('z-index'), 10)) {
_draggables[c1].css('z-index', parseInt(_draggables[c1].css('z-index'), 10) - 1);
}
c1 += 1;
}
draggableContainerEl.css('z-index', c1);
}(0));
event.preventDefault();
}
}

13
common/static/js/capa/drag_and_drop/scroller.js
View File

@@ -8,8 +8,7 @@ define(['logme'], function (logme) {
return Scroller;
function Scroller(state) {
var parentEl, moveLeftEl, showEl, moveRightEL,
moveRightEl_leftMargin;
var parentEl, moveLeftEl, showEl, moveRightEL, showElLeftMargin;
parentEl = $(
'<div ' +
@@ -37,9 +36,9 @@ define(['logme'], function (logme) {
moveLeftEl.appendTo(parentEl);
moveLeftEl.click(function () {
state.showElLeftMargin += 100;
showElLeftMargin += 100;
state.sliderEl.animate({
'margin-left': state.showElLeftMargin + 'px'
'margin-left': showElLeftMargin + 'px'
});
});
@@ -56,7 +55,7 @@ define(['logme'], function (logme) {
);
showEl.appendTo(parentEl);
state.showElLeftMargin = 0;
showElLeftMargin = 0;
state.sliderEl = $(
'<div ' +
@@ -82,9 +81,9 @@ define(['logme'], function (logme) {
moveRightEl.appendTo(parentEl);
moveRightEl.click(function () {
state.showElLeftMargin -= 100;
showElLeftMargin -= 100;
state.sliderEl.animate({
'margin-left': state.showElLeftMargin + 'px'
'margin-left': showElLeftMargin + 'px'
});
});

14
common/static/js/capa/drag_and_drop/target_container.js
View File

@@ -28,15 +28,11 @@ define(['logme'], function (logme) {
);
state.targetEl.appendTo(targetElContainer);
state.targetEl_loaded = false;
$("<img/>") // Make in memory copy of image to avoid css issues.
.attr("src", state.targetEl.attr("src"))
.load(function() {
state.targetEl_height = this.height;
state.targetEl_width = this.width;
state.targetEl_loaded = true;
state.targetElWidth = null;
$('<img/>') // Make in memory copy of image to avoid css issues.
.attr('src', state.targetEl.attr('src'))
.load(function () {
state.targetElWidth = this.width;
});
state.targetEl.mousemove(

34
common/static/js/capa/drag_and_drop/targets.js
View File

@@ -8,6 +8,15 @@ define(['logme'], function (logme) {
return Targets;
function Targets(state) {
if (state.config.targets.length === 0) {
state.individualTargets = false;
return;
}
state.individualTargets = true;
state.targets = [];
(function (c1) {
while (c1 < state.config.targets.length) {
processTarget(state.config.targets[c1]);
@@ -18,17 +27,21 @@ define(['logme'], function (logme) {
return;
function processTarget(obj) {
var targetElOffset, tEl, left, top;
var targetElOffset, tEl, left, borderCss;
if (state.targetEl_loaded === false) {
if (state.targetElWidth === null) {
window.setTimeout(function () {
processTarget(obj);
}, 50);
return;
}
left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetEl_width);
top = obj.y
left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetElWidth);
borderCss = '';
if (state.config.target_outline === true) {
borderCss = 'border: 1px solid black; ';
}
tEl = $(
'<div ' +
@@ -37,15 +50,24 @@ define(['logme'], function (logme) {
'position: absolute; ' +
'width: ' + obj.w + 'px; ' +
'height: ' + obj.h + 'px; ' +
'top: ' + top + 'px; ' +
'top: ' + obj.y + 'px; ' +
'left: ' + left + 'px; ' +
'border: 1px solid black; ' +
borderCss +
'" ' +
'data-target-id="' + obj.id + '" ' +
'></div>'
);
tEl.appendTo(state.targetEl.parent());
state.targets.push({
'id': obj.id,
'offset': tEl.offset(),
'w': obj.w,
'h': obj.h,
'el': tEl,
'draggable': []
});
}
}
});