Merge pull request #191 from rackerlabs/fix-events

CITguy · web-flow · commit 0c8691bb01e9 · 2018-04-05T17:58:08.000-05:00
Update Events
diff --git a/docs/_templates/partials/after_footer.njk b/docs/_templates/partials/after_footer.njk
@@ -15,6 +15,6 @@
   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
   crossorigin="anonymous"></script>
 
-<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
+<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
 <script src="dist/scripts/helix-ui.browser.js"></script>
 <script src="docs.js"></script>
diff --git a/docs/elements/hx-accordion-panel/index.html b/docs/elements/hx-accordion-panel/index.html
@@ -19,6 +19,16 @@
         <hx-dt>Permitted Children</hx-dt>
         <hx-dd>flow content</hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}
diff --git a/docs/elements/hx-accordion/index.html b/docs/elements/hx-accordion/index.html
@@ -19,9 +19,35 @@
           zero or more <a href="elements/hx-accordion-panel">&lt;hx-accordion-panel&gt;</a> elements
         </hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>panelchange</code> (only in single-panel mode)</li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 
+  <section>
+    <h2 id="modes">Modes</h2>
+    <dl>
+      <dt>multi-panel</dt>
+      <dd>
+        When the <code>current-panel</code> attribute is absent,
+        any number of panels may be opened at the same time.
+      </dd>
+
+      <dt>single-panel</dt>
+      <dd>
+        When the <code>current-panel</code> attribute is set, only one
+        panel may be open at a time.
+      </dd>
+    </dl>
+  </section>
+
   <section>
     <h2 id="methods">Methods</h2>
     <dl>
diff --git a/docs/elements/hx-menu/index.html b/docs/elements/hx-menu/index.html
@@ -29,6 +29,16 @@
           </ul>
         </hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}
diff --git a/docs/elements/hx-modal/index.html b/docs/elements/hx-modal/index.html
@@ -31,6 +31,16 @@
           </ol>
         </hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}
diff --git a/docs/elements/hx-popover/index.html b/docs/elements/hx-popover/index.html
@@ -31,6 +31,16 @@
           </ol>
         </hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}
diff --git a/docs/elements/hx-reveal/index.html b/docs/elements/hx-reveal/index.html
@@ -23,6 +23,16 @@
         <hx-dt>Permitted Children</hx-dt>
         <hx-dd>flow content</hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}
diff --git a/docs/elements/hx-search/index.html b/docs/elements/hx-search/index.html
@@ -25,8 +25,10 @@
         <hx-dd>
           Any of the following:
           <ul>
-            <li><code>input</code> as user types</li>
+            <li><code>blur</code> (doesn't bubble)</li>
             <li><code>clear</code> on clear</li>
+            <li><code>focus</code> (doesn't bubble)</li>
+            <li><code>input</code> as user types</li>
           </ul>
         </hx-dd>
       </hx-def>
diff --git a/docs/elements/hx-tabpanel/index.html b/docs/elements/hx-tabpanel/index.html
@@ -29,6 +29,16 @@
         <hx-dt>Permitted Children</hx-dt>
         <hx-dd>flow content</hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}
diff --git a/docs/elements/hx-tabset/index.html b/docs/elements/hx-tabset/index.html
@@ -31,6 +31,15 @@
           </ul>
         </hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>tabchange</code> when the current tab changes</li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}
diff --git a/docs/elements/hx-tooltip/index.html b/docs/elements/hx-tooltip/index.html
@@ -21,6 +21,16 @@
         <hx-dt>Permitted Children</hx-dt>
         <hx-dd>flow content</hx-dd>
       </hx-def>
+      <hx-def>
+        <hx-dt>Events</hx-dt>
+        <hx-dd>
+          Any of the following:
+          <ul>
+            <li><code>close</code></li>
+            <li><code>open</code></li>
+          </ul>
+        </hx-dd>
+      </hx-def>
     </hx-dl>
   </section>
 {% endblock %}
