Update to v1 and add gracefully disable option

samuelli · May 11, 2017 · ab8acaa · ab8acaa
1 parent 51585c9
commit ab8acaa
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -39,12 +39,16 @@
 <progress-bar class="fast"></progress-bar>
 ```
 
-# API reference
+## Finish gracefully
+Use the `disable` attribute to let the progress bar finish gracefully instead of abruptly.
+
+
+## API reference
 
 Disable the progress element using the `hidden` attribute.
 
 Custom property                                  | Description                                 | Default
 -------------------------------------------------|---------------------------------------------|--------------
 `--progress-bar-color      `                     | Color of the progress bar                   | `#37A0CE`
-`--progress-bar-duration`                        | Duration of the animation                   | `0.2s`
+`--progress-bar-duration`                        | Duration of the animation                   | `1s`
 `--progress-bar-delay`                           | Delay before the animation begins           | `0s`
diff --git a/bower.json b/bower.json
@@ -4,7 +4,7 @@
   "main": "progress-bar.html",
   "keywords": ["loading", "progress", "bar"],
   "devDependencies": {
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^v1.0.0-rc.11"
   },
   "demos": {
     "Simple demo": "demo.html"

diff --git a/demo.html b/demo.html
@@ -1,4 +1,5 @@
 <head>
+  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
   <link rel="import" href="progress-bar.html">
 </head>
 <body>

diff --git a/progress-bar.html b/progress-bar.html
@@ -21,13 +21,21 @@
       left: 0;
       transform: scaleX(0);
       transform-origin: right center;
-      animation: indeterminate-bar var(--progress-bar-duration, 2s) var(--progress-bar-delay, 0s) linear infinite;
+      animation: indeterminate-bar var(--progress-bar-duration, 1s) var(--progress-bar-delay, 0s) linear infinite;
+    }
+
+    #primaryProgress.finished {
+      animation: none;
     }
 
     #primaryProgress::after {
       content: "";
       transform-origin: center center;
-      animation: indeterminate-splitter var(--progress-bar-duration, 2s) var(--progress-bar-delay, 0s) linear infinite;
+      animation: indeterminate-splitter var(--progress-bar-duration, 1s) var(--progress-bar-delay, 0s) linear infinite;
+    }
+
+    #primaryProgress.finished::after {
+      animation: none;
     }
 
     @keyframes indeterminate-bar {
@@ -67,15 +75,46 @@
 </template>
 
 <script>
-  (function() {
-    var template = document.currentScript.ownerDocument.querySelector('template#progress-bar');
-    var prototype = Object.create(HTMLElement.prototype);
+  class ProgressBar extends HTMLElement {
+    static get is() {
+      return 'progress-bar';
+    }
+
+    constructor() {
+      super();
+      const shadowRoot = this.attachShadow({mode: 'open'});
+      const template = document.currentScript.ownerDocument.querySelector('template#progress-bar');
+      shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    static get observedAttributes() {
+      return ['disabled'];
+    }
+
+    get disabled() {
+      return this.hasAttribute('disabled');
+    }
+
+    set disabled(value) {
+      if (value) {
+        this.setAttribute('disabled', '');
+      } else {
+        this.removeAttribute('disabled');
+      }
+    }
+
+    _iterationCallback() {
+      this.shadowRoot.querySelector('#primaryProgress').classList.add('finished');
+    }
 
-    prototype.createdCallback = function() {
-      this.setAttribute('role', 'progressbar');
-      this.createShadowRoot().appendChild(document.importNode(template.content, true));
+    attributeChangedCallback() {
+      const progress = this.shadowRoot.querySelector('#primaryProgress');
+      if (this.disabled)
+        progress.addEventListener('animationiteration', this._iterationCallback.bind(this), {once: true, passive: true});
+      else
+        progress.classList.remove('finished');
     }
+  }
 
-    document.registerElement('progress-bar', {prototype: prototype});
-  })();
+  customElements.define('progress-bar', ProgressBar);
 </script>