makeup-navigation-emitter - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

browser.json

 {
   "dependencies":[
+    "require-run: custom-event-polyfill",
     "require: ./index.js"
   ]
 }

docs/index.js

@@ -13,7 +13,14 @@ var NavigationEmitter = require('../index.js');
 
+var options = [
+    { },
+    { autoInit: -1, autoReset: -1 },
+    { autoInit: -1, autoReset: -1 }
+];
+
 appender.addEventListener('click', function() {
     widgetEls.forEach(function(el) {
+        var listEl = el.querySelector('ul');
         var listItem = document.createElement('li');
-        listItem.innerText = 'Item ' + parseInt(el.querySelectorAll('li').length, 10);
-        el.children[0].appendChild(listItem);
+        listItem.innerText = 'Item ' + parseInt(listEl.querySelectorAll('li').length, 10);
+        listEl.appendChild(listItem);
     });
@@ -23,14 +30,16 @@ });
 widgetEls.forEach(function(el, index) {
-    emitters.push(NavigationEmitter.createLinear(el, 'li'));
     el.addEventListener('navigationModelChange', function(e) {
         consoleEls[index].value = e.detail.toIndex;
     });
+    emitters.push(NavigationEmitter.createLinear(el, 'li', options[index]));
+    consoleEls[index].value = emitters[index].model.index;
 });
 
 wrapCheckbox.addEventListener('change', function(e) {
-    emitters[0].model.options.wrap = e.target.checked;
-    emitters[1].model.options.wrap = e.target.checked;
+    emitters.forEach(function(emitter) {
+        emitter.model.options.wrap = e.target.checked;
+    });
 });
 
-// emitters[0].model.index = 0;
-// emitters[1].model.index = 0;
+// emitters[0].model.index = 1;
+// emitters[1].model.index = 1;

docs/static/bundle.js

@@ -594,16 +594,3 @@ /*
 
-$_mod.def("/makeup-navigation-emitter$0.0.1/util", function(require, exports, module, __filename, __dirname) { "use strict";
-
-function nodeListToArray(nodeList) {
-    return Array.prototype.slice.call(nodeList);
-}
-
-module.exports = {
-    nodeListToArray: nodeListToArray
-};
-
-});
-$_mod.installed("makeup-navigation-emitter$0.0.1", "makeup-key-emitter", "0.0.2");
-$_mod.main("/makeup-key-emitter$0.0.2", "");
-$_mod.installed("makeup-key-emitter$0.0.2", "custom-event-polyfill", "0.3.0");
+$_mod.installed("makeup-navigation-emitter$0.0.2", "custom-event-polyfill", "0.3.0");
 $_mod.main("/custom-event-polyfill$0.3.0", "custom-event-polyfill");
@@ -657,2 +644,16 @@ $_mod.def("/custom-event-polyfill$0.3.0/custom-event-polyfill", function(require, exports, module, __filename, __dirname) { // Polyfill for creating CustomEvents on IE9/10/11
 $_mod.run("/custom-event-polyfill$0.3.0/custom-event-polyfill");
+$_mod.def("/makeup-navigation-emitter$0.0.2/util", function(require, exports, module, __filename, __dirname) { "use strict";
+
+function nodeListToArray(nodeList) {
+    return Array.prototype.slice.call(nodeList);
+}
+
+module.exports = {
+    nodeListToArray: nodeListToArray
+};
+
+});
+$_mod.installed("makeup-navigation-emitter$0.0.2", "makeup-key-emitter", "0.0.2");
+$_mod.main("/makeup-key-emitter$0.0.2", "");
+$_mod.installed("makeup-key-emitter$0.0.2", "custom-event-polyfill", "0.3.0");
 $_mod.def("/makeup-key-emitter$0.0.2/util", function(require, exports, module, __filename, __dirname) { 'use strict';
@@ -767,3 +768,3 @@
 });
-$_mod.installed("makeup-navigation-emitter$0.0.1", "makeup-exit-emitter", "0.0.2");
+$_mod.installed("makeup-navigation-emitter$0.0.2", "makeup-exit-emitter", "0.0.2");
 $_mod.main("/makeup-exit-emitter$0.0.2", "");
@@ -832,3 +833,3 @@ $_mod.installed("makeup-exit-emitter$0.0.2", "custom-event-polyfill", "0.3.0");
 });
-$_mod.def("/makeup-navigation-emitter$0.0.1/index", function(require, exports, module, __filename, __dirname) { 'use strict';
+$_mod.def("/makeup-navigation-emitter$0.0.2/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 
@@ -848,3 +849,3 @@ // requires Object.assign polyfill or transform for IE
 
-var Util = require('/makeup-navigation-emitter$0.0.1/util'/*'./util.js'*/);
+var Util = require('/makeup-navigation-emitter$0.0.2/util'/*'./util.js'*/);
 var KeyEmitter = require('/makeup-key-emitter$0.0.2/index'/*'makeup-key-emitter'*/);
