Merge pull request #525 from patternfly/emit-event

add emitEvent and .events

Author: mwcz

CHANGELOG-prerelease.md

@@ -12,6 +12,7 @@ Tag: [v1.0.0-prerelease.35](https://github.com/patternfly/patternfly-elements/re
 - [90855bb](https://github.com/patternfly/patternfly-elements/commit/90855bbc01b800de3280691ee67e61887fd7fe4d) chore: Update license from 2019 to 2020
 - [88b26ed](https://github.com/patternfly/patternfly-elements/commit/88b26ed90616651a994890454172be5b4e78db7d) fix: pfe-navigation: Trigger link color, font-size, logo min-width, spacing (#631)
 - [ea25cd0](https://github.com/patternfly/patternfly-elements/commit/ea25cd0c87fa853784ffc15329796bda49d192f1) Change direction of disclosure carets (#674) (https://github.com/patternfly/patternfly-elements/issues/662)
+- [](https://github.com/patternfly/patternfly-elements/commit/)  feat: Add emit events to pfelement base class
 
 ## Prerelease 34 ( 2019-12-20 )
 

elements/pfe-accordion/src/pfe-accordion.js

@@ -32,6 +32,12 @@ class PfeAccordion extends PFElement {
     };
   }
 
+  static get events() {
+    return {
+      change: `${this.tag}:change`
+    };
+  }
+
   // Declare the type of this component
   static get PfeType() {
     return PFElement.PfeTypes.Container;
@@ -54,7 +60,7 @@ class PfeAccordion extends PFElement {
     this.setAttribute("role", "presentation");
     this.setAttribute("defined", "");
 
-    this.addEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);
+    this.addEventListener(PfeAccordion.events.change, this._changeHandler);
     this.addEventListener("keydown", this._keydownHandler);
 
     Promise.all([
@@ -70,7 +76,7 @@ class PfeAccordion extends PFElement {
   }
 
   disconnectedCallback() {
-    this.removeEventListener(`${PfeAccordion.tag}:change`, this._changeHandler);
+    this.removeEventListener(PfeAccordion.events.change, this._changeHandler);
     this.removeEventListener("keydown", this._keydownHandler);
     this._observer.disconnect();
   }
@@ -205,7 +211,9 @@ class PfeAccordion extends PFElement {
 
   _expandPanel(panel) {
     if (!panel) {
-      console.error(`${PfeAccordion.tag}: Trying to expand a panel that doesn't exist`);
+      console.error(
+        `${PfeAccordion.tag}: Trying to expand a panel that doesn't exist`
+      );
       return;
     }
 
@@ -225,7 +233,9 @@ class PfeAccordion extends PFElement {
 
   _collapsePanel(panel) {
     if (!panel) {
-      console.error(`${PfeAccordion.tag}: Trying to collapse a panel that doesn't exist`);
+      console.error(
+        `${PfeAccordion.tag}: Trying to collapse a panel that doesn't exist`
+      );
       return;
     }
 
@@ -466,9 +476,7 @@ class PfeAccordionHeader extends PFElement {
 
     if (!isHeaderTag) {
       console.warn(
-        `${
-          PfeAccordionHeader.tag
-        }: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`
+        `${PfeAccordionHeader.tag}: The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)`
       );
     }
 
@@ -478,12 +486,9 @@ class PfeAccordionHeader extends PFElement {
   }
 
   _clickHandler(event) {
-    this.dispatchEvent(
-      new CustomEvent(`${PfeAccordion.tag}:change`, {
-        detail: { expanded: !this.expanded },
-        bubbles: true
-      })
-    );
+    this.emitEvent(PfeAccordion.events.change, {
+      detail: { expanded: !this.expanded }
+    });
   }
 }
 

elements/pfe-autocomplete/src/pfe-autocomplete.js

@@ -27,6 +27,14 @@ class PfeAutocomplete extends PFElement {
     return "pfe-autocomplete.scss";
   }
 
+  static get events() {
+    return {
+      search: `pfe-search-event`,
+      select: `pfe-option-selected`,
+      slotchange: `slotchange`
+    };
+  }
+
   constructor() {
     super(PfeAutocomplete);
 
@@ -59,19 +67,31 @@ class PfeAutocomplete extends PFElement {
     this.addEventListener("keyup", this._inputKeyUp.bind(this));
 
     // these two events, fire search
-    this.addEventListener("pfe-search-event", this._closeDroplist.bind(this));
     this.addEventListener(
-      "pfe-option-selected",
+      PfeAutocomplete.events.search,
+      this._closeDroplist.bind(this)
+    );
+    this.addEventListener(
+      PfeAutocomplete.events.select,
       this._optionSelected.bind(this)
     );
   }
 
   disconnectedCallback() {
     this.removeEventListener("keyup", this._inputKeyUp);
-    this.removeEventListener("pfe-search-event", this._closeDroplist);
-    this.removeEventListener("pfe-option-selected", this._optionSelected);
-    this._slot.removeEventListener("slotchange", this._slotchangeHandler);
 
+    this.removeEventListener(
+      PfeAutocomplete.events.search,
+      this._closeDroplist
+    );
+    this.removeEventListener(
+      PfeAutocomplete.events.select,
+      this._optionSelected
+    );
+    this._slot.removeEventListener(
+      PfeAutocomplete.events.slotchange,
+      this._slotchangeHandler
+    );
     if (this._input) {
       this._input.removeEventListener("input", this._inputChanged);
       this._input.removeEventListener("blur", this._closeDroplist);
@@ -281,13 +301,10 @@ class PfeAutocomplete extends PFElement {
   }
 
   _doSearch(searchQuery) {
-    this.dispatchEvent(
-      new CustomEvent("pfe-search-event", {
-        detail: { searchValue: searchQuery },
-        bubbles: true,
-        composed: true
-      })
-    );
+    this.emitEvent(PfeAutocomplete.events.search, {
+      detail: { searchValue: searchQuery },
+      composed: true
+    });
     this._reset();
     this.selectedValue = searchQuery;
   }
@@ -436,13 +453,10 @@ class PfeSearchDroplist extends PFElement {
 
   _optionSelected(e) {
     if (e.target.tagName === "LI") {
-      this.dispatchEvent(
-        new CustomEvent("pfe-option-selected", {
-          detail: { optionValue: e.target.innerText },
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.emitEvent(PfeAutocomplete.events.select, {
+        detail: { optionValue: e.target.innerText },
+        composed: true
+      });
     }
   }
 

elements/pfe-avatar/src/pfe-avatar.js

@@ -19,6 +19,12 @@ class PfeAvatar extends PFElement {
     return ["pfe-name", "pfe-pattern", "pfe-src", "pfe-shape"];
   }
 
+  static get events() {
+    return {
+      connected: `${this.tag}:connected`
+    };
+  }
+
   static get patterns() {
     return {
       triangles: "triangles",
@@ -75,11 +81,9 @@ class PfeAvatar extends PFElement {
 
     this._initCanvas();
 
-    this.dispatchEvent(
-      new CustomEvent(`${PfeAvatar.tag}:connected`, {
-        bubbles: false
-      })
-    );
+    this.emitEvent(PfeAvatar.events.connected, {
+      bubbles: false
+    });
   }
 
   attributeChangedCallback(attr, oldValue, newValue) {
@@ -88,7 +92,7 @@ class PfeAvatar extends PFElement {
     if (this.connected) {
       this.update();
     } else {
-      this.addEventListener(`${PfeAvatar.tag}:connected`, () => this.update());
+      this.addEventListener(PfeAvatar.events.connected, () => this.update());
     }
   }
 

elements/pfe-collapse/src/pfe-collapse.js

@@ -122,16 +122,13 @@ class PfeCollapseToggle extends PFElement {
     if (this.controlledPanel) {
       this.controlledPanel.expanded = this.expanded;
 
-      this.dispatchEvent(
-        new CustomEvent(`${PfeCollapse.tag}:change`, {
-          detail: {
-            expanded: this.expanded,
-            toggle: this,
-            panel: this.controlledPanel
-          },
-          bubbles: true
-        })
-      );
+      this.emitEvent(PfeCollapse.events.change, {
+        detail: {
+          expanded: this.expanded,
+          toggle: this,
+          panel: this.controlledPanel
+        }
+      });
     } else {
       console.warn(
         `${this.tag}: This toggle doesn't have a panel associated with it`
@@ -171,6 +168,13 @@ class PfeCollapsePanel extends PFElement {
     return "pfe-collapse-panel";
   }
 
+  static get events() {
+    return {
+      animationStart: `${this.tag}:animation-start`,
+      animationEnd: `${this.tag}:animation-end`
+    };
+  }
+
   get templateUrl() {
     return "pfe-collapse-panel.html";
   }
@@ -269,27 +273,21 @@ class PfeCollapsePanel extends PFElement {
       this._transitionEndHandler
     );
 
-    this.dispatchEvent(
-      new CustomEvent(`${PfeCollapsePanel.tag}:animation-end`, {
-        detail: {
-          expanded: this.expanded,
-          panel: this
-        },
-        bubbles: true
-      })
-    );
+    this.emitEvent(PfeCollapsePanel.events.animationEnd, {
+      detail: {
+        expanded: this.expanded,
+        panel: this
+      }
+    });
   }
 
   _fireAnimationEvent(state) {
-    this.dispatchEvent(
-      new CustomEvent(`${PfeCollapsePanel.tag}:animation-start`, {
-        detail: {
-          state: state,
-          panel: this
-        },
-        bubbles: true
-      })
-    );
+    this.emitEvent(PfeCollapsePanel.events.animationStart, {
+      detail: {
+        state: state,
+        panel: this
+      }
+    });
   }
 }
 
@@ -318,6 +316,12 @@ class PfeCollapse extends PFElement {
     return ["pfe-animation"];
   }
 
+  static get events() {
+    return {
+      change: `${this.tag}:change`
+    };
+  }
+
   constructor(pfeClass) {
     super(pfeClass || PfeCollapse);
 
@@ -327,9 +331,15 @@ class PfeCollapse extends PFElement {
     this._changeHandler = this._changeHandler.bind(this);
     this._observer = new MutationObserver(this._linkControls);
 
-    this.addEventListener(`${PfeCollapse.tag}:change`, this._changeHandler);
-    this.addEventListener(`${PfeCollapsePanel.tag}:animation-start`, this._animationStartHandler);
-    this.addEventListener(`${PfeCollapsePanel.tag}:animation-end`, this._animationEndHandler);
+    this.addEventListener(PfeCollapse.events.change, this._changeHandler);
+    this.addEventListener(
+      PfeCollapse.events.animationStart,
+      this._animationStartHandler
+    );
+    this.addEventListener(
+      PfeCollapse.events.animationEnd,
+      this._animationEndHandler
+    );
   }
 
   connectedCallback() {
@@ -348,9 +358,15 @@ class PfeCollapse extends PFElement {
   }
 
   disconnectedCallback() {
-    this.removeEventListener(`${PfeCollapse.tag}:change`, this._changeHandler);
-    this.removeEventListener(`${PfeCollapsePanel.tag}:animation-start`, this._animationStartHandler);
-    this.removeEventListener(`${PfeCollapsePanel.tag}:animation-end`, this._animationEndHandler);
+    this.removeEventListener(PfeCollapse.events.change, this._changeHandler);
+    this.removeEventListener(
+      PfeCollapse.events.animationStart,
+      this._animationStartHandler
+    );
+    this.removeEventListener(
+      PfeCollapse.events.animationEnd,
+      this._animationEndHandler
+    );
     this._observer.disconnect();
   }
 
@@ -389,9 +405,7 @@ class PfeCollapse extends PFElement {
     this.classList.remove("animating");
   }
 
-  _changeHandler(event) {
-
-  }
+  _changeHandler(event) {}
 }
 
 PFElement.create(PfeCollapse);