From c34fbbe19fe314dc73b87806ec125853db208ce7 Mon Sep 17 00:00:00 2001 From: Valera Rozuvan Date: Wed, 26 Dec 2012 07:52:28 +0200 Subject: [PATCH] Added support for individual targets. Work in progress. Part 7. --- .../js/capa/drag_and_drop/draggables.js | 173 ++++++++++++++---- .../static/js/capa/drag_and_drop/scroller.js | 13 +- .../js/capa/drag_and_drop/target_container.js | 14 +- .../static/js/capa/drag_and_drop/targets.js | 34 +++- 4 files changed, 175 insertions(+), 59 deletions(-) diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js index 0eaf918748..17c68ae22d 100644 --- a/common/static/js/capa/drag_and_drop/draggables.js +++ b/common/static/js/capa/drag_and_drop/draggables.js @@ -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 = $( '
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(); } } diff --git a/common/static/js/capa/drag_and_drop/scroller.js b/common/static/js/capa/drag_and_drop/scroller.js index d6d945e329..4048b50c94 100644 --- a/common/static/js/capa/drag_and_drop/scroller.js +++ b/common/static/js/capa/drag_and_drop/scroller.js @@ -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 = $( '
") // 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; + $('') // 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( diff --git a/common/static/js/capa/drag_and_drop/targets.js b/common/static/js/capa/drag_and_drop/targets.js index b41123cc69..44431becba 100644 --- a/common/static/js/capa/drag_and_drop/targets.js +++ b/common/static/js/capa/drag_and_drop/targets.js @@ -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 = $( '
' ); tEl.appendTo(state.targetEl.parent()); + + state.targets.push({ + 'id': obj.id, + 'offset': tEl.offset(), + 'w': obj.w, + 'h': obj.h, + 'el': tEl, + 'draggable': [] + }); } } });