Add AJAX with promises

dixso · Oct 31, 2016 · c962c70 · c962c70
1 parent 46bb567
commit c962c70
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 37 deletions.
diff --git a/src/ajax.html b/src/ajax.html
@@ -0,0 +1,3 @@
+<div style="background: #fc5e5e; border: #fc5e5e solid 1px">
+  <a href="javascript:void(0);" onclick="dynamicModal()">Open new modal</a>
+</div>
diff --git a/src/custombox.ts b/src/custombox.ts
@@ -135,16 +135,43 @@ module Custombox {
     }
 
     // Public methods
-    fetch(target: string): any {
-      let selector: Element = document.querySelector(target);
-      if (selector) {
-        let element: HTMLElement = <HTMLElement>selector.cloneNode(true);
-        element.removeAttribute('id');
-
-        this.element.appendChild(element);
-      } else {
-        throw `The element doesn't exist`;
-      }
+    fetch(target: string, width: string): Promise<any> {
+      return new Promise((resolve: Function, reject: Function) => {
+        let selector: Element = document.querySelector(target);
+
+        if (selector) {
+          let element: HTMLElement = <HTMLElement>selector.cloneNode(true);
+          element.removeAttribute('id');
+          if (width !== 'full') {
+            element.style.width = width;
+          }
+
+          resolve(element);
+        } else if (target.charAt(0) !== '#' && target.charAt(0) !== '.') {
+          let url: string = target;
+          let req: XMLHttpRequest = new XMLHttpRequest();
+
+          req.open('GET', url);
+          req.onload = () => {
+            if (req.status === 200) {
+              let modal: HTMLElement = document.createElement('div');
+
+              modal.innerHTML = req.response;
+              if (width !== 'full') {
+                modal.style.width = width;
+              }
+
+              resolve(modal);
+            } else {
+              reject(new Error(req.statusText));
+            }
+          };
+          req.onerror = () => reject(new Error('Network error'));
+          req.send();
+        } else {
+          reject(new Error(`The element doesn't exist`));
+        }
+      });
     }
 
     bind(method: string): Promise<Event> {
@@ -201,26 +228,28 @@ module Custombox {
 
     // Public methods
     open(): void {
-      // Fetch target
-      this.content.fetch(this.options.target);
-
-      // Append into body
-      document.body.appendChild(this.wrapper.element);
-
-      if (this.options.overlay) {
-        this.overlay.bind('open').then(() => this.content.bind('open').then(() => this.dispatchEvent('complete')));
-      } else {
-        let ready = window.getComputedStyle(this.content.element).transitionDuration;
-        if (ready) {
-          this.content.bind('open').then(() => this.dispatchEvent('complete'));
+      this.content.fetch(this.options.target, this.options.width).then((element: HTMLElement) => {
+        // Append
+        this.content.element.appendChild(element);
+        document.body.appendChild(this.wrapper.element);
+
+        if (this.options.overlay) {
+          this.overlay.bind('open').then(() => this.content.bind('open').then(() => this.dispatchEvent('complete')));
+        } else {
+          let ready = window.getComputedStyle(this.content.element).transitionDuration;
+          if (ready) {
+            this.content.bind('open').then(() => this.dispatchEvent('complete'));
+          }
         }
-      }
 
-      // Dispatch event
-      this.dispatchEvent('open');
+        // Dispatch event
+        this.dispatchEvent('open');
 
-      // Listeners
-      this.listeners();
+        // Listeners
+        this.listeners();
+      }).catch((error: string) => {
+        throw error;
+      });
     }
 
     close(): void {

diff --git a/src/index.html b/src/index.html
@@ -7,32 +7,36 @@
     <script src="./custombox.js"></script>
     <script>
       const modal = new Custombox.modal({
-          target: '#test',
+          target: 'ajax.html',
           effect: 'fadein',
       });
-      const modal2 = new Custombox.modal({
-          target: '#test2',
-          effect: 'fadein',
-          width: 'full',
-      });
+      var modals = [];
     </script>
 </head>
 <body>
 Un <div>div</div>
 
 <div id="test" style="background: #fc5e5e; border: #fc5e5e solid 1px">
-  YEAHHH
-    <a href="javascript:void(0);" onclick="modal2.close()">Open</a>
+  <a href="javascript:void(0);" onclick="dynamicModal()">Open new modal</a>
 </div>
 <div id="test2" style="background: #FFF;">
   Funciona
-    <a href="javascript:void(0);" onclick="modal2.close()">Close</a>
+    <a href="javascript:void(0);" onclick="modals[modals.length - 1].close()">Close</a>
 </div>
 <script>
   document.addEventListener("DOMContentLoaded", () =>  modal.open());
   document.addEventListener("custombox:close", () =>  console.log('close'));
 
-  setTimeout(()=> modal2.open(), 5000);
+  function dynamicModal() {
+    let custom = new Custombox.modal({
+      target: '#test2',
+      effect: 'fadein',
+      width: 'full',
+    });
+
+    custom.open();
+    modals.push(custom);
+  }
 </script>
 </body>
 </html>