Updating modal to add in polyfill support for IE11 and workarounds for event key

Author: castastrophe

elements/pfe-modal/demo/index.html

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

elements/pfe-modal/demo/pfe-modal.story.js

@@ -42,7 +42,5 @@ stories.add(PfeModal.tag, () => {
   }];
 
 	const render = template(config);
-  const output = tools.preview(render);
-  return output;
   return tools.preview(render);
 });

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

@@ -1,5 +1,12 @@
 import PFElement from "../pfelement/pfelement.js";
 
+// StartsWith polyfill
+if (!String.prototype.startsWith) {
+  String.prototype.startsWith = function(searchString, position){
+    return this.substr(position || 0, searchString.length) === searchString;
+};
+}
+
 class PfeModal extends PFElement {
   static get tag() {
     return "pfe-modal";
@@ -29,7 +36,7 @@ class PfeModal extends PFElement {
   openModal(event) {
     event.preventDefault();
 
-    this.trigger = event.target;
+    this.trigger = event ? event.target : window.event.srcElement;
 
     this.dispatchEvent(
       new CustomEvent(`${this.tag}:open`, {
@@ -88,7 +95,9 @@ class PfeModal extends PFElement {
     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._observer.observe(this, { childList: true });
   }
@@ -98,8 +107,9 @@ class PfeModal extends PFElement {
     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);
 
     if (this.trigger) {
       this.trigger.removeEventListener("click", this.openModal);
@@ -125,8 +135,7 @@ class PfeModal extends PFElement {
       this.header.setAttribute("id", this.header_id);
       this._modalWindow.setAttribute("aria-labelledby", this.header_id);
     } else {
-      // @TODO Do something else to assign the label
-      this._container.setAttribute("no_header", "");
+      // Get the first heading in the modal if it exists
       const headings = this.body.filter(el => el.tagName.startsWith("H"));
       if (headings.length > 0) {
         headings[0].setAttribute("id", this.header_id);
@@ -135,24 +144,27 @@ class PfeModal extends PFElement {
         this._modalWindow.setAttribute("aria-label", this.trigger.innerText);
       }
     }
-
-    this._overlay.addEventListener("click", this.closeModal);
-    this._modalCloseButton.addEventListener("keydown", this._keydownHandler);
   }
 
   _keydownHandler(event) {
-    switch (event.key) {
+    let target = event.target || window.event.srcElement;
+    let key = event.key || event.keyCode;
+    switch (key) {
       case "Tab":
-        if (event.target === this._modalCloseButton) {
+      case 9:
+        if (target === this._modalCloseButton) {
           event.preventDefault();
           this._modalWindow.focus();
         }
         return;
       case "Escape":
+      case "Esc":
+      case 27:
         this.closeModal(event);
         return;
       case "Enter":
-          if (event.target === this.trigger) {
+      case 13:
+          if (target === this.trigger) {
             this.openModal(event);
           }
           return;

elements/pfe-modal/src/pfe-modal.scss

@@ -72,7 +72,7 @@ $pfe-modal--breakpoint--medium: 640px;
 			display: none;
 		}
 
-		&[no_header] {
+		:host(:not([has_header])) & {
 			@media screen and (min-width: $pfe-modal--breakpoint--medium) {
 				padding: calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 6) calc(#{pfe-var(container-padding)} * 2) calc(#{pfe-var(container-padding)} * 2);			
 			}

examples/index.html

@@ -22,13 +22,12 @@ <h1>Demos</h1>
 					<li><a href="../elements/pfe-icon/demo">pfe-icon</a></li>
 					<li><a href="../elements/pfe-icon-panel/demo">pfe-icon-panel</a></li>
 					<li><a href="../elements/pfe-layouts/demo">pfe-layouts</a></li>
-					<li><a href="../elements/pfe-link-list/demo">pfe-link-list</a></li>
 					<li><a href="../elements/pfe-markdown/demo">pfe-markdown</a></li>
 					<li><a href="../elements/pfe-modal/demo">pfe-modal</a></li>
-					<li><a href="../elements/pfe-navigation/demo">pfe-navigation</a></li>
 					<li><a href="../elements/pfe-number/demo">pfe-number</a></li>
 					<li><a href="../elements/pfe-page-status/demo">pfe-page-status</a></li>
 					<li><a href="../elements/pfe-progress-indicator/demo">pfe-progress-indicator</a></li>
+					<li><a href="../elements/pfe-styles/demo">pfe-styles</a></li>
 					<li><a href="../elements/pfe-tabs/demo">pfe-tabs</a></li>
 				</ul>
     </body>