Merge "Updated dom.bind to allow usage of passive events" from dataar…

…ts#223.
superkelvint · Mar 29, 2022 · 6461e91 · 6461e91
1 parent 40d1082
commit 6461e91
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 25 deletions.
diff --git a/src/dat/controllers/BooleanController.js b/src/dat/controllers/BooleanController.js
@@ -36,7 +36,7 @@ class BooleanController extends Controller {
       _this.setValue(!_this.__prev);
     }
 
-    dom.bind(this.__checkbox, 'change', onChange, false);
+    dom.bind(this.__checkbox, 'change', onChange, false, true);
 
     this.domElement.appendChild(this.__checkbox);
 

diff --git a/src/dat/controllers/ColorController.js b/src/dat/controllers/ColorController.js
@@ -59,25 +59,25 @@ class ColorController extends Controller {
       if (e.keyCode === 13) { // on enter
         onBlur.call(this);
       }
-    });
+    }, false, true);
 
-    dom.bind(this.__input, 'blur', onBlur);
+    dom.bind(this.__input, 'blur', onBlur, false, true);
 
     dom.bind(this.__selector, 'mousedown', function(/* e */) {
       dom
         .addClass(this, 'drag')
         .bind(window, 'mouseup', function(/* e */) {
           dom.removeClass(_this.__selector, 'drag');
         });
-    });
+    }, false, true);
 
     dom.bind(this.__selector, 'touchstart', function(/* e */) {
       dom
         .addClass(this, 'drag')
         .bind(window, 'touchend', function(/* e */) {
           dom.removeClass(_this.__selector, 'drag');
-        });
-    });
+        }, false, true);
+    }, false, true);
 
     const valueField = document.createElement('div');
 
@@ -161,16 +161,16 @@ class ColorController extends Controller {
       setSV(e);
       dom.bind(window, 'mousemove', setSV);
       dom.bind(window, 'touchmove', setSV);
-      dom.bind(window, 'mouseup', fieldUpSV);
-      dom.bind(window, 'touchend', fieldUpSV);
+      dom.bind(window, 'mouseup', fieldUpSV, false, true);
+      dom.bind(window, 'touchend', fieldUpSV, false, true);
     }
 
     function fieldDownH(e) {
       setH(e);
       dom.bind(window, 'mousemove', setH);
       dom.bind(window, 'touchmove', setH);
-      dom.bind(window, 'mouseup', fieldUpH);
-      dom.bind(window, 'touchend', fieldUpH);
+      dom.bind(window, 'mouseup', fieldUpH, false, true);
+      dom.bind(window, 'touchend', fieldUpH, false, true);
     }
 
     function fieldUpSV() {

diff --git a/src/dat/controllers/NumberControllerBox.js b/src/dat/controllers/NumberControllerBox.js
@@ -97,9 +97,9 @@ class NumberControllerBox extends NumberController {
 
     // Makes it so manually specified values are not truncated.
 
-    dom.bind(this.__input, 'change', onChange);
-    dom.bind(this.__input, 'blur', onBlur);
-    dom.bind(this.__input, 'mousedown', onMouseDown);
+    dom.bind(this.__input, 'change', onChange, false, true);
+    dom.bind(this.__input, 'blur', onBlur, false, true);
+    dom.bind(this.__input, 'mousedown', onMouseDown, false, true);
     dom.bind(this.__input, mousewheelevt, onMouseWheel);
     dom.bind(this.__input, 'keydown', function(e) {
       // When pressing enter, you can be as precise as you want.
@@ -122,7 +122,7 @@ class NumberControllerBox extends NumberController {
         default:
           break;
       }
-    });
+    }, false, true);
 
     this.updateDisplay();
 

diff --git a/src/dat/controllers/NumberControllerSlider.js b/src/dat/controllers/NumberControllerSlider.js
@@ -44,7 +44,7 @@ class NumberControllerSlider extends NumberController {
     this.__foreground = document.createElement('div');
 
     dom.bind(this.__background, 'mousedown', onMouseDown);
-    dom.bind(this.__background, 'touchstart', onTouchStart);
+    dom.bind(this.__background, 'touchstart', onTouchStart, false, true);
 
     dom.addClass(this.__background, 'slider');
     dom.addClass(this.__foreground, 'slider-fg');
@@ -53,7 +53,7 @@ class NumberControllerSlider extends NumberController {
       document.activeElement.blur();
 
       dom.bind(window, 'mousemove', onMouseDrag);
-      dom.bind(window, 'mouseup', onMouseUp);
+      dom.bind(window, 'mouseup', onMouseUp, false, true);
 
       onMouseDrag(e);
     }
@@ -80,8 +80,8 @@ class NumberControllerSlider extends NumberController {
 
     function onTouchStart(e) {
       if (e.touches.length !== 1) { return; }
-      dom.bind(window, 'touchmove', onTouchMove);
-      dom.bind(window, 'touchend', onTouchEnd);
+      dom.bind(window, 'touchmove', onTouchMove, false, true);
+      dom.bind(window, 'touchend', onTouchEnd, false, true);
       onTouchMove(e);
     }
 

diff --git a/src/dat/controllers/OptionController.js b/src/dat/controllers/OptionController.js
@@ -61,7 +61,7 @@ class OptionController extends Controller {
     dom.bind(this.__select, 'change', function() {
       const desiredValue = this.options[this.selectedIndex].value;
       _this.setValue(desiredValue);
-    });
+    }, false, true);
 
     this.domElement.appendChild(this.__select);
   }

diff --git a/src/dat/controllers/StringController.js b/src/dat/controllers/StringController.js
@@ -41,14 +41,14 @@ class StringController extends Controller {
     this.__input = document.createElement('input');
     this.__input.setAttribute('type', 'text');
 
-    dom.bind(this.__input, 'keyup', onChange);
-    dom.bind(this.__input, 'change', onChange);
-    dom.bind(this.__input, 'blur', onBlur);
+    dom.bind(this.__input, 'keyup', onChange, false, true);
+    dom.bind(this.__input, 'change', onChange, false, true);
+    dom.bind(this.__input, 'blur', onBlur, false, true);
     dom.bind(this.__input, 'keydown', function(e) {
       if (e.keyCode === 13) {
         this.blur();
       }
-    });
+    }, false, true);
 
     this.updateDisplay();
 

diff --git a/src/dat/dom/dom.js b/src/dat/dom/dom.js
@@ -161,10 +161,12 @@ const dom = {
    * @param func
    * @param bool
    */
-  bind: function(elem, event, func, newBool) {
+  bind: function(elem, event, func, newBool, newPassive) {
     const bool = newBool || false;
+    const passive = newPassive || false;
     if (elem.addEventListener) {
-      elem.addEventListener(event, func, bool);
+      const listenerArg = (common.supportsPassive()) ? { capture: bool, passive: passive } : bool;
+      elem.addEventListener(event, func, listenerArg);
     } else if (elem.attachEvent) {
       elem.attachEvent('on' + event, func);
     }

diff --git a/src/dat/utils/common.js b/src/dat/utils/common.js
@@ -150,6 +150,22 @@ const Common = {
 
   isFunction: function(obj) {
     return obj instanceof Function;
+  },
+
+  supportsPassive: function() {
+    let supportsPassive = false;
+    try {
+      const opts = Object.defineProperty({}, 'passive', {
+        get: function () {
+          supportsPassive = true;
+        }
+      });
+      window.addEventListener('testPassive', null, opts);
+      window.removeEventListener('testPassive', null, opts);
+    } catch (e) {
+      // Do nothing
+    }
+    return supportsPassive;
   }
 
 };