Updated dom.bind to allow usage of passive events

Updated all calls to dom.bind to use passive if preventDefault isn't used

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

src/dat/controllers/ColorController.js

@@ -59,9 +59,9 @@ 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
@@ -69,15 +69,15 @@ class ColorController extends Controller {
         .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, 'mouseup', fieldUpSV, false, true);
-      dom.bind(window, 'touchend', fieldUpSV);
+      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, 'mouseup', fieldUpH, false, true);
-      dom.bind(window, 'touchend', fieldUpH);
+      dom.bind(window, 'touchend', fieldUpH, false, true);
     }
 
     function fieldUpSV() {

src/dat/controllers/NumberControllerBox.js

@@ -79,8 +79,8 @@ class NumberControllerBox extends NumberController {
     }
 
     function onMouseDown(e) {
-      dom.bind(window, 'mousemove', onMouseDrag);
+      dom.bind(window, 'mousemove', onMouseDrag, false, true);
-      dom.bind(window, 'mouseup', onMouseUp);
+      dom.bind(window, 'mouseup', onMouseUp, false, true);
       prevY = e.clientY;
     }
 
@@ -89,9 +89,9 @@ class NumberControllerBox extends NumberController {
 
     // Makes it so manually specified values are not truncated.
 
-    dom.bind(this.__input, 'change', onChange);
+    dom.bind(this.__input, 'change', onChange, false, true);
-    dom.bind(this.__input, 'blur', onBlur);
+    dom.bind(this.__input, 'blur', onBlur, false, true);
-    dom.bind(this.__input, 'mousedown', onMouseDown);
+    dom.bind(this.__input, 'mousedown', onMouseDown, false, true);
     dom.bind(this.__input, 'keydown', function(e) {
       // When pressing enter, you can be as precise as you want.
       if (e.keyCode === 13) {
@@ -100,7 +100,7 @@ class NumberControllerBox extends NumberController {
         _this.__truncationSuspended = false;
         onFinish();
       }
-    });
+    }, false, true);
 
     this.updateDisplay();
 

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, 'touchmove', onTouchMove, false, true);
-      dom.bind(window, 'touchend', onTouchEnd);
+      dom.bind(window, 'touchend', onTouchEnd, false, true);
       onTouchMove(e);
     }
 

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);
   }

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, 'keyup', onChange, false, true);
-    dom.bind(this.__input, 'change', onChange);
+    dom.bind(this.__input, 'change', onChange, false, true);
-    dom.bind(this.__input, 'blur', onBlur);
+    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();
 

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);
     }

src/dat/utils/common.js

@@ -150,6 +150,22 @@ const Common = {
 
   isFunction: function(obj) {
     return Object.prototype.toString.call(obj) === '[object 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;
   }
 
 };