GazeTK

/*

jquery-circle-progress - jQuery Plugin to draw animated circular progress bars

URL: http://kottenator.github.io/jquery-circle-progress/

Author: Rostyslav Bryzgunov <kottenator@gmail.com>

Version: 1.1.2

License: MIT

*/

(function($) {

    function CircleProgress(config) {

        this.init(config);

    }

    CircleProgress.prototype = {

        //----------------------------------------------- public options -----------------------------------------------

        /**

         * This is the only required option. It should be from 0.0 to 1.0

         * @type {number}

         */

        value: 0.0,

        /**

         * Size of the circle / canvas in pixels

         * @type {number}

         */

        size: 100.0,

        /**

         * Initial angle for 0.0 value in radians

         * @type {number}

         */

        startAngle: -Math.PI,

        /**

         * Width of the arc. By default it's auto-calculated as 1/14 of size, but you may set it explicitly in pixels

         * @type {number|string}

         */

        thickness: 'auto',

        /**

         * Fill of the arc. You may set it to:

         *   - solid color:

         *     - { color: '#3aeabb' }

         *     - { color: 'rgba(255, 255, 255, .3)' }

         *   - linear gradient (left to right):

         *     - { gradient: ['#3aeabb', '#fdd250'], gradientAngle: Math.PI / 4 }

         *     - { gradient: ['red', 'green', 'blue'], gradientDirection: [x0, y0, x1, y1] }

         *   - image:

         *     - { image: 'http://i.imgur.com/pT0i89v.png' }

         *     - { image: imageObject }

         *     - { color: 'lime', image: 'http://i.imgur.com/pT0i89v.png' } - color displayed until the image is loaded

         */

        fill: {

            gradient: ['#3aeabb', '#fdd250']

        },

        /**

         * Color of the "empty" arc. Only a color fill supported by now

         * @type {string}

         */

        emptyFill: 'rgba(0, 0, 0, .1)',

        /**

         * Animation config (see jQuery animations: http://api.jquery.com/animate/)

         */

        animation: {

            duration: 1200,

            easing: 'circleProgressEasing'

        },

        /**

         * Default animation starts at 0.0 and ends at specified `value`. Let's call this direct animation.

         * If you want to make reversed animation then you should set `animationStartValue` to 1.0.

         * Also you may specify any other value from 0.0 to 1.0

         * @type {number}

         */

        animationStartValue: 0.0,

        /**

         * Reverse animation and arc draw

         * @type {boolean}

         */

        reverse: false,

        /**

         * Arc line cap ('butt' (default), 'round' and 'square')

         * Read more: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.lineCap

         * @type {string}

         */

        lineCap: 'butt',

        //-------------------------------------- protected properties and methods --------------------------------------

        /**

         * @protected

         */

        constructor: CircleProgress,

        /**

         * Container element. Should be passed into constructor config

         * @protected

         * @type {jQuery}

         */

        el: null,

        /**

         * Canvas element. Automatically generated and prepended to the {@link CircleProgress.el container}

         * @protected

         * @type {HTMLCanvasElement}

         */

        canvas: null,

        /**

         * 2D-context of the {@link CircleProgress.canvas canvas}

         * @protected

         * @type {CanvasRenderingContext2D}

         */

        ctx: null,

        /**

         * Radius of the outer circle. Automatically calculated as {@link CircleProgress.size} / 2

         * @protected

         * @type {number}

         */

        radius: 0.0,

        /**

         * Fill of the main arc. Automatically calculated, depending on {@link CircleProgress.fill} option

         * @protected

         * @type {string|CanvasGradient|CanvasPattern}

         */

        arcFill: null,

        /**

         * Last rendered frame value

         * @protected

         * @type {number}

         */

        lastFrameValue: 0.0,

        /**

         * Init/re-init the widget

         * @param {object} config Config

         */

        init: function(config) {

            $.extend(this, config);

            this.radius = this.size / 2;

            this.initWidget();

            this.initFill();

            this.draw();

        },

        /**

         * @protected

         */

        initWidget: function() {

            var canvas = this.canvas = this.canvas || $('<canvas>').prependTo(this.el)[0];

            canvas.width = this.size;

            canvas.height = this.size;

            this.ctx = canvas.getContext('2d');

        },

        /**

         * This method sets {@link CircleProgress.arcFill}

         * It could do this async (on image load)

         * @protected

         */

        initFill: function() {

            var self = this,

                fill = this.fill,

                ctx = this.ctx,

                size = this.size;

            if (!fill)

                throw Error("The fill is not specified!");

            if (fill.color)

                this.arcFill = fill.color;

            if (fill.gradient) {

                var gr = fill.gradient;

                if (gr.length == 1) {

                    this.arcFill = gr[0];

                } else if (gr.length > 1) {

                    var ga = fill.gradientAngle || 0, // gradient direction angle; 0 by default

                        gd = fill.gradientDirection || [

                            size / 2 * (1 - Math.cos(ga)), // x0

                            size / 2 * (1 + Math.sin(ga)), // y0

                            size / 2 * (1 + Math.cos(ga)), // x1

                            size / 2 * (1 - Math.sin(ga))  // y1

                        ];

                    var lg = ctx.createLinearGradient.apply(ctx, gd);

                    for (var i = 0; i < gr.length; i++) {

                        var color = gr[i],

                            pos = i / (gr.length - 1);

                        if ($.isArray(color)) {

                            pos = color[1];

                            color = color[0];

                        }

                        lg.addColorStop(pos, color);

                    }

                    this.arcFill = lg;

                }

            }

            if (fill.image) {

                var img;

                if (fill.image instanceof Image) {

                    img = fill.image;

                } else {

                    img = new Image();

                    img.src = fill.image;

                }

                if (img.complete)

                    setImageFill();

                else

                    img.onload = setImageFill;

            }

            function setImageFill() {

                var bg = $('<canvas>')[0];

                bg.width = self.size;

                bg.height = self.size;

                bg.getContext('2d').drawImage(img, 0, 0, size, size);

                self.arcFill = self.ctx.createPattern(bg, 'no-repeat');

                self.drawFrame(self.lastFrameValue);

            }

        },

        draw: function() {

            if (this.animation)

                this.drawAnimated(this.value);

            else

                this.drawFrame(this.value);

        },

        /**

         * @protected

         * @param {number} v Frame value

         */

        drawFrame: function(v) {

            this.lastFrameValue = v;

            this.ctx.clearRect(0, 0, this.size, this.size);

            this.drawEmptyArc(v);

            this.drawArc(v);

        },

        /**

         * @protected

         * @param {number} v Frame value

         */

        drawArc: function(v) {

            var ctx = this.ctx,

                r = this.radius,

                t = this.getThickness(),

                a = this.startAngle;

            ctx.save();

            ctx.beginPath();

            if (!this.reverse) {

                ctx.arc(r, r, r - t / 2, a, a + Math.PI * 2 * v);

            } else {

                ctx.arc(r, r, r - t / 2, a - Math.PI * 2 * v, a);

            }

            ctx.lineWidth = t;

            ctx.lineCap = this.lineCap;

            ctx.strokeStyle = this.arcFill;

            ctx.stroke();

            ctx.restore();

        },

        /**

         * @protected

         * @param {number} v Frame value

         */

        drawEmptyArc: function(v) {

            var ctx = this.ctx,

                r = this.radius,

                t = this.getThickness(),

                a = this.startAngle;

            if (v < 1) {

                ctx.save();

                ctx.beginPath();

                if (v <= 0) {

                    ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);

                } else {

                    if (!this.reverse) {

                        ctx.arc(r, r, r - t / 2, a + Math.PI * 2 * v, a);

                    } else {

                        ctx.arc(r, r, r - t / 2, a, a - Math.PI * 2 * v);

                    }

                }

                ctx.lineWidth = t;

                ctx.strokeStyle = this.emptyFill;

                ctx.stroke();

                ctx.restore();

            }

        },

        /**

         * @protected

         * @param {number} v Value

         */

        drawAnimated: function(v) {

            var self = this,

                el = this.el;

            el.trigger('circle-animation-start');

            $(this.canvas)

                .stop(true, true)

                .css({ animationProgress: 0 })

                .animate({ animationProgress: 1 }, $.extend({}, this.animation, {

                    step: function(animationProgress) {

                        var stepValue = self.animationStartValue * (1 - animationProgress) + v * animationProgress;

                        self.drawFrame(stepValue);

                        el.trigger('circle-animation-progress', [animationProgress, stepValue]);

                    },

                    complete: function() {

                        el.trigger('circle-animation-end');

                    }

                }));

        },

        /**

         * @protected

         * @returns {number}

         */

        getThickness: function() {

            return $.isNumeric(this.thickness) ? this.thickness : this.size / 14;

        }

    };

    //-------------------------------------------- Initiating jQuery plugin --------------------------------------------

    $.circleProgress = {

        // Default options (you may override them)

        defaults: CircleProgress.prototype

    };

    // ease-in-out-cubic

    $.easing.circleProgressEasing = function(x, t, b, c, d) {

        if ((t /= d / 2) < 1)

            return c / 2 * t * t * t + b;

        return c / 2 * ((t -= 2) * t * t + 2) + b;

    };

    /**

     * Draw animated circular progress bar.

     *

     * Appends <canvas> to the element or updates already appended one.

     *

     * If animated, throws 3 events:

     *

     *   - circle-animation-start(jqEvent)

     *   - circle-animation-progress(jqEvent, animationProgress, stepValue) - multiple event;

     *                                                                        animationProgress: from 0.0 to 1.0;

     *                                                                        stepValue: from 0.0 to value

     *   - circle-animation-end(jqEvent)

     *

     * @param config Example: { value: 0.75, size: 50, animation: false };

     *                you may set any of public options;

     *                `animation` may be set to false;

     *                you may also use .circleProgress('widget') to get the canvas

     */

    $.fn.circleProgress = function(config) {

        var dataName = 'circle-progress';

        if (config == 'widget') {

            var data = this.data(dataName);

            return data && data.canvas;

        }

        return this.each(function() {

            var el = $(this),

                instance = el.data(dataName),

                cfg = $.isPlainObject(config) ? config : {};

            if (instance) {

                instance.init(cfg);

            } else {

                cfg.el = el;

                instance = new CircleProgress(cfg);

                el.data(dataName, instance);

            }

        });

    };

})(jQuery);