MDL-62411 qtype_ddmarker: add dragdrop helper libarary

This was created by the Open University a couple of years ago, and is
very helpful for making dragging work reliably on a range of browsers
and with both mouse and touch-screens.

Sadly, HTML5 drag-drop is not yet ready for prime-time.

lib/amd/build/dragdrop.min.js

@@ -0,0 +1 @@
+define(["jquery","core/autoscroll"],function(a,b){var c={eventCaptureOptions:{passive:!1,capture:!0},dragProxy:null,onMove:null,onDrop:null,initialPosition:null,initialX:null,initialY:null,touching:null,prepare:function(a){a.preventDefault();var b;if(b="touchstart"===a.type?null===c.touching&&a.changedTouches.length>0:1===a.which){var d=c.getEventXY(a);return d.start=!0,d}return{start:!1}},start:function(a,d,e,f){var g=c.getEventXY(a);switch(c.initialX=g.x,c.initialY=g.y,c.initialPosition=d.offset(),c.dragProxy=d,c.onMove=e,c.onDrop=f,a.type){case"mousedown":c.addEventSpecial("mousemove",c.mouseMove),c.addEventSpecial("mouseup",c.mouseUp);break;case"touchstart":c.addEventSpecial("touchend",c.touchEnd),c.addEventSpecial("touchcancel",c.touchEnd),c.addEventSpecial("touchmove",c.touchMove),c.touching=a.changedTouches[0].identifier;break;default:throw new Error("Unexpected event type: "+a.type)}b.start(c.scroll)},addEventSpecial:function(a,b){try{window.addEventListener(a,b,c.eventCaptureOptions)}catch(d){c.eventCaptureOptions=!0,window.addEventListener(a,b,c.eventCaptureOptions)}},getEventXY:function(a){switch(a.type){case"touchstart":return{x:a.changedTouches[0].pageX,y:a.changedTouches[0].pageY};case"mousedown":return{x:a.pageX,y:a.pageY};default:throw new Error("Unexpected event type: "+a.type)}},touchMove:function(a){a.preventDefault();for(var b=0;b<a.changedTouches.length;b++)a.changedTouches[b].identifier===c.touching&&c.handleMove(a.changedTouches[b].pageX,a.changedTouches[b].pageY)},mouseMove:function(a){c.handleMove(a.pageX,a.pageY)},handleMove:function(b,d){var e=c.dragProxy.offset(),f=e.top-parseInt(c.dragProxy.css("top")),g=e.left-parseInt(c.dragProxy.css("left")),h=a(document).height()-c.dragProxy.outerHeight()-f,i=a(document).width()-c.dragProxy.outerWidth()-g,j=-f,k=-g,l=c.initialPosition,m={top:Math.max(j,Math.min(h,l.top+(d-c.initialY)-f)),left:Math.max(k,Math.min(i,l.left+(b-c.initialX)-g))};c.dragProxy.css(m),c.onMove(b,d,c.dragProxy)},touchEnd:function(a){a.preventDefault();for(var b=0;b<a.changedTouches.length;b++)a.changedTouches[b].identifier===c.touching&&c.handleEnd(a.changedTouches[b].pageX,a.changedTouches[b].pageY)},mouseUp:function(a){c.handleEnd(a.pageX,a.pageY)},handleEnd:function(a,d){null!==c.touching?(window.removeEventListener("touchend",c.touchEnd,c.eventCaptureOptions),window.removeEventListener("touchcancel",c.touchEnd,c.eventCaptureOptions),window.removeEventListener("touchmove",c.touchMove,c.eventCaptureOptions),c.touching=null):(window.removeEventListener("mousemove",c.mouseMove,c.eventCaptureOptions),window.removeEventListener("mouseup",c.mouseUp,c.eventCaptureOptions)),b.stop(),c.onDrop(a,d,c.dragProxy)},scroll:function(b){var d=a(document).height()-c.dragProxy.outerHeight(),e=c.dragProxy.offset();e.top=Math.min(d,e.top+b),c.dragProxy.css(e)}};return{prepare:c.prepare,start:c.start}});

