MDL-51803 core: sortable list not passive touch events
authorMarina Glancy <marina@moodle.com>
Wed, 10 Oct 2018 10:34:46 +0000 (12:34 +0200)
committerMarina Glancy <marina@moodle.com>
Wed, 10 Oct 2018 10:34:46 +0000 (12:34 +0200)
Some browsers do not support options passed to the event browsers. Check if browser
supports it before adding options.

lib/amd/build/sortable_list.min.js
lib/amd/src/sortable_list.js
theme/boost/scss/moodle/core.scss
theme/boost/style/moodle.css
theme/bootstrapbase/less/moodle/core.less
theme/bootstrapbase/style/moodle.css

index 88d8417..f3247ea 100644 (file)
Binary files a/lib/amd/build/sortable_list.min.js and b/lib/amd/build/sortable_list.min.js differ
index fbc8b9c..4606d43 100644 (file)
@@ -86,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
@@ -94,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 {
index 52b02fb..b22908e 100644 (file)
@@ -2070,6 +2070,7 @@ $footer-link-color: $bg-inverse-link-color !default;
 
 [data-drag-type="move"] {
     cursor: move;
+    touch-action: none;
 }
 
 .clickable {
index b0f897b..b430c6e 100644 (file)
@@ -10386,7 +10386,8 @@ ul {
   top: 0; }
 
 [data-drag-type="move"] {
-  cursor: move; }
+  cursor: move;
+  touch-action: none; }
 
 .clickable {
   cursor: pointer; }
index 6631c22..251435c 100644 (file)
@@ -2425,6 +2425,7 @@ h3.sectionname .inplaceeditable.inplaceeditingon .editinstructions {
 
 [data-drag-type="move"] {
     cursor: move;
+    touch-action: none;
 }
 
 .bg-pulse-grey {
index e047b70..79dd22b 100644 (file)
@@ -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;