Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
// 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/>./*** A javascript module to handle list items drag and drop** Example of usage:** Create a list (for example `<ul>` or `<tbody>`) where each draggable element has a drag handle.* The best practice is to use the template core/drag_handle:* $OUTPUT->render_from_template('core/drag_handle', ['movetitle' => get_string('movecontent', 'moodle', ELEMENTNAME)]);** Attach this JS module to this list:** Space between define and ( critical in comment but not allowed in code in order to function* correctly with Moodle's requirejs.php** For the full list of possible parameters see var defaultParameters below.** The following jQuery events are fired:* - SortableList.EVENTS.DRAGSTART : when user started dragging a list element* - SortableList.EVENTS.DRAG : when user dragged a list element to a new position* - SortableList.EVENTS.DROP : when user dropped a list element* - SortableList.EVENTS.DROPEND : when user finished dragging - either fired right after dropping or* if "Esc" was pressed during dragging** @example* define (['jquery', 'core/sortable_list'], function($, SortableList) {* var list = new SortableList('ul.my-awesome-list'); // source list (usually <ul> or <tbody>) - selector or element** // Listen to the events when element is dragged.* $('ul.my-awesome-list > *').on(SortableList.EVENTS.DROP, function(evt, info) {* console.log(info);* });** // Advanced usage. Overwrite methods getElementName, getDestinationName, moveDialogueTitle, for example:* list.getElementName = function(element) {* return $.Deferred().resolve(element.attr('data-name'));* }* });** @module core/sortable_list* @class core/sortable_list* @copyright 2018 Marina Glancy* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later*/define(['jquery', 'core/log', 'core/autoscroll', 'core/str', 'core/modal_cancel', 'core/modal_events', 'core/notification'],function($, log, autoScroll, str, ModalCancel, ModalEvents, Notification) {/*** Default parameters** @private* @type {Object}*/var defaultParameters = {targetListSelector: null,moveHandlerSelector: '[data-drag-type=move]',isHorizontal: false,autoScroll: true};/*** Class names for different elements that may be changed during sorting** @private* @type {Object}*/var CSS = {keyboardDragClass: 'dragdrop-keyboard-drag',isDraggedClass: 'sortable-list-is-dragged',isDroppedClass: 'sortable-list-is-dropped',currentPositionClass: 'sortable-list-current-position',sourceListClass: 'sortable-list-source',targetListClass: 'sortable-list-target',overElementClass: 'sortable-list-over-element'};/*** Test the browser support for options objects on event listeners.* @return {Boolean}*/var eventListenerOptionsSupported = function() {var passivesupported = false,options,testeventname = "testpassiveeventoptions";// Options support testing example from:// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListenertry {options = Object.defineProperty({}, "passive", {// eslint-disable-next-line getter-returnget: function() {passivesupported = true;}});// We use an event name that is not likely to conflict with any real event.document.addEventListener(testeventname, options, options);// We remove the event listener as we have tested the options already.document.removeEventListener(testeventname, options, options);} catch (err) {// It's already false.passivesupported = false;}return passivesupported;};/*** Allow to create non-passive touchstart listeners and prevent page scrolling when dragging* From: https://stackoverflow.com/a/48098097** @param {string} eventname* @returns {object}*/var registerNotPassiveListeners = function(eventname) {return {setup: function(x, ns, handle) {if (ns.includes('notPassive')) {this.addEventListener(eventname, handle, {passive: false});return true;} else {return false;}}};};if (eventListenerOptionsSupported) {$.event.special.touchstart = registerNotPassiveListeners('touchstart');$.event.special.touchmove = registerNotPassiveListeners('touchmove');$.event.special.touchend = registerNotPassiveListeners('touchend');}/*** Initialise sortable list.** @param {(String|jQuery|Element)} root JQuery/DOM element representing sortable list (i.e. <ul>, <tbody>) or CSS selector* @param {Object} config Parameters for the list. See defaultParameters above for examples.* @param {(String|jQuery|Element)} config.targetListSelector target lists, by default same as root* @param {String} config.moveHandlerSelector CSS selector for a drag handle. By default '[data-drag-type=move]'* @param {String} config.listSelector CSS selector for target lists. By default the same as root* @param {(Boolean|Function)} config.isHorizontal Set to true if the list is horizontal (can also be a callback* with list as an argument)* @param {Boolean} config.autoScroll Engages autoscroll module for automatic vertical scrolling of the whole page,* by default true*/var SortableList = function(root, config) {this.info = null;this.proxy = null;this.proxyDelta = null;this.dragCounter = 0;this.lastEvent = null;this.config = $.extend({}, defaultParameters, config || {});this.config.listSelector = root;if (!this.config.targetListSelector) {this.config.targetListSelector = root;}if (typeof this.config.listSelector === 'object') {// The root is an element on the page. Register a listener for this element.$(this.config.listSelector).on('mousedown touchstart.notPassive', $.proxy(this.dragStartHandler, this));} else {// The root is a CSS selector. Register a listener that picks up the element dynamically.$('body').on('mousedown touchstart.notPassive', this.config.listSelector, $.proxy(this.dragStartHandler, this));}if (this.config.moveHandlerSelector !== null) {$('body').on('click keypress', this.config.moveHandlerSelector, $.proxy(this.clickHandler, this));}};/*** Events fired by this entity** @public* @type {Object}*/SortableList.EVENTS = {DRAGSTART: 'sortablelist-dragstart',DRAG: 'sortablelist-drag',DROP: 'sortablelist-drop',DRAGEND: 'sortablelist-dragend'};/*** Resets the temporary classes assigned during dragging* @private*/SortableList.prototype.resetDraggedClasses = function() {var classes = [CSS.isDraggedClass,CSS.currentPositionClass,CSS.overElementClass,CSS.targetListClass,];for (var i in classes) {$('.' + classes[i]).removeClass(classes[i]);}if (this.proxy) {this.proxy.remove();this.proxy = $();}};/*** Calculates evt.pageX, evt.pageY, evt.clientX and evt.clientY** For touch events pageX and pageY are taken from the first touch;* For the emulated mousemove event they are taken from the last real event.** @private* @param {Event} evt*/SortableList.prototype.calculatePositionOnPage = function(evt) {if (evt.originalEvent && evt.originalEvent.touches && evt.originalEvent.touches[0] !== undefined) {// This is a touchmove or touchstart event, get position from the first touch position.var touch = evt.originalEvent.touches[0];evt.pageX = touch.pageX;evt.pageY = touch.pageY;}if (evt.pageX === undefined) {// Information is not present in case of touchend or when event was emulated by autoScroll.// Take the absolute mouse position from the last event.evt.pageX = this.lastEvent.pageX;evt.pageY = this.lastEvent.pageY;} else {this.lastEvent = evt;}if (evt.clientX === undefined) {// If not provided in event calculate relative mouse position.evt.clientX = Math.round(evt.pageX - $(window).scrollLeft());evt.clientY = Math.round(evt.pageY - $(window).scrollTop());}};/*** Handler from dragstart event** @private* @param {Event} evt*/SortableList.prototype.dragStartHandler = function(evt) {if (this.info !== null) {if (this.info.type === 'click' || this.info.type === 'touchend') {// Ignore double click.return;}// Mouse down or touch while already dragging, cancel previous dragging.this.moveElement(this.info.sourceList, this.info.sourceNextElement);this.finishDragging();}if (evt.type === 'mousedown' && evt.which !== 1) {// We only need left mouse click. If this is a mousedown event with right/middle click ignore it.return;}this.calculatePositionOnPage(evt);var movedElement = $(evt.target).closest($(evt.currentTarget).children());if (!movedElement.length) {// Can't find the element user wants to drag. They clicked on the list but outside of any element of the list.return;}// Check that we grabbed the element by the handle.if (this.config.moveHandlerSelector !== null) {if (!$(evt.target).closest(this.config.moveHandlerSelector, movedElement).length) {return;}}evt.stopPropagation();evt.preventDefault();// Information about moved element with original location.// This object is passed to event observers.this.dragCounter++;this.info = {element: movedElement,sourceNextElement: movedElement.next(),sourceList: movedElement.parent(),targetNextElement: movedElement.next(),targetList: movedElement.parent(),type: evt.type,dropped: false,startX: evt.pageX,startY: evt.pageY,startTime: new Date().getTime()};$(this.config.targetListSelector).addClass(CSS.targetListClass);var offset = movedElement.offset();movedElement.addClass(CSS.currentPositionClass);this.proxyDelta = {x: offset.left - evt.pageX, y: offset.top - evt.pageY};this.proxy = $();var thisDragCounter = this.dragCounter;setTimeout($.proxy(function() {// This mousedown event may in fact be a beginning of a 'click' event. Use timeout before showing the// dragged object so we can catch click event. When timeout finishes make sure that click event// has not happened during this half a second.// Verify dragcounter to make sure the user did not manage to do two very fast drag actions one after another.if (this.info === null || this.info.type === 'click' || this.info.type === 'keypress'|| this.dragCounter !== thisDragCounter) {return;}// Create a proxy - the copy of the dragged element that moves together with a mouse.this.createProxy();}, this), 500);// Start drag.$(window).on('mousemove touchmove.notPassive mouseup touchend.notPassive', $.proxy(this.dragHandler, this));$(window).on('keypress', $.proxy(this.dragcancelHandler, this));// Start autoscrolling. Every time the page is scrolled emulate the mousemove event.if (this.config.autoScroll) {autoScroll.start(function() {$(window).trigger('mousemove');});}this.executeCallback(SortableList.EVENTS.DRAGSTART);};/*** Creates a "proxy" object - a copy of the element that is being moved that always follows the mouse* @private*/SortableList.prototype.createProxy = function() {this.proxy = this.info.element.clone();this.info.sourceList.append(this.proxy);this.proxy.removeAttr('id').removeClass(CSS.currentPositionClass).addClass(CSS.isDraggedClass).css({position: 'fixed'});this.proxy.offset({top: this.proxyDelta.y + this.lastEvent.pageY, left: this.proxyDelta.x + this.lastEvent.pageX});};/*** Handler for click event - when user clicks on the drag handler or presses Enter on keyboard** @private* @param {Event} evt*/SortableList.prototype.clickHandler = function(evt) {if (evt.type === 'keypress' && evt.originalEvent.keyCode !== 13 && evt.originalEvent.keyCode !== 32) {return;}if (this.info !== null) {// Ignore double click.return;}// Find the element that this draghandle belongs to.var clickedElement = $(evt.target).closest(this.config.moveHandlerSelector),sourceList = clickedElement.closest(this.config.listSelector),movedElement = clickedElement.closest(sourceList.children());if (!movedElement.length) {return;}evt.preventDefault();evt.stopPropagation();// Store information about moved element with original location.this.dragCounter++;this.info = {element: movedElement,sourceNextElement: movedElement.next(),sourceList: sourceList,targetNextElement: movedElement.next(),targetList: sourceList,dropped: false,type: evt.type,startTime: new Date().getTime()};this.executeCallback(SortableList.EVENTS.DRAGSTART);this.displayMoveDialogue(clickedElement);};/*** Finds the position of the mouse inside the element - on the top, on the bottom, on the right or on the left\** Used to determine if the moved element should be moved after or before the current element** @private* @param {Number} pageX* @param {Number} pageY* @param {jQuery} element* @returns {(Object|null)}*/SortableList.prototype.getPositionInNode = function(pageX, pageY, element) {if (!element.length) {return null;}var node = element[0],offset = 0,rect = node.getBoundingClientRect(),y = pageY - (rect.top + window.scrollY),x = pageX - (rect.left + window.scrollX);if (x >= -offset && x <= rect.width + offset && y >= -offset && y <= rect.height + offset) {return {x: x,y: y,xRatio: rect.width ? (x / rect.width) : 0,yRatio: rect.height ? (y / rect.height) : 0};}return null;};/*** Check if list is horizontal** @param {jQuery} element* @return {Boolean}*/SortableList.prototype.isListHorizontal = function(element) {var isHorizontal = this.config.isHorizontal;if (isHorizontal === true || isHorizontal === false) {return isHorizontal;}return isHorizontal(element);};/*** Handler for events mousemove touchmove mouseup touchend** @private* @param {Event} evt*/SortableList.prototype.dragHandler = function(evt) {evt.preventDefault();evt.stopPropagation();this.calculatePositionOnPage(evt);// We can not use evt.target here because it will most likely be our proxy.// Move the proxy out of the way so we can find the element at the current mouse position.this.proxy.offset({top: -1000, left: -1000});// Find the element at the current mouse position.var element = $(document.elementFromPoint(evt.clientX, evt.clientY));// Find the list element and the list over the mouse position.var mainElement = this.info.element[0],isNotSelf = function() {return this !== mainElement;},current = element.closest('.' + CSS.targetListClass + ' > :not(.' + CSS.isDraggedClass + ')').filter(isNotSelf),currentList = element.closest('.' + CSS.targetListClass),proxy = this.proxy,isNotProxy = function() {return !proxy || !proxy.length || this !== proxy[0];};// Add the specified class to the list element we are hovering.$('.' + CSS.overElementClass).removeClass(CSS.overElementClass);current.addClass(CSS.overElementClass);// Move proxy to the current position.this.proxy.offset({top: this.proxyDelta.y + evt.pageY, left: this.proxyDelta.x + evt.pageX});if (currentList.length && !currentList.children().filter(isNotProxy).length) {// Mouse is over an empty list.this.moveElement(currentList, $());} else if (current.length === 1 && !this.info.element.find(current[0]).length) {// Mouse is over an element in a list - find whether we should move the current position// above or below this element.var coordinates = this.getPositionInNode(evt.pageX, evt.pageY, current);if (coordinates) {var parent = current.parent(),ratio = this.isListHorizontal(parent) ? coordinates.xRatio : coordinates.yRatio,subList = current.find('.' + CSS.targetListClass),subListEmpty = !subList.children().filter(isNotProxy).filter(isNotSelf).length;if (subList.length && subListEmpty && ratio > 0.2 && ratio < 0.8) {// This is an element that is a parent of an empty list and we are around the middle of this element.// Treat it as if we are over this empty list.this.moveElement(subList, $());} else if (ratio > 0.5) {// Insert after this element.this.moveElement(parent, current.next().filter(isNotProxy));} else {// Insert before this element.this.moveElement(parent, current);}}}if (evt.type === 'mouseup' || evt.type === 'touchend') {// Drop the moved element.this.info.endX = evt.pageX;this.info.endY = evt.pageY;this.info.endTime = new Date().getTime();this.info.dropped = true;this.info.positionChanged = this.hasPositionChanged(this.info);var oldinfo = this.info;this.executeCallback(SortableList.EVENTS.DROP);this.finishDragging();if (evt.type === 'touchend'&& this.config.moveHandlerSelector !== null&& (oldinfo.endTime - oldinfo.startTime < 500)&& !oldinfo.positionChanged) {// The click event is not triggered on touch screens because we call preventDefault in touchstart handler.// If the touchend quickly followed touchstart without moving, consider it a "click".this.clickHandler(evt);} else if (oldinfo.positionChanged) {mainElement.classList.add(CSS.isDroppedClass);}}};/*** Checks if the position of the dragged element in the list has changed** @private* @param {Object} info* @return {Boolean}*/SortableList.prototype.hasPositionChanged = function(info) {return info.sourceList[0] !== info.targetList[0] ||info.sourceNextElement.length !== info.targetNextElement.length ||(info.sourceNextElement.length && info.sourceNextElement[0] !== info.targetNextElement[0]);};/*** Moves the current position of the dragged element** @private* @param {jQuery} parentElement* @param {jQuery} beforeElement*/SortableList.prototype.moveElement = function(parentElement, beforeElement) {var dragEl = this.info.element;if (beforeElement.length && beforeElement[0] === dragEl[0]) {// Insert before the current position of the dragged element - nothing to do.return;}if (parentElement[0] === this.info.targetList[0] &&beforeElement.length === this.info.targetNextElement.length &&beforeElement[0] === this.info.targetNextElement[0]) {// Insert in the same location as the current position - nothing to do.return;}if (beforeElement.length) {// Move the dragged element before the specified element.parentElement[0].insertBefore(dragEl[0], beforeElement[0]);} else if (this.proxy && this.proxy.parent().length && this.proxy.parent()[0] === parentElement[0]) {// We need to move to the end of the list but the last element in this list is a proxy.// Always leave the proxy in the end of the list.parentElement[0].insertBefore(dragEl[0], this.proxy[0]);} else {// Insert in the end of a list (when proxy is in another list).parentElement[0].appendChild(dragEl[0]);}// Save the current position of the dragged element in the list.this.info.targetList = parentElement;this.info.targetNextElement = beforeElement;this.executeCallback(SortableList.EVENTS.DRAG);};/*** Finish dragging (when dropped or cancelled).* @private*/SortableList.prototype.finishDragging = function() {this.resetDraggedClasses();if (this.config.autoScroll) {autoScroll.stop();}$(window).off('mousemove touchmove.notPassive mouseup touchend.notPassive', $.proxy(this.dragHandler, this));$(window).off('keypress', $.proxy(this.dragcancelHandler, this));this.executeCallback(SortableList.EVENTS.DRAGEND);this.info = null;};/*** Executes callback specified in sortable list parameters** @private* @param {String} eventName*/SortableList.prototype.executeCallback = function(eventName) {this.info.element.trigger(eventName, this.info);};/*** Handler from keypress event (cancel dragging when Esc is pressed)** @private* @param {Event} evt*/SortableList.prototype.dragcancelHandler = function(evt) {if (evt.type !== 'keypress' || evt.originalEvent.keyCode !== 27) {// Only cancel dragging when Esc was pressed.return;}// Dragging was cancelled. Return item to the original position.this.moveElement(this.info.sourceList, this.info.sourceNextElement);this.finishDragging();};/*** Returns the name of the current element to be used in the move dialogue** @public* @param {jQuery} element* @return {Promise}*/SortableList.prototype.getElementName = function(element) {return $.Deferred().resolve(element.text());};/*** Returns the label for the potential move destination, i.e. "After ElementX" or "To the top of the list"** Note that we use "after" in the label for better UX** @public* @param {jQuery} parentElement* @param {jQuery} afterElement* @return {Promise}*/SortableList.prototype.getDestinationName = function(parentElement, afterElement) {if (!afterElement.length) {return str.get_string('movecontenttothetop', 'moodle');} else {return this.getElementName(afterElement).then(function(name) {return str.get_string('movecontentafter', 'moodle', name);});}};/*** Returns the title for the move dialogue ("Move elementY")** @public* @param {jQuery} element* @param {jQuery} handler* @return {Promise}*/SortableList.prototype.getMoveDialogueTitle = function(element, handler) {if (handler.attr('title')) {return $.Deferred().resolve(handler.attr('title'));}return this.getElementName(element).then(function(name) {return str.get_string('movecontent', 'moodle', name);});};/*** Returns the list of possible move destinations** @private* @return {Promise}*/SortableList.prototype.getDestinationsList = function() {var addedLists = [],targets = $(this.config.targetListSelector),destinations = $('<ul/>').addClass(CSS.keyboardDragClass),result = $.when().then(function() {return destinations;}),createLink = $.proxy(function(parentElement, beforeElement, afterElement) {if (beforeElement.is(this.info.element) || afterElement.is(this.info.element)) {// Can not move before or after itself.return;}if ($.contains(this.info.element[0], parentElement[0])) {// Can not move to its own child.return;}result = result.then($.proxy(function() {return this.getDestinationName(parentElement, afterElement);}, this)).then(function(txt) {var li = $('<li/>').appendTo(destinations);var a = $('<a href="#"/>').attr('data-core_sortable_list-quickmove', 1).appendTo(li);a.data('parent-element', parentElement).data('before-element', beforeElement).text(txt);return destinations;});}, this),addList = function() {// Destination lists may be nested. We want to add all move destinations in the same// order they appear on the screen for the user.if ($.inArray(this, addedLists) !== -1) {return;}addedLists.push(this);var list = $(this),children = list.children();children.each(function() {var element = $(this);createLink(list, element, element.prev());// Add all nested lists.element.find(targets).each(addList);});createLink(list, $(), children.last());};targets.each(addList);return result;};/*** Displays the dialogue to move element.* @param {jQuery} clickedElement element to return focus to after the modal is closed* @private*/SortableList.prototype.displayMoveDialogue = function(clickedElement) {ModalCancel.create({title: this.getMoveDialogueTitle(this.info.element, clickedElement),body: this.getDestinationsList()}).then($.proxy(function(modal) {var quickMoveHandler = $.proxy(function(e) {e.preventDefault();e.stopPropagation();this.moveElement($(e.currentTarget).data('parent-element'), $(e.currentTarget).data('before-element'));this.info.endTime = new Date().getTime();this.info.positionChanged = this.hasPositionChanged(this.info);this.info.dropped = true;clickedElement.focus();this.executeCallback(SortableList.EVENTS.DROP);modal.hide();}, this);modal.getRoot().on('click', '[data-core_sortable_list-quickmove]', quickMoveHandler);modal.getRoot().on(ModalEvents.hidden, $.proxy(function() {// Always destroy when hidden, it is generated dynamically each time.modal.getRoot().off('click', '[data-core_sortable_list-quickmove]', quickMoveHandler);modal.destroy();this.finishDragging();}, this));modal.setLarge();modal.show();return modal;}, this)).catch(Notification.exception);};return SortableList;});