lib/amd/src/dragdrop.js

@@ -0,0 +1,340 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/*
+ * JavaScript to handle drag operations, including automatic scrolling.
+ *
+ * Note: this module is defined statically. It is a singleton. You
+ * can only have one use of it active at any time. However, you
+ * can only drag one thing at a time, this is not a problem in practice.
+ *
+ * @module     core/dragdrop
+ * @class      dragdrop
+ * @package    core
+ * @copyright  2016 The Open University
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ * @since      3.6
+ */
+define(['jquery', 'core/autoscroll'], function($, autoScroll) {
+    /**
+     * @alias module:core/dragdrop
+     */
+    var dragdrop = {
+        /**
+         * A boolean or options argument depending on whether browser supports passive events.
+         * @private
+         */
+        eventCaptureOptions: {passive: false, capture: true},
+
+        /**
+         * Drag proxy if any.
+         * @private
+         */
+        dragProxy: null,
+
+        /**
+         * Function called on move.
+         * @private
+         */
+        onMove: null,
+
+        /**
+         * Function called on drop.
+         * @private
+         */
+        onDrop: null,
+
+        /**
+         * Initial position of proxy at drag start.
+         */
+        initialPosition: null,
+
+        /**
+         * Initial page X of cursor at drag start.
+         */
+        initialX: null,
+
+        /**
+         * Initial page Y of cursor at drag start.
+         */
+        initialY: null,
+
+        /**
+         * If touch event is in progress, this will be the id, otherwise null
+         */
+        touching: null,
+
+        /**
+         * Prepares to begin a drag operation - call with a mousedown or touchstart event.
+         *
+         * If the returned object has 'start' true, then you can set up a drag proxy, and call
+         * start. This function will call preventDefault automatically regardless of whether
+         * starting or not.
+         *
+         * @public
+         * @param {Object} event Event (should be either mousedown or touchstart)
+         * @return {Object} Object with start (boolean flag) and x, y (only if flag true) values
+         */
+        prepare: function(event) {
+            event.preventDefault();
+            var start;
+            if (event.type === 'touchstart') {
+                // For touch, start if there's at least one touch and we are not currently doing
+                // a touch event.
+                start = (dragdrop.touching === null) && event.changedTouches.length > 0;
+            } else {
+                // For mousedown, start if it's the left button.
+                start = event.which === 1;
+            }
+            if (start) {
+                var details = dragdrop.getEventXY(event);
+                details.start = true;
+                return details;
+            } else {
+                return {start: false};
+            }
+        },
+
+        /**
+         * Call to start a drag operation, in response to a mouse down or touch start event.
+         * Normally call this after calling prepare and receiving start true (you can probably
+         * skip prepare if only supporting drag not touch).
+         *
+         * Note: The caller is responsible for creating a 'drag proxy' which is the
+         * thing that actually gets dragged. At present, this doesn't really work
+         * properly unless it is added directly within the body tag.
+         *
+         * You also need to ensure that there is CSS so the proxy is absolutely positioned,
+         * and styled to look like it is floating.
+         *
+         * You also need to absolutely position the proxy where you want it to start.
+         *
+         * @public
+         * @param {Object} event Event (should be either mousedown or touchstart)
+         * @param {jQuery} dragProxy An absolute-positioned element for dragging
+         * @param {Object} onMove Function that receives X and Y page locations for a move
+         * @param {Object} onDrop Function that receives X and Y page locations when dropped
+         */
+        start: function(event, dragProxy, onMove, onDrop) {
+            var xy = dragdrop.getEventXY(event);
+            dragdrop.initialX = xy.x;
+            dragdrop.initialY = xy.y;
+            dragdrop.initialPosition = dragProxy.offset();
+            dragdrop.dragProxy = dragProxy;
+            dragdrop.onMove = onMove;
+            dragdrop.onDrop = onDrop;
+
+            switch (event.type) {
+                case 'mousedown':
+                    // Cannot use jQuery 'on' because events need to not be passive.
+                    dragdrop.addEventSpecial('mousemove', dragdrop.mouseMove);
+                    dragdrop.addEventSpecial('mouseup', dragdrop.mouseUp);
+                    break;
+                case 'touchstart':
+                    dragdrop.addEventSpecial('touchend', dragdrop.touchEnd);
+                    dragdrop.addEventSpecial('touchcancel', dragdrop.touchEnd);
+                    dragdrop.addEventSpecial('touchmove', dragdrop.touchMove);
+                    dragdrop.touching = event.changedTouches[0].identifier;
+                    break;
+                default:
+                    throw new Error('Unexpected event type: ' + event.type);
+            }
+            autoScroll.start(dragdrop.scroll);
+        },
+
+        /**
+         * Adds an event listener with special event capture options (capture, not passive). If the
+         * browser does not support passive events, it will fall back to the boolean for capture.
+         *
+         * @private
+         * @param {Object} event Event type string
+         * @param {Object} handler Handler function
+         */
+        addEventSpecial: function(event, handler) {
+            try {
+                window.addEventListener(event, handler, dragdrop.eventCaptureOptions);
+            } catch (ex) {
+                dragdrop.eventCaptureOptions = true;
+                window.addEventListener(event, handler, dragdrop.eventCaptureOptions);
+            }
+        },
+
+        /**
+         * Gets X/Y co-ordinates of an event, which can be either touchstart or mousedown.
+         *
+         * @private
+         * @param {Object} event Event (should be either mousedown or touchstart)
+         * @return {Object} X/Y co-ordinates
+         */
+        getEventXY: function(event) {
+            switch (event.type) {
+                case 'touchstart':
+                    return {x: event.changedTouches[0].pageX,
+                            y: event.changedTouches[0].pageY};
+                case 'mousedown':
+                    return {x: event.pageX, y: event.pageY};
+                default:
+                    throw new Error('Unexpected event type: ' + event.type);
+            }
+        },
+
+        /**
+         * Event handler for touch move.
+         *
+         * @private
+         * @param {Object} e Event
+         */
+        touchMove: function(e) {
+            e.preventDefault();
+            for (var i = 0; i < e.changedTouches.length; i++) {
+                if (e.changedTouches[i].identifier === dragdrop.touching) {
+                    dragdrop.handleMove(e.changedTouches[i].pageX, e.changedTouches[i].pageY);
+                }
+            }
+        },
+
+        /**
+         * Event handler for mouse move.
+         *
+         * @private
+         * @param {Object} e Event
+         */
+        mouseMove: function(e) {
+            dragdrop.handleMove(e.pageX, e.pageY);
+        },
+
+        /**
+         * Shared handler for move event (mouse or touch).
+         *
+         * @private
+         * @param {number} pageX X co-ordinate
+         * @param {number} pageY Y co-ordinate
+         */
+        handleMove: function(pageX, pageY) {
+            // Move the drag proxy, not letting you move it out of screen or window bounds.
+            var current = dragdrop.dragProxy.offset();
+            var topOffset = current.top - parseInt(dragdrop.dragProxy.css('top'));
+            var leftOffset = current.left - parseInt(dragdrop.dragProxy.css('left'));
+            var maxY = $(document).height() - dragdrop.dragProxy.outerHeight() - topOffset;
+            var maxX = $(document).width() - dragdrop.dragProxy.outerWidth() - leftOffset;
+            var minY = -topOffset;
+            var minX = -leftOffset;
+            var initial = dragdrop.initialPosition;
+            var position = {
+                top: Math.max(minY, Math.min(maxY, initial.top + (pageY - dragdrop.initialY) - topOffset)),
+                left: Math.max(minX, Math.min(maxX, initial.left + (pageX - dragdrop.initialX) - leftOffset))
+            };
+            dragdrop.dragProxy.css(position);
+
+            // Trigger move handler.
+            dragdrop.onMove(pageX, pageY, dragdrop.dragProxy);
+        },
+
+        /**
+         * Event handler for touch end.
+         *
+         * @private
+         * @param {Object} e Event
+         */
+        touchEnd: function(e) {
+            e.preventDefault();
+            for (var i = 0; i < e.changedTouches.length; i++) {
+                if (e.changedTouches[i].identifier === dragdrop.touching) {
+                    dragdrop.handleEnd(e.changedTouches[i].pageX, e.changedTouches[i].pageY);
+                }
+            }
+        },
+
+        /**
+         * Event handler for mouse up.
+         *
+         * @private
+         * @param {Object} e Event
+         */
+        mouseUp: function(e) {
+            dragdrop.handleEnd(e.pageX, e.pageY);
+        },
+
+        /**
+         * Shared handler for end drag (mouse or touch).
+         *
+         * @private
+         * @param {number} pageX X
+         * @param {number} pageY Y
+         */
+        handleEnd: function(pageX, pageY) {
+            if (dragdrop.touching !== null) {
+                window.removeEventListener('touchend', dragdrop.touchEnd, dragdrop.eventCaptureOptions);
+                window.removeEventListener('touchcancel', dragdrop.touchEnd, dragdrop.eventCaptureOptions);
+                window.removeEventListener('touchmove', dragdrop.touchMove, dragdrop.eventCaptureOptions);
+                dragdrop.touching = null;
+            } else {
+                window.removeEventListener('mousemove', dragdrop.mouseMove, dragdrop.eventCaptureOptions);
+                window.removeEventListener('mouseup', dragdrop.mouseUp, dragdrop.eventCaptureOptions);
+            }
+            autoScroll.stop();
+            dragdrop.onDrop(pageX, pageY, dragdrop.dragProxy);
+        },
+
+        /**
+         * Called when the page scrolls.
+         *
+         * @private
+         * @param {number} offset Amount of scroll
+         */
+        scroll: function(offset) {
+            // Move the proxy to match.
+            var maxY = $(document).height() - dragdrop.dragProxy.outerHeight();
+            var currentPosition = dragdrop.dragProxy.offset();
+            currentPosition.top = Math.min(maxY, currentPosition.top + offset);
+            dragdrop.dragProxy.css(currentPosition);
+        }
+    };
+
+    return {
+        /**
+         * Prepares to begin a drag operation - call with a mousedown or touchstart event.
+         *
+         * If the returned object has 'start' true, then you can set up a drag proxy, and call
+         * start. This function will call preventDefault automatically regardless of whether
+         * starting or not.
+         *
+         * @param {Object} event Event (should be either mousedown or touchstart)
+         * @return {Object} Object with start (boolean flag) and x, y (only if flag true) values
+         */
+        prepare: dragdrop.prepare,
+
+        /**
+         * Call to start a drag operation, in response to a mouse down or touch start event.
+         * Normally call this after calling prepare and receiving start true (you can probably
+         * skip prepare if only supporting drag not touch).
+         *
+         * Note: The caller is responsible for creating a 'drag proxy' which is the
+         * thing that actually gets dragged. At present, this doesn't really work
+         * properly unless it is added directly within the body tag.
+         *
+         * You also need to ensure that there is CSS so the proxy is absolutely positioned,
+         * and styled to look like it is floating.
+         *
+         * You also need to absolutely position the proxy where you want it to start.
+         *
+         * @param {Object} event Event (should be either mousedown or touchstart)
+         * @param {jQuery} dragProxy An absolute-positioned element for dragging
+         * @param {Object} onMove Function that receives X and Y page locations for a move
+         * @param {Object} onDrop Function that receives X and Y page locations when dropped
+         */
+        start: dragdrop.start
+    };
+});