makeup-expander - npm Package Compare versions

Comparing version 0.0.3 to 0.1.0

docs/index.js

@@ -10,2 +10,3 @@ function nodeListToArray(nodeList) {
 var hoverAndFocusExpanderEls = nodeListToArray(document.querySelectorAll('.expander--focus-and-hover'));
+var stealthExpanderEls = nodeListToArray(document.querySelectorAll('.expander--stealth-only'));
 var expanderWidgets = [];
@@ -29,9 +30,13 @@
 
+stealthExpanderEls.forEach(function(el, i) {
+    expanderWidgets.push(new Expander(el, { autoCollapse: true, click: true, focusManagement: 'focusable' }));
+});
+
 expanderWidgets.forEach(function(item, i) {
-    item.el.addEventListener('expanded', function(e) {
+    item.el.addEventListener('expanderExpand', function(e) {
         console.log(e);
     });
-    item.el.addEventListener('collapsed', function(e) {
+    item.el.addEventListener('expanderCollapse', function(e) {
         console.log(e);
     });
 });

docs/static/bundle.js

@@ -594,3 +594,3 @@ /*
 
-$_mod.installed("makeup-expander$0.0.3", "custom-event-polyfill", "0.3.0");
+$_mod.installed("makeup-expander$0.1.0", "custom-event-polyfill", "0.3.0");
 $_mod.main("/custom-event-polyfill$0.3.0", "custom-event-polyfill");
@@ -644,3 +644,3 @@ $_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.installed("makeup-expander$0.0.3", "makeup-next-id", "0.0.1");
+$_mod.installed("makeup-expander$0.1.0", "makeup-next-id", "0.0.1");
 $_mod.main("/makeup-next-id$0.0.1", "");
@@ -667,54 +667,101 @@ $_mod.def("/makeup-next-id$0.0.1/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 });
-$_mod.installed("makeup-expander$0.0.3", "makeup-exit-emitter", "0.0.2");
-$_mod.main("/makeup-exit-emitter$0.0.2", "");
-$_mod.installed("makeup-exit-emitter$0.0.2", "custom-event-polyfill", "0.3.0");
-$_mod.def("/makeup-exit-emitter$0.0.2/index", function(require, exports, module, __filename, __dirname) { 'use strict';
+$_mod.installed("makeup-expander$0.1.0", "makeup-exit-emitter", "0.0.3");
+$_mod.main("/makeup-exit-emitter$0.0.3", "");
+$_mod.installed("makeup-exit-emitter$0.0.3", "custom-event-polyfill", "0.3.0");
+$_mod.installed("makeup-exit-emitter$0.0.3", "makeup-next-id", "0.0.1");
+$_mod.def("/makeup-exit-emitter$0.0.3/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var nextID = require('/makeup-next-id$0.0.1/index'/*'makeup-next-id'*/);
+var focusExitEmitters = {};
+
 // requires CustomEvent polyfill for IE9+
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 
-function onFocusOrMouseOut(evt, el, type) {
-    if (el.contains(evt.relatedTarget) === false) {
-        el.dispatchEvent(new CustomEvent(type + 'Exit', {
-            detail: {
-                toElement: evt.relatedTarget,
-                fromElement: evt.target
-            },
-            bubbles: false // mirror the native mouseleave event
-        }));
+function doFocusExit(el, fromElement, toElement) {
+    el.dispatchEvent(new CustomEvent('focusExit', {
+        detail: { fromElement: fromElement, toElement: toElement },
+        bubbles: false // mirror the native mouseleave event
+    }));
+}
+
+function onDocumentFocusIn(e) {
+    var newFocusElement = e.target;
+    var targetIsDescendant = this.el.contains(newFocusElement);
+
+    // if focus has moved to a focusable descendant
+    if (targetIsDescendant === true) {
+        // set the target as the currently focussed element
+        this.currentFocusElement = newFocusElement;
+    } else {
+        // else focus has not gone to a focusable descendant
+        window.removeEventListener('blur', this.onWindowBlurListener);
+        document.removeEventListener('focusin', this.onDocumentFocusInListener);
+        doFocusExit(this.el, this.currentFocusElement, newFocusElement);
+        this.currentFocusElement = null;
     }
 }
 
-function onFocusOut(e) {
-    onFocusOrMouseOut(e, this, 'focus');
+function onWindowBlur() {
+    doFocusExit(this.el, this.currentFocusElement, undefined);
 }
 
-function onMouseOut(e) {
-    onFocusOrMouseOut(e, this, 'mouse');
+function onWidgetFocusIn() {
+    // listen for focus moving to anywhere in document
+    // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!
+    document.addEventListener('focusin', this.onDocumentFocusInListener);
+    // listen for focus leaving the window
+    window.addEventListener('blur', this.onWindowBlurListener);
 }
 
+var FocusExitEmitter = function () {
+    function FocusExitEmitter(el) {
+        _classCallCheck(this, FocusExitEmitter);
+
+        this.el = el;
+
+        this.currentFocusElement = null;
+
+        this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);
+        this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);
+        this.onWindowBlurListener = onWindowBlur.bind(this);
+
+        this.el.addEventListener('focusin', this.onWidgetFocusInListener);
+    }
+
+    _createClass(FocusExitEmitter, [{
+        key: 'removeEventListeners',
+        value: function removeEventListeners() {
+            window.removeEventListener('blur', this.onWindowBlurListener);
+            document.removeEventListener('focusin', this.onDocumentFocusInListener);
+            this.el.removeEventListener('focusin', this.onWidgetFocusInListener);
+        }
+    }]);
+
+    return FocusExitEmitter;
+}();
+
 function addFocusExit(el) {
-    el.addEventListener('focusout', onFocusOut);
-}
+    var exitEmitter = null;
 
-function removeFocusExit(el) {
-    el.removeEventListener('focusout', onFocusOut);
-}
+    nextID(el);
 
-function addMouseExit(el) {
-    el.addEventListener('mouseout', onMouseOut);
-}
+    if (!focusExitEmitters[el.id]) {
+        exitEmitter = new FocusExitEmitter(el);
+        focusExitEmitters[el.id] = exitEmitter;
+    }
 
-function removeMouseExit(el) {
-    el.removeEventListener('mouseout', onMouseOut);
+    return exitEmitter;
 }
 
-function add(el) {
-    addFocusExit(el);
-    addMouseExit(el);
-}
+function removeFocusExit(el) {
+    var exitEmitter = focusExitEmitters[el.id];
 
-function remove(el) {
-    removeFocusExit(el);
-    removeMouseExit(el);
+    if (exitEmitter) {
+        exitEmitter.removeEventListeners();
+        delete focusExitEmitters[el.id];
+    }
 }
@@ -724,11 +771,7 @@
     addFocusExit: addFocusExit,
-    addMouseExit: addMouseExit,
-    removeFocusExit: removeFocusExit,
-    removeMouseExit: removeMouseExit,
-    add: add,
-    remove: remove
+    removeFocusExit: removeFocusExit
 };
 
 });
-$_mod.installed("makeup-expander$0.0.3", "makeup-focusables", "0.0.1");
+$_mod.installed("makeup-expander$0.1.0", "makeup-focusables", "0.0.1");
 $_mod.main("/makeup-focusables$0.0.1", "");
@@ -756,3 +799,3 @@ $_mod.def("/makeup-focusables$0.0.1/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 });
-$_mod.def("/makeup-expander$0.0.3/index", function(require, exports, module, __filename, __dirname) { 'use strict';
+$_mod.def("/makeup-expander$0.1.0/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 
@@ -766,7 +809,7 @@ 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 nextID = require('/makeup-next-id$0.0.1/index'/*'makeup-next-id'*/);
-var exitEmitter = require('/makeup-exit-emitter$0.0.2/index'/*'makeup-exit-emitter'*/);
+var ExitEmitter = require('/makeup-exit-emitter$0.0.3/index'/*'makeup-exit-emitter'*/);
 var focusables = require('/makeup-focusables$0.0.1/index'/*'makeup-focusables'*/);
 
 var defaultOptions = {
-    autoCollapse: true,
+    autoCollapse: false,
     click: false,
@@ -798,13 +841,11 @@ contentSelector: '.expander__content',
 
-        exitEmitter.add(this.el);
-        exitEmitter.add(this.expandeeEl);
+        ExitEmitter.addFocusExit(this.el);
 
-        this._keyDownListener = _onKeyDown.bind(this);
-        this._clickListener = this.toggle.bind(this);
-        this._focusListener = this.expand.bind(this);
-        this._hoverListener = this.expand.bind(this);
+        this._hostKeyDownListener = _onKeyDown.bind(this);
+        this._hostClickListener = this.toggle.bind(this);
+        this._hostFocusListener = this.expand.bind(this);
+        this._hostHoverListener = this.expand.bind(this);
 
-        this._exitListener = this.collapse.bind(this);
-        this._expandeeExitListener = this.collapse.bind(this);
-        this._leaveListener = this.collapse.bind(this);
+        this._focusExitListener = this.collapse.bind(this);
+        this._mouseLeaveListener = this.collapse.bind(this);
 
@@ -819,2 +860,4 @@ if (this.expandeeEl) {
             this.hover = this.options.hover;
+
+            this.autoCollapse = this.options.autoCollapse;
         }
@@ -833,3 +876,3 @@ }
                 this.hostEl.setAttribute('aria-expanded', 'false');
-                this.el.dispatchEvent(new CustomEvent('collapsed', { bubbles: true, detail: this.expandeeEl }));
+                this.el.dispatchEvent(new CustomEvent('expanderCollapse', { bubbles: true, detail: this.expandeeEl }));
             }
@@ -859,3 +902,3 @@ }
                 }
-                this.el.dispatchEvent(new CustomEvent('expanded', { bubbles: true, detail: this.expandeeEl }));
+                this.el.dispatchEvent(new CustomEvent('expanderExpand', { bubbles: true, detail: this.expandeeEl }));
             }
@@ -874,16 +917,27 @@ }
     }, {
+        key: 'autoCollapse',
+        set: function set(bool) {
+            // hover and focus expanders will always collapse
+            if (this.options.focus === true || this.options.hover === true || this.options.autoCollapse === true) {
+                this.el.addEventListener('focusExit', this._focusExitListener);
+                this.el.addEventListener('mouseleave', this._mouseLeaveListener);
+
+                if (this.options.focus !== true) {
+                    this.hostEl.addEventListener('focus', this._focusExitListener);
+                }
+            } else {
+                this.el.removeEventListener('mouseleave', this._mouseLeaveListener);
+                this.el.removeEventListener('focusExit', this._focusExitListener);
+                this.hostEl.removeEventListener('focus', this._focusExitListener);
+            }
+        }
+    }, {
         key: 'click',
         set: function set(bool) {
             if (bool === true) {
-                this.hostEl.addEventListener('keydown', this._keyDownListener);
-                this.hostEl.addEventListener('click', this._clickListener);
-                if (this.options.autoCollapse === true) {
-                    this.expandeeEl.addEventListener('focusExit', this._exitListener);
-                }
+                this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
+                this.hostEl.addEventListener('click', this._hostClickListener);
             } else {
-                this.hostEl.removeEventListener('keydown', this._keyDownListener);
-                this.hostEl.removeEventListener('click', this._clickListener);
-                if (this.options.autoCollapse === true) {
-                    this.expandeeEl.removeEventListener('focusExit', this._exitListener);
-                }
+                this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
+                this.hostEl.removeEventListener('click', this._hostClickListener);
             }
@@ -895,11 +949,5 @@ }
             if (bool === true) {
-                this.hostEl.addEventListener('focus', this._focusListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.addEventListener('focusExit', this._expandeeExitListener);
-                }
+                this.hostEl.addEventListener('focus', this._hostFocusListener);
             } else {
-                this.hostEl.removeEventListener('focus', this._focusListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.removeEventListener('focusExit', this._expandeeExitListener);
-                }
+                this.hostEl.removeEventListener('focus', this._hostFocusListener);
             }
@@ -911,11 +959,5 @@ }
             if (bool === true) {
-                this.hostEl.addEventListener('mouseenter', this._hoverListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.addEventListener('mouseleave', this._leaveListener);
-                }
+                this.hostEl.addEventListener('mouseenter', this._hostHoverListener);
             } else {
-                this.hostEl.removeEventListener('mouseenter', this._hoverListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.removeEventListener('mouseleave', this._leaveListener);
-                }
+                this.hostEl.removeEventListener('mouseenter', this._hostHoverListener);
             }
@@ -929,7 +971,7 @@ }
 });
