Merge branch 'US206196--modal-web-component' of https://github.com/patternfly/patternfly-elements into US206196--modal-web-component

chrisdo1 · chrisdo1 · commit f3edb8c4d44c · 2019-08-08T15:52:05.000-04:00
diff --git a/elements/pfe-modal/demo/index.html b/elements/pfe-modal/demo/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
     <title>PatternFly Element | pfe-modal Demo</title>
 
     <noscript>
diff --git a/elements/pfe-modal/src/pfe-modal.js b/elements/pfe-modal/src/pfe-modal.js
@@ -64,9 +64,10 @@ class PfeModal extends PFElement {
   constructor() {
     super(PfeModal, { type: PfeModal.PfeType });
 
-    this.open = false;
     this.header_id = this.randomId;
 
+    this.open = false;
+
     this._keydownHandler = this._keydownHandler.bind(this);
     this._toggleModal = this._toggleModal.bind(this);
 
@@ -179,6 +180,8 @@ class PfeModal extends PFElement {
         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 {
@@ -187,6 +190,8 @@ class PfeModal extends PFElement {
         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();
       }
diff --git a/elements/pfelement/src/pfelement.js b/elements/pfelement/src/pfelement.js
@@ -30,6 +30,10 @@ class PFElement extends HTMLElement {
   static get version() {
     return "{{version}}";
   }
+  
+  static get randomId() {
+    return Math.random().toString(36).substr(2, 9);
+  }
 
   get version() {
     return this._pfeClass.version;
@@ -38,10 +42,6 @@ class PFElement extends HTMLElement {
   get pfeType() {
     return this.getAttribute(`${prefix}type`);
   }
-  
-  get randomId() {
-    return Math.random().toString(36).substr(2, 9);
-  }
 
   set pfeType(value) {
     this.setAttribute(`${prefix}type`, value);
