From f7d33e472f137517cba8dbf22dadacf47b16fdeb Mon Sep 17 00:00:00 2001 From: David Wakelin Date: Mon, 8 Apr 2019 16:28:58 +0100 Subject: [PATCH] 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 | 2 +- src/dat/controllers/ColorController.js | 18 +++++++++--------- src/dat/controllers/NumberControllerBox.js | 12 ++++++------ src/dat/controllers/NumberControllerSlider.js | 8 ++++---- src/dat/controllers/OptionController.js | 2 +- src/dat/controllers/StringController.js | 8 ++++---- src/dat/dom/dom.js | 6 ++++-- src/dat/utils/common.js | 16 ++++++++++++++++ 8 files changed, 45 insertions(+), 27 deletions(-) diff --git a/src/dat/controllers/BooleanController.js b/src/dat/controllers/BooleanController.js index ee1dd2d..3bd6403 100644 --- 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 index 649edae..53a8f73 100644 --- a/src/dat/controllers/ColorController.js +++ b/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, '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 index 462ebf2..5847d4e 100644 --- a/src/dat/controllers/NumberControllerBox.js +++ b/src/dat/controllers/NumberControllerBox.js @@ -79,8 +79,8 @@ class NumberControllerBox extends NumberController { } function onMouseDown(e) { - dom.bind(window, 'mousemove', onMouseDrag); - dom.bind(window, 'mouseup', onMouseUp); + dom.bind(window, 'mousemove', onMouseDrag, false, true); + 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, '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, '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(); diff --git a/src/dat/controllers/NumberControllerSlider.js b/src/dat/controllers/NumberControllerSlider.js index f75bc0e..8632ba3 100644 --- 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 index b349031..5df1e6b 100644 --- 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 index 63cf29a..39caefb 100644 --- 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 index b802fc9..a9f9d9a 100644 --- 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 index 1b3ec0b..6c3ded5 100644 --- a/src/dat/utils/common.js +++ b/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; } };