From 86d133664aadc4ce2f0948d5c4331953b3831310 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Thu, 27 Dec 2012 07:43:49 +0200
Subject: [PATCH] Fixing bugs. Now resize of window does not mess up targets.
 Dragging is much smoother on touch pad. Removed border from draggable when it
 is not in slider. The whole applet fits into min-width of main part of page.

---
 .../js/capa/drag_and_drop/base_image.js       | 22 +++---
 .../static/js/capa/drag_and_drop/container.js |  3 +
 .../js/capa/drag_and_drop/draggables.js       | 79 +++++++++++++------
 common/static/js/capa/drag_and_drop/main.js   | 14 ++--
 .../static/js/capa/drag_and_drop/scroller.js  | 18 +++--
 .../static/js/capa/drag_and_drop/targets.js   | 10 +--
 6 files changed, 90 insertions(+), 56 deletions(-)

diff --git a/common/static/js/capa/drag_and_drop/base_image.js b/common/static/js/capa/drag_and_drop/base_image.js
index 9fa5ef6f52..185325512c 100644
--- a/common/static/js/capa/drag_and_drop/base_image.js
+++ b/common/static/js/capa/drag_and_drop/base_image.js
@@ -8,34 +8,34 @@ define(['logme'], function (logme) {
     return BaseImage;
 
     function BaseImage(state) {
-        var targetImgSrc, targetElContainer, mouseMoveDiv;
+        var targetImgSrc, baseImageElContainer, mouseMoveDiv;
 
         targetImgSrc = state.config.imageDir + '/' + state.config.base_image;
 
-        targetElContainer = $(
+        baseImageElContainer = $(
             '<div ' +
+                'class="base_image_container" ' +
                 'style=" ' +
                     'position: relative; ' +
-                    'text-align: center; ' +
                 '" ' +
             '></div>'
         );
 
-        state.targetEl = $(
+        state.baseImageEl = $(
             '<img ' +
                 'src="' + targetImgSrc + '" ' +
             '/>'
         );
-        state.targetEl.appendTo(targetElContainer);
+        state.baseImageEl.appendTo(baseImageElContainer);
 
-        state.targetElWidth = null;
+        state.baseImageElWidth = null;
         $('<img/>') // Make in memory copy of image to avoid css issues.
-            .attr('src', state.targetEl.attr('src'))
+            .attr('src', state.baseImageEl.attr('src'))
             .load(function () {
-                state.targetElWidth = this.width;
+                state.baseImageElWidth = this.width;
             });
 
-        // state.targetEl.mousemove(
+        // state.baseImageEl.mousemove(
         //     function (event) {
         //         mouseMoveDiv.html(
         //             '[' + event.offsetX + ', ' + event.offsetY + ']'
@@ -53,9 +53,9 @@ define(['logme'], function (logme) {
                 '" ' +
             '></div>'
         );
-        mouseMoveDiv.appendTo(targetElContainer);
+        mouseMoveDiv.appendTo(baseImageElContainer);
 
-        targetElContainer.appendTo(state.containerEl);
+        baseImageElContainer.appendTo(state.containerEl);
     }
 });
 
diff --git a/common/static/js/capa/drag_and_drop/container.js b/common/static/js/capa/drag_and_drop/container.js
index 766a020802..e5a7de447f 100644
--- a/common/static/js/capa/drag_and_drop/container.js
+++ b/common/static/js/capa/drag_and_drop/container.js
@@ -12,6 +12,9 @@ define(['logme'], function (logme) {
             '<div ' +
                 'style=" ' +
                     'clear: both; ' +
+                    'width: 665px; ' +
+                    'margin-left: auto; ' +
+                    'margin-right: auto; ' +
                 '" ' +
             '></div>'
         );
diff --git a/common/static/js/capa/drag_and_drop/draggables.js b/common/static/js/capa/drag_and_drop/draggables.js
index bb6b52a7a4..9186c0d837 100644
--- a/common/static/js/capa/drag_and_drop/draggables.js
+++ b/common/static/js/capa/drag_and_drop/draggables.js
@@ -20,6 +20,17 @@ define(['logme', 'update_input'], function (logme, updateInput) {
             }
         }(0));
 
+        state.currentMovingDraggable = null;
+
+        $(document).mousemove(function (event) {
+            normalizeEvent(event);
+
+            if (state.currentMovingDraggable !== null) {
+                state.currentMovingDraggable.css('left', event.pageX - state.baseImageEl.offset().left - 50);
+                state.currentMovingDraggable.css('top', event.pageY - state.baseImageEl.offset().top - 50);
+            }
+        });
+
         return;
 
         function processDraggable(obj, index) {
@@ -81,7 +92,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
             draggableContainerEl.mousedown(mouseDown);
             draggableContainerEl.mouseup(mouseUp);
             draggableContainerEl.mousemove(mouseMove);
-            draggableContainerEl.mouseleave(mouseLeave);
+            // draggableContainerEl.mouseleave(mouseLeave);
 
             if (state.individualTargets === false) {
                 updateInput(state);
@@ -91,12 +102,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
 
             function mouseDown(event) {
                 if (mousePressed === false) {
+                    state.currentMovingDraggable = draggableContainerEl;
+                    normalizeEvent(event);
+
                     if (inContainer === true) {
                         draggableContainerEl.detach();
+                        draggableContainerEl.css('border', 'none');
                         draggableContainerEl.css('position', 'absolute');
-                        draggableContainerEl.css('left', event.pageX - 50);
-                        draggableContainerEl.css('top', event.pageY - 50);
-                        draggableContainerEl.appendTo(state.containerEl);
+                        draggableContainerEl.css('left', event.pageX - state.baseImageEl.offset().left - 50);
+                        draggableContainerEl.css('top', event.pageY - state.baseImageEl.offset().top - 50);
+                        draggableContainerEl.appendTo(state.baseImageEl.parent());
 
                         inContainer = false;
                     }
@@ -109,40 +124,43 @@ define(['logme', 'update_input'], function (logme, updateInput) {
                 }
             }
 
-            function mouseUp() {
+            function mouseUp(event) {
                 if (mousePressed === true) {
-                    checkLandingElement();
+                    state.currentMovingDraggable = null;
+                    normalizeEvent(event);
+
+                    checkLandingElement(event);
                 }
             }
 
             function mouseMove() {
                 if (mousePressed === true) {
-                    draggableContainerEl.css('left', (event.pageX - 50));
-                    draggableContainerEl.css('top', (event.pageY - 50));
+                    draggableContainerEl.css('left', event.pageX - state.baseImageEl.offset().left - 50);
+                    draggableContainerEl.css('top', event.pageY - state.baseImageEl.offset().top - 50);
                 }
             }
 
-            function mouseLeave() {
-                if (mousePressed === true) {
-                    checkLandingElement();
-                }
-            }
+            // function mouseLeave(event) {
+            //     if (mousePressed === true) {
+            //         normalizeEvent(event);
+            //
+            //         checkLandingElement(event);
+            //     }
+            // }
 
-            function checkLandingElement() {
-                var offsetDE, offsetTE, indexes, DEindex, targetFound;
+            function checkLandingElement(event) {
+                var offsetDE, indexes, DEindex, targetFound;
 
                 mousePressed = false;
 
-                offsetDE = draggableContainerEl.offset();
+                offsetDE = draggableContainerEl.position();
 
                 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())
+                        (offsetDE.left < 0) ||
+                        (offsetDE.left + 100 > state.baseImageEl.width()) ||
+                        (offsetDE.top < 0) ||
+                        (offsetDE.top + 100 > state.baseImageEl.height())
                     ) {
                         moveBackToSlider();
 
@@ -151,8 +169,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
                     } else {
                         correctZIndexes();
 
-                        draggableObj.x = offsetDE.left + 50 - offsetTE.left;
-                        draggableObj.y = offsetDE.top + 50 - offsetTE.top;
+                        draggableObj.x = offsetDE.left + 50;
+                        draggableObj.y = offsetDE.top + 50;
                     }
                 } else if (state.individualTargets === true) {
                     targetFound = false;
@@ -238,8 +256,8 @@ define(['logme', 'update_input'], function (logme, updateInput) {
                 }
 
                 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));
+                    draggableContainerEl.css('left', target.offset.left + 0.5 * target.w - 50);
+                    draggableContainerEl.css('top', target.offset.top + 0.5 * target.h - 50);
                 }
 
                 function correctZIndexes() {
@@ -288,10 +306,19 @@ define(['logme', 'update_input'], function (logme, updateInput) {
                         draggableContainerEl.appendTo(state.sliderEl);
                         inContainer = true;
                     }
+
+                    draggableContainerEl.css('border', '1px solid gray');
                 }
             }
         }
 
+        function normalizeEvent(event) {
+            if(!event.offsetX) {
+                event.offsetX = (event.pageX - $(event.target).offset().left);
+                event.offsetY = (event.pageY - $(event.target).offset().top);
+            }
+            return event;
+        }
     }
 });
 
diff --git a/common/static/js/capa/drag_and_drop/main.js b/common/static/js/capa/drag_and_drop/main.js
index 7a18eacd93..9027f55d01 100644
--- a/common/static/js/capa/drag_and_drop/main.js
+++ b/common/static/js/capa/drag_and_drop/main.js
@@ -32,13 +32,6 @@ define(
             return;
         }
 
-        imageDir = $(value).attr('data-course-folder');
-        if (typeof imageDir !== 'string') {
-            logme('ERROR: Could not find the name of the image directory.');
-
-            return;
-        }
-
         try {
             config = JSON.parse($('#drag_and_drop_json_' + problemId).html());
         } catch (err) {
@@ -48,6 +41,13 @@ define(
             return;
         }
 
+        imageDir = $(value).attr('data-course-folder');
+        if (typeof imageDir !== 'string') {
+            logme('ERROR: Could not find the name of the image directory.');
+
+            return;
+        }
+
         state = State(problemId);
 
         if (configParser(config, imageDir, state) !== true) {
diff --git a/common/static/js/capa/drag_and_drop/scroller.js b/common/static/js/capa/drag_and_drop/scroller.js
index fc11740611..6c2950e458 100644
--- a/common/static/js/capa/drag_and_drop/scroller.js
+++ b/common/static/js/capa/drag_and_drop/scroller.js
@@ -13,7 +13,7 @@ define(['logme'], function (logme) {
         parentEl = $(
             '<div ' +
                 'style=" ' +
-                    'width: 100%; ' +
+                    'width: 665px; ' +
                     'height: 102px; ' +
                     'margin-left: auto; ' +
                     'margin-right: auto; ' +
@@ -24,7 +24,7 @@ define(['logme'], function (logme) {
         moveLeftEl = $(
             '<div ' +
                 'style=" ' +
-                    'width: 6%; ' +
+                    'width: 40px; ' +
                     'height: 102px; ' +
                     'display: inline; ' +
                     'float: left; ' +
@@ -67,13 +67,15 @@ define(['logme'], function (logme) {
             showElLeftMargin += 102;
             state.sliderEl.animate({
                 'margin-left': showElLeftMargin + 'px'
-            }, 100);
+            }, 100, function () {
+                // Check if at the end, and make arrow less visible.
+            });
         });
 
         showEl = $(
             '<div ' +
                 'style=" ' +
-                    'width: 714px; ' +
+                    'width: 585px; ' +
                     'height: 102px; ' +
                     'overflow: hidden; ' +
                     'display: inline; ' +
@@ -98,7 +100,7 @@ define(['logme'], function (logme) {
         moveRightEl = $(
             '<div ' +
                 'style=" ' +
-                    'width: 6%; ' +
+                    'width: 40px; ' +
                     'height: 102px; ' +
                     'display: inline; ' +
                     'float: left; ' +
@@ -134,14 +136,16 @@ define(['logme'], function (logme) {
         moveRightEl.appendTo(parentEl);
 
         moveRightEl.click(function () {
-            if (showElLeftMargin < -102 * (state.sliderEl.children().length - 8)) {
+            if (showElLeftMargin < -102 * (state.sliderEl.children().length - 6)) {
                 return;
             }
 
             showElLeftMargin -= 102;
             state.sliderEl.animate({
                 'margin-left': showElLeftMargin + 'px'
-            }, 100);
+            }, 100, function () {
+                // Check if at the end, and make arrow less visible.
+            });
         });
 
         parentEl.appendTo(state.containerEl);
diff --git a/common/static/js/capa/drag_and_drop/targets.js b/common/static/js/capa/drag_and_drop/targets.js
index eddc51f440..c1a5b5e265 100644
--- a/common/static/js/capa/drag_and_drop/targets.js
+++ b/common/static/js/capa/drag_and_drop/targets.js
@@ -20,16 +20,16 @@ define(['logme', 'update_input'], function (logme, updateInput) {
         return;
 
         function processTarget(obj) {
-            var targetElOffset, tEl, left, borderCss;
+            var baseImageElOffset, tEl, left, borderCss;
 
-            if (state.targetElWidth === null) {
+            if (state.baseImageElWidth === null) {
                 window.setTimeout(function () {
                     processTarget(obj);
                 }, 50);
                 return;
             }
 
-            left = obj.x + 0.5 * (state.targetEl.parent().width() - state.targetElWidth);
+            left = obj.x + 0.5 * (state.baseImageEl.parent().width() - state.baseImageElWidth);
 
             borderCss = '';
             if (state.config.target_outline === true) {
@@ -51,11 +51,11 @@ define(['logme', 'update_input'], function (logme, updateInput) {
                 '></div>'
             );
 
-            tEl.appendTo(state.targetEl.parent());
+            tEl.appendTo(state.baseImageEl.parent());
 
             state.targets.push({
                 'id': obj.id,
-                'offset': tEl.offset(),
+                'offset': tEl.position(),
                 'w': obj.w,
                 'h': obj.h,
                 'el': tEl,