mjolnir.js - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

CHANGELOG.md

 # Change Log
 
-#### [2.3.0] - Aug 3, 2019
+#### [2.4.0] - Jan 29, 2020
 
+- Add tabIndex option; change default to 0 (#55)
+- Add `eventManager.watch` (#56)
+
+#### [2.3.0] - Jan 13, 2020
+
 - Add priority option to event handlers (#54)
@@ -6,0 +11,0 @@

dist/es5/event-manager.js

@@ -35,3 +35,4 @@ "use strict";
   Manager: _hammer.Manager,
-  touchAction: 'none'
+  touchAction: 'none',
+  tabIndex: 0
 };
@@ -107,3 +108,4 @@
       this.keyInput = new _keyInput["default"](element, this._onOtherEvent, {
-        enable: false
+        enable: false,
+        tabIndex: options.tabIndex
       });
@@ -172,2 +174,7 @@ this.contextmenuInput = new _contextmenuInput["default"](element, this._onOtherEvent, {
   }, {
+    key: "watch",
+    value: function watch(event, handler, opts) {
+      this._addEventHandler(event, handler, opts, false, true);
+    }
+  }, {
     key: "off",
@@ -215,3 +222,3 @@ value: function off(event, handler) {
     key: "_addEventHandler",
-    value: function _addEventHandler(event, handler, opts, once) {
+    value: function _addEventHandler(event, handler, opts, once, passive) {
       if (typeof event !== 'string') {
@@ -221,3 +228,3 @@ opts = handler;
         for (var eventName in event) {
-          this._addEventHandler(eventName, event[eventName], opts, once);
+          this._addEventHandler(eventName, event[eventName], opts, once, passive);
         }
@@ -243,5 +250,7 @@
 
-      this._toggleRecognizer(eventRegistrar.recognizerName, true);
+      eventRegistrar.add(event, handler, opts, once, passive);
 
-      eventRegistrar.add(event, handler, opts, once);
+      if (!eventRegistrar.isEmpty()) {
+        this._toggleRecognizer(eventRegistrar.recognizerName, true);
+      }
     }
@@ -248,0 +257,0 @@ }, {

dist/es5/inputs/key-input.js

@@ -35,3 +35,3 @@ "use strict";
     this.handleEvent = this.handleEvent.bind(this);
-    element.tabIndex = 1;
+    element.tabIndex = options.tabIndex || 0;
     element.style.outline = 'none';
@@ -38,0 +38,0 @@ this.events.forEach(function (event) {

dist/es5/utils/event-registrar.js

@@ -30,2 +30,3 @@ "use strict";
     this.handleEvent = this.handleEvent.bind(this);
+    this._active = false;
   }
@@ -36,3 +37,3 @@
     value: function isEmpty() {
-      return this.handlers.length === 0;
+      return !this._active;
     }
@@ -43,2 +44,3 @@ }, {
       var once = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       var handlers = this.handlers,
@@ -65,6 +67,15 @@ handlersByElement = this.handlersByElement;
         srcElement: opts.srcElement,
-        priority: opts.priority,
-        once: once
+        priority: opts.priority
       };
+
+      if (once) {
+        entry.once = true;
+      }
+
+      if (passive) {
+        entry.passive = true;
+      }
+
       handlers.push(entry);
+      this._active = this._active || !entry.passive;
       var insertPosition = entries.length - 1;
@@ -101,2 +112,6 @@
       }
+
+      this._active = handlers.some(function (entry) {
+        return !entry.passive;
+      });
     }
@@ -103,0 +118,0 @@ }, {

dist/es6/event-manager.js

@@ -13,3 +13,4 @@ import { Manager } from './utils/hammer';
   Manager,
-  touchAction: 'none'
+  touchAction: 'none',
+  tabIndex: 0
 };
@@ -83,3 +84,4 @@ export default class EventManager {
     this.keyInput = new KeyInput(element, this._onOtherEvent, {
-      enable: false
+      enable: false,
+      tabIndex: options.tabIndex
     });
@@ -123,2 +125,6 @@ this.contextmenuInput = new ContextmenuInput(element, this._onOtherEvent, {
 
+  watch(event, handler, opts) {
+    this._addEventHandler(event, handler, opts, false, true);
+  }
+
   off(event, handler) {
@@ -165,3 +171,3 @@ this._removeEventHandler(event, handler);
 
-  _addEventHandler(event, handler, opts, once) {
+  _addEventHandler(event, handler, opts, once, passive) {
     if (typeof event !== 'string') {
@@ -171,3 +177,3 @@ opts = handler;
       for (var eventName in event) {
-        this._addEventHandler(eventName, event[eventName], opts, once);
+        this._addEventHandler(eventName, event[eventName], opts, once, passive);
       }
@@ -195,5 +201,7 @@
 
-    this._toggleRecognizer(eventRegistrar.recognizerName, true);
+    eventRegistrar.add(event, handler, opts, once, passive);
 
-    eventRegistrar.add(event, handler, opts, once);
+    if (!eventRegistrar.isEmpty()) {
+      this._toggleRecognizer(eventRegistrar.recognizerName, true);
+    }
   }
@@ -200,0 +208,0 @@

dist/es6/inputs/key-input.js

@@ -19,3 +19,3 @@ import { INPUT_EVENT_TYPES } from '../constants';
     this.handleEvent = this.handleEvent.bind(this);
-    element.tabIndex = 1;
+    element.tabIndex = options.tabIndex || 0;
     element.style.outline = 'none';
@@ -22,0 +22,0 @@ this.events.forEach(event => element.addEventListener(event, this.handleEvent));

dist/es6/utils/event-registrar.js

@@ -12,6 +12,7 @@ import { whichButtons, getOffsetPosition } from './event-utils';
     this.handleEvent = this.handleEvent.bind(this);
+    this._active = false;
   }
 
   isEmpty() {
-    return this.handlers.length === 0;
+    return !this._active;
   }
@@ -21,2 +22,3 @@
     var once = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
     var {
@@ -45,6 +47,15 @@ handlers,
       srcElement: opts.srcElement,
-      priority: opts.priority,
-      once
+      priority: opts.priority
     };
+
+    if (once) {
+      entry.once = true;
+    }
+
+    if (passive) {
+      entry.passive = true;
+    }
+
     handlers.push(entry);
+    this._active = this._active || !entry.passive;
     var insertPosition = entries.length - 1;
@@ -82,2 +93,4 @@
     }
+
+    this._active = handlers.some(entry => !entry.passive);
   }
@@ -84,0 +97,0 @@

dist/esm/event-manager.js

@@ -16,3 +16,4 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
   Manager: Manager,
-  touchAction: 'none'
+  touchAction: 'none',
+  tabIndex: 0
 };
@@ -90,3 +91,4 @@
       this.keyInput = new KeyInput(element, this._onOtherEvent, {
-        enable: false
+        enable: false,
+        tabIndex: options.tabIndex
       });
@@ -155,2 +157,7 @@ this.contextmenuInput = new ContextmenuInput(element, this._onOtherEvent, {
   }, {
+    key: "watch",
+    value: function watch(event, handler, opts) {
+      this._addEventHandler(event, handler, opts, false, true);
+    }
+  }, {
     key: "off",
@@ -198,3 +205,3 @@ value: function off(event, handler) {
     key: "_addEventHandler",
-    value: function _addEventHandler(event, handler, opts, once) {
+    value: function _addEventHandler(event, handler, opts, once, passive) {
       if (typeof event !== 'string') {
@@ -204,3 +211,3 @@ opts = handler;
         for (var eventName in event) {
-          this._addEventHandler(eventName, event[eventName], opts, once);
+          this._addEventHandler(eventName, event[eventName], opts, once, passive);
         }
@@ -226,5 +233,7 @@
 
-      this._toggleRecognizer(eventRegistrar.recognizerName, true);
+      eventRegistrar.add(event, handler, opts, once, passive);
 
-      eventRegistrar.add(event, handler, opts, once);
+      if (!eventRegistrar.isEmpty()) {
+        this._toggleRecognizer(eventRegistrar.recognizerName, true);
+      }
     }
@@ -231,0 +240,0 @@ }, {

dist/esm/inputs/key-input.js

@@ -25,3 +25,3 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
     this.handleEvent = this.handleEvent.bind(this);
-    element.tabIndex = 1;
+    element.tabIndex = options.tabIndex || 0;
     element.style.outline = 'none';
@@ -28,0 +28,0 @@ this.events.forEach(function (event) {

dist/esm/utils/event-registrar.js

@@ -18,2 +18,3 @@ import _typeof from "@babel/runtime/helpers/esm/typeof";
     this.handleEvent = this.handleEvent.bind(this);
+    this._active = false;
   }
@@ -24,3 +25,3 @@
     value: function isEmpty() {
-      return this.handlers.length === 0;
+      return !this._active;
     }
@@ -31,2 +32,3 @@ }, {
       var once = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      var passive = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       var handlers = this.handlers,
@@ -53,6 +55,15 @@ handlersByElement = this.handlersByElement;
         srcElement: opts.srcElement,
-        priority: opts.priority,
-        once: once
+        priority: opts.priority
       };
+
+      if (once) {
+        entry.once = true;
+      }
+
+      if (passive) {
+        entry.passive = true;
+      }
+
       handlers.push(entry);
+      this._active = this._active || !entry.passive;
       var insertPosition = entries.length - 1;
@@ -89,2 +100,6 @@
       }
+
+      this._active = handlers.some(function (entry) {
+        return !entry.passive;
+      });
     }
@@ -91,0 +106,0 @@ }, {

package.json

 {
   "name": "mjolnir.js",
   "description": "An Event Manager",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "keywords": [
@@ -6,0 +6,0 @@ "hammerjs",

src/event-manager.js

@@ -49,3 +49,4 @@ // Copyright (c) 2017 Uber Technologies, Inc.
   // https://github.com/uber/react-map-gl/issues/506
-  touchAction: 'none'
+  touchAction: 'none',
+  tabIndex: 0
 };
@@ -126,3 +127,4 @@
     this.keyInput = new KeyInput(element, this._onOtherEvent, {
-      enable: false
+      enable: false,
+      tabIndex: options.tabIndex
     });
@@ -173,2 +175,9 @@ this.contextmenuInput = new ContextmenuInput(element, this._onOtherEvent, {
 
+  // Register an event handler function to be called on `event`
+  // This handler does not ask the event to be recognized at all times.
+  // Instead, it only "intercepts" the event if some other handler is getting it.
+  watch(event, handler, opts) {
+    this._addEventHandler(event, handler, opts, false, true);
+  }
+
   /**
@@ -228,3 +237,3 @@ * Deregister a previously-registered event handler.
    */
-  _addEventHandler(event, handler, opts, once) {
+  _addEventHandler(event, handler, opts, once, passive) {
     if (typeof event !== 'string') {
@@ -234,3 +243,3 @@ opts = handler;
       for (const eventName in event) {
-        this._addEventHandler(eventName, event[eventName], opts, once);
+        this._addEventHandler(eventName, event[eventName], opts, once, passive);
       }
@@ -255,4 +264,6 @@ return;
     }
-    this._toggleRecognizer(eventRegistrar.recognizerName, true);
-    eventRegistrar.add(event, handler, opts, once);
+    eventRegistrar.add(event, handler, opts, once, passive);
+    if (!eventRegistrar.isEmpty()) {
+      this._toggleRecognizer(eventRegistrar.recognizerName, true);
+    }
   }
@@ -259,0 +270,0 @@

src/inputs/key-input.js

@@ -40,3 +40,3 @@ // Copyright (c) 2017 Uber Technologies, Inc.
 
-    element.tabIndex = 1;
+    element.tabIndex = options.tabIndex || 0;
     element.style.outline = 'none';
@@ -43,0 +43,0 @@ this.events.forEach(event => element.addEventListener(event, this.handleEvent));

src/utils/event-registrar.js

@@ -16,9 +16,11 @@ import {whichButtons, getOffsetPosition} from './event-utils';
     this.handleEvent = this.handleEvent.bind(this);
+    this._active = false;
   }
 
+  // Returns true if there are no non-passive handlers
   isEmpty() {
-    return this.handlers.length === 0;
+    return !this._active;
   }
 
-  add(type, handler, opts, once = false) {
+  add(type, handler, opts, once = false, passive = false) {
     const {handlers, handlersByElement} = this;
@@ -37,4 +39,11 @@
     }
-    const entry = {type, handler, srcElement: opts.srcElement, priority: opts.priority, once};
+    const entry = {type, handler, srcElement: opts.srcElement, priority: opts.priority};
+    if (once) {
+      entry.once = true;
+    }
+    if (passive) {
+      entry.passive = true;
+    }
     handlers.push(entry);
+    this._active = this._active || !entry.passive;
 
@@ -68,2 +77,3 @@ // Sort handlers by descending priority
     }
+    this._active = handlers.some(entry => !entry.passive);
   }
@@ -70,0 +80,0 @@

No alert changes

Improved metrics

Total package byte prevSize

387489

increased by1.85%

Lines of code

4199

increased by1.84%

No dependency changes