-$_mod.def("/makeup-expander$0.0.3/docs/index", function(require, exports, module, __filename, __dirname) { function nodeListToArray(nodeList) {
+$_mod.def("/makeup-expander$0.1.0/docs/index", function(require, exports, module, __filename, __dirname) { function nodeListToArray(nodeList) {
     return Array.prototype.slice.call(nodeList);
 }
 
-var Expander = require('/makeup-expander$0.0.3/index'/*'../index.js'*/);
+var Expander = require('/makeup-expander$0.1.0/index'/*'../index.js'*/);
 var clickExpanderEls = nodeListToArray(document.querySelectorAll('.expander--click-only'));
@@ -939,2 +981,3 @@ var focusExpanderEls = nodeListToArray(document.querySelectorAll('.expander--focus-only'));
 var hoverAndFocusExpanderEls = nodeListToArray(document.querySelectorAll('.expander--focus-and-hover'));
+var stealthExpanderEls = nodeListToArray(document.querySelectorAll('.expander--stealth-only'));
 var expanderWidgets = [];
@@ -958,7 +1001,11 @@
 
+stealthExpanderEls.forEach(function(el, i) {
+    expanderWidgets.push(new Expander(el, { autoCollapse: true, click: true, focusManagement: 'focusable' }));
+});
+
 expanderWidgets.forEach(function(item, i) {
-    item.el.addEventListener('expanded', function(e) {
+    item.el.addEventListener('expanderExpand', function(e) {
         console.log(e);
     });
-    item.el.addEventListener('collapsed', function(e) {
+    item.el.addEventListener('expanderCollapse', function(e) {
         console.log(e);
@@ -969,2 +1016,2 @@ });
 });
-$_mod.run("/makeup-expander$0.0.3/docs/index");
+$_mod.run("/makeup-expander$0.1.0/docs/index");

index.js

@@ -10,7 +10,7 @@ 'use strict';
 var nextID = require('makeup-next-id');
-var exitEmitter = require('makeup-exit-emitter');
+var ExitEmitter = require('makeup-exit-emitter');
 var focusables = require('makeup-focusables');
 
 var defaultOptions = {
-    autoCollapse: true,
+    autoCollapse: false,
     click: false,
@@ -42,13 +42,11 @@ contentSelector: '.expander__content',
 
-        exitEmitter.add(this.el);
-        exitEmitter.add(this.expandeeEl);
+        ExitEmitter.addFocusExit(this.el);
 
-        this._keyDownListener = _onKeyDown.bind(this);
-        this._clickListener = this.toggle.bind(this);
-        this._focusListener = this.expand.bind(this);
-        this._hoverListener = this.expand.bind(this);
+        this._hostKeyDownListener = _onKeyDown.bind(this);
+        this._hostClickListener = this.toggle.bind(this);
+        this._hostFocusListener = this.expand.bind(this);
+        this._hostHoverListener = this.expand.bind(this);
 
-        this._exitListener = this.collapse.bind(this);
-        this._expandeeExitListener = this.collapse.bind(this);
-        this._leaveListener = this.collapse.bind(this);
+        this._focusExitListener = this.collapse.bind(this);
+        this._mouseLeaveListener = this.collapse.bind(this);
 
@@ -63,2 +61,4 @@ if (this.expandeeEl) {
             this.hover = this.options.hover;
+
+            this.autoCollapse = this.options.autoCollapse;
         }
@@ -77,3 +77,3 @@ }
                 this.hostEl.setAttribute('aria-expanded', 'false');
-                this.el.dispatchEvent(new CustomEvent('collapsed', { bubbles: true, detail: this.expandeeEl }));
+                this.el.dispatchEvent(new CustomEvent('expanderCollapse', { bubbles: true, detail: this.expandeeEl }));
             }
@@ -103,3 +103,3 @@ }
                 }
-                this.el.dispatchEvent(new CustomEvent('expanded', { bubbles: true, detail: this.expandeeEl }));
+                this.el.dispatchEvent(new CustomEvent('expanderExpand', { bubbles: true, detail: this.expandeeEl }));
             }
@@ -118,16 +118,27 @@ }
     }, {
+        key: 'autoCollapse',
+        set: function set(bool) {
+            // hover and focus expanders will always collapse
+            if (this.options.focus === true || this.options.hover === true || this.options.autoCollapse === true) {
+                this.el.addEventListener('focusExit', this._focusExitListener);
+                this.el.addEventListener('mouseleave', this._mouseLeaveListener);
+
+                if (this.options.focus !== true) {
+                    this.hostEl.addEventListener('focus', this._focusExitListener);
+                }
+            } else {
+                this.el.removeEventListener('mouseleave', this._mouseLeaveListener);
+                this.el.removeEventListener('focusExit', this._focusExitListener);
+                this.hostEl.removeEventListener('focus', this._focusExitListener);
+            }
+        }
+    }, {
         key: 'click',
         set: function set(bool) {
             if (bool === true) {
-                this.hostEl.addEventListener('keydown', this._keyDownListener);
-                this.hostEl.addEventListener('click', this._clickListener);
-                if (this.options.autoCollapse === true) {
-                    this.expandeeEl.addEventListener('focusExit', this._exitListener);
-                }
+                this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
+                this.hostEl.addEventListener('click', this._hostClickListener);
             } else {
-                this.hostEl.removeEventListener('keydown', this._keyDownListener);
-                this.hostEl.removeEventListener('click', this._clickListener);
-                if (this.options.autoCollapse === true) {
-                    this.expandeeEl.removeEventListener('focusExit', this._exitListener);
-                }
+                this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
+                this.hostEl.removeEventListener('click', this._hostClickListener);
             }
@@ -139,11 +150,5 @@ }
             if (bool === true) {
-                this.hostEl.addEventListener('focus', this._focusListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.addEventListener('focusExit', this._expandeeExitListener);
-                }
+                this.hostEl.addEventListener('focus', this._hostFocusListener);
             } else {
-                this.hostEl.removeEventListener('focus', this._focusListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.removeEventListener('focusExit', this._expandeeExitListener);
-                }
+                this.hostEl.removeEventListener('focus', this._hostFocusListener);
             }
@@ -155,11 +160,5 @@ }
             if (bool === true) {
-                this.hostEl.addEventListener('mouseenter', this._hoverListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.addEventListener('mouseleave', this._leaveListener);
-                }
+                this.hostEl.addEventListener('mouseenter', this._hostHoverListener);
             } else {
-                this.hostEl.removeEventListener('mouseenter', this._hoverListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.removeEventListener('mouseleave', this._leaveListener);
-                }
+                this.hostEl.removeEventListener('mouseenter', this._hostHoverListener);
             }
@@ -166,0 +165,0 @@ }

package.json

 {
   "name": "makeup-expander",
   "description": "Creates the basic interactivity for an element that expands and collapses another element.",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "main": "index.js",
@@ -6,0 +6,0 @@ "repository": "https://github.com/makeup-js/makeup-expander.git",

README.md

@@ -78,3 +78,3 @@ # makeup-expander
 * `el`: the root widget el
-* `options.autoCollapse`: whether expandee should collapse when focus or mouse leaves the widget
+* `options.autoCollapse`: whether click-activated expander should collapse when keyboard or mouse leaves the content or widget (default: false)
 * `options.click`: whether the host should be click activated (default: false)
@@ -89,4 +89,4 @@ * `options.contentSelector`: the query selector for the expandee element in relation to the widget (default: '.expander__content')
 
-* `collapsed`
-* `expanded`
+* `expanderCollapse`
+* `expanderExpand`
 
@@ -93,0 +93,0 @@ ## Dependencies

src/index.js

 'use strict';
 
 const nextID = require('makeup-next-id');
-const exitEmitter = require('makeup-exit-emitter');
+const ExitEmitter = require('makeup-exit-emitter');
 const focusables = require('makeup-focusables');
 
 const defaultOptions = {
-    autoCollapse: true,
+    autoCollapse: false,
     click: false,
@@ -33,13 +33,11 @@ contentSelector: '.expander__content',
 
-        exitEmitter.add(this.el);
-        exitEmitter.add(this.expandeeEl);
+        ExitEmitter.addFocusExit(this.el);
 
-        this._keyDownListener = _onKeyDown.bind(this);
-        this._clickListener = this.toggle.bind(this);
-        this._focusListener = this.expand.bind(this);
-        this._hoverListener = this.expand.bind(this);
+        this._hostKeyDownListener = _onKeyDown.bind(this);
+        this._hostClickListener = this.toggle.bind(this);
+        this._hostFocusListener = this.expand.bind(this);
+        this._hostHoverListener = this.expand.bind(this);
 
-        this._exitListener = this.collapse.bind(this);
-        this._expandeeExitListener = this.collapse.bind(this);
-        this._leaveListener = this.collapse.bind(this);
+        this._focusExitListener = this.collapse.bind(this);
+        this._mouseLeaveListener = this.collapse.bind(this);
 
@@ -54,18 +52,30 @@ if (this.expandeeEl) {
             this.hover = this.options.hover;
+
+            this.autoCollapse = this.options.autoCollapse;
         }
     }
 
+    set autoCollapse(bool) {
+        // hover and focus expanders will always collapse
+        if (this.options.focus === true || this.options.hover === true || this.options.autoCollapse === true) {
+            this.el.addEventListener('focusExit', this._focusExitListener);
+            this.el.addEventListener('mouseleave', this._mouseLeaveListener);
+
+            if (this.options.focus !== true) {
+                this.hostEl.addEventListener('focus', this._focusExitListener);
+            }
+        } else {
+            this.el.removeEventListener('mouseleave', this._mouseLeaveListener);
+            this.el.removeEventListener('focusExit', this._focusExitListener);
+            this.hostEl.removeEventListener('focus', this._focusExitListener);
+        }
+    }
+
     set click(bool) {
         if (bool === true) {
-            this.hostEl.addEventListener('keydown', this._keyDownListener);
-            this.hostEl.addEventListener('click', this._clickListener);
-            if (this.options.autoCollapse === true) {
-                this.expandeeEl.addEventListener('focusExit', this._exitListener);
-            }
+            this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
+            this.hostEl.addEventListener('click', this._hostClickListener);
         } else {
-            this.hostEl.removeEventListener('keydown', this._keyDownListener);
-            this.hostEl.removeEventListener('click', this._clickListener);
-            if (this.options.autoCollapse === true) {
-                this.expandeeEl.removeEventListener('focusExit', this._exitListener);
-            }
+            this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
+            this.hostEl.removeEventListener('click', this._hostClickListener);
         }
@@ -76,11 +86,5 @@ }
         if (bool === true) {
-            this.hostEl.addEventListener('focus', this._focusListener);
-            if (this.options.autoCollapse === true) {
-                this.el.addEventListener('focusExit', this._expandeeExitListener);
-            }
+            this.hostEl.addEventListener('focus', this._hostFocusListener);
         } else {
-            this.hostEl.removeEventListener('focus', this._focusListener);
-            if (this.options.autoCollapse === true) {
-                this.el.removeEventListener('focusExit', this._expandeeExitListener);
-            }
+            this.hostEl.removeEventListener('focus', this._hostFocusListener);
         }
@@ -91,11 +95,5 @@ }
         if (bool === true) {
-            this.hostEl.addEventListener('mouseenter', this._hoverListener);
-            if (this.options.autoCollapse === true) {
-                this.el.addEventListener('mouseleave', this._leaveListener);
-            }
+            this.hostEl.addEventListener('mouseenter', this._hostHoverListener);
         } else {
-            this.hostEl.removeEventListener('mouseenter', this._hoverListener);
-            if (this.options.autoCollapse === true) {
-                this.el.removeEventListener('mouseleave', this._leaveListener);
-            }
+            this.hostEl.removeEventListener('mouseenter', this._hostHoverListener);
         }
@@ -111,3 +109,3 @@ }
             this.hostEl.setAttribute('aria-expanded', 'false');
-            this.el.dispatchEvent(new CustomEvent('collapsed', { bubbles: true, detail: this.expandeeEl }));
+            this.el.dispatchEvent(new CustomEvent('expanderCollapse', { bubbles: true, detail: this.expandeeEl }));
         }
