Skip to content

Commit e9659a1

Browse files
author
David Monllao
committed
Merge branch 'MDL-51803-master-handle' of https://github.com/marinaglancy/moodle
2 parents 398d4ef + f7d1a24 commit e9659a1

File tree

7 files changed

+81
-13
lines changed

7 files changed

+81
-13
lines changed

lib/amd/build/sortable_list.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

lib/amd/src/sortable_list.js

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,16 @@
1818
*
1919
* Example of usage:
2020
*
21+
* Create a list (for example <ul> or <tbody>) where each draggable element has a drag handle.
22+
* The best practice is to use the template core/drag_handle:
23+
* $OUTPUT->render_from_template('core/drag_handle', ['movetitle' => get_string('movecontent', 'moodle', ELEMENTNAME)]);
24+
*
25+
* Attach this JS module to this list:
26+
*
2127
* define(['jquery', 'core/sortable_list'], function($, SortableList) {
22-
* var list = new SortableList('ul.my-awesome-list', // source list (usually <ul> or <tbody>) - selector or element
23-
* {
24-
* moveHandlerSelector: '.draghandle' // CSS selector of the crossarrow handle. Make sure that this
25-
* // element can handle keypress and mouse click events for displaying accessible move popup.
26-
* });
28+
* var list = new SortableList('ul.my-awesome-list'); // source list (usually <ul> or <tbody>) - selector or element
29+
*
30+
* // Listen to the events when element is dragged.
2731
* $('ul.my-awesome-list > *').on(SortableList.EVENTS.DROP, function(evt, info) {
2832
* console.log(info);
2933
* });
@@ -62,7 +66,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
6266
*/
6367
var defaultParameters = {
6468
targetListSelector: null,
65-
moveHandlerSelector: null,
69+
moveHandlerSelector: '[data-drag-type=move]',
6670
isHorizontal: false,
6771
autoScroll: true
6872
};
@@ -82,6 +86,36 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
8286
overElementClass: 'sortable-list-over-element'
8387
};
8488

89+
/**
90+
* Test the browser support for options objects on event listeners.
91+
* @return Boolean
92+
*/
93+
var eventListenerOptionsSupported = (function() {
94+
var passivesupported = false,
95+
options,
96+
testeventname = "testpassiveeventoptions";
97+
98+
// Options support testing example from:
99+
// https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
100+
101+
try {
102+
options = Object.defineProperty({}, "passive", {
103+
get: function() {
104+
passivesupported = true;
105+
}
106+
});
107+
108+
// We use an event name that is not likely to conflict with any real event.
109+
document.addEventListener(testeventname, options, options);
110+
// We remove the event listener as we have tested the options already.
111+
document.removeEventListener(testeventname, options, options);
112+
} catch (err) {
113+
// It's already false.
114+
passivesupported = false;
115+
}
116+
return passivesupported;
117+
})();
118+
85119
/**
86120
* Allow to create non-passive touchstart listeners and prevent page scrolling when dragging
87121
* From: https://stackoverflow.com/a/48098097
@@ -90,7 +124,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
90124
*/
91125
$.event.special.touchstart = {
92126
setup: function(_, ns, handle) {
93-
if (ns.includes('notPassive')) {
127+
if (eventListenerOptionsSupported && ns.includes('notPassive')) {
94128
this.addEventListener('touchstart', handle, {passive: false});
95129
return true;
96130
} else {
@@ -105,8 +139,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
105139
* @param {(String|jQuery|Element)} root JQuery/DOM element representing sortable list (i.e. <ul>, <tbody>) or CSS selector
106140
* @param {Object} config Parameters for the list. See defaultParameters above for examples.
107141
* @property {(String|jQuery|Element)} config.targetListSelector target lists, by default same as root
108-
* @property {String} config.moveHandlerSelector CSS selector for a drag handle. By default the whole item is a handle.
109-
* Without drag handle sorting is not accessible!
142+
* @property {String} config.moveHandlerSelector CSS selector for a drag handle. By default '[data-drag-type=move]'
110143
* @property {String} config.targetListSelector CSS selector for target lists. By default the same as root
111144
* @property {(Boolean|Function)} config.isHorizontal Set to true if the list is horizontal
112145
* (can also be a callback with list as an argument)
@@ -607,9 +640,13 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
607640
*
608641
* @public
609642
* @param {jQuery} element
643+
* @param {jQuery} handler
610644
* @return {Promise}
611645
*/
612-
SortableList.prototype.getMoveDialogueTitle = function(element) {
646+
SortableList.prototype.getMoveDialogueTitle = function(element, handler) {
647+
if (handler.attr('title')) {
648+
return $.Deferred().resolve(handler.attr('title'));
649+
}
613650
return this.getElementName(element).then(function(name) {
614651
return str.get_string('movecontent', 'moodle', name);
615652
});
@@ -677,7 +714,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
677714
SortableList.prototype.displayMoveDialogue = function(clickedElement) {
678715
ModalFactory.create({
679716
type: ModalFactory.types.CANCEL,
680-
title: this.getMoveDialogueTitle(this.info.element),
717+
title: this.getMoveDialogueTitle(this.info.element, clickedElement),
681718
body: this.getDestinationsList()
682719
}).then($.proxy(function(modal) {
683720
var quickMoveHandler = $.proxy(function(e) {

lib/templates/drag_handle.mustache

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{{!
2+
This file is part of Moodle - http://moodle.org/
3+
4+
Moodle is free software: you can redistribute it and/or modify
5+
it under the terms of the GNU General Public License as published by
6+
the Free Software Foundation, either version 3 of the License, or
7+
(at your option) any later version.
8+
9+
Moodle is distributed in the hope that it will be useful,
10+
but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
GNU General Public License for more details.
13+
14+
You should have received a copy of the GNU General Public License
15+
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
16+
}}
17+
{{!
18+
@template core/drag_handle
19+
20+
Drag handle template.
21+
22+
Example context (json):
23+
{
24+
"movetitle": "Move this element"
25+
}
26+
}}
27+
<span tabindex="0" role="button" aria-haspopup="true" data-drag-type="move" title="{{movetitle}}">{{#pix}} i/dragdrop, core {{/pix}}</span>

theme/boost/scss/moodle/core.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2070,6 +2070,7 @@ $footer-link-color: $bg-inverse-link-color !default;
20702070

20712071
[data-drag-type="move"] {
20722072
cursor: move;
2073+
touch-action: none;
20732074
}
20742075

20752076
.clickable {

theme/boost/style/moodle.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10386,7 +10386,8 @@ ul {
1038610386
top: 0; }
1038710387

1038810388
[data-drag-type="move"] {
10389-
cursor: move; }
10389+
cursor: move;
10390+
touch-action: none; }
1039010391

1039110392
.clickable {
1039210393
cursor: pointer; }

theme/bootstrapbase/less/moodle/core.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2425,6 +2425,7 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
24252425

24262426
[data-drag-type="move"] {
24272427
cursor: move;
2428+
touch-action: none;
24282429
}
24292430

24302431
.bg-pulse-grey {

theme/bootstrapbase/style/moodle.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4807,6 +4807,7 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
48074807
}
48084808
[data-drag-type="move"] {
48094809
cursor: move;
4810+
touch-action: none;
48104811
}
48114812
.bg-pulse-grey {
48124813
animation: bg-pulse-grey 2s infinite linear;

0 commit comments

Comments
 (0)