makeup-roving-tabindex - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

docs/index.js

@@ -21,4 +21,4 @@ var RovingTabindex = require('../index.js');
 widgetEls.forEach(function(el) {
-    rovers.push(RovingTabindex.createLinear(el, 'li'));
-    rovers[0].index = 0;
+    rovers.push(RovingTabindex.createLinear(el, 'li', { index: 0 }));
+
     el.addEventListener('rovingTabindexChange', function(e) {
@@ -30,4 +30,5 @@ console.log(e);
 wrapCheckbox.addEventListener('change', function(e) {
-    rovers[0].wrap = e.target.checked;
-    // rovers[1].options.wrap = e.target.checked;
+    rovers.forEach(function(rover) {
+        rover.wrap = e.target.checked;
+    });
 });

docs/static/bundle.js

@@ -594,18 +594,5 @@ /*
 
-$_mod.installed("makeup-roving-tabindex$0.0.1", "makeup-navigation-emitter", "0.0.1");
-$_mod.main("/makeup-navigation-emitter$0.0.1", "");
-$_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-roving-tabindex$0.0.2", "makeup-navigation-emitter", "0.0.3");
+$_mod.main("/makeup-navigation-emitter$0.0.3", "");
+$_mod.installed("makeup-navigation-emitter$0.0.3", "custom-event-polyfill", "0.3.0");
 $_mod.main("/custom-event-polyfill$0.3.0", "custom-event-polyfill");
@@ -659,2 +646,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.3/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.3", "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';
@@ -769,3 +770,3 @@
 });
-$_mod.installed("makeup-navigation-emitter$0.0.1", "makeup-exit-emitter", "0.0.2");
+$_mod.installed("makeup-navigation-emitter$0.0.3", "makeup-exit-emitter", "0.0.2");
 $_mod.main("/makeup-exit-emitter$0.0.2", "");
@@ -834,3 +835,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.3/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 
@@ -840,6 +841,6 @@ // requires Object.assign polyfill or transform for IE
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -851,3 +852,3 @@
 
-var Util = require('/makeup-navigation-emitter$0.0.1/util'/*'./util.js'*/);
+var Util = require('/makeup-navigation-emitter$0.0.3/util'/*'./util.js'*/);
 var KeyEmitter = require('/makeup-key-emitter$0.0.2/index'/*'makeup-key-emitter'*/);
@@ -858,2 +859,4 @@ var ExitEmitter = require('/makeup-exit-emitter$0.0.2/index'/*'makeup-exit-emitter'*/);
 var defaultOptions = {
+    autoInit: 0,
+    autoReset: null,
     wrap: false
@@ -871,3 +874,3 @@ };
         this.index--;
-    } else if (this._options.wrap) {
+    } else if (this.options.wrap) {
         this.index = this.items.length - 1;
@@ -880,3 +883,3 @@ }
         this.index++;
-    } else if (this._options.wrap) {
+    } else if (this.options.wrap) {
         this.index = 0;
@@ -902,8 +905,10 @@ }
 function onFocusExit() {
-    // console.log(e);
+    if (this.options.autoReset !== null) {
+        this.index = this.options.autoReset;
+    }
 }
 
 function onMutation() {
-    this._items = Util.nodeListToArray(this._el.querySelectorAll(this._itemSelector));
-    setData(this._items);
+    this.items = Util.nodeListToArray(this._el.querySelectorAll(this._itemSelector));
+    setData(this.items);
 
@@ -913,22 +918,11 @@ this._el.dispatchEvent(new CustomEvent('navigationModelMutation'));
 
-var NavigationModel = function () {
-    function NavigationModel() {
-        _classCallCheck(this, NavigationModel);
-    }
+var NavigationModel = function NavigationModel(el, itemSelector, selectedOptions) {
+    _classCallCheck(this, NavigationModel);
 
-    _createClass(NavigationModel, [{
-        key: 'items',
-        get: function get() {
-            return this._items;
-        }
-    }, {
-        key: 'options',
-        get: function get() {
-            return this._options;
-        }
-    }]);
+    this.options = _extends({}, defaultOptions, selectedOptions);
+    this._el = el;
+    this._itemSelector = itemSelector;
+    this.items = Util.nodeListToArray(el.querySelectorAll(itemSelector));
+};
 
-    return NavigationModel;
-}();
-
 var LinearNavigationModel = function (_NavigationModel) {
@@ -940,11 +934,13 @@ _inherits(LinearNavigationModel, _NavigationModel);
 
-        var _this = _possibleConstructorReturn(this, (LinearNavigationModel.__proto__ || Object.getPrototypeOf(LinearNavigationModel)).call(this));
+        var _this = _possibleConstructorReturn(this, (LinearNavigationModel.__proto__ || Object.getPrototypeOf(LinearNavigationModel)).call(this, el, itemSelector, selectedOptions));
 
-        _this._options = _extends({}, defaultOptions, selectedOptions);
-
-        _this._index = null;
-
-        _this._el = el;
-        _this._itemSelector = itemSelector;
-        _this._items = Util.nodeListToArray(el.querySelectorAll(itemSelector));
+        if (_this.options.autoInit !== null) {
+            _this._index = _this.options.autoInit;
+            _this._el.dispatchEvent(new CustomEvent('navigationModelInit', {
+                detail: {
+                    toIndex: _this.options.autoInit
+                },
+                bubbles: false
+            }));
+        }
         return _this;
@@ -961,3 +957,3 @@ }
         value: function atStart() {
-            return this.index === 0;
+            return this.index <= 0;
         }
@@ -976,3 +972,3 @@ }, {
                     },
-                    bubbles: false // mirror the native mouseleave event
+                    bubbles: false
                 }));