@@ -136,3 +134,3 @@ }
             }
-            this.el.dispatchEvent(new CustomEvent('expanded', { bubbles: true, detail: this.expandeeEl }));
+            this.el.dispatchEvent(new CustomEvent('expanderExpand', { bubbles: true, detail: this.expandeeEl }));
         }
@@ -139,0 +137,0 @@ }

test/index.js

@@ -18,4 +18,4 @@ var Expander = require('../index.js');
 
-        widgetEl.addEventListener('expanded', onExpand);
-        widgetEl.addEventListener('collapsed', onCollapse);
+        widgetEl.addEventListener('expanderExpand', onExpand);
+        widgetEl.addEventListener('expanderCollapse', onCollapse);
 
@@ -22,0 +22,0 @@ widget = new Expander(widgetEl, data.options);

test/static/bundle-module.js

@@ -1,2 +0,2 @@
-$_mod.installed("makeup-expander$0.0.3", "custom-event-polyfill", "0.3.0");
+$_mod.installed("makeup-expander$0.1.0", "custom-event-polyfill", "0.3.0");
 $_mod.main("/custom-event-polyfill$0.3.0", "custom-event-polyfill");
@@ -49,3 +49,3 @@ $_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.installed("makeup-expander$0.0.3", "makeup-next-id", "0.0.1");
+$_mod.installed("makeup-expander$0.1.0", "makeup-next-id", "0.0.1");
 $_mod.main("/makeup-next-id$0.0.1", "");
