feat: support specification of the url via a property

ColinEberhardt · Jun 13, 2018 · e446aa4 · e446aa4
1 parent a00e7b8
commit e446aa4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ The applause button is a custom element that can be added directly to the page.
 ```html
 <head>
   <!-- add the button style & script -->
-  <link rel="stylesheet" href="dist/style.css" />
+  <link rel="stylesheet" href="dist/applause-button.css" />
   <script src="dist/applause-button.js"></script>
 </head>
 <body>

diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <html>
 
 <head>
-  <link rel="stylesheet" href="dist/style.css" />
+  <link rel="stylesheet" href="dist/applause-button.css" />
   <script src="dist/applause-button.js"></script>
   <style>
     applause-button {
@@ -13,6 +13,6 @@
   </style>
 </head>
 <body>
-  <applause-button multiclap="true"/>
+  <applause-button multiclap="true" url="google.com"/>
 </body>
 </html>
diff --git a/src/applause-button.js b/src/applause-button.js
@@ -2,17 +2,17 @@ import "document-register-element/build/document-register-element";
 
 const API = "https://api.applause-button.com";
 
-const getClaps = () =>
+const getClaps = url =>
   // TODO: polyfill for IE (not edge)
-  fetch(`${API}/get-claps`, {
+  fetch(`${API}/get-claps` + (url ? `?url=${url}` : ""), {
     headers: {
       "Content-Type": "text/plain"
     }
   }).then(response => response.text());
 
-const updateClaps = claps =>
+const updateClaps = (claps, url) =>
   // TODO: polyfill for IE (not edge)
-  fetch(`${API}/update-claps`, {
+  fetch(`${API}/update-claps` + (url ? `?url=${url}` : ""), {
     method: "POST",
     headers: {
       "Content-Type": "text/plain"
@@ -99,7 +99,7 @@ class ApplauseButton extends HTMLCustomElement {
           this._bufferedClaps,
           MAX_MULTI_CLAP - this._totalClaps
         );
-        updateClaps(increment);
+        updateClaps(increment, this.url);
         this._totalClaps += increment;
         this._bufferedClaps = 0;
       }
@@ -132,7 +132,7 @@ class ApplauseButton extends HTMLCustomElement {
       }
     });
 
-    getClaps().then(claps => {
+    getClaps(this.url).then(claps => {
       this.classList.remove("loading");
       const clapCount = Number(claps);
       if (clapCount > 0) {
@@ -156,6 +156,19 @@ class ApplauseButton extends HTMLCustomElement {
     this._updateRootColor();
   }
 
+  set url(url) {
+    if (url) {
+      this.setAttribute("url", url);
+    } else {
+      this.removeAttribute("url");
+    }
+    this._updateRootColor();
+  }
+
+  get url() {
+    return this.getAttribute("url");
+  }
+
   get multiclap() {
     return this.getAttribute("multiclap") === "true";
   }