ngcp-panel/share/static/js/plugins/cirque/cirque.js

/*
 *  @name Cirque Plugin
 *  @version 0.1
 *  @requires jQuery 1.*.*
 *  @author Rod Howard
 *  @license MIT License - http://www.opensource.org/licenses/mit-license.php
 *
 *  For usage and example, visit:
 *  http://jumpstartui.com/plugins/cirque
 *
 *  Copyright (c) 2012, Rod Howard (rod@rodh.me)
 */

;(function ( $, window, undefined ) {

    var pluginName = 'cirque',
        document = window.document,
        defaults = {
            value: 0,
	    	radius: 60,
	    	total: 100,
	    	label: 'percent',
	    	lineWidth: 10,
	    	arcColor: '#0066CC',
	    	trackColor: '#EEEEEE',
	    	trackFill: 'transparent',
	    	animate: true,
	    	speed: 20
        };
        
    function supports_canvas() {
	  return !!document.createElement('canvas').getContext;
	}

    function Cirque ( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options, $(this.element).data ()) ;        
        this._defaults = defaults;
        this._name = pluginName;        
        this.init();
    }

    Cirque.prototype.init = function () {        
    	if (!supports_canvas ()) { return false; }
        var container, canvas, track, value, canvasId, valueDisplay;
            		
    	container = this.makeContainer ();
    	canvas = this.makeCanvas ();
    	track = this.makeTrack ();
    	
        this.arcContext = canvas.get (0).getContext("2d");           
        
        this.trackContext = track.get (0).getContext("2d");    
        
        this.drawTrack ();
        
        value = this.makeValue ();         
        
        if (this.options.animate) {
        	this.start ();
        } else {
        	this.drawArc (deg ((this.options.value/this.options.total) * 360));
        }   
    };
    
    Cirque.prototype.start = function () {
    	var count = 1;
    	var that = this;    	
    	
    	var decimal = this.options.value / this.options.total;    	
    	var step = decimal / 50;	
    	
        var interval = setInterval (function () {
        	
        	if (count > 50 - 2) {
        		clearInterval (interval);
        	}
        	
        	count++;
        	        	
        	endAngle = deg ((step * count) * 360);
        	
        	that.drawArc (endAngle);
        	
        }, that.options.speed);            
    }
    
    Cirque.prototype.drawArc = function (endAngle) { 
        this.arcContext.clearRect (0, 0, this.options.radius*2, this.options.radius*2);  
    	this.arcContext.beginPath();
        this.arcContext.strokeStyle = this.options.arcColor;        
        this.arcContext.arc(this.options.radius,this.options.radius,this.options.radius - this.options.lineWidth, deg (0), endAngle);
        this.arcContext.lineWidth = this.options.lineWidth;
        this.arcContext.stroke();
    }

    $.fn['cirque'] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Cirque( this, options ));
            }
        });
    };
    
    Cirque.prototype.drawTrack = function () {
    	this.trackContext.beginPath();
        this.trackContext.strokeStyle = this.options.trackColor;        
        this.trackContext.arc(this.options.radius,this.options.radius,this.options.radius - this.options.lineWidth, 0, 360);
        this.trackContext.lineWidth = this.options.lineWidth;
        this.trackContext.fillStyle = this.options.trackFill;
        this.trackContext.fill ();
        this.trackContext.stroke();
    }
    
    function deg (deg) {
        return (Math.PI/180)*deg - (Math.PI/180)*90;
    }
    
    Cirque.prototype.makeValue = function () {    	
    	var value, valueDisplay, labelClass;
    	
    	if (this.options.label == 'percent') {
    		value = Math.round(((this.options.value/this.options.total) * 100)*Math.pow(10,2))/Math.pow(10,2);
    		valueDisplay = value + '%';
    		labelClass = 'percent';
    	} else {
    		value = this.options.value;
    		valueDisplay = value + '/' + this.options.total;
    		labelClass = 'ratio';
    	}
    	
        return $('<div>', { 'class': 'cirque-label' })
            .appendTo (this.element)
            .html (valueDisplay)
            .addClass (labelClass)
            .css ({ 'width': this.options.radius*2 })
            .css ({ 'height': this.options.radius*2 })
            .css ({ 'line-height': this.options.radius*2 + 'px' });
    }
    
    Cirque.prototype.makeCanvas = function () {
    	return $('<canvas/>',{})
    		.appendTo (this.element)
    		.attr ('width', this.options.radius*2)
    		.attr ('height', this.options.radius*2)
    		.addClass ('cirque-fill');
    }
    
    Cirque.prototype.makeTrack = function () {            	
    	return $('<canvas/>',{})
        	.appendTo (this.element)
        	.attr ('width', this.options.radius*2)
        	.attr ('height', this.options.radius*2)
        	.addClass ('cirque-track');
    }
    
    Cirque.prototype.makeContainer = function () {	
    	return $(this.element).addClass ('cirque-container')
    		.css ({ 'width': this.options.radius*2 })
    		.css ({ 'height': this.options.radius*2 });   
    }

}(jQuery, window));