Merge branch 'MDL-51803-master-handle' of https://github.com/marinaglancy/moodle

lib/amd/src/sortable_list.js

@@ -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
+ *     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
+ *     // Listen to the events when element is dragged.
- *               // element can handle keypress and mouse click events for displaying accessible move popup.
- *         });
  *     $('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.
+     * @property {String} config.moveHandlerSelector  CSS selector for a drag handle. By default '[data-drag-type=move]'
-     *                                                Without drag handle sorting is not accessible!
      * @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) {

lib/templates/drag_handle.mustache

@@ -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>

theme/boost/scss/moodle/core.scss

@@ -2070,6 +2070,7 @@ $footer-link-color: $bg-inverse-link-color !default;
 
 [data-drag-type="move"] {
     cursor: move;
+    touch-action: none;
 }
 
 .clickable {

theme/boost/style/moodle.css

@@ -10386,7 +10386,8 @@ ul {
   top: 0; }
 
 [data-drag-type="move"] {
-  cursor: move; }
+  cursor: move;
+  touch-action: none; }
 
 .clickable {
   cursor: pointer; }

theme/bootstrapbase/less/moodle/core.less

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

theme/bootstrapbase/style/moodle.css

@@ -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;