Rewrite progress-circular to match angular implementation with new st…

CHANGELOG.md

@@ -4,6 +4,7 @@
 - [#140](https://github.com/miguelcobain/ember-paper/pull/140) Implement Material Menu and Select component.
 - [#171](https://github.com/miguelcobain/ember-paper/pull/171) Add support for custom validations in paper-input component.
 - [#192](https://github.com/miguelcobain/ember-paper/pull/192) Add support for paper-grid-list component.
+- [#194](https://github.com/miguelcobain/ember-paper/pull/194) Fixed [#173](https://github.com/miguelcobain/ember-paper/issues/173) - issue with paper-progress-circular.
 
 
 ### 0.2.8 (Aug 19, 2015)

addon/components/paper-progress-circular.js

@@ -1,34 +1,121 @@
 import Ember from 'ember';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 
-var BASE_DIAMETER = 48;
+const BASE_DIAMETER = 48;
+const DEFAULT_PROGRESS_SIZE = 100;
+const DEFAULT_SCALING = 0.5;
+
+const MODE_DETERMINATE = 'determinate',
+  MODE_INDETERMINATE = 'indeterminate';
+
 
 export default Ember.Component.extend(ColorMixin, {
   tagName: 'md-progress-circular',
 
   classNames: ['md-default-theme'],
-  attributeBindings: ['value', 'mode:md-mode'],
+  attributeBindings: ['value', 'mode:md-mode', 'circleStyle:style'],
 
   mode: Ember.computed('value', function() {
     var value = this.get('value');
-    return Ember.isPresent(value) ? 'determinate' : 'indeterminate';
+    return Ember.isPresent(value) ? MODE_DETERMINATE : MODE_INDETERMINATE;
+  }),
+
+  spinnerClass: Ember.computed('mode', function() {
+    const mode = this.get('mode');
+
+    switch (mode) {
+      case MODE_DETERMINATE:
+      case MODE_INDETERMINATE:
+        return `md-mode-${mode}`;
+      default:
+        return `ng-hide`;
+    }
   }),
 
   diameter: BASE_DIAMETER,
 
   constants: Ember.inject.service(),
-
-  scale: Ember.computed('diameter', function() {
-    return this.get('diameter') / BASE_DIAMETER;
-  }),
+  util: Ember.inject.service(),
 
   clampedValue: Ember.computed('value', function() {
-    var value = this.get('value');
+    const 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() + ')');
+  circleStyle: Ember.computed('diameterRatio', function() {
+    return Ember.String.htmlSafe(`${this.get('constants.CSS.TRANSFORM')}: scale(${this.get('diameterRatio')})`);
+  }),
+
+  gapStyle: Ember.computed('clampedValue', function() {
+    const value = this.get('clampedValue');
+    const borderBottomColor = (value <= 50) ? 'transparent !important' : '',
+      transition = (value <= 50) ? '' : 'borderBottomColor 0.1s linear';
+
+    var style = '';
+
+    if (borderBottomColor) {
+      style = `border-bottom-color: ${borderBottomColor}; `;
+    }
+
+    if (transition) {
+      style = style + `${this.get('constants.CSS.TRANSITION')}: ${transition}`;
+    }
+
+    return Ember.String.htmlSafe(style);
+  }),
+
+  leftStyle: Ember.computed('mode', 'clampedValue', function() {
+    if (this.get('mode') !== MODE_DETERMINATE) {
+      return Ember.String.htmlSafe('');
+    }
+    const value = this.get('clampedValue');
+    const transition = (value <= 50) ? 'transform 0.1s linear' : '',
+      transform = this.get('util').supplant('rotate({0}deg)', [value <= 50 ? 135 : (((value - 50) / 50 * 180) + 135)]);
+
+    var style = '';
+
+    if (transition) {
+      style = `${this.get('constants.CSS.TRANSITION')}: ${transition}; `;
+    }
+
+    if (transform) {
+      style = style + `${this.get('constants.CSS.TRANSFORM')}: ${transform}`;
+    }
+
+    return Ember.String.htmlSafe(style);
+  }),
+
+  rightStyle: Ember.computed('mode', 'clampedValue', function() {
+    if (this.get('mode') !== MODE_DETERMINATE) {
+      return Ember.String.htmlSafe('');
+    }
+    const value = this.get('clampedValue');
+    const transition = (value >= 50) ? 'transform 0.1s linear' : '',
+      transform = this.get('util').supplant('rotate({0}deg)', [value >= 50 ? 45 : (value / 50 * 180 - 135)]);
+
+    var style = '';
+
+    if (transition) {
+      style = `${this.get('constants.CSS.TRANSITION')}: ${transition}; `;
+    }
+
+    if (transform) {
+      style = style + `${this.get('constants.CSS.TRANSFORM')}: ${transform}`;
+    }
+
+    return Ember.String.htmlSafe(style);
+  }),
+
+  diameterRatio: Ember.computed('md-diameter', function() {
+    if (!this.get('md-diameter')) {
+      return DEFAULT_SCALING;
+    }
+
+    const match = /([0-9]*)%/.exec(this.get('md-diameter'));
+    const value = Math.max(0, (match && match[1] / 100) || parseFloat(this.get('md-diameter')));
+
+    // should return ratio; DEFAULT_PROGRESS_SIZE === 100px is default size
+    return (value > 1) ? value / DEFAULT_PROGRESS_SIZE : value;
   })
 
 });

app/services/util.js

@@ -102,6 +102,30 @@ var Util = Ember.Service.extend({
   enableScrolling: function () {
     var method = this.disableScrollAround._enableScrolling;
     method && method();
+  },
+
+  /**
+   * supplant() method from Crockford's `Remedial Javascript`
+   * Equivalent to use of $interpolate; without dependency on
+   * interpolation symbols and scope. Note: the '{<token>}' can
+   * be property names, property chains, or array indices.
+   */
+  supplant: function(template, values, pattern) {
+    pattern = pattern || /\{([^\{\}]*)\}/g;
+    return template.replace(pattern, function(a, b) {
+      var p = b.split('.'),
+        r = values;
+      try {
+        for (var s in p) {
+          if (p.hasOwnProperty(s) ) {
+            r = r[p[s]];
+          }
+        }
+      } catch (e) {
+        r = a;
+      }
+      return (typeof r === 'string' || typeof r === 'number') ? r : a;
+    });
   }
 });