Added moda sample

validide · Mar 21, 2020 · 00e0085 · 00e0085
1 parent 4eb89dc
commit 00e0085
Show file tree

Hide file tree

Showing 10 changed files with 254 additions and 5 deletions.
diff --git a/docs/css/app.css b/docs/css/app.css
@@ -65,3 +65,31 @@
     transform: rotate(360deg);
   }
 }
+
+#global-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2000;
+}
+
+#global-loading:before {
+  box-sizing: border-box;
+  content: " ";
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: #fff;
+  opacity: 0.8;
+}
+
+
+.iframe-modal-content iframe{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/docs/empty.html b/docs/empty.html
@@ -23,6 +23,7 @@ <h5 class="my-0 mr-md-auto font-weight-normal">JavaScript Browser Utilities</h5>
     <h1>JavaScript Browser Utilities</h1>
   </div>
 
+
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
     integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
     crossorigin="anonymous"></script>

diff --git a/docs/index.html b/docs/index.html
@@ -128,10 +128,22 @@ <h4>Events</h4>
             </div>
           </div>
         </article>
+        <article>
+          <h3>Modal Content IframeLoader</h3>
+          <div class="container">
+            <div class="row">
+              <div class="col-12">
+                <a role="button" href="javascript:void(0)" class="btn btn-primary" id="open-modal">Open Modal</a>
+                <div data-code="js-IframeLoader-modal"></div>
+              </div>
+            </div>
+          </div>
+        </article>
       </section>
     </section>
   </div>
 
+
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
     integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
     crossorigin="anonymous"></script>
@@ -401,6 +413,74 @@ <h4>Events</h4>
         });
     })();
   </script>
+  <script data-lang="js" id="js-IframeLoader-modal">
+    (function () {
+      var contentLoader = null;
+      var btn = document.getElementById('open-modal');
+      btn.addEventListener('click', openModal);
+
+      function openModal(e) {
+        e.target.setAttribute('disabled', 'disabled');
+        if (contentLoader)
+          return; // Should not happen but better be safe.
+
+        contentLoader = new validide_jbu
+          .IframeLoader(window, {
+            url: './modal-iframe-content.html',
+            parent: 'body',
+            events: {
+              beforeCreate: eventHander,
+              created: eventHander,
+              beforeUpdate: eventHander,
+              updated: eventHander,
+              beforeDestroy: eventHander,
+              destroyed: eventHander
+            },
+            iframeAttributes: {
+              'allowtransparency': 'true',
+              'frameborder': 0
+            }
+          });
+      }
+
+      var eventHander = function (e) {
+        console.log(e);
+        switch (e.type) {
+          case 'beforeCreate': {
+            window.app.setPageLoadingState(true);
+            break;
+          }
+          case 'created': {
+            e.el.classList.add('d-none');
+            break;
+          }
+          case 'beforeUpdate': {
+            window.app.setPageLoadingState(true);
+            break;
+          }
+          case 'updated': {
+            e.el.classList.remove('d-none');
+            e.el.classList.add('iframe-modal-content');
+            window.app.setPageLoadingState(false);
+            break;
+          }
+          case 'beforeDestroy': {
+            window.app.setPageLoadingState(true);
+            break;
+          }
+          case 'destroyed': {
+            window.app.setPageLoadingState(false);
+            contentLoader = null;
+            btn.removeAttribute('disabled');
+            break;
+          }
+
+          default:
+            break;
+        }
+      };
+    })();
+  </script>
 </body>
 
 </html>
diff --git a/docs/js/app.js b/docs/js/app.js
@@ -85,6 +85,25 @@
     });
   }
 
+  function setPageLoadingState(loading) {
+    //loader-absolute
+    var globalLoader = document.getElementById('global-loading');
+    if (!globalLoader) {
+      globalLoader = document.createElement('div');
+      globalLoader.id = 'global-loading';
+      globalLoader.classList.add('d-none');
+      globalLoader.classList.add('loader-absolute');
+      globalLoader.innerHTML = '<div class="loader"></div>';
+      document.body.appendChild(globalLoader);
+    }
+
+    if (loading) {
+      globalLoader.classList.remove('d-none');
+    } else {
+      globalLoader.classList.add('d-none');
+    }
+  }
+
   function init() {
     highlight();
   }
@@ -97,6 +116,7 @@
     removeLoader: removeLoader,
     ready: ready,
     setQueryParms: setQueryParms,
+    setPageLoadingState: setPageLoadingState,
     init: init
   };
 })(window, window.hljs, void 0);

