Feature: paper-progress-circular component

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Ember Paper Changelog
 
+### 0.2.5 (Jul 20, 2015)
+
+- [#135](https://github.com/miguelcobain/ember-paper/pull/135) Fix deprecation bug in linear progress indicator.
+- [#136](https://github.com/miguelcobain/ember-paper/pull/136) Added circular progress indicator.
+
+
 ### 0.2.5 (Jul 18, 2015)
 
 - [#114](https://github.com/miguelcobain/ember-paper/pull/134) Added linear progress indicator.

addon/components/paper-progress-circular.js

@@ -0,0 +1,32 @@
+import Ember from 'ember';
+import ColorMixin from 'ember-paper/mixins/color-mixin';
+
+var BASE_DIAMETER = 48;
+
+export default Ember.Component.extend(ColorMixin, {
+  tagName: 'md-progress-circular',
+
+  classNames: ['md-default-theme'],
+  attributeBindings: ['value', 'mode:md-mode'],
+
+  diameter: BASE_DIAMETER,
+
+  constants: Ember.inject.service(),
+
+  scale: Ember.computed('diameter', function() {
+    return this.get('diameter') / BASE_DIAMETER;
+  }),
+
+  clampedValue: Ember.computed('value', function() {
+
+    var value = this.get('value');
+
+    return Math.max(0, Math.min(value || 0, 100));
+
+  }),
+
+  circleStyle: Ember.computed('scale', function() {
+    return Ember.String.htmlSafe(this.get('constants.CSS.TRANSFORM') + ': ' + 'scale(' + this.get('scale').toString() + ')');
+  })
+
+});

app/components/paper-progress-circular.js

@@ -0,0 +1 @@
+export { default } from 'ember-paper/components/paper-progress-circular';

app/styles/ember-paper.scss

@@ -76,6 +76,7 @@
 @import 'paper-slider';
 @import 'paper-subheader';
 @import 'paper-progress-linear';
+@import 'paper-progress-circular';
 
 @import 'paper-sidenav';
 @import 'paper-backdrop';

app/styles/paper-progress-circular.scss

@@ -0,0 +1,249 @@
+$progress-circular-ease-in-out : cubic-bezier(0.35, 0, 0.25, 1) !default;
+$progress-circular-duration : 5.25s !default;
+$progress-circular-circle-duration : $progress-circular-duration * 0.25 !default;
+$progress-circular-outer-duration : $progress-circular-duration * (5 / 9) !default;
+$progress-circular-sporadic-duration : $progress-circular-duration !default;
+$progress-circular-size : 50px !default;
+
+@keyframes outer-rotate {
+  100% { transform: rotate(360deg); }
+}
+@keyframes left-wobble {
+  0%, 100% { transform: rotate(130deg); }
+  50% { transform: rotate( -5deg); }
+}
+@keyframes right-wobble {
+  0%, 100% { transform: rotate(-130deg); }
+  50% { transform: rotate(   5deg); }
+}
+@keyframes sporadic-rotate {
+  12.5% { transform: rotate( 135deg); }
+  25% { transform: rotate( 270deg); }
+  37.5% { transform: rotate( 405deg); }
+  50% { transform: rotate( 540deg); }
+  62.5% { transform: rotate( 675deg); }
+  75% { transform: rotate( 810deg); }
+  87.5% { transform: rotate( 945deg); }
+  100% { transform: rotate(1080deg); }
+}
+
+md-progress-circular {
+  width: $progress-circular-size;
+  height: $progress-circular-size;
+  display: block;
+  position: relative;
+  padding-top: 0 !important;
+  margin-bottom: 0 !important;
+  overflow: hidden;
+  .md-inner {
+    width: $progress-circular-size;
+    height: $progress-circular-size;
+    position: relative;
+    .md-gap {
+      position: absolute;
+      left: $progress-circular-size * 0.5 - 1;
+      right: $progress-circular-size * 0.5 - 1;
+      top: 0;
+      bottom: 0;
+      border-top-width: 5px;
+      border-top-style: solid;
+      box-sizing: border-box;
+    }
+    .md-left, .md-right {
+      position: absolute;
+      top: 0;
+      height: $progress-circular-size;
+      width: $progress-circular-size * 0.5;
+      overflow: hidden;
+      .md-half-circle {
+        position: absolute;
+        top: 0;
+        width: $progress-circular-size;
+        height: $progress-circular-size;
+        box-sizing: border-box;
+        border-width: 5px;
+        border-style: solid;
+        border-bottom-color: transparent;
+        border-radius: 50%;
+      }
+    }
+    .md-left {
+      left: 0;
+      .md-half-circle {
+        left: 0;
+        border-right-color: transparent;
+      }
+    }
+    .md-right {
+      right: 0;
+      .md-half-circle {
+        right: 0;
+        border-left-color: transparent;
+      }
+    }
+  }
+
+  // TODO: This while-loop generates about 2 kilobytes of css after gzip.
+  // Refactor progressCircular to animate with javascript.
+  $i: 0;
+  @while $i <= 100 {
+    &[value="#{$i}"] {
+      .md-inner {
+        .md-left {
+          .md-half-circle {
+            @if $i <= 50 {
+              transform: rotate(135deg);
+            } @else {
+              transition: transform 0.1s linear;
+              $deg: ($i - 50) / 50 * 180 + 135;
+              transform: rotate(#{$deg}deg);
+            }
+          }
+        }
+        .md-right {
+          .md-half-circle {
+            @if $i <= 50 {
+              transition: transform 0.1s linear;
+              $deg: $i / 50 * 180 - 135;
+              transform: rotate(#{$deg}deg);
+            } @else {
+              transform: rotate(45deg);
+            }
+          }
+        }
+        .md-gap {
+          border-bottom-width: 5px;
+          border-bottom-style: solid;
+          @if $i <= 50 {
+            border-bottom-color: transparent !important;
+          } @else {
+            transition: border-bottom-color 0.1s linear;
+          }
+        }
+      }
+    }
+    $i: $i + 1;
+  }
+
+  &[md-mode=indeterminate] {
+    .md-spinner-wrapper {
+      animation: outer-rotate $progress-circular-outer-duration linear infinite;
+      .md-inner {
+        animation: sporadic-rotate $progress-circular-sporadic-duration $progress-circular-ease-in-out infinite;
+        .md-left, .md-right {
+          .md-half-circle {
+            animation-iteration-count: infinite;
+            animation-duration: ($progress-circular-duration * 0.25);
+            animation-timing-function: $progress-circular-ease-in-out;
+          }
+        }
+        .md-left {
+          .md-half-circle {
+            animation-name: left-wobble;
+          }
+        }
+        .md-right {
+          .md-half-circle {
+            animation-name: right-wobble;
+          }
+        }
+      }
+    }
+  }
+}
+
+.ng-hide md-progress-circular,
+md-progress-circular.ng-hide {
+  &[md-mode=indeterminate] {
+    .md-spinner-wrapper {
+      animation: none;
+      .md-inner {
+        animation: none;
+        .md-left {
+          .md-half-circle {
+            animation-name: none;
+          }
+        }
+        .md-right {
+          .md-half-circle {
+            animation-name: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+// THEME
+md-progress-circular.md-#{$theme-name}-theme {
+  background-color: transparent;
+  .md-inner {
+    .md-gap {
+      border-top-color: color($primary);
+      border-bottom-color: color($primary);
+    }
+    .md-left, .md-right {
+      .md-half-circle {
+        border-top-color: color($primary);
+      }
+    }
+    .md-right {
+      .md-half-circle {
+        border-right-color: color($primary);
+      }
+    }
+    .md-left {
+      .md-half-circle {
+        border-left-color: color($primary);
+      }
+    }
+  }
+
+  &.md-warn {
+    .md-inner {
+      .md-gap {
+        border-top-color: color($warn);
+        border-bottom-color: color($warn);
+      }
+      .md-left, .md-right {
+        .md-half-circle {
+          border-top-color: color($warn);
+        }
+      }
+      .md-right {
+        .md-half-circle {
+          border-right-color: color($warn);
+        }
+      }
+      .md-left {
+        .md-half-circle {
+          border-left-color: color($warn);
+        }
+      }
+    }
+  }
+
+  &.md-accent {
+    .md-inner {
+      .md-gap {
+        border-top-color: color($accent);
+        border-bottom-color: color($accent);
+      }
+      .md-left, .md-right {
+        .md-half-circle {
+          border-top-color: color($accent);
+        }
+      }
+      .md-right {
+        .md-half-circle {
+          border-right-color: color($accent);
+        }
+      }
+      .md-left {
+        .md-half-circle {
+          border-left-color: color($accent);
+        }
+      }
+    }
+  }
+}

app/templates/components/paper-progress-circular.hbs

@@ -0,0 +1,11 @@
+<div class="md-spinner-wrapper" style={{circleStyle}}>
+    <div class="md-inner">
+        <div class="md-gap"></div>
+        <div class="md-left">
+            <div class="md-half-circle"></div>
+        </div>
+        <div class="md-right">
+            <div class="md-half-circle"></div>
+        </div>
+    </div>
+</div>

tests/dummy/app/controllers/progress-circular.js

@@ -0,0 +1,22 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  mode: 'query',
+  determinateValue: 30,
+
+  init: function () {
+    this.setupTimer();
+  },
+
+  setupTimer: function() {
+    Ember.run.later(this, function() {
+      this.incrementProperty('determinateValue', 1);
+      if (this.get('determinateValue') > 100) {
+        this.set('determinateValue', 30);
+      }
+
+      Ember.run.later(this, this.setupTimer);
+
+    }, 100);
+  }
+});

tests/dummy/app/router.js

@@ -10,6 +10,7 @@ Router.map(function() {
   this.route('button');
   this.route('card');
   this.route('checkbox');
+  this.route('progress-circular');
   this.route('progress-linear');
   this.route('radio');
   this.route('switch');

tests/dummy/app/templates/application.hbs

@@ -18,6 +18,7 @@
         {{#paper-item action="transitionTo" param="typography"}}Typography{{/paper-item}}
         {{#paper-item action="transitionTo" param="list"}}List{{/paper-item}}
         {{#paper-item action="transitionTo" param="list-controls"}}List Controls{{/paper-item}}
+        {{#paper-item action="transitionTo" param="progress-circular"}}Progress Circular{{/paper-item}}
         {{#paper-item action="transitionTo" param="progress-linear"}}Progress Linear{{/paper-item}}
         {{#paper-item action="transitionTo" param="divider"}}Divider{{/paper-item}}
         {{#paper-item action="transitionTo" param="card"}}Card{{/paper-item}}