39085-vm/ctlinfrangualr/js/jquery.barfiller.js

/*
* File: jquery.barfiller.js
* Version: 1.0.1
* Description: A plugin that fills bars with a percentage you set.
* Author: 9bit Studios
* Copyright 2012, 9bit Studios
* http://www.9bitstudios.com
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/

(function ($) {

    $.fn.barfiller = function (options) {

        var defaults = $.extend({
            barColor: '#16b597',
            tooltip: true,
            duration: 1000,
            animateOnResize: true,
            symbol: "%"
        }, options);


        /******************************
        Private Variables
        *******************************/         

        var object = $(this);
        var settings = $.extend(defaults, options);
        var barWidth = object.width();
        var fill = object.find('.fill');
        var toolTip = object.find('.tip');
        var fillPercentage = fill.attr('data-percentage');
        var resizeTimeout;
        var transitionSupport = false;
        var transitionPrefix;

        /******************************
        Public Methods
        *******************************/         
        
        var methods = {

            init: function() {
                return this.each(function () {
                    if(methods.getTransitionSupport()) {
                        transitionSupport = true;
                        transitionPrefix = methods.getTransitionPrefix();
                    }

                    methods.appendHTML();
                    methods.setEventHandlers();
                    methods.initializeItems();
                });
            },

            /******************************
            Append HTML
            *******************************/			

            appendHTML: function() {
                fill.css('background', settings.barColor);

                if(!settings.tooltip) {
                    toolTip.css('display', 'none');
                }
                toolTip.text(fillPercentage + settings.symbol);
            },
            

            /******************************
            Set Event Handlers
            *******************************/
            setEventHandlers: function() {
                if(settings.animateOnResize) {
                    $(window).on("resize", function(event){
                        clearTimeout(resizeTimeout);
                        resizeTimeout = setTimeout(function() { 
                        methods.refill(); 
                        }, 300);
                    });				
                }
            },				

            /******************************
            Initialize
            *******************************/			

            initializeItems: function() {
            var pctWidth = methods.calculateFill(fillPercentage);
            object.find('.tipWrap').css({ display: 'inline' });

            if(transitionSupport)
                methods.transitionFill(pctWidth);
            else
                methods.animateFill(pctWidth);
            },

            getTransitionSupport: function() {

                var thisBody = document.body || document.documentElement,
                thisStyle = thisBody.style;
                var support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
                return support; 	
            },
                
            getTransitionPrefix: function() {
                if(/mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase())) {
                    return '-moz-transition';
                }
                if(/webkit/.test(navigator.userAgent.toLowerCase())) {
                    return '-webkit-transition';
                }
                if(/opera/.test(navigator.userAgent.toLowerCase())) {
                    return '-o-transition';
                }
                if (/msie/.test(navigator.userAgent.toLowerCase())) {
                    return '-ms-transition';
                }
                else {
                    return 'transition';
                }
            },

            getTransition: function(val, time, type) {

                var CSSObj;
                if(type === 'width') {
                    CSSObj = { width : val };
                }
                else if (type === 'left') {
                    CSSObj = { left: val };
                }

                time = time/1000;
                CSSObj[transitionPrefix] = type+' '+time+'s ease-in-out';		    
                return CSSObj;

            },				

            refill: function() {
                fill.css('width', 0);
                toolTip.css('left', 0);
                barWidth = object.width();
                methods.initializeItems();
            },

            calculateFill: function(percentage) {
                percentage = percentage *  0.01;
                var finalWidth = barWidth * percentage;
                return finalWidth;
            },       

            transitionFill: function(barWidth) {

                var toolTipOffset = barWidth - toolTip.width();
                fill.css( methods.getTransition(barWidth, settings.duration, 'width'));
                toolTip.css( methods.getTransition(toolTipOffset, settings.duration, 'left'));

            },	

            animateFill: function(barWidth) {
                var toolTipOffset = barWidth - toolTip.width();
                fill.stop().animate({width: '+=' + barWidth}, settings.duration);
                toolTip.stop().animate({left: '+=' + toolTipOffset}, settings.duration);
            }
			
        };
        
        if (methods[options]) { 	// $("#element").pluginName('methodName', 'arg1', 'arg2');
            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) { 	// $("#element").pluginName({ option: 1, option:2 });
            return methods.init.apply(this);  
        } else {
            $.error( 'Method "' +  method + '" does not exist in barfiller plugin!');
        } 
    };

})(jQuery);