updates

Author: kylebuch8

elements/pfe-modal/README.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-`pfe-modal` is a self-contained modal window that is hidden on page load and (when activated) restricts the user from interacting with content in the main window. 
+`pfe-modal` is a self-contained modal window that is hidden on page load and (when activated) restricts the user from interacting with content in the main window.
 
 ## Usage
 ```html
@@ -19,30 +19,41 @@
 ## Slots
 
 ### Trigger
-The only part visible on page load, the trigger opens the modal window. The trigger can be a button, a cta or a link. While it is part of the modal web component, it does not contain any intrinsic styles. 
+The only part visible on page load, the trigger opens the modal window. The trigger can be a button, a cta or a link. While it is part of the modal web component, it does not contain any intrinsic styles.
 
 ### Header
-The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6). 
+The header is an optional slot that appears at the top of the modal window. It should be a header tag (h2-h6).
 
 ### Default slot
 The default slot can contain any type of content. When the header is not present this unnamed slot appear at the top of the modal window (to the left of the close button). Otherwise it will appear beneath the header.
 
-## Events
+## API
 
-### openModal
-Fires when a user clicks on the trigger. openModal can be accessed from outside the web component by getting the modal that you want to fire and passing in the firing event: `document.querySelector("pfe-modal#custom-id").openModal(event).`
+### open
 
-### closeModal
-Fires when either a user clicks on either the close button or the overlay. closeModal can be accessed from outside the web component by getting the modal that you want to fire and passing in the firing event: `document.querySelector("pfe-modal#custom-id").closeModal(event).`
+### close
 
-### Dependencies
-Make sure you have [Polyserve][polyserve] and [Web Component Tester][web-component-tester] installed.
+### toggle
 
-    npm install -g polyserve web-component-tester
+## Events
 
-## Dev
+### pfe-modal:open
+Fires when a user clicks on the trigger. open can be accessed from outside the web component by getting the modal that you want to fire and passing in the firing event: `document.querySelector("pfe-modal#custom-id").open(event).`
 
-    npm start
+```
+detail: {
+  open: true
+}
+```
+
+### pfe-modal:close
+Fires when either a user clicks on either the close button or the overlay. close can be accessed from outside the web component by getting the modal that you want to fire and passing in the firing event: `document.querySelector("pfe-modal#custom-id").close(event).`
+
+```
+detail: {
+  open: false
+}
+```
 
 ## Test
 
@@ -54,13 +65,14 @@ Make sure you have [Polyserve][polyserve] and [Web Component Tester][web-compone
 
 ## Demo
 
-Run `npm start` and Polyserve will start a server and open your default browser to the demo page of the element.
+From the PFElements root directory, run:
+
+    npm start
 
 ## Code style
 
-Modal (and all PatternFly Elements) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
+Collapsible (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
 
 [prettier]: https://github.com/prettier/prettier/
 [prettier-ed]: https://github.com/prettier/prettier/#editor-integration
-[polyserve]: https://github.com/Polymer/polyserve
 [web-component-tester]: https://github.com/Polymer/web-component-tester

elements/pfe-modal/demo/index.html

@@ -71,7 +71,7 @@ <h2 slot="pfe-modal--header">Modal with a header with a super duper long title a
 
     <script>
       document.querySelector("#custom-trigger").addEventListener("click", function (event) {
-        document.querySelector("#custom-modal").openModal(event);
+        document.querySelector("#custom-modal").open(event);
       });
     </script>
   </body>

elements/pfe-modal/src/pfe-modal.js

@@ -29,58 +29,25 @@ class PfeModal extends PFElement {
     return PFElement.PfeTypes.Container;
   }
 
-  // static get observedAttributes() {
-  //   return [];
-  // }
-
-  openModal(event) {
-    event.preventDefault();
-
-    this.trigger = event ? event.target : window.event.srcElement;
-
-    this.dispatchEvent(
-      new CustomEvent(`${this.tag}:open`, {
-        detail: {
-          open: true
-        },
-        bubbles: true
-      })
-    );
-  }
-
-  closeModal(event) {
-    event.preventDefault();
-
-    this.dispatchEvent(
-      new CustomEvent(`${this.tag}:close`, {
-        detail: {
-          open: false
-        },
-        bubbles: true
-      })
-    );
-  }
-
   constructor() {
     super(PfeModal, { type: PfeModal.PfeType });
 
     this.header_id = this.randomId;
-
-    this.open = false;
+    this.isOpen = false;
 
     this._keydownHandler = this._keydownHandler.bind(this);
-    this._toggleModal = this._toggleModal.bind(this);
+    this.toggle = this.toggle.bind(this);
 
     // These fire custom events
-    this.openModal = this.openModal.bind(this);
-    this.closeModal = this.closeModal.bind(this);
+    this.open = this.open.bind(this);
+    this.close = this.close.bind(this);
 
     this._modalWindow = this.shadowRoot.querySelector(`.${this.tag}__window`);
     this._modalCloseButton = this.shadowRoot.querySelector(`.${this.tag}__close`);
     this._overlay = this.shadowRoot.querySelector(`.${this.tag}__overlay`);
     this._container = this.shadowRoot.querySelector(`.${this.tag}__container`);
     this._outer = this.shadowRoot.querySelector(`.${this.tag}__outer`);
-    
+
     this._observer = new MutationObserver(() => {
       this._mapSchemaToSlots(this.tag, this.slots);
       this._init();
@@ -92,28 +59,22 @@ class PfeModal extends PFElement {
 
     this._init();
 
-    this.addEventListener(`${this.tag}:open`, this._toggleModal);
-    this.addEventListener(`${this.tag}:close`, this._toggleModal);
-
     this.addEventListener("keydown", this._keydownHandler);
     this._modalCloseButton.addEventListener("keydown", this._keydownHandler);
-    this._modalCloseButton.addEventListener("click", this.closeModal);
-    this._overlay.addEventListener("click", this.closeModal);
+    this._modalCloseButton.addEventListener("click", this.close);
+    this._overlay.addEventListener("click", this.close);
 
     this._observer.observe(this, { childList: true });
   }
 
   disconnectedCallback() {
-    this.removeEventListener(`${this.tag}:open`, this._toggleModal);
-    this.removeEventListener(`${this.tag}:close`, this._toggleModal);
-
     this.removeEventListener("keydown", this._keydownHandler);
-    this._modalCloseButton.removeEventListener("click", this.closeModal);
-    this._modalCloseButton.removeEventListener("click", this.closeModal);
-    this._overlay.removeEventListener("click", this.closeModal);
+    this._modalCloseButton.removeEventListener("click", this.close);
+    this._modalCloseButton.removeEventListener("click", this.close);
+    this._overlay.removeEventListener("click", this.close);
 
     if (this.trigger) {
-      this.trigger.removeEventListener("click", this.openModal);
+      this.trigger.removeEventListener("click", this.open);
     }
 
     this._observer.disconnect();
@@ -129,7 +90,7 @@ class PfeModal extends PFElement {
     this.body = [...this.querySelectorAll(`*:not([slot])`)];
 
     if (this.trigger) {
-      this.trigger.addEventListener("click", this.openModal);
+      this.trigger.addEventListener("click", this.open);
     }
 
     if (this.header) {
@@ -161,41 +122,80 @@ class PfeModal extends PFElement {
       case "Escape":
       case "Esc":
       case 27:
-        this.closeModal(event);
+        this.close(event);
         return;
       case "Enter":
       case 13:
           if (target === this.trigger) {
-            this.openModal(event);
+            this.open(event);
           }
           return;
     }
   }
 
-  _toggleModal(event) {
-    if(event && event.detail) {
-      if(event.detail.open) {
-        this.open = true;
-        // Reveal the container and overlay
-        this._modalWindow.removeAttribute("hidden");
-        this._overlay.removeAttribute("hidden");
-        this._outer.removeAttribute("hidden");
-        // This prevents background scroll
-        document.body.style.overflow = "hidden";
-        // Set the focus to the container
-        this._modalWindow.focus();
-      } else {
-        this.open = false;
-        // Hide the container and overlay
-        this._modalWindow.setAttribute("hidden", true);
-        this._overlay.setAttribute("hidden", true);
-        this._outer.setAttribute("hidden", true);
-        // Return scrollability
-        document.body.style.overflow = "auto";
-        // Move focus back to the trigger element
-        this.trigger.focus();
-      }
+  toggle(event) {
+    this.isOpen ? this.close(event) : this.open(event);
+  }
+
+  open(event) {
+    if (event) {
+      event.preventDefault();
+      this.trigger = event ? event.target : window.event.srcElement;
+    }
+
+    const detail = {
+      open: true
+    };
+
+    if (event && this.trigger) {
+      detail.trigger = this.trigger;
+    }
+
+    this.isOpen = true;
+    // Reveal the container and overlay
+    this._modalWindow.removeAttribute("hidden");
+    this._overlay.removeAttribute("hidden");
+    this._outer.removeAttribute("hidden");
+    // This prevents background scroll
+    document.body.style.overflow = "hidden";
+    // Set the focus to the container
+    this._modalWindow.focus();
+
+    this.dispatchEvent(
+      new CustomEvent(`${this.tag}:open`, {
+        detail: detail,
+        bubbles: true
+      })
+    );
+  }
+
+  close(event) {
+    if (event) {
+      event.preventDefault();
     }
+
+    this.isOpen = false;
+    // Hide the container and overlay
+    this._modalWindow.setAttribute("hidden", true);
+    this._overlay.setAttribute("hidden", true);
+    this._outer.setAttribute("hidden", true);
+    // Return scrollability
+    document.body.style.overflow = "auto";
+
+    if (this.trigger) {
+      // Move focus back to the trigger element
+      this.trigger.focus();
+      this.trigger = null;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent(`${this.tag}:close`, {
+        detail: {
+          open: false
+        },
+        bubbles: true
+      })
+    );
   }
 }