Proyectos de Subversion Moodle

// 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
 * @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) {
    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
    };
});