Skip to content
Permalink
Browse files
Merge branch 'MDL-51803-master-handle' of https://github.com/marinagl…
  • Loading branch information
David Monllao committed Oct 10, 2018
2 parents 398d4ef + f7d1a24 commit e9659a17ba3c02b456b808cb39f9c6ad1eb3fdfe

Large diffs are not rendered by default.

@@ -18,12 +18,16 @@
*
* 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:
*
* define(['jquery', 'core/sortable_list'], function($, SortableList) {
* var list = new SortableList('ul.my-awesome-list', // source list (usually <ul> or <tbody>) - selector or element
* {
* moveHandlerSelector: '.draghandle' // CSS selector of the crossarrow handle. Make sure that this
* // element can handle keypress and mouse click events for displaying accessible move popup.
* });
* 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);
* });
@@ -62,7 +66,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
*/
var defaultParameters = {
targetListSelector: null,
moveHandlerSelector: null,
moveHandlerSelector: '[data-drag-type=move]',
isHorizontal: false,
autoScroll: true
};
@@ -82,6 +86,36 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
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/addEventListener

try {
options = Object.defineProperty({}, "passive", {
get: 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
@@ -90,7 +124,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
*/
$.event.special.touchstart = {
setup: function(_, ns, handle) {
if (ns.includes('notPassive')) {
if (eventListenerOptionsSupported && ns.includes('notPassive')) {
this.addEventListener('touchstart', handle, {passive: false});
return true;
} else {
@@ -105,8 +139,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
* @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.
* @property {(String|jQuery|Element)} config.targetListSelector target lists, by default same as root
* @property {String} config.moveHandlerSelector CSS selector for a drag handle. By default the whole item is a handle.
* Without drag handle sorting is not accessible!
* @property {String} config.moveHandlerSelector CSS selector for a drag handle. By default '[data-drag-type=move]'
* @property {String} config.targetListSelector CSS selector for target lists. By default the same as root
* @property {(Boolean|Function)} config.isHorizontal Set to true if the list is horizontal
* (can also be a callback with list as an argument)
@@ -607,9 +640,13 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
*
* @public
* @param {jQuery} element
* @param {jQuery} handler
* @return {Promise}
*/
SortableList.prototype.getMoveDialogueTitle = function(element) {
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);
});
@@ -677,7 +714,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
SortableList.prototype.displayMoveDialogue = function(clickedElement) {
ModalFactory.create({
type: ModalFactory.types.CANCEL,
title: this.getMoveDialogueTitle(this.info.element),
title: this.getMoveDialogueTitle(this.info.element, clickedElement),
body: this.getDestinationsList()
}).then($.proxy(function(modal) {
var quickMoveHandler = $.proxy(function(e) {
@@ -0,0 +1,27 @@
{{!
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/>.
}}
{{!
@template core/drag_handle
Drag handle template.
Example context (json):
{
"movetitle": "Move this element"
}
}}
<span tabindex="0" role="button" aria-haspopup="true" data-drag-type="move" title="{{movetitle}}">{{#pix}} i/dragdrop, core {{/pix}}</span>
@@ -2070,6 +2070,7 @@ $footer-link-color: $bg-inverse-link-color !default;

[data-drag-type="move"] {
cursor: move;
touch-action: none;
}

.clickable {
@@ -10386,7 +10386,8 @@ ul {
top: 0; }

[data-drag-type="move"] {
cursor: move; }
cursor: move;
touch-action: none; }

.clickable {
cursor: pointer; }
@@ -2425,6 +2425,7 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {

[data-drag-type="move"] {
cursor: move;
touch-action: none;
}

.bg-pulse-grey {
@@ -4807,6 +4807,7 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
}
[data-drag-type="move"] {
cursor: move;
touch-action: none;
}
.bg-pulse-grey {
animation: bg-pulse-grey 2s infinite linear;

0 comments on commit e9659a1

Please sign in to comment.