@@ -855,2 +856,4 @@ var ExitEmitter = require('/makeup-exit-emitter$0.0.2/index'/*'makeup-exit-emitter'*/);
 var defaultOptions = {
+    autoInit: 0,
+    autoReset: null,
     wrap: false
@@ -897,3 +900,5 @@ };
 function onFocusExit() {
-    // console.log(e);
+    if (this._options.autoReset !== null) {
+        this.index = this._options.autoReset;
+    }
 }
@@ -937,6 +942,4 @@
         _this._options = _extends({}, defaultOptions, selectedOptions);
-
-        _this._index = null;
-
         _this._el = el;
+        _this._index = _this._options.autoInit;
         _this._itemSelector = itemSelector;
@@ -955,3 +958,3 @@ _this._items = Util.nodeListToArray(el.querySelectorAll(itemSelector));
         value: function atStart() {
-            return this.index === 0;
+            return this.index <= 0;
         }
@@ -970,3 +973,3 @@ }, {
                     },
-                    bubbles: false // mirror the native mouseleave event
+                    bubbles: false
                 }));
@@ -1049,3 +1052,3 @@ this._index = newIndex;
 });
-$_mod.def("/makeup-navigation-emitter$0.0.1/docs/index", function(require, exports, module, __filename, __dirname) { var NavigationEmitter = require('/makeup-navigation-emitter$0.0.1/index'/*'../index.js'*/);
+$_mod.def("/makeup-navigation-emitter$0.0.2/docs/index", function(require, exports, module, __filename, __dirname) { var NavigationEmitter = require('/makeup-navigation-emitter$0.0.2/index'/*'../index.js'*/);
 
@@ -1062,7 +1065,14 @@ function nodeListToArray(nodeList) {
 
+var options = [
+    { },
+    { autoInit: -1, autoReset: -1 },
+    { autoInit: -1, autoReset: -1 }
+];
+
 appender.addEventListener('click', function() {
     widgetEls.forEach(function(el) {
+        var listEl = el.querySelector('ul');
         var listItem = document.createElement('li');
-        listItem.innerText = 'Item ' + parseInt(el.querySelectorAll('li').length, 10);
-        el.children[0].appendChild(listItem);
+        listItem.innerText = 'Item ' + parseInt(listEl.querySelectorAll('li').length, 10);
+        listEl.appendChild(listItem);
     });
@@ -1072,17 +1082,19 @@ });
 widgetEls.forEach(function(el, index) {
-    emitters.push(NavigationEmitter.createLinear(el, 'li'));
     el.addEventListener('navigationModelChange', function(e) {
         consoleEls[index].value = e.detail.toIndex;
     });
+    emitters.push(NavigationEmitter.createLinear(el, 'li', options[index]));
+    consoleEls[index].value = emitters[index].model.index;
 });
 
 wrapCheckbox.addEventListener('change', function(e) {
-    emitters[0].model.options.wrap = e.target.checked;
-    emitters[1].model.options.wrap = e.target.checked;
+    emitters.forEach(function(emitter) {
+        emitter.model.options.wrap = e.target.checked;
+    });
 });
 
-// emitters[0].model.index = 0;
-// emitters[1].model.index = 0;
+// emitters[0].model.index = 1;
+// emitters[1].model.index = 1;
 
 });
-$_mod.run("/makeup-navigation-emitter$0.0.1/docs/index");
+$_mod.run("/makeup-navigation-emitter$0.0.2/docs/index");

index.js

@@ -22,2 +22,4 @@ 'use strict';
 var defaultOptions = {
+    autoInit: 0,
+    autoReset: null,
     wrap: false
@@ -64,3 +66,5 @@ };
 function onFocusExit() {
-    // console.log(e);
+    if (this._options.autoReset !== null) {
+        this.index = this._options.autoReset;
+    }
 }
@@ -104,6 +108,4 @@
         _this._options = _extends({}, defaultOptions, selectedOptions);
-
-        _this._index = null;
-
         _this._el = el;
+        _this._index = _this._options.autoInit;
         _this._itemSelector = itemSelector;
@@ -122,3 +124,3 @@ _this._items = Util.nodeListToArray(el.querySelectorAll(itemSelector));
         value: function atStart() {
-            return this.index === 0;
+            return this.index <= 0;
         }
@@ -137,3 +139,3 @@ }, {
                     },
-                    bubbles: false // mirror the native mouseleave event
+                    bubbles: false
                 }));
@@ -140,0 +142,0 @@ this._index = newIndex;

