From ed35b34461d8f53ddda24f050e56d12bcc226188 Mon Sep 17 00:00:00 2001
From: Jonathon Fowler <fowlerj@usq.edu.au>
Date: Tue, 30 Apr 2019 12:34:34 +1000
Subject: [PATCH] MDL-65445 qtype_ddwtos: reposition draggables when the drops
 move

---
 question/type/ddwtos/amd/build/ddwtos.min.js |  2 +-
 question/type/ddwtos/amd/src/ddwtos.js       | 60 +++++++++++++++++++-
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/question/type/ddwtos/amd/build/ddwtos.min.js b/question/type/ddwtos/amd/build/ddwtos.min.js
index d85282069dc..18f7c42a9a9 100644
--- a/question/type/ddwtos/amd/build/ddwtos.min.js
+++ b/question/type/ddwtos/amd/build/ddwtos.min.js
@@ -1 +1 @@
-define(["jquery","core/dragdrop","core/key_codes"],function(a,b,c){"use strict";function d(a,b){this.containerId=a,b&&this.getRoot().addClass("qtype_ddwtos-readonly"),this.resizeAllDragsAndDrops(),this.cloneDrags(),this.positionDrags()}d.prototype.resizeAllDragsAndDrops=function(){var b=this;this.getRoot().find(".answercontainer > div").each(function(c,d){b.resizeAllDragsAndDropsInGroup(b.getClassnameNumericSuffix(a(d),"draggrouphomes"))})},d.prototype.resizeAllDragsAndDropsInGroup=function(a){var b=this,c=this.getRoot().find(".draggrouphomes"+a+" span.draghome"),d=0,e=0;c.each(function(a,b){d=Math.max(d,Math.ceil(b.offsetWidth)),e=Math.max(e,Math.ceil(0+b.offsetHeight))}),d+=8,e+=2,c.each(function(a,c){b.setElementSize(c,d,e)}),this.getRoot().find("span.drop.group"+a).each(function(a,c){b.setElementSize(c,d,e)})},d.prototype.setElementSize=function(b,c,d){a(b).width(c).height(d).css("lineHeight",d+"px")},d.prototype.cloneDrags=function(){var b=this;this.getRoot().find("span.draghome").each(function(c,d){b.cloneDragsForOneChoice(a(d))})},d.prototype.cloneDragsForOneChoice=function(a){if(a.hasClass("infinite"))for(var b=this.noOfDropsInGroup(this.getGroup(a)),c=0;c<b;c++)this.cloneDrag(a);else this.cloneDrag(a)},d.prototype.cloneDrag=function(a){var b=a.clone();b.removeClass("draghome").addClass("drag unplaced moodle-has-zindex").offset(a.offset()),this.getRoot().find("div.drags").append(b)},d.prototype.positionDrags=function(){var b=this,c=this.getRoot();c.find("span.drag").each(function(c,d){var e=a(d),f=b.getClassnameNumericSuffix(e,"inplace");e.addClass("unplaced").removeClass("placed").offset(b.getDragHome(b.getGroup(e),b.getChoice(e)).offset()),null!==f&&e.removeClass("inplace"+f)}),c.find("input.placeinput").each(function(d,e){var f=a(e),g=f.val();if("0"!==g){var h=b.getPlace(f);b.getUnplacedChoice(b.getGroup(f),g).removeClass("unplaced").addClass("placed inplace"+h).offset(c.find(".drop.place"+h).offset())}})},d.prototype.handleDragStart=function(c){var d=this,e=a(c.target).closest(".drag"),f=b.prepare(c);if(f.start){var g=this.getClassnameNumericSuffix(e,"inplace");null!==g&&(this.setInputValue(g,0),e.removeClass("inplace"+g)),e.addClass("beingdragged"),b.start(c,e,function(a,b,c){d.dragMove(a,b,c)},function(a,b,c){d.dragEnd(a,b,c)})}},d.prototype.dragMove=function(b,c,d){var e=this;this.getRoot().find("span.drop.group"+this.getGroup(d)).each(function(d,f){var g=a(f);e.isPointInDrop(b,c,g)?g.addClass("valid-drag-over-drop"):g.removeClass("valid-drag-over-drop")})},d.prototype.dragEnd=function(b,c,d){var e=this,f=this.getRoot(),g=!1;f.find("span.drop.group"+this.getGroup(d)).each(function(f,h){var i=a(h);return!e.isPointInDrop(b,c,i)||(i.removeClass("valid-drag-over-drop"),e.sendDragToDrop(d,i),g=!0,!1)}),g||this.sendDragHome(d)},d.prototype.sendDragToDrop=function(a,b){var c=this.getCurrentDragInPlace(this.getPlace(b));0!==c.length&&this.sendDragHome(c),0===a.length?this.setInputValue(this.getPlace(b),0):(this.setInputValue(this.getPlace(b),this.getChoice(a)),a.removeClass("unplaced").addClass("placed inplace"+this.getPlace(b)),this.animateTo(a,b))},d.prototype.sendDragHome=function(a){a.removeClass("placed").addClass("unplaced");var b=this.getClassnameNumericSuffix(a,"inplace");null!==b&&a.removeClass("inplace"+b),this.animateTo(a,this.getDragHome(this.getGroup(a),this.getChoice(a)))},d.prototype.handleKeyPress=function(b){var d=a(b.target).closest(".drop"),e=this.getCurrentDragInPlace(this.getPlace(d)),f=a();switch(b.keyCode){case c.space:case c.arrowRight:case c.arrowDown:f=this.getNextDrag(this.getGroup(d),e);break;case c.arrowLeft:case c.arrowUp:f=this.getPreviousDrag(this.getGroup(d),e);break;case c.escape:break;default:return}b.preventDefault(),this.sendDragToDrop(f,d)},d.prototype.getNextDrag=function(a,b){var c,d=this.noOfChoicesInGroup(a);c=0===b.length?1:this.getChoice(b)+1;for(var e=this.getUnplacedChoice(a,c);0===e.length&&c<d;)c++,e=this.getUnplacedChoice(a,c);return e},d.prototype.getPreviousDrag=function(a,b){var c;c=0===b.length?this.noOfChoicesInGroup(a):this.getChoice(b)-1;for(var d=this.getUnplacedChoice(a,c);0===d.length&&c>1;)c--,d=this.getUnplacedChoice(a,c);return d},d.prototype.animateTo=function(a,b){var c=a.offset(),d=b.offset();a.addClass("beingdragged"),a.animate({left:parseInt(a.css("left"))+d.left-c.left,top:parseInt(a.css("top"))+d.top-c.top},{duration:"fast",done:function(){a.removeClass("beingdragged"),a.offset(d)}})},d.prototype.isPointInDrop=function(a,b,c){var d=c.offset();return a>=d.left&&a<d.left+c.width()&&b>=d.top&&b<d.top+c.height()},d.prototype.setInputValue=function(a,b){this.getRoot().find("input.placeinput.place"+a).val(b)},d.prototype.getRoot=function(){return a(document.getElementById(this.containerId))},d.prototype.getDragHome=function(a,b){return this.getRoot().find(".draghome.group"+a+".choice"+b)},d.prototype.getUnplacedChoice=function(a,b){return this.getRoot().find(".drag.group"+a+".choice"+b+".unplaced").slice(0,1)},d.prototype.getCurrentDragInPlace=function(a){return this.getRoot().find("span.drag.inplace"+a)},d.prototype.noOfDropsInGroup=function(a){return this.getRoot().find(".drop.group"+a).length},d.prototype.noOfChoicesInGroup=function(a){return this.getRoot().find(".draghome.group"+a).length},d.prototype.getClassnameNumericSuffix=function(a,b){var c=a.attr("class");if(""!==c)for(var d=c.split(" "),e=0;e<d.length;e++){var f=new RegExp("^"+b+"([0-9])+$");if(f.test(d[e])){var g=new RegExp("([0-9])+$"),h=g.exec(d[e]);return Number(h[0])}}return null},d.prototype.getChoice=function(a){return this.getClassnameNumericSuffix(a,"choice")},d.prototype.getGroup=function(a){return this.getClassnameNumericSuffix(a,"group")},d.prototype.getPlace=function(a){return this.getClassnameNumericSuffix(a,"place")};var e={eventHandlersInitialised:!1,questions:{},init:function(a,b){e.questions[a]=new d(a,b),e.eventHandlersInitialised||(e.setupEventHandlers(),e.eventHandlersInitialised=!0)},setupEventHandlers:function(){a("body").on("mousedown touchstart",".que.ddwtos:not(.qtype_ddwtos-readonly) span.drag",e.handleDragStart).on("keydown",".que.ddwtos:not(.qtype_ddwtos-readonly) span.drop",e.handleKeyPress),a(window).on("resize",e.handleWindowResize)},handleDragStart:function(a){a.preventDefault();var b=e.getQuestionForEvent(a);b&&b.handleDragStart(a)},handleKeyPress:function(a){var b=e.getQuestionForEvent(a);b&&b.handleKeyPress(a)},handleWindowResize:function(){for(var a in e.questions)e.questions.hasOwnProperty(a)&&e.questions[a].positionDrags()},getQuestionForEvent:function(b){var c=a(b.currentTarget).closest(".que.ddwtos").attr("id");return e.questions[c]}};return{init:e.init}});
\ No newline at end of file
+define(["jquery","core/dragdrop","core/key_codes"],function(a,b,c){"use strict";function d(a,b){this.containerId=a,b&&this.getRoot().addClass("qtype_ddwtos-readonly"),this.resizeAllDragsAndDrops(),this.cloneDrags(),this.positionDrags()}d.prototype.resizeAllDragsAndDrops=function(){var b=this;this.getRoot().find(".answercontainer > div").each(function(c,d){b.resizeAllDragsAndDropsInGroup(b.getClassnameNumericSuffix(a(d),"draggrouphomes"))})},d.prototype.resizeAllDragsAndDropsInGroup=function(a){var b=this,c=this.getRoot().find(".draggrouphomes"+a+" span.draghome"),d=0,e=0;c.each(function(a,b){d=Math.max(d,Math.ceil(b.offsetWidth)),e=Math.max(e,Math.ceil(0+b.offsetHeight))}),d+=8,e+=2,c.each(function(a,c){b.setElementSize(c,d,e)}),this.getRoot().find("span.drop.group"+a).each(function(a,c){b.setElementSize(c,d,e)})},d.prototype.setElementSize=function(b,c,d){a(b).width(c).height(d).css("lineHeight",d+"px")},d.prototype.cloneDrags=function(){var b=this;this.getRoot().find("span.draghome").each(function(c,d){b.cloneDragsForOneChoice(a(d))})},d.prototype.cloneDragsForOneChoice=function(a){if(a.hasClass("infinite"))for(var b=this.noOfDropsInGroup(this.getGroup(a)),c=0;c<b;c++)this.cloneDrag(a);else this.cloneDrag(a)},d.prototype.cloneDrag=function(a){var b=a.clone();b.removeClass("draghome").addClass("drag unplaced moodle-has-zindex").offset(a.offset()),this.getRoot().find("div.drags").append(b)},d.prototype.positionDrags=function(){var b=this,c=this.getRoot();c.find("span.drag").each(function(c,d){var e=a(d),f=b.getClassnameNumericSuffix(e,"inplace");e.addClass("unplaced").removeClass("placed").offset(b.getDragHome(b.getGroup(e),b.getChoice(e)).offset()),null!==f&&e.removeClass("inplace"+f)}),c.find("input.placeinput").each(function(d,e){var f=a(e),g=f.val(),h=b.getPlace(f),i=c.find(".drop.place"+h),j=i.offset();i.data("prev-top",j.top).data("prev-left",j.left),"0"!==g&&b.getUnplacedChoice(b.getGroup(f),g).removeClass("unplaced").addClass("placed inplace"+h).offset(c.find(".drop.place"+h).offset())})},d.prototype.fixLayoutIfDropsMoved=function(){var b=this,c=this.getRoot(),d=!1;c.find("input.placeinput").each(function(e,f){var g=b.getPlace(a(f)),h=c.find(".drop.place"+g),i=h.offset(),j=h.data("prev-top"),k=h.data("prev-left");void 0!==k&&void 0!==j&&(j===i.top&&k===i.left||(d=!0))}),d&&this.positionDrags()},d.prototype.handleDragStart=function(c){var d=this,e=a(c.target).closest(".drag"),f=b.prepare(c);if(f.start){var g=this.getClassnameNumericSuffix(e,"inplace");null!==g&&(this.setInputValue(g,0),e.removeClass("inplace"+g)),e.addClass("beingdragged"),b.start(c,e,function(a,b,c){d.dragMove(a,b,c)},function(a,b,c){d.dragEnd(a,b,c)})}},d.prototype.dragMove=function(b,c,d){var e=this;this.getRoot().find("span.drop.group"+this.getGroup(d)).each(function(d,f){var g=a(f);e.isPointInDrop(b,c,g)?g.addClass("valid-drag-over-drop"):g.removeClass("valid-drag-over-drop")})},d.prototype.dragEnd=function(b,c,d){var e=this,f=this.getRoot(),g=!1;f.find("span.drop.group"+this.getGroup(d)).each(function(f,h){var i=a(h);return!e.isPointInDrop(b,c,i)||(i.removeClass("valid-drag-over-drop"),e.sendDragToDrop(d,i),g=!0,!1)}),g||this.sendDragHome(d)},d.prototype.sendDragToDrop=function(a,b){var c=this.getCurrentDragInPlace(this.getPlace(b));0!==c.length&&this.sendDragHome(c),0===a.length?this.setInputValue(this.getPlace(b),0):(this.setInputValue(this.getPlace(b),this.getChoice(a)),a.removeClass("unplaced").addClass("placed inplace"+this.getPlace(b)),this.animateTo(a,b))},d.prototype.sendDragHome=function(a){a.removeClass("placed").addClass("unplaced");var b=this.getClassnameNumericSuffix(a,"inplace");null!==b&&a.removeClass("inplace"+b),this.animateTo(a,this.getDragHome(this.getGroup(a),this.getChoice(a)))},d.prototype.handleKeyPress=function(b){var d=a(b.target).closest(".drop"),e=this.getCurrentDragInPlace(this.getPlace(d)),f=a();switch(b.keyCode){case c.space:case c.arrowRight:case c.arrowDown:f=this.getNextDrag(this.getGroup(d),e);break;case c.arrowLeft:case c.arrowUp:f=this.getPreviousDrag(this.getGroup(d),e);break;case c.escape:break;default:return}b.preventDefault(),this.sendDragToDrop(f,d)},d.prototype.getNextDrag=function(a,b){var c,d=this.noOfChoicesInGroup(a);c=0===b.length?1:this.getChoice(b)+1;for(var e=this.getUnplacedChoice(a,c);0===e.length&&c<d;)c++,e=this.getUnplacedChoice(a,c);return e},d.prototype.getPreviousDrag=function(a,b){var c;c=0===b.length?this.noOfChoicesInGroup(a):this.getChoice(b)-1;for(var d=this.getUnplacedChoice(a,c);0===d.length&&c>1;)c--,d=this.getUnplacedChoice(a,c);return d},d.prototype.animateTo=function(a,b){var c=a.offset(),d=b.offset();a.addClass("beingdragged"),a.animate({left:parseInt(a.css("left"))+d.left-c.left,top:parseInt(a.css("top"))+d.top-c.top},{duration:"fast",done:function(){a.removeClass("beingdragged"),a.offset(d)}})},d.prototype.isPointInDrop=function(a,b,c){var d=c.offset();return a>=d.left&&a<d.left+c.width()&&b>=d.top&&b<d.top+c.height()},d.prototype.setInputValue=function(a,b){this.getRoot().find("input.placeinput.place"+a).val(b)},d.prototype.getRoot=function(){return a(document.getElementById(this.containerId))},d.prototype.getDragHome=function(a,b){return this.getRoot().find(".draghome.group"+a+".choice"+b)},d.prototype.getUnplacedChoice=function(a,b){return this.getRoot().find(".drag.group"+a+".choice"+b+".unplaced").slice(0,1)},d.prototype.getCurrentDragInPlace=function(a){return this.getRoot().find("span.drag.inplace"+a)},d.prototype.noOfDropsInGroup=function(a){return this.getRoot().find(".drop.group"+a).length},d.prototype.noOfChoicesInGroup=function(a){return this.getRoot().find(".draghome.group"+a).length},d.prototype.getClassnameNumericSuffix=function(a,b){var c=a.attr("class");if(""!==c)for(var d=c.split(" "),e=0;e<d.length;e++){var f=new RegExp("^"+b+"([0-9])+$");if(f.test(d[e])){var g=new RegExp("([0-9])+$"),h=g.exec(d[e]);return Number(h[0])}}return null},d.prototype.getChoice=function(a){return this.getClassnameNumericSuffix(a,"choice")},d.prototype.getGroup=function(a){return this.getClassnameNumericSuffix(a,"group")},d.prototype.getPlace=function(a){return this.getClassnameNumericSuffix(a,"place")};var e={eventHandlersInitialised:!1,questions:{},init:function(a,b){e.questions[a]=new d(a,b),e.eventHandlersInitialised||(e.setupEventHandlers(),e.eventHandlersInitialised=!0)},setupEventHandlers:function(){a("body").on("mousedown touchstart",".que.ddwtos:not(.qtype_ddwtos-readonly) span.drag",e.handleDragStart).on("keydown",".que.ddwtos:not(.qtype_ddwtos-readonly) span.drop",e.handleKeyPress),a(window).on("resize",e.handleWindowResize),setTimeout(e.fixLayoutIfThingsMoved,100)},handleDragStart:function(a){a.preventDefault();var b=e.getQuestionForEvent(a);b&&b.handleDragStart(a)},handleKeyPress:function(a){var b=e.getQuestionForEvent(a);b&&b.handleKeyPress(a)},handleWindowResize:function(){for(var a in e.questions)e.questions.hasOwnProperty(a)&&e.questions[a].positionDrags()},fixLayoutIfThingsMoved:function(){for(var a in e.questions)e.questions.hasOwnProperty(a)&&e.questions[a].fixLayoutIfDropsMoved();setTimeout(e.fixLayoutIfThingsMoved,100)},getQuestionForEvent:function(b){var c=a(b.currentTarget).closest(".que.ddwtos").attr("id");return e.questions[c]}};return{init:e.init}});
\ No newline at end of file
diff --git a/question/type/ddwtos/amd/src/ddwtos.js b/question/type/ddwtos/amd/src/ddwtos.js
index 31ed6ae4829..d37c9501b76 100644
--- a/question/type/ddwtos/amd/src/ddwtos.js
+++ b/question/type/ddwtos/amd/src/ddwtos.js
@@ -176,13 +176,19 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
         // Then place the once that should be placed.
         root.find('input.placeinput').each(function(i, inputNode) {
             var input = $(inputNode),
-                choice = input.val();
+                choice = input.val(),
+                place = thisQ.getPlace(input);
+
+            // Record the last known position of the drop.
+            var drop = root.find('.drop.place' + place),
+                dropPosition = drop.offset();
+            drop.data('prev-top', dropPosition.top).data('prev-left', dropPosition.left);
+
             if (choice === '0') {
                 // No item in this place.
                 return;
             }
 
-            var place = thisQ.getPlace(input);
             thisQ.getUnplacedChoice(thisQ.getGroup(input), choice)
                 .removeClass('unplaced')
                 .addClass('placed inplace' + place)
@@ -190,6 +196,37 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
         });
     };
 
