makeup-expander - npm Package Compare versions

Comparing version 0.3.2 to 0.4.0

index.js

@@ -15,13 +15,17 @@ 'use strict';
     autoCollapse: false,
-    click: false,
+    collapseOnFocusOut: false,
+    collapseOnMouseOut: false,
+    collapseOnClickOut: false,
     contentSelector: '.expander__content',
-    focus: false,
+    expandOnClick: false,
+    expandOnFocus: false,
+    expandOnHover: false,
     focusManagement: null,
     hostContainerClass: 'expander__host-container',
     hostSelector: '.expander__host',
-    hover: false,
-    spacebar: false
+    simulateSpacebarClick: false
 };
 
-// when options.click is true, we set a flag onkeydown if spacebar or enter are pressed
+// when options.expandOnClick is true, we set a flag if spacebar or enter are pressed
+// the idea being that this flag is set BEFORE the click event
 function _onKeyDown(e) {
@@ -35,3 +39,3 @@ var keyCode = e.keyCode;
         // careful! if host already triggers click events naturally, we end up with a "double-click".
-        if (keyCode === 32 && this.options.spacebar === true) {
+        if (keyCode === 32 && this.options.simulateSpacebarClick === true) {
             this.hostEl.click();
@@ -42,2 +46,10 @@ }
 
+function _onDocumentClick(e) {
+    if (this.el.contains(e.target) === false) {
+        this.el.dispatchEvent(new CustomEvent('clickOut', {
+            bubbles: false
+        }));
+    }
+}
+
 module.exports = function () {
@@ -54,2 +66,3 @@ function _class(el, selectedOptions) {
         this.hostContainerExpandedClass = this.options.hostContainerClass + '--expanded';
+        this.hostIsNested = false;
 
@@ -63,2 +76,4 @@ // ensure the widget and expandee have an id
         this._hostKeyDownListener = _onKeyDown.bind(this);
+        this._documentClickListener = _onDocumentClick.bind(this);
+
         this._hostClickListener = this.toggle.bind(this);
@@ -70,5 +85,14 @@ this._hostFocusListener = this.expand.bind(this);
         this._mouseLeaveListener = this.collapse.bind(this);
+        this._clickOutListener = this.collapse.bind(this);
 
+        if (this.hostEl.getAttribute('aria-expanded') === null) {
+            this.hostEl.setAttribute('aria-expanded', 'false');
+        }
+
+        this.hostEl.setAttribute('aria-controls', this.expandeeEl.id);
+
+        this.hostIsNested = this.hostEl.parentNode !== this.el;
+
         // if the host el is nested one level deep we need a reference to it's container
-        if (this.hostEl.parentNode !== this.el) {
+        if (this.hostIsNested === true) {
             this.hostContainerEl = this.hostEl.parentNode;
@@ -78,14 +102,10 @@ this.hostContainerEl.classList.add(this.options.hostContainerClass);
 
-        if (this.expandeeEl) {
-            this.hostEl.setAttribute('aria-controls', this.expandeeEl.id);
+        this.expandOnClick = this.options.expandOnClick;
+        this.expandOnFocus = this.options.expandOnFocus;
+        this.expandOnHover = this.options.expandOnHover;
 
-            if (this.hostEl.getAttribute('aria-expanded') === null) {
-                this.hostEl.setAttribute('aria-expanded', 'false');
-            }
-
-            this.click = this.options.click;
-            this.focus = this.options.focus;
-            this.hover = this.options.hover;
-
-            this.autoCollapse = this.options.autoCollapse;
+        if (this.options.autoCollapse === false) {
+            this.collapseOnClickOut = this.options.collapseOnClickOut;
+            this.collapseOnFocusOut = this.options.collapseOnFocusOut;
+            this.collapseOnMouseOut = this.options.collapseOnMouseOut;
         }
@@ -149,63 +169,76 @@ }
     }, {
-        key: 'autoCollapse',
+        key: 'expandOnClick',
         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);
+            var clickTargetEl = this.hostIsNested === true ? this.hostContainerEl : this.hostEl;
 
-                if (this.options.focus !== true) {
-                    this.hostEl.addEventListener('focus', this._focusExitListener);
+            if (bool === true) {
+                this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
+                clickTargetEl.addEventListener('click', this._hostClickListener);
+
+                if (this.options.autoCollapse === true) {
+                    this.collapseOnClickOut = true;
+                    this.collapseOnFocusOut = true;
                 }
             } else {
-                this.el.removeEventListener('mouseleave', this._mouseLeaveListener);
-                this.el.removeEventListener('focusExit', this._focusExitListener);
-                this.hostEl.removeEventListener('focus', this._focusExitListener);
+                clickTargetEl.removeEventListener('click', this._hostClickListener);
+                this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
             }
         }
     }, {
-        key: 'click',
+        key: 'expandOnFocus',
         set: function set(bool) {
             if (bool === true) {
-                this.hostEl.addEventListener('keydown', this._hostKeyDownListener);
-                if (this.hostContainerEl) {
-                    this.hostContainerEl.addEventListener('click', this._hostClickListener);
-                } else {
-                    this.hostEl.addEventListener('click', this._hostClickListener);
+                this.hostEl.addEventListener('focus', this._hostFocusListener);
+
+                if (this.options.autoCollapse === true) {
+                    this.collapseOnFocusOut = true;
                 }
             } else {
-                this.hostEl.removeEventListener('keydown', this._hostKeyDownListener);
-                if (this.hostContainerEl) {
-                    this.hostContainerEl.removeEventListener('click', this._hostClickListener);
-                } else {
-                    this.hostEl.removeEventListener('click', this._hostClickListener);
+                this.hostEl.removeEventListener('focus', this._hostFocusListener);
+            }
+        }
+    }, {
+        key: 'expandOnHover',
+        set: function set(bool) {
+            var hoverTargetEl = this.hostIsNested === true ? this.hostContainerEl : this.hostEl;
+
+            if (bool === true) {
+                hoverTargetEl.addEventListener('mouseenter', this._hostHoverListener);
+
+                if (this.options.autoCollapse === true) {
+                    this.collapseOnMouseOut = true;
                 }
+            } else {
+                hoverTargetEl.removeEventListener('mouseenter', this._hostHoverListener);
             }
         }
     }, {
-        key: 'focus',
+        key: 'collapseOnClickOut',
         set: function set(bool) {
             if (bool === true) {
-                this.hostEl.addEventListener('focus', this._hostFocusListener);
+                document.addEventListener('click', this._documentClickListener);
+                this.el.addEventListener('clickOut', this._clickOutListener);
             } else {
-                this.hostEl.removeEventListener('focus', this._hostFocusListener);
+                this.el.removeEventListener('clickOut', this._clickOutListener);
+                document.removeEventListener('click', this._documentClickListener);
             }
         }
     }, {
-        key: 'hover',
+        key: 'collapseOnFocusOut',
         set: function set(bool) {
             if (bool === true) {
-                if (this.hostContainerEl) {
-                    this.hostContainerEl.addEventListener('mouseenter', this._hostHoverListener);
-                } else {
-                    this.hostEl.addEventListener('mouseenter', this._hostHoverListener);
-                }
+                this.el.addEventListener('focusExit', this._focusExitListener);
             } else {
-                if (this.hostContainerEl) {
-                    this.hostContainerEl.removeEventListener('mouseenter', this._hostHoverListener);
-                } else {
-                    this.hostEl.removeEventListener('mouseenter', this._hostHoverListener);
-                }
+                this.el.removeEventListener('focusExit', this._focusExitListener);
             }
         }
+    }, {
+        key: 'collapseOnMouseOut',
+        set: function set(bool) {
+            if (bool === true) {
+                this.el.addEventListener('mouseleave', this._mouseLeaveListener);
+            } else {
+                this.el.removeEventListener('mouseleave', this._mouseLeaveListener);
+            }
+        }
     }]);
@@ -212,0 +245,0 @@

package.json

 {
   "name": "makeup-expander",
   "description": "Creates the basic interactivity for an element that expands and collapses another element.",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "main": "index.js",
@@ -40,3 +40,3 @@ "repository": "https://github.com/makeup-js/makeup-expander.git",
     "eslint": "^4",
-    "eslint-config-ebay": "~0.1",
+    "eslint-config-ebay": "^1",
     "jasmine-core": "^2",
@@ -43,0 +43,0 @@ "karma": "^2",

README.md

@@ -10,3 +10,3 @@ # makeup-expander
 
-Creates the basic interactivity for an element that expands and collapses another element, e.g. a fly-out or fly-in.
+Creates the basic interactivity for an element that expands and collapses another element.
 
@@ -51,3 +51,3 @@ ## Experimental
 const options = {
-    click: true
+    expandOnClick: true
 };
@@ -74,10 +74,12 @@
 * `el`: the root widget el
-* `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)
+* `options.autoCollapse`: applies a collapse behavior (`collapseOnClick`, `collapseOnFocusOut`, `collapseOnMouseOut`) based on expand behaviour (default: false)
+* `options.collapseOnClickOut`: whether the content should collapse when clicking outside of content (default: false)
+* `options.collapseOnFocusOut`: whether the content should collapse when focus leaves the content (default: false)
+* `options.collapseOnMouseOut`: whether the content should collapse when mouse leaves the content (default: false)
 * `options.contentSelector`: the query selector for the expandee element in relation to the widget (default: '.expander__content')
-* `options.focus`: whether the host should be focus activated (default: false)
+* `options.expandOnClick`: whether the host should be click activated (default: false)
+* `options.expandOnFocus`: whether the host should be focus activated (default: false)
+* `options.expandOnHover`: whether the host should be hover activated (default: false)
 * `options.focusManagement`: where focus should go (null, 'content', 'focusable', 'interactive', or ID reference) when click expander is activated with keyboard (default: null)
 * `options.hostSelector`: the query selector for the host element in relation to the widget (default: '.expander__host')
-* `options.hover`: whether the host should be hover activated (default: false)
-* `options.spacebar` whether spacebar should force a click event (do not use if host already triggers click events!) (default: false)
 
@@ -84,0 +86,0 @@ ## Events

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

Lines of code

215

increased by13.76%

Number of lines in readme file

123

increased by1.65%

Worsened metrics

Total package byte prevSize

191279

decreased by-9.3%

No dependency changes