@@ -72,54 +72,101 @@ $_mod.def("/makeup-next-id$0.0.1/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 });
-$_mod.installed("makeup-expander$0.0.3", "makeup-exit-emitter", "0.0.2");
-$_mod.main("/makeup-exit-emitter$0.0.2", "");
-$_mod.installed("makeup-exit-emitter$0.0.2", "custom-event-polyfill", "0.3.0");
-$_mod.def("/makeup-exit-emitter$0.0.2/index", function(require, exports, module, __filename, __dirname) { 'use strict';
+$_mod.installed("makeup-expander$0.1.0", "makeup-exit-emitter", "0.0.3");
+$_mod.main("/makeup-exit-emitter$0.0.3", "");
+$_mod.installed("makeup-exit-emitter$0.0.3", "custom-event-polyfill", "0.3.0");
+$_mod.installed("makeup-exit-emitter$0.0.3", "makeup-next-id", "0.0.1");
+$_mod.def("/makeup-exit-emitter$0.0.3/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var nextID = require('/makeup-next-id$0.0.1/index'/*'makeup-next-id'*/);
+var focusExitEmitters = {};
+
 // requires CustomEvent polyfill for IE9+
 // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
 
-function onFocusOrMouseOut(evt, el, type) {
-    if (el.contains(evt.relatedTarget) === false) {
-        el.dispatchEvent(new CustomEvent(type + 'Exit', {
-            detail: {
-                toElement: evt.relatedTarget,
-                fromElement: evt.target
-            },
-            bubbles: false // mirror the native mouseleave event
-        }));
+function doFocusExit(el, fromElement, toElement) {
+    el.dispatchEvent(new CustomEvent('focusExit', {
+        detail: { fromElement: fromElement, toElement: toElement },
+        bubbles: false // mirror the native mouseleave event
+    }));
+}
+
+function onDocumentFocusIn(e) {
+    var newFocusElement = e.target;
+    var targetIsDescendant = this.el.contains(newFocusElement);
+
+    // if focus has moved to a focusable descendant
+    if (targetIsDescendant === true) {
+        // set the target as the currently focussed element
+        this.currentFocusElement = newFocusElement;
+    } else {
+        // else focus has not gone to a focusable descendant
+        window.removeEventListener('blur', this.onWindowBlurListener);
+        document.removeEventListener('focusin', this.onDocumentFocusInListener);
+        doFocusExit(this.el, this.currentFocusElement, newFocusElement);
+        this.currentFocusElement = null;
     }
 }
 
-function onFocusOut(e) {
-    onFocusOrMouseOut(e, this, 'focus');
+function onWindowBlur() {
+    doFocusExit(this.el, this.currentFocusElement, undefined);
 }
 
-function onMouseOut(e) {
-    onFocusOrMouseOut(e, this, 'mouse');
+function onWidgetFocusIn() {
+    // listen for focus moving to anywhere in document
+    // note that mouse click on buttons, checkboxes and radios does not trigger focus events in all browsers!
+    document.addEventListener('focusin', this.onDocumentFocusInListener);
+    // listen for focus leaving the window
+    window.addEventListener('blur', this.onWindowBlurListener);
 }
 
+var FocusExitEmitter = function () {
+    function FocusExitEmitter(el) {
+        _classCallCheck(this, FocusExitEmitter);
+
+        this.el = el;
+
+        this.currentFocusElement = null;
+
+        this.onWidgetFocusInListener = onWidgetFocusIn.bind(this);
+        this.onDocumentFocusInListener = onDocumentFocusIn.bind(this);
+        this.onWindowBlurListener = onWindowBlur.bind(this);
+
+        this.el.addEventListener('focusin', this.onWidgetFocusInListener);
+    }
+
+    _createClass(FocusExitEmitter, [{
+        key: 'removeEventListeners',
+        value: function removeEventListeners() {
+            window.removeEventListener('blur', this.onWindowBlurListener);
+            document.removeEventListener('focusin', this.onDocumentFocusInListener);
+            this.el.removeEventListener('focusin', this.onWidgetFocusInListener);
+        }
+    }]);
+
+    return FocusExitEmitter;
+}();
+
 function addFocusExit(el) {
-    el.addEventListener('focusout', onFocusOut);
-}
+    var exitEmitter = null;
 
-function removeFocusExit(el) {
-    el.removeEventListener('focusout', onFocusOut);
-}
+    nextID(el);
 
-function addMouseExit(el) {
-    el.addEventListener('mouseout', onMouseOut);
-}
+    if (!focusExitEmitters[el.id]) {
+        exitEmitter = new FocusExitEmitter(el);
+        focusExitEmitters[el.id] = exitEmitter;
+    }
 
-function removeMouseExit(el) {
-    el.removeEventListener('mouseout', onMouseOut);
+    return exitEmitter;
 }
 
-function add(el) {
-    addFocusExit(el);
-    addMouseExit(el);
-}
+function removeFocusExit(el) {
+    var exitEmitter = focusExitEmitters[el.id];
 
-function remove(el) {
-    removeFocusExit(el);
-    removeMouseExit(el);
+    if (exitEmitter) {
+        exitEmitter.removeEventListeners();
+        delete focusExitEmitters[el.id];
+    }
 }
@@ -129,11 +176,7 @@
     addFocusExit: addFocusExit,
-    addMouseExit: addMouseExit,
-    removeFocusExit: removeFocusExit,
-    removeMouseExit: removeMouseExit,
-    add: add,
-    remove: remove
+    removeFocusExit: removeFocusExit
 };
 
 });
-$_mod.installed("makeup-expander$0.0.3", "makeup-focusables", "0.0.1");
+$_mod.installed("makeup-expander$0.1.0", "makeup-focusables", "0.0.1");
 $_mod.main("/makeup-focusables$0.0.1", "");
@@ -161,3 +204,3 @@ $_mod.def("/makeup-focusables$0.0.1/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 });
-$_mod.def("/makeup-expander$0.0.3/index", function(require, exports, module, __filename, __dirname) { 'use strict';
+$_mod.def("/makeup-expander$0.1.0/index", function(require, exports, module, __filename, __dirname) { 'use strict';
 
@@ -171,7 +214,7 @@ 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 nextID = require('/makeup-next-id$0.0.1/index'/*'makeup-next-id'*/);
-var exitEmitter = require('/makeup-exit-emitter$0.0.2/index'/*'makeup-exit-emitter'*/);
+var ExitEmitter = require('/makeup-exit-emitter$0.0.3/index'/*'makeup-exit-emitter'*/);
 var focusables = require('/makeup-focusables$0.0.1/index'/*'makeup-focusables'*/);
 
 var defaultOptions = {
-    autoCollapse: true,
+    autoCollapse: false,
     click: false,
@@ -203,13 +246,11 @@ contentSelector: '.expander__content',
 
-        exitEmitter.add(this.el);
-        exitEmitter.add(this.expandeeEl);
+        ExitEmitter.addFocusExit(this.el);
 
-        this._keyDownListener = _onKeyDown.bind(this);
-        this._clickListener = this.toggle.bind(this);
-        this._focusListener = this.expand.bind(this);
-        this._hoverListener = this.expand.bind(this);
+        this._hostKeyDownListener = _onKeyDown.bind(this);
+        this._hostClickListener = this.toggle.bind(this);
+        this._hostFocusListener = this.expand.bind(this);
+        this._hostHoverListener = this.expand.bind(this);
 
-        this._exitListener = this.collapse.bind(this);
-        this._expandeeExitListener = this.collapse.bind(this);
-        this._leaveListener = this.collapse.bind(this);
+        this._focusExitListener = this.collapse.bind(this);
+        this._mouseLeaveListener = this.collapse.bind(this);
 
@@ -224,2 +265,4 @@ if (this.expandeeEl) {
             this.hover = this.options.hover;
+
+            this.autoCollapse = this.options.autoCollapse;
         }
@@ -238,3 +281,3 @@ }
                 this.hostEl.setAttribute('aria-expanded', 'false');
-                this.el.dispatchEvent(new CustomEvent('collapsed', { bubbles: true, detail: this.expandeeEl }));
+                this.el.dispatchEvent(new CustomEvent('expanderCollapse', { bubbles: true, detail: this.expandeeEl }));
             }
@@ -264,3 +307,3 @@ }
                 }
-                this.el.dispatchEvent(new CustomEvent('expanded', { bubbles: true, detail: this.expandeeEl }));
+                this.el.dispatchEvent(new CustomEvent('expanderExpand', { bubbles: true, detail: this.expandeeEl }));
             }
@@ -279,16 +322,27 @@ }
     }, {
+        key: 'autoCollapse',
+        set: function set(bool) {
+            // hover and focus expanders will always collapse
+            if (this.options.focus === true || this.options.hover === true || this.options.autoCollapse === true) {
+                this.el.addEventListener('focusExit', this._focusExitListener);
+                this.el.addEventListener('mouseleave', this._mouseLeaveListener);
+
+                if (this.options.focus !== true) {
+                    this.hostEl.addEventListener('focus', this._focusExitListener);
+                }
+            } else {
+                this.el.removeEventListener('mouseleave', this._mouseLeaveListener);
+                this.el.removeEventListener('focusExit', this._focusExitListener);
+                this.hostEl.removeEventListener('focus', this._focusExitListener);
+            }
+        }
+    }, {
         key: 'click',
         set: function set(bool) {
             if (bool === true) {
-                this.hostEl.addEventListener('keydown', this._keyDownListener);
-                this.hostEl.addEventListener('click', this._clickListener);
-                if (this.options.autoCollapse === true) {
-                    this.expandeeEl.addEventListener('focusExit', this._exitListener);
-                }
+                this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
+                this.hostEl.addEventListener('click', this._hostClickListener);
             } else {
-                this.hostEl.removeEventListener('keydown', this._keyDownListener);
-                this.hostEl.removeEventListener('click', this._clickListener);
-                if (this.options.autoCollapse === true) {
-                    this.expandeeEl.removeEventListener('focusExit', this._exitListener);
-                }
+                this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
+                this.hostEl.removeEventListener('click', this._hostClickListener);
             }
@@ -300,11 +354,5 @@ }
             if (bool === true) {
-                this.hostEl.addEventListener('focus', this._focusListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.addEventListener('focusExit', this._expandeeExitListener);
-                }
+                this.hostEl.addEventListener('focus', this._hostFocusListener);
             } else {
-                this.hostEl.removeEventListener('focus', this._focusListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.removeEventListener('focusExit', this._expandeeExitListener);
-                }
+                this.hostEl.removeEventListener('focus', this._hostFocusListener);
             }
@@ -316,11 +364,5 @@ }
             if (bool === true) {
-                this.hostEl.addEventListener('mouseenter', this._hoverListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.addEventListener('mouseleave', this._leaveListener);
-                }
+                this.hostEl.addEventListener('mouseenter', this._hostHoverListener);
             } else {
-                this.hostEl.removeEventListener('mouseenter', this._hoverListener);
-                if (this.options.autoCollapse === true) {
-                    this.el.removeEventListener('mouseleave', this._leaveListener);
-                }
+                this.hostEl.removeEventListener('mouseenter', this._hostHoverListener);
             }
@@ -327,0 +369,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

244379

increased by2.26%

Lines of code

1616

increased by3.72%

No dependency changes