@@ -1002,11 +998,11 @@ this._index = newIndex;
 
-        this._model = model;
+        this.model = model;
 
-        this.keyPrevListener = onKeyPrev.bind(model);
-        this.keyNextListener = onKeyNext.bind(model);
-        this.keyHomeListener = onKeyHome.bind(model);
-        this.keyEndListener = onKeyEnd.bind(model);
-        this.clickListener = onClick.bind(model);
-        this.focusExitListener = onFocusExit.bind(model);
-        this.observer = new MutationObserver(onMutation.bind(model));
+        this._keyPrevListener = onKeyPrev.bind(model);
+        this._keyNextListener = onKeyNext.bind(model);
+        this._keyHomeListener = onKeyHome.bind(model);
+        this._keyEndListener = onKeyEnd.bind(model);
+        this._clickListener = onClick.bind(model);
+        this._focusExitListener = onFocusExit.bind(model);
+        this._observer = new MutationObserver(onMutation.bind(model));
 
@@ -1018,20 +1014,15 @@ setData(model.items);
 
-        el.addEventListener('arrowLeftKeyDown', this.keyPrevListener);
-        el.addEventListener('arrowRightKeyDown', this.keyNextListener);
-        el.addEventListener('arrowUpKeyDown', this.keyPrevListener);
-        el.addEventListener('arrowDownKeyDown', this.keyNextListener);
-        el.addEventListener('homeKeyDown', this.keyHomeListener);
-        el.addEventListener('endKeyDown', this.keyEndListener);
-        el.addEventListener('click', this.clickListener);
-        el.addEventListener('focusExit', this.focusExitListener);
+        el.addEventListener('arrowLeftKeyDown', this._keyPrevListener);
+        el.addEventListener('arrowRightKeyDown', this._keyNextListener);
+        el.addEventListener('arrowUpKeyDown', this._keyPrevListener);
+        el.addEventListener('arrowDownKeyDown', this._keyNextListener);
+        el.addEventListener('homeKeyDown', this._keyHomeListener);
+        el.addEventListener('endKeyDown', this._keyEndListener);
+        el.addEventListener('click', this._clickListener);
+        el.addEventListener('focusExit', this._focusExitListener);
 
-        this.observer.observe(el, { childList: true, subtree: true });
+        this._observer.observe(el, { childList: true, subtree: true });
     }
 