diff --git a/src/helix-ui/elements/HXAccordionElement.js b/src/helix-ui/elements/HXAccordionElement.js
@@ -30,6 +30,10 @@ export class HXAccordionElement extends HXElement {
     attributeChangedCallback (attr, oldVal, newVal) {
         if (newVal !== null) {
             this._openPanel(Number(newVal));
+
+            if (newVal !== oldVal) {
+                this.$emit('panelchange');
+            }
         }
     }
 
diff --git a/src/helix-ui/elements/HXAccordionPanelElement.js b/src/helix-ui/elements/HXAccordionPanelElement.js
@@ -50,9 +50,8 @@ export class HXAccordionPanelElement extends HXElement {
         if (newVal !== oldVal) {
             this._btnToggle.setAttribute('aria-expanded', isOpen);
             this._elBody.setAttribute('aria-expanded', isOpen);
-            if (isOpen) {
-                this.$emit('open');
-            }
+
+            this.$emit(isOpen ? 'open' : 'close');
         }
     }
 
diff --git a/src/helix-ui/elements/HXElement.js b/src/helix-ui/elements/HXElement.js
@@ -23,6 +23,8 @@ export class HXElement extends HTMLElement {
 
             this.shadowRoot.appendChild(template.content.cloneNode(true));
         }
+
+        this.$relayEvent = this.$relayEvent.bind(this);
     }//constructor
 
     connectedCallback () {
@@ -92,6 +94,32 @@ export class HXElement extends HTMLElement {
         this.dispatchEvent(evt);
     }//$emit
 
+    $relayEvent (oldEvent) {
+        // Original event stops here
+        oldEvent.preventDefault();
+        oldEvent.stopPropagation();
+        oldEvent.stopImmediatePropagation();
+
+        // Emit new event of same name
+        let newEvent = new CustomEvent(oldEvent.type, {
+            bubbles: oldEvent.bubbles,
+            cancelable: oldEvent.cancelable,
+        });
+        this.dispatchEvent(newEvent);
+    }//$relayEvent()
+
+    // TODO: may need a later update to add events based on element name/type
+    $relayNonBubblingEvents (el) {
+        el.addEventListener('focus', this.$relayEvent);
+        el.addEventListener('blur', this.$relayEvent);
+    }
+
+    // Undo $relayNonBubblingEvents()
+    $removeNonBubblingRelays (el) {
+        el.removeEventListener('focus', this.$relayEvent);
+        el.removeEventListener('blur', this.$relayEvent);
+    }
+
     // Properties
     set disabled (value) {
         if (value) {
diff --git a/src/helix-ui/elements/HXIconElement.js b/src/helix-ui/elements/HXIconElement.js
@@ -50,6 +50,8 @@ export class HXIconElement extends HXElement {
             tmpDiv.innerHTML = Icons[this.type];
             // grab SVG from surrogate DIV
             const svg = tmpDiv.firstElementChild;
+            // Prevent IE/Edge from adding SVG to focus order
+            svg.setAttribute('focusable', 'false');
 
             // inject SVG into Light DOM
             this.appendChild(svg);
diff --git a/src/helix-ui/elements/HXMenuElement.js b/src/helix-ui/elements/HXMenuElement.js
@@ -29,8 +29,13 @@ export class HXMenuElement extends HXElement {
         document.removeEventListener('click', this._onDocumentClick);
     }
 
-    attributeChangedCallback (attr, oldValue, newValue) {
-        this.setAttribute('aria-expanded', newValue === '');
+    attributeChangedCallback (attr, oldVal, newVal) {
+        let isOpen = (newVal !== null);
+        this.setAttribute('aria-expanded', isOpen);
+
+        if (newVal !== oldVal) {
+            this.$emit(isOpen ? 'open' : 'close');
+        }
     }
 
     set position (value) {
@@ -68,10 +73,8 @@ export class HXMenuElement extends HXElement {
         if (value) {
             this.setAttribute('open', '');
             this._setPosition();
-            this.$emit('open');
         } else {
             this.removeAttribute('open');
-            this.$emit('close');
         }
     }
 
diff --git a/src/helix-ui/elements/HXModalElement.js b/src/helix-ui/elements/HXModalElement.js
@@ -33,6 +33,7 @@ export class HXModalElement extends HXElement {
     connectedCallback () {
         this.$upgradeProperty('open');
         this._btnClose = this.shadowRoot.querySelector("#close");
+        this.setAttribute('aria-hidden', !this.open);
 
         this._btnClose.addEventListener('click', this._close);
         document.addEventListener('keyup', this._keyUp);
@@ -43,9 +44,14 @@ export class HXModalElement extends HXElement {
         document.removeEventListener('keyup', this._keyUp);
     }
 
-    attributeChangedCallback (attr, oldValue, newValue) {
-        this.setAttribute('aria-hidden', newValue !== '');
-    }
+    attributeChangedCallback (attr, oldVal, newVal) {
+        let isOpen = (newVal !== null);
+        this.setAttribute('aria-hidden', !isOpen);
+
+        if (newVal !== oldVal) {
+            this.$emit(isOpen ? 'open' : 'close');
+        }
+    }//attributeChangedCallback
 
     _close () {
         this.open = false;
@@ -60,10 +66,8 @@ export class HXModalElement extends HXElement {
     set open (value) {
         if (value) {
             this.setAttribute('open', '');
-            this.$emit('open');
         } else {
             this.removeAttribute('open');
-            this.$emit('close');
         }
     }
 
diff --git a/src/helix-ui/elements/HXPopoverElement.js b/src/helix-ui/elements/HXPopoverElement.js
@@ -37,6 +37,8 @@ export class HXPopoverElement extends HXElement {
         this.$defaultAttribute('position', 'bottom-right');
         this._initialPosition = this.position;
 
+        this.setAttribute('aria-hidden', !this.open);
+
         if (!this.id) {
             return;
         }
@@ -61,8 +63,13 @@ export class HXPopoverElement extends HXElement {
         document.removeEventListener('click', this._closeOnBackdropClick);
     }
 
-    attributeChangedCallback (attr, oldValue, newValue) {
-        this.setAttribute('aria-hidden', newValue !== '');
+    attributeChangedCallback (attr, oldVal, newVal) {
+        let isOpen = (newVal !== null);
+        this.setAttribute('aria-hidden', !isOpen);
+
+        if (newVal !== oldVal) {
+            this.$emit(isOpen ? 'open' : 'close');
+        }
     }
 
     _toggle () {
diff --git a/src/helix-ui/elements/HXRevealElement.js b/src/helix-ui/elements/HXRevealElement.js
@@ -15,7 +15,12 @@ export class HXRevealElement extends HXElement {
     }
 
     attributeChangedCallback (attr, oldVal, newVal) {
-        this.setAttribute('aria-expanded', newVal === '');
+        let isOpen = (newVal !== null);
+        this.setAttribute('aria-expanded', isOpen);
+
+        if (newVal !== oldVal) {
+            this.$emit(isOpen ? 'open' : 'close');
+        }
     }
 
     set open (value) {
diff --git a/src/helix-ui/elements/HXSearchElement.js b/src/helix-ui/elements/HXSearchElement.js
@@ -48,11 +48,15 @@ export class HXSearchElement extends HXElement {
 
         this._btnClear.addEventListener('click', this._clearValue);
         this._elSearch.addEventListener('input', this._onInput);
+
+        this.$relayNonBubblingEvents(this._elSearch);
     }
 
     disconnectedCallback () {
         this._btnClear.removeEventListener('click', this._clearValue);
         this._elSearch.removeEventListener('input', this._onInput);
+
+        this.$removeNonBubblingRelays(this._elSearch);
     }
 
     attributeChangedCallback (attr, oldVal, newVal) {
diff --git a/src/helix-ui/elements/HXTabpanelElement.js b/src/helix-ui/elements/HXTabpanelElement.js
diff --git a/src/helix-ui/elements/HXTabsetElement.js b/src/helix-ui/elements/HXTabsetElement.js
diff --git a/src/helix-ui/elements/HXTooltipElement.js b/src/helix-ui/elements/HXTooltipElement.js
diff --git a/test/regression/generateRegressionTests.js.md b/test/regression/generateRegressionTests.js.md
diff --git a/test/regression/generateRegressionTests.js.snap b/test/regression/generateRegressionTests.js.snap