+    /**
+     * Check to see if a drop target has moved. If so, refresh the layout.
+     */
+    DragDropToTextQuestion.prototype.fixLayoutIfDropsMoved = function() {
+        var thisQ = this,
+            root = this.getRoot(),
+            didMove = false;
+
+        root.find('input.placeinput').each(function(i, inputNode) {
+            var place = thisQ.getPlace($(inputNode)),
+                drop = root.find('.drop.place' + place),
+                dropPosition = drop.offset(),
+                prevTop = drop.data('prev-top'),
+                prevLeft = drop.data('prev-left');
+            if (prevLeft === undefined || prevTop === undefined) {
+                // Question is not set up yet. Nothing to do.
+                return;
+            }
+            if (prevTop === dropPosition.top && prevLeft === dropPosition.left) {
+                // Things have not moved.
+                return;
+            }
+            didMove = true;
+        });
+
+        if (didMove) {
+            // We need to reposition things.
+            this.positionDrags();
+        }
+    };
+
     /**
      * Handles the start of dragging an item.
      *
@@ -607,6 +644,7 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
                     questionManager.handleKeyPress);
 
             $(window).on('resize', questionManager.handleWindowResize);
+            setTimeout(questionManager.fixLayoutIfThingsMoved, 100);
         },
 
         /**
@@ -643,6 +681,24 @@ define(['jquery', 'core/dragdrop', 'core/key_codes'], function($, dragDrop, keys
             }
         },
 
+        /**
+         * Sometimes, despite our best efforts, things change in a way that cannot
+         * be specifically caught (e.g. dock expanding or collapsing in Boost).
+         * Therefore, we need to periodically check everything is in the right position.
+         */
+        fixLayoutIfThingsMoved: function() {
+            for (var containerId in questionManager.questions) {
+                if (questionManager.questions.hasOwnProperty(containerId)) {
+                    questionManager.questions[containerId].fixLayoutIfDropsMoved();
+                }
+            }
+
+            // We use setTimeout after finishing work, rather than setInterval,
+            // in case positioning things is slow. We want 100 ms gap
+            // between executions, not what setInterval does.
+            setTimeout(questionManager.fixLayoutIfThingsMoved, 100);
+        },
+
         /**
          * Given an event, work out which question it affects.
          *