Port lancie-ajax v2 to v3

AreaFiftyLAN · Oct 7, 2018 · 39341fe · 39341fe
1 parent 5ce629b
commit 39341fe
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# \<lancie-ajax-3\>
-
+# \<lancie-ajax\>
 
+iron-ajax element specified for the lancie frontends
 
 ## Install the Polymer-CLI
 

diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 
-    <title>lancie-ajax-3 demo</title>
+    <title>lancie-ajax demo</title>
 
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
 
@@ -13,7 +13,7 @@
       import '@polymer/iron-demo-helpers/demo-snippet';
     </script>
 
-    <script type="module" src="../lancie-ajax-3.js"></script>
+    <script type="module" src="../lancie-ajax.js"></script>
 
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles">
@@ -22,10 +22,10 @@
   </head>
   <body>
     <div class="vertical-section-container centered">
-      <h3>Basic lancie-ajax-3 demo</h3>
+      <h3>Basic lancie-ajax demo</h3>
       <demo-snippet>
         <template>
-          <lancie-ajax-3></lancie-ajax-3>
+          <lancie-ajax></lancie-ajax>
         </template>
       </demo-snippet>
     </div>

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="refresh" content="0;url=demo/" />
-    <title>lancie-ajax-3</title>
+    <title>lancie-ajax</title>
   </head>
   <body>
     <!--

diff --git a/lancie-ajax-3.js b/lancie-ajax-3.js
diff --git a/lancie-ajax.js b/lancie-ajax.js
@@ -0,0 +1,148 @@
+import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
+import '@polymer/iron-ajax/iron-ajax.js';
+
+/**
+ * `lancie-ajax-3`
+ * 
+ *
+ * @customElement
+ * @polymer
+ * @demo demo/index.html
+ */
+class LancieAjax extends PolymerElement {
+  static get template() {
+    return html`
+      <iron-ajax
+          id="ajax"
+          headers="[[createHeader(token, contenttype)]]"
+          body="[[body]]"
+          params="[[params]]"
+          method="[[method]]"
+          url="[[_getURL(absoluteurl, refurl)]]"
+          handle-as="[[handleAs]]"
+          last-response="{{lastResponse}}"
+          loading="{{loading}}"
+          debounce-duration="300"
+          on-response="handleResponse"
+          on-error="handleResponse"
+      ></iron-ajax>
+    `;
+  }
+  static get properties() {
+    return {
+      contenttype: {
+        type: String,
+        value: 'application/json',
+        notify: true
+      },
+      refurl: {
+        type: String,
+        value: '',
+        notify: true
+      },
+      absoluteurl: {
+        type: String,
+        value: '',
+        notify: true
+      },
+      handleAs: {
+        type: String,
+        value: 'json',
+        notify: true
+      },
+      autoFire: {
+        type: Boolean,
+        value: false
+      },
+      skipToken: {
+        type: Boolean,
+        value: false
+      },
+      isuser: {
+        type: Boolean,
+        value: false
+      },
+      loading: {
+        type: Boolean,
+        notify: true,
+        value: false
+      },
+      params: {
+        type: Object,
+        value: {}
+      },
+      method: {
+        type: String,
+        value: 'GET'
+      },
+      lastResponse: {
+        type: Object,
+        notify: true
+      },
+      body: {
+        type: Object
+      },
+      token: {
+        type: String,
+        value: '',
+        notify: true,
+      }
+    };
+  }
+
+  injectToken(newToken) {
+    token = newToken;
+    for (let i = 0; i < ajax.length; i++) {
+      ajax[i](token);
+    }
+  }
+
+  attached() {
+    if (this.skipToken && this.autoFire) {
+      this.generateRequest();
+      return;
+    }
+    if (token) {
+      this.token = token;
+      if (this.autoFire) {
+        this.generateRequest();
+      }
+    } else {
+      ajax.push(function(newToken) {
+        this.token = newToken;
+        if (this.autoFire) {
+          this.generateRequest();
+        }
+      }.bind(this));
+    }
+  }
+
+  _getURL(absoluteurl, refurl) {
+    if (absoluteurl !== '') {
+      return absoluteurl;
+    }
+    return '/api/v1/' + refurl;
+  }
+
+  createHeader(token, contenttype) {
+    if (this.absoluteurl !== '') {
+      return {
+        'Content-Type': contenttype,
+      };
+    }
+    return {
+      'Content-Type': contenttype,
+      'X-Auth-Token': token,
+    };
+  }
+
+  handleResponse(event) {
+    this.fire('lancie-ajax', event.detail);
+  }
+
+  generateRequest() {
+    this.$.ajax.generateRequest();
+  }
+}
+
+window.customElements.define('lancie-ajax', LancieAjax);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
   "name": "lancie-ajax-3",
   "main": "lancie-ajax-3.js",
   "dependencies": {
+    "@polymer/iron-ajax": "^3.0.1",
     "@polymer/polymer": "^3.0.0"
   },
   "devDependencies": {