diff --git a/docs/lib/bundle/index.js b/docs/lib/bundle/index.js
diff --git a/docs/lib/bundle/index.js.map b/docs/lib/bundle/index.js.map
diff --git a/docs/modal-iframe-content.html b/docs/modal-iframe-content.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>JavaScript Browser Utilities</title>
+  <meta name="description" content="JavaScript Browser Utilities Library">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="./css/app.css" />
+  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
+  <style>
+    html,
+    body {
+      height: 100%;
+    }
+
+    body {
+      background-color: #f8f9fa;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+    aria-hidden="true">
+    <div class="modal-dialog modal-xl" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">JavaScript Browser Utilities</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <pre><code id="message"></code></pre>
+        </div>
+        <div class="modal-footer">
+          <a role="button" href="javascript:void(0)" class="btn btn-primary" id="action-busy">Save</a>
+          <a role="button" href="javascript:void(0)" class="btn btn-secondary" data-dismiss="modal">Cancel</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
+    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+    crossorigin="anonymous"></script>
+  <script src="./js/app.js"></script>
+  <script src="./lib/bundle/index.js"></script>
+
+  <script>
+    (function () {
+      var origin = validide_jbu.getUrlOrigin(document, window.location.href);
+      var parentOrigin = window.location.hostname === 'localhost'
+        ? window.location.origin
+        : validide_jbu.getUrlOrigin(document, window.location.href);
+      var iframeContent = new validide_jbu.IframeContent(window, parentOrigin);
+      var isChildFrame = window !== window.parent;
+
+
+      document.getElementById('message').textContent = 'This content is from: '
+        + '\n  - location: ' + window.location.href
+        + '\n  - origin: ' + origin
+        + '\n  - parentOrigin: ' + parentOrigin;
+
+      document.getElementById('action-busy').addEventListener('click', function (e) {
+        iframeContent.signalBusyState(true);
+        if (!isChildFrame) {
+          window.app.setPageLoadingState(true);
+        }
+
+        setTimeout(function () {
+          iframeContent.signalBusyState(false);
+          if (!isChildFrame) {
+            window.app.setPageLoadingState(false);
+          }
+        }, 5000);
+      });
+
+      var $modal = $('#exampleModal').modal({
+        show: isChildFrame ? false : true,
+        focus: isChildFrame ? false : true,
+        keyboard: isChildFrame ? true : false,
+        backdrop: isChildFrame ? true : 'static'
+      });
+
+      if (isChildFrame) {
+        // Simulate some long running process.
+        setTimeout(function () {
+          document.body.style.backgroundColor = 'transparent';
+
+          $modal
+            .modal('show')
+            .on('hide.bs.modal', function (e) {
+              iframeContent.dispose();
+            });
+
+          iframeContent.signalBusyState(false);
+        }, 2000);
+      } else {
+        document.getElementById('exampleModal')
+          .querySelectorAll('[data-dismiss="modal"]')
+          .forEach(f => f.style.display = 'none');
+      }
+    })();
+  </script>
+</body>
+
+</html>
diff --git a/docs/redirect.html b/docs/redirect.html
@@ -11,6 +11,7 @@
 
 <body>
   <p id="redirect-info">Redirecting: </p>
+
   <script src="./js/app.js"></script>
   <script>
     var params = window.app.getQueryParms();

diff --git a/docs/simple-iframe-content.html b/docs/simple-iframe-content.html
@@ -35,6 +35,7 @@ <h5 class="my-0 mr-md-auto font-weight-normal">JavaScript Browser Utilities</h5>
     </div>
   </div>
 
+
   <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
     integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
     crossorigin="anonymous"></script>
@@ -69,8 +70,8 @@ <h5 class="my-0 mr-md-auto font-weight-normal">JavaScript Browser Utilities</h5>
         iframeContent.dispose();
       });
 
+      // Simulate some long running process.
       setTimeout(function() {
-        // Simulate some long running process.
         iframeContent.signalBusyState(false);
       }, 2000);
     })();

diff --git a/src/dom/iframe/iframeLoader.ts b/src/dom/iframe/iframeLoader.ts
@@ -30,7 +30,7 @@ export enum IframeLoaderEventType {
 export interface IframeLoaderEvent {
   type: IframeLoaderEventType;
   el: HTMLElement | null;
-  rootEl: HTMLElement | null;
+  parentEl: HTMLElement;
   id: string;
 }
 
@@ -179,7 +179,7 @@ export class IframeLoader extends BaseComponent {
       handler({
         type: eventType,
         el: this.rootElement,
-        rootEl: this.rootElement,
+        parentEl: this.getParentElement(),
         id: this.iframeId
       });
     }