-    _createClass(NavigationEmitter, [{
-        key: 'model',
-        get: function get() {
-            return this._model;
-        }
-    }], [{
+    _createClass(NavigationEmitter, null, [{
         key: 'createLinear',
@@ -1043,8 +1034,9 @@ value: function createLinear(el, itemSelector, selectedOptions) {
         }
-    }, {
-        key: 'createGrid',
-        value: function createGrid(el, rowSelector, colSelector, selectedOptions) {
-            // eslint-disable-line
+
+        /*
+        static createGrid(el, rowSelector, colSelector, selectedOptions) {
             return null;
         }
+        */
+
     }]);
@@ -1058,3 +1050,3 @@
 });
-$_mod.def("/makeup-roving-tabindex$0.0.1/util", function(require, exports, module, __filename, __dirname) { "use strict";
+$_mod.def("/makeup-roving-tabindex$0.0.2/util", function(require, exports, module, __filename, __dirname) { "use strict";
 
@@ -1070,4 +1062,6 @@ function nodeListToArray(nodeList) {
 });
-$_mod.def("/makeup-roving-tabindex$0.0.1/index", function(require, exports, module, __filename, __dirname) { 'use strict';
+$_mod.def("/makeup-roving-tabindex$0.0.2/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -1081,13 +1075,36 @@
 
-var NavigationEmitter = require('/makeup-navigation-emitter$0.0.1/index'/*'makeup-navigation-emitter'*/);
-var Util = require('/makeup-roving-tabindex$0.0.1/util'/*'./util.js'*/);
+var NavigationEmitter = require('/makeup-navigation-emitter$0.0.3/index'/*'makeup-navigation-emitter'*/);
+var Util = require('/makeup-roving-tabindex$0.0.2/util'/*'./util.js'*/);
 
+var defaultOptions = {
+    index: 0
+};
+
 function onModelMutation() {
+    var modelIndex = this._navigationEmitter.model.index;
+
     this._items = Util.nodeListToArray(this._el.querySelectorAll(this._itemSelector));
-    this.updateView();
+
+    this._items.forEach(function (el, index) {
+        if (index !== modelIndex) {
+            el.setAttribute('tabindex', '-1');
+        } else {
+            el.setAttribute('tabindex', '0');
+        }
+    });
 }
 
+function onModelInit(e) {
+    this._index = e.detail.toIndex;
+
+    this._items.forEach(function (el) {
+        el.setAttribute('tabindex', '-1');
+    });
+
+    this._items[e.detail.toIndex].setAttribute('tabindex', '0');
+}
+
 function onModelChange(e) {
-    var fromItem = this.items[e.detail.fromIndex];
-    var toItem = this.items[e.detail.toIndex];
+    var fromItem = this._items[e.detail.fromIndex];
+    var toItem = this._items[e.detail.toIndex];
 
@@ -1097,4 +1114,8 @@ if (fromItem) {
     }
-    toItem.setAttribute('tabindex', '0');
-    toItem.focus();
+
+    if (toItem) {
+        toItem.setAttribute('tabindex', '0');
+        toItem.focus();
+    }
+
     this._el.dispatchEvent(new CustomEvent('rovingTabindexChange', {
@@ -1108,10 +1129,2 @@ detail: {
 
-function onUpdateEachItem(item, index) {
-    if (index !== this._navigationEmitter.model.index) {
-        item.setAttribute('tabindex', '-1');
-    } else {
-        item.setAttribute('tabindex', '0');
-    }
-}
-
 var RovingTabindex = function RovingTabindex(el) {
@@ -1121,7 +1134,9 @@ _classCallCheck(this, RovingTabindex);
     this._el = el;
-    this.onMutationListener = onModelMutation.bind(this);
-    this.onChangeListener = onModelChange.bind(this);
+    this._onMutationListener = onModelMutation.bind(this);
+    this._onChangeListener = onModelChange.bind(this);
+    this._onInitListener = onModelInit.bind(this);
 
-    el.addEventListener('navigationModelMutation', this.onMutationListener);
-    el.addEventListener('navigationModelChange', this.onChangeListener);
+    el.addEventListener('navigationModelMutation', this._onMutationListener);
+    el.addEventListener('navigationModelChange', this._onChangeListener);
+    el.addEventListener('navigationModelInit', this._onInitListener);
 };
@@ -1132,3 +1147,3 @@
 
-    function LinearRovingTabindex(el, itemSelector) {
+    function LinearRovingTabindex(el, itemSelector, selectedOptions) {
         _classCallCheck(this, LinearRovingTabindex);
@@ -1138,5 +1153,11 @@
 
-        _this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector);
+        _this._options = _extends({}, defaultOptions, selectedOptions);
+
         _this._itemSelector = itemSelector;
-        _this._items = Util.nodeListToArray(el.querySelectorAll(_this._itemSelector));
+        _this._items = Util.nodeListToArray(el.querySelectorAll(itemSelector));
+
+        _this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {
+            autoInit: _this._options.index,
+            autoReset: null
+        });
         return _this;
@@ -1146,18 +1167,2 @@ }
     _createClass(LinearRovingTabindex, [{
-        key: 'updateView',
-        value: function updateView() {
-            this.items.forEach(onUpdateEachItem.bind(this));
-        }
-    }, {
-        key: 'items',
-        get: function get() {
-            return this._items;
-        }
-    }, {
-        key: 'index',
-        set: function set(newIndex) {
-            this._navigationEmitter.model.index = newIndex;
-            this.updateView();
-        }
-    }, {
         key: 'wrap',
@@ -1180,4 +1185,4 @@ set: function set(newWrap) {
 
-function createLinear(el, itemSelector) {
-    return new LinearRovingTabindex(el, itemSelector);
+function createLinear(el, itemSelector, selectedOptions) {
+    return new LinearRovingTabindex(el, itemSelector, selectedOptions);
 }
@@ -1190,3 +1195,3 @@
 });
-$_mod.def("/makeup-roving-tabindex$0.0.1/docs/index", function(require, exports, module, __filename, __dirname) { var RovingTabindex = require('/makeup-roving-tabindex$0.0.1/index'/*'../index.js'*/);
+$_mod.def("/makeup-roving-tabindex$0.0.2/docs/index", function(require, exports, module, __filename, __dirname) { var RovingTabindex = require('/makeup-roving-tabindex$0.0.2/index'/*'../index.js'*/);
 
@@ -1211,4 +1216,4 @@ function nodeListToArray(nodeList) {
 widgetEls.forEach(function(el) {
-    rovers.push(RovingTabindex.createLinear(el, 'li'));
-    rovers[0].index = 0;
+    rovers.push(RovingTabindex.createLinear(el, 'li', { index: 0 }));
+
     el.addEventListener('rovingTabindexChange', function(e) {
@@ -1220,7 +1225,8 @@ console.log(e);
 wrapCheckbox.addEventListener('change', function(e) {
-    rovers[0].wrap = e.target.checked;
-    // rovers[1].options.wrap = e.target.checked;
+    rovers.forEach(function(rover) {
+        rover.wrap = e.target.checked;
+    });
 });
 
 });
-$_mod.run("/makeup-roving-tabindex$0.0.1/docs/index");
+$_mod.run("/makeup-roving-tabindex$0.0.2/docs/index");

index.js

 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -14,10 +16,33 @@
 
+var defaultOptions = {
+    index: 0
+};
+
 function onModelMutation() {
+    var modelIndex = this._navigationEmitter.model.index;
+
     this._items = Util.nodeListToArray(this._el.querySelectorAll(this._itemSelector));
-    this.updateView();
+
+    this._items.forEach(function (el, index) {
+        if (index !== modelIndex) {
+            el.setAttribute('tabindex', '-1');
+        } else {
+            el.setAttribute('tabindex', '0');
+        }
+    });
 }
 
+function onModelInit(e) {
+    this._index = e.detail.toIndex;
+
+    this._items.forEach(function (el) {
+        el.setAttribute('tabindex', '-1');
+    });
+
+    this._items[e.detail.toIndex].setAttribute('tabindex', '0');
+}
+
 function onModelChange(e) {
-    var fromItem = this.items[e.detail.fromIndex];
-    var toItem = this.items[e.detail.toIndex];
+    var fromItem = this._items[e.detail.fromIndex];
+    var toItem = this._items[e.detail.toIndex];
 
@@ -27,4 +52,8 @@ if (fromItem) {
     }
-    toItem.setAttribute('tabindex', '0');
-    toItem.focus();
+
+    if (toItem) {
+        toItem.setAttribute('tabindex', '0');
+        toItem.focus();
+    }
+
     this._el.dispatchEvent(new CustomEvent('rovingTabindexChange', {
@@ -38,10 +67,2 @@ detail: {
 
-function onUpdateEachItem(item, index) {
-    if (index !== this._navigationEmitter.model.index) {
-        item.setAttribute('tabindex', '-1');
-    } else {
-        item.setAttribute('tabindex', '0');
-    }
-}
-
 var RovingTabindex = function RovingTabindex(el) {
@@ -51,7 +72,9 @@ _classCallCheck(this, RovingTabindex);
     this._el = el;
-    this.onMutationListener = onModelMutation.bind(this);
-    this.onChangeListener = onModelChange.bind(this);
+    this._onMutationListener = onModelMutation.bind(this);
+    this._onChangeListener = onModelChange.bind(this);
+    this._onInitListener = onModelInit.bind(this);
 
-    el.addEventListener('navigationModelMutation', this.onMutationListener);
-    el.addEventListener('navigationModelChange', this.onChangeListener);
+    el.addEventListener('navigationModelMutation', this._onMutationListener);
+    el.addEventListener('navigationModelChange', this._onChangeListener);
+    el.addEventListener('navigationModelInit', this._onInitListener);
 };
@@ -62,3 +85,3 @@
 
-    function LinearRovingTabindex(el, itemSelector) {
+    function LinearRovingTabindex(el, itemSelector, selectedOptions) {
         _classCallCheck(this, LinearRovingTabindex);
@@ -68,5 +91,11 @@
 
-        _this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector);
+        _this._options = _extends({}, defaultOptions, selectedOptions);
+
         _this._itemSelector = itemSelector;
-        _this._items = Util.nodeListToArray(el.querySelectorAll(_this._itemSelector));
+        _this._items = Util.nodeListToArray(el.querySelectorAll(itemSelector));
+
+        _this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {
+            autoInit: _this._options.index,
+            autoReset: null
+        });
         return _this;
@@ -76,18 +105,2 @@ }
     _createClass(LinearRovingTabindex, [{
-        key: 'updateView',
-        value: function updateView() {
-            this.items.forEach(onUpdateEachItem.bind(this));
-        }
-    }, {
-        key: 'items',
-        get: function get() {
-            return this._items;
-        }
-    }, {
-        key: 'index',
-        set: function set(newIndex) {
-            this._navigationEmitter.model.index = newIndex;
-            this.updateView();
-        }
-    }, {
         key: 'wrap',
@@ -110,4 +123,4 @@ set: function set(newWrap) {
 
-function createLinear(el, itemSelector) {
-    return new LinearRovingTabindex(el, itemSelector);
+function createLinear(el, itemSelector, selectedOptions) {
+    return new LinearRovingTabindex(el, itemSelector, selectedOptions);
 }
@@ -114,0 +127,0 @@

package.json

 {
   "name": "makeup-roving-tabindex",
   "description": "Implements a roving tab index on given collection of elements",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "index.js",
@@ -12,3 +12,3 @@ "repository": "https://github.com/makeup-js/makeup-roving-tabindex.git",
     "test": "npm run transpile && npm run lasso:test && npm run clean && karma start --autoWatch false --singleRun true",
-    "prepublishOnly": "npm run clean && npm run lint && npm run test && npm run build",
+    "prepublishOnly": "npm run clean && npm run lint && npm run build && npm run test",
     "build": "npm run transpile && npm run lasso",
@@ -15,0 +15,0 @@ "fix": "eslint src/index.js src/util.js --fix",

README.md

@@ -38,7 +38,4 @@ # makeup-roving-tabindex
 // create a roving tabindex instance on the element
-const rovingTabindex = RovingTabindex.createLinear(widgetEl, 'li');
+const rovingTabindex = RovingTabindex.createLinear(widgetEl, 'li', { index: 0 });
 
-// set the active element
-rovingTabindex.index = 0;
-
 // listen for events (optional)
@@ -74,2 +71,6 @@ widgetEl.addEventListener('rovingTabindexChange', function(e) {
 
+## Options
+
+* `index`: the index position of the active item (default: 0)
+
 ## Custom Events        
@@ -76,0 +77,0 @@

src/index.js

@@ -6,10 +6,33 @@ 'use strict';
 
+const defaultOptions = {
+    index: 0
+};
+
 function onModelMutation() {
+    const modelIndex = this._navigationEmitter.model.index;
+
     this._items = Util.nodeListToArray(this._el.querySelectorAll(this._itemSelector));
-    this.updateView();
+
+    this._items.forEach(function(el, index) {
+        if (index !== modelIndex) {
+            el.setAttribute('tabindex', '-1');
+        } else {
+            el.setAttribute('tabindex', '0');
+        }
+    });
 }
 
+function onModelInit(e) {
+    this._index = e.detail.toIndex;
+
+    this._items.forEach(function(el) {
+        el.setAttribute('tabindex', '-1');
+    });
+
+    this._items[e.detail.toIndex].setAttribute('tabindex', '0');
+}
+
 function onModelChange(e) {
-    const fromItem = this.items[e.detail.fromIndex];
-    const toItem = this.items[e.detail.toIndex];
+    const fromItem = this._items[e.detail.fromIndex];
+    const toItem = this._items[e.detail.toIndex];
 
@@ -19,4 +42,8 @@ if (fromItem) {
     }
-    toItem.setAttribute('tabindex', '0');
-    toItem.focus();
+
+    if (toItem) {
+        toItem.setAttribute('tabindex', '0');
+        toItem.focus();
+    }
+
     this._el.dispatchEvent(new CustomEvent('rovingTabindexChange', {
@@ -30,18 +57,12 @@ detail: {
 
-function onUpdateEachItem(item, index) {
-    if (index !== this._navigationEmitter.model.index) {
-        item.setAttribute('tabindex', '-1');
-    } else {
-        item.setAttribute('tabindex', '0');
-    }
-}
-
 class RovingTabindex {
     constructor(el) {
         this._el = el;
-        this.onMutationListener = onModelMutation.bind(this);
-        this.onChangeListener = onModelChange.bind(this);
+        this._onMutationListener = onModelMutation.bind(this);
+        this._onChangeListener = onModelChange.bind(this);
+        this._onInitListener = onModelInit.bind(this);
 
-        el.addEventListener('navigationModelMutation', this.onMutationListener);
-        el.addEventListener('navigationModelChange', this.onChangeListener);
+        el.addEventListener('navigationModelMutation', this._onMutationListener);
+        el.addEventListener('navigationModelChange', this._onChangeListener);
+        el.addEventListener('navigationModelInit', this._onInitListener);
     }
@@ -51,23 +72,16 @@ }
 class LinearRovingTabindex extends RovingTabindex {
-    constructor(el, itemSelector) {
+    constructor(el, itemSelector, selectedOptions) {
         super(el);
 
-        this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector);
+        this._options = Object.assign({}, defaultOptions, selectedOptions);
+
         this._itemSelector = itemSelector;
-        this._items = Util.nodeListToArray(el.querySelectorAll(this._itemSelector));
-    }
+        this._items = Util.nodeListToArray(el.querySelectorAll(itemSelector));
 
-    updateView() {
-        this.items.forEach(onUpdateEachItem.bind(this));
+        this._navigationEmitter = NavigationEmitter.createLinear(el, itemSelector, {
+            autoInit: this._options.index,
+            autoReset: null
+        });
     }
 
-    get items() {
-        return this._items;
-    }
-
-    set index(newIndex) {
-        this._navigationEmitter.model.index = newIndex;
-        this.updateView();
-    }
-
     set wrap(newWrap) {
@@ -86,4 +100,4 @@ this._navigationEmitter.model.options.wrap = newWrap;
 
-function createLinear(el, itemSelector) {
-    return new LinearRovingTabindex(el, itemSelector);
+function createLinear(el, itemSelector, selectedOptions) {
+    return new LinearRovingTabindex(el, itemSelector, selectedOptions);
 }
@@ -90,0 +104,0 @@

No alert changes

Improved metrics

Total package byte prevSize

238978

9.06%

Number of package files

23

35.29%

Lines of code

1746

40.92%

Number of lines in readme file

113

0.89%

No dependency changes