MDL-63625 core: sortable_list iOS scrolling

For iOS we need to register non passive events not only for touchstart but also for touchmove
and touchend. Also iOS could open two move dialogue windows instead of one

lib/amd/src/sortable_list.js

@@ -88,9 +88,9 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
 
     /**
      * Test the browser support for options objects on event listeners.
-     * @return Boolean
+     * @return {Boolean}
      */
-    var eventListenerOptionsSupported = (function() {
+    var eventListenerOptionsSupported = function() {
         var passivesupported = false,
             options,
             testeventname = "testpassiveeventoptions";
@@ -114,7 +114,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
             passivesupported = false;
         }
         return passivesupported;
-    })();
+    };
 
     /**
      * Allow to create non-passive touchstart listeners and prevent page scrolling when dragging
@@ -122,17 +122,25 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
      *
      * @type {Object}
      */
-    $.event.special.touchstart = {
-        setup: function(_, ns, handle) {
-            if (eventListenerOptionsSupported && ns.includes('notPassive')) {
-                this.addEventListener('touchstart', handle, {passive: false});
-                return true;
-            } else {
-                return false;
+    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.
      *
@@ -316,7 +324,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
         }, this), 500);
 
         // Start drag.
-        $(window).on('mousemove touchmove mouseup touchend', $.proxy(this.dragHandler, this));
+        $(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.
@@ -351,12 +359,10 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
         if (evt.type === 'keypress' && evt.originalEvent.keyCode !== 13 && evt.originalEvent.keyCode !== 32) {
             return;
         }
-        if (this.info !== null && this.info.type === 'click') {
+        if (this.info !== null) {
             // Ignore double click.
             return;
         }
-        evt.preventDefault();
-        evt.stopPropagation();
 
         // Find the element that this draghandle belongs to.
         var clickedElement = $(evt.target).closest(this.config.moveHandlerSelector),
@@ -366,6 +372,9 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
             return;
         }
 
+        evt.preventDefault();
+        evt.stopPropagation();
+
         // Store information about moved element with original location.
         this.dragCounter++;
         this.info = {
@@ -436,6 +445,9 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
      */
     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.
@@ -571,7 +583,7 @@ function($, log, autoScroll, str, ModalFactory, ModalEvents, Notification) {
         if (this.config.autoScroll) {
             autoScroll.stop();
         }
-        $(window).off('mousemove touchmove mouseup touchend', $.proxy(this.dragHandler, this));
+        $(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;