package.json

 {
   "name": "makeup-navigation-emitter",
   "description": "Emits custom events based on keyboard navigation of one or two dimensional model",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "index.js",
@@ -54,2 +54,3 @@ "repository": "https://github.com/makeup-js/makeup-navigation-emitter.git",
   "dependencies": {
+    "custom-event-polyfill": "^0.3.0",
     "makeup-exit-emitter": "~0.0",
@@ -56,0 +57,0 @@ "makeup-key-emitter": "~0.0"

README.md

@@ -10,9 +10,10 @@ # makeup-navigation-emitter
 
+A vanilla JavaScript port of <a href="https://github.com/ianmcburnie/jquery-linear-navigation">jquery-linear-navigation</a>.
+
 Emits custom events based on keyboard navigation of one or two dimensional model.
 
-A vanilla JavaScript port of <a href="https://github.com/ianmcburnie/jquery-linear-navigation">jquery-linear-navigation</a>.
-
 ## Experimental
 
-This module is still in an experimental state, until it reaches v1.0.0 you must consider all minor releases as breaking changes. Patch releases may introduce new features, but will be backwards compatible.
+This module is still in an experimental state, until it reaches v1.0.0 you must consider all minor releases as breaking
+changes. Patch releases may introduce new features, but will be backwards compatible.
 
@@ -29,6 +30,97 @@ ## Install
 
+## Example 1
+
+Example support for a roving tabindex model of keyboard navigation.
+
+Note that this module will not change focus, that is the job of an observer such as makeup-roving-tabindex.
+
+```html
+<div class="widget">
+    <ul>
+        <li tabindex="0">Item 0</li>
+        <li>Item 1</li>
+        <li>Item 2</li>
+    </ul>
+</div>
+```
+
+```js
+const NavigationEmitter = require('makeup-navigation-emitter');
+
+const widgetEl = document.querySelector('.widget');
+
+var emitter = NavigationEmitter.createLinear(widgetEl, 'li'));
+
+widgetEl.addEventListener('navigationModelChange', function(e) {
+    console.log(e.detail.fromIndex, e.detail.toIndex);
+});
+```
+
+## Example 2
+
+Example support for an active descendant model of navigation with focus on ancestor of items.
+
+Note that this module will not highlight the active item, that is the job of an observer such as makeup-active-descendant.
+
+```html
+<div class="widget" tabindex="0">
+    <ul>
+        <li>Item 0</li>
+        <li>Item 1</li>
+        <li>Item 2</li>
+    </ul>
+</div>
+```
+
+```js
+const NavigationEmitter = require('makeup-navigation-emitter');
+
+const widgetEl = document.querySelector('.widget');
+
+var emitter = NavigationEmitter.createLinear(widgetEl, 'li', { autoInit: -1, autoReset: -1 }));
+
+widgetEl.addEventListener('navigationModelChange', function(e) {
+    console.log(e.detail.fromIndex, e.detail.toIndex);
+});
+```
+
+## Example 3
+
+Example support for an active descendant model of navigation with focus on non-ancestor of items.
+
+Note that this module will not highlight the active item, that is the job of an observer such as makeup-active-descendant.
+
+```html
+<div class="widget">
+    <input type="text" />
+    <ul>
+        <li>Item 0</li>
+        <li>Item 1</li>
+        <li>Item 2</li>
+    </ul>
+</div>
+```
+
+```js
+const NavigationEmitter = require('makeup-navigation-emitter');
+
+const widgetEl = document.querySelector('.widget');
+
+var emitter = NavigationEmitter.createLinear(widgetEl, 'li', { autoInit: -1, autoReset: -1 }));
+
+widgetEl.addEventListener('navigationModelChange', function(e) {
+    console.log(e.detail.fromIndex, e.detail.toIndex);
+});
+```
+
+## Options
+
+* `autoInit`: specify an integer or -1 for initial index (default: 0)
+* `autoReset`: specify an integer or -1 for index position when focus exits widget (default: null)
+* `wrap` : specify whether arrow keys should wrap/loop (default: false)
+
 ## Dependencies
 
-* makeup-exit-emitter
-* makeup-key-emitter
+* https://github.com/makeup-js/makeup-exit-emitter
+* https://github.com/makeup-js/makeup-key-emitter
 
@@ -35,0 +127,0 @@ ## Development

src/index.js

@@ -12,2 +12,4 @@ 'use strict';
 const defaultOptions = {
+    autoInit: 0,
+    autoReset: null,
     wrap: false
@@ -54,3 +56,5 @@ };
 function onFocusExit() {
-    // console.log(e);
+    if (this._options.autoReset !== null) {
+        this.index = this._options.autoReset;
+    }
 }
@@ -79,6 +83,4 @@
         this._options = Object.assign({}, defaultOptions, selectedOptions);
-
-        this._index = null;
-
         this._el = el;
+        this._index = this._options.autoInit;
         this._itemSelector = itemSelector;
@@ -99,3 +101,3 @@ this._items = Util.nodeListToArray(el.querySelectorAll(itemSelector));
                 },
-                bubbles: false // mirror the native mouseleave event
+                bubbles: false
             }));
@@ -111,3 +113,3 @@ this._index = newIndex;
     atStart() {
-        return this.index === 0;
+        return this.index <= 0;
     }
@@ -114,0 +116,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

241330

increased by10.31%

Number of package files

23

increased by35.29%

Lines of code

1787

increased by39.5%

Number of lines in readme file

153

increased by150.82%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedcustom-event-polyfill@^0.3.0