radial progressbar helper for Ember (using jQuery-Knob by @aterrien )

README.md

Hai!

This baby registers an Ember Handlebars helper using @aterrien's awesome jQuery-Knob

Usage:

{{radial-progress progress=myProgress}}

and vuala!!! you've got yourself a knob. options:

• width
• fgColor
• skin
• thickness
• displayPrevious
• readOnly
• animationDuration Depends on https://github.com/aterrien/jQuery-Knob for the knobbing. bower install this awesome thing!

For animations, I'm using jQuery stuff.

Cheers.

ember-jquery-knob.js

/*
 * Usage: {{radial-progress progress=myProgress}} and vuala!!! you've got yourself a knob.
 * options:
 *  - width
 *  - fgColor
 *  - skin
 *  - thickness
 *  - displayPrevious
 *  - readOnly
 *  - animationDuration
 *
 * Depends on https://github.com/aterrien/jQuery-Knob for the knobbing. bower install this awesome thing!
 * Using jQuery's animation for the animation part. yeah.
 *
 * Cheers, Schlez.
 */
App.RaidalProgressbarView = Em.View.extend({
  tagName: 'input',
  attributeBindings: ['width:data-width', 'fgColor:data-fgColor', 'skin:data-skin', 'thickness:data-thickness', 'displayPrevious:data-displayPrevious', 'readOnly:data-readOnly'],
  width: '150',
  fgColor: '#2f4eac',
  skin: 'tron',
  thickness: '0.3',
  displayPrevious: 'true',
  readOnly: 'true',
  animationDuration: 300,
  classNames: ['progress-radial'],

  // Add the jQuery-knob magic!
  didInsertElement: function() {
    var $this = this.$();
    this.set('knob', $this.knob());
    this.animatedProgressChanged();
  },

  // Occurs when the value of progress changed. We will animate it!
  changeValue: function() {
    var progressValue = this.get('progress');
    var currentValue = this.get('animatedProgress') || progressValue;
    this.animateValue(currentValue, progressValue);
  }.on('init').observes('progress'),

  // Animates the values
  animateValue: function(from, to) {
    var progress = this;

    $({progress: from}).animate({ progress: to }, { 
      duration: this.get('animationDuration'),
      step: function() {
        progress.set('animatedProgress', Math.floor(this.progress));
      }
    }).promise().then(function() { // Finish up and put the last value
      progress.set('animatedProgress', to)
    });
  },

  // When animatedProgress changes, we should trigger the jQuery-knob
  animatedProgressChanged: function() {
    var $this = this.$();

    if ($this) {
      $this.val(this.get('animatedProgress')).trigger('change');
    }
  }.observes('animatedProgress')
});

Ember.Handlebars.helper('radial-progress', App.RaidalProgressbarView);