File: public/admin/js/kuma-gauge.jquery.js

Recommend this page to a friend!
  Classes of Taranpreet Singh  >  PHP End Game Engine Website  >  public/admin/js/kuma-gauge.jquery.js  >  Download  
File: public/admin/js/kuma-gauge.jquery.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP End Game Engine Website
Build Web sites for promoting games
Author: By
Last change:
Date: 1 year ago
Size: 13,280 bytes
 

Contents

Class file image Download
/*
 *  Kuma Gauge - v0.2
 *
 *  Made by Sam Bellen for Kunstmaan
 *   - http:// www.kunstmaan.be
 *   - http:// www.sambellen.be
 *
 *  Under MIT License
 */

;(function ( $, window, document, undefined ) {
    var config = {
        radius : 80,
        paddingX : 40,
        paddingY : 40,
        gaugeWidth : 30,

        fill : '0-#1ab7ea:0-#fdbe37:50-#fa4133:100',
        gaugeBackground : '#f4f4f4',
        background : '#fff',

        showNeedle : true,

        animationSpeed : 500,

        width : 0,
        height : 0,
        centerX : 0,
        centerY : 0,

        min : 0,
        max : 100,
        value : 80,

        valueLabel : {
            display : true,
            fontFamily : 'Arial',
            fontColor : '#000',
            fontSize : '20',
            fontWeight : 'normal'
        },
        title : {
            display : true,
            value : '',
            fontFamily : 'Arial',
            fontColor : '#000',
            fontSize : '20',
            fontWeight : 'normal'
        },
        label : {
            display : true,
            left : 'Low',
            right : 'High',
            fontFamily : 'Arial',
            fontColor : '#000',
            fontSize : '12',
            fontWeight : 'normal'
        }
    };

    // Create an arc with raphael.js
    Raphael.fn.arc = function(startX, startY, endX, endY, radius1, radius2, angle) {
        var arcSVG = [radius1, radius2, angle, 0, 1, endX, endY].join(' ');
        return this.path('M' + startX + ' ' + startY + ' a ' + arcSVG);
    };

    // Calculate a circular arc with raphael.js
    Raphael.fn.circularArc = function(centerX, centerY, radius, startAngle, endAngle) {
        var startX = centerX + radius * Math.cos(startAngle * Math.PI / 180);
        var startY = centerY + radius * Math.sin(startAngle * Math.PI / 180);
        var endX = centerX + radius * Math.cos(endAngle * Math.PI / 180);
        var endY = centerY + radius * Math.sin(endAngle * Math.PI / 180);
        return this.arc(startX, startY, endX-startX, endY-startY, radius, radius, 0);
    };

    // The kuma Gauge constructor
    function kumaGauge(element, options , method) {
        // This
        var _this = this;

        // The element
        _this.element = element;
        _this.$element = $(element);

        // The config
        _this.config = $.extend( {}, config, options );
        _this._config = config;

        _this.method = method;

        // The actual gauge
        _this.gauge = {};

        // Initialise
        _this.init();
    }

    // Extend the kumaGauge object
    kumaGauge.prototype = {
        init: function () {
            // this
            _this = this;

            if (!_this.method) {
                _this.draw();
            }
        },
        _setup : function() {
            // This
            _this = this;

            // Calculate some values needed do draw the gauge
            _this.config.width = (_this.config.radius * 2) + (_this.config.paddingX * 2);
            _this.config.height = _this.config.radius + (_this.config.paddingY * 2);
            _this.config.centerX = _this.config.paddingX + _this.config.radius;
            _this.config.centerY = _this.config.paddingY + _this.config.radius;

            // The div wich acts as the canvas needs an id, so we give it a unique one if it doesn't have one
            if (typeof $(this).attr('id') === 'undefined' || $(this).attr('id') === '') {
                _this.config.id = 'gauge-' + $('*[id^="gauge-"]').length;
                _this.$element.attr('id', _this.config.id);
            }
        },
        _calculateRotation : function(min, max, val) {
            var _range, _rotation;
            _range = max - min;

            if (val < max && val > min) {
                _rotation = 180 * ((val - min) / _range);
            } else if (val <= min){
                _rotation = 0;
            } else {
                _rotation = 180;
            }

            return _rotation;
        },
        draw : function() {
            //this
            var _this = this;

            // Setup all the needed config variables
            _this._setup();

            // Make the base drawing Canvas
            _this.gauge = new Raphael(_this.config.id, _this.config.width, _this.config.height);

            // Draw the gauge
            _this.gauge.gauge = _this.gauge.circularArc(_this.config.centerX, _this.config.centerY,
                           _this.config.radius, 180, 0);
            _this.gauge.gauge.attr({
                'fill' : _this.config.fill,
                'stroke' : 'none'
            });
            _this.gauge.gauge.node.setAttribute('class', 'gauge');

            // Draw the gauge background
            _this.gauge.gaugeBackground = _this.gauge.circularArc(_this.config.centerX, _this.config.centerY,
                                     _this.config.radius, 180, 0);
            _this.gauge.gaugeBackground.attr({
                'fill' : _this.config.gaugeBackground,
                'stroke' : 'none'
            });
            _this.gauge.gaugeBackground.node.setAttribute('class', 'gauge__background');

            // Draw the white center arc
            _this.gauge.centerArc = _this.gauge.circularArc(_this.config.centerX, _this.config.centerY,
                               _this.config.radius - _this.config.gaugeWidth, 180, 0);
            _this.gauge.centerArc.attr({
                'fill' : _this.config.background,
                'stroke' : 'none'
            });
            _this.gauge.centerArc.node.setAttribute('class', 'gauge__center');

            // Draw the needle
            if (_this.config.showNeedle) {
                _this.gauge.needle = _this.gauge.rect(_this.config.centerX, _this.config.paddingY, 1, 40);
                _this.gauge.needle.attr({
                    'fill' : '#000',
                    'stroke' : 'none'
                });
                _this.gauge.needle.node.setAttribute('class', 'gauge__needle');
            }

            // Draw the bottom mask to hide the rotated background arc
            _this.gauge.bottomMask = _this.gauge.rect(0, _this.config.centerY, _this.config.width, 40);
            _this.gauge.bottomMask.attr({
                'fill' : _this.config.background,
                'stroke' : 'none'
            });

            // Draw the text container for the value
            if (_this.config.valueLabel.display) {
                if (_this.config.showNeedle) {
                    _this.gauge.valueLabel = _this.gauge.text(_this.config.centerX, _this.config.centerY - 10,
                                        Math.round((_this.config.max - _this.config.min) / 2));
                } else {
                    _this.gauge.valueLabel = _this.gauge.text(_this.config.centerX, _this.config.centerY - 10,
                                        _this.config.value);
                }
                _this.gauge.valueLabel.attr({
                    'fill' : _this.config.valueLabel.fontColor,
                    'font-size' : _this.config.valueLabel.fontSize,
                    'font-family' : _this.config.valueLabel.fontColor,
                    'font-weight' : _this.config.valueLabel.fontWeight
                });
                _this.gauge.valueLabel.node.setAttribute('class', 'gauge__value');
            }

            // Draw the title
            if (_this.config.title.display) {
                _this.gauge.title = _this.gauge.text(_this.config.centerX, _this.config.paddingY - 5,
                                   _this.config.title.value);
                _this.gauge.title.attr({
                    'fill' : _this.config.title.fontColor,
                    'fill-opacity' : 0,
                    'font-size' : _this.config.title.fontSize,
                    'font-family' : _this.config.title.fontFamily,
                    'font-weight' : _this.config.title.fontWeight
                });
                _this.gauge.title.node.setAttribute('class', 'gauge__title');
            }

            if (_this.config.label.display) {
                // Draw the left label
                _this.gauge.leftLabel = _this.gauge.text((_this.config.gaugeWidth / 2) + _this.config.paddingX,
                                   _this.config.centerY + 10, _this.config.label.left);
                _this.gauge.leftLabel.attr({
                    'fill' : _this.config.title.fontColor,
                    'fill-opacity' : 0,
                    'font-size' : _this.config.label.fontSize,
                    'font-family' : _this.config.label.fontFamily,
                    'font-weight' : _this.config.label.fontWeight
                });
                _this.gauge.leftLabel.node.setAttribute('class', 'gauge__label--left');

                // Draw the right label
                _this.gauge.rightLabel = _this.gauge.text((_this.config.width - (_this.config.gaugeWidth / 2)) - _this.config.paddingX,
                                    _this.config.centerY + 10, _this.config.label.right);
                _this.gauge.rightLabel.attr({
                    'fill' : _this.config.title.fontColor,
                    'fill-opacity' : 0,
                    'font-size' : _this.config.label.fontSize,
                    'font-family' : _this.config.label.fontFamily,
                    'font-weight' : _this.config.label.fontWeight
                });
                _this.gauge.rightLabel.node.setAttribute('class', 'gauge__label--right');
            }

            // There is a bug with raphael.js and webkit which renders text element at double the Y value.
            // Resetting the Y values after a timeout fixes this.
            // See https://github.com/DmitryBaranovskiy/raphael/issues/491
            setTimeout(function() {
                if (_this.config.valueLabel.display) {
                    _this.gauge.valueLabel.attr('y', _this.config.centerY - 10);
                }

                if (_this.config.title.display) {
                    _this.gauge.title.attr({
                        'y' : _this.config.paddingY - (_this.gauge.title.getBBox().height / 2),
                        'fill-opacity' : 1
                    });
                }

                if (_this.config.label.display) {
                    _this.gauge.leftLabel.attr({
                        'y' : _this.config.centerY + (_this.gauge.leftLabel.getBBox().height / 2),
                        'fill-opacity' : 1,
                    });
                    _this.gauge.rightLabel.attr({
                        'y' : _this.config.centerY + (_this.gauge.rightLabel.getBBox().height / 2),
                        'fill-opacity' : 1,
                    });
                }
            }, 1000);

            // Animate the gauge to the right value position
            _this.gauge.gaugeBackground.animate({transform:'r' +
                            _this._calculateRotation(_this.config.min, _this.config.max, _this.config.value) + ',' +
                            _this.config.centerX + ',' + _this.config.centerY}, _this.config.animationSpeed, '<>');

        },
        update: function (data) {
            //this
            var _this = this;

            var  updateGauge = function(min, max, value) {
                _this.config.min = min;
                _this.config.max = max;
                _this.config.value = value;

                // Update the rotation of the gauge
                _this.gauge.gaugeBackground.animate({transform:'r' +
                    _this._calculateRotation(min, max, value) + ',' +
                    _this.config.centerX + ',' + _this.config.centerY}, _this.config.animationSpeed, '<>');

                // Update the value label
                if (_this.config.valueLabel.display) {
                    if (_this.config.showNeedle) {
                        _this.gauge.valueLabel.attr('text', value);
                    } else {
                        _this.gauge.valueLabel.attr('text', (max - min) / 2);
                    }
                }
            };

            if (typeof data.min !== 'undefined' && typeof data.max !== 'undefined' && typeof data.value !== 'undefined') {
                updateGauge(data.min, data.max, data.value);
            } else if (typeof data.value !== 'undefined') {
                updateGauge(_this.config.min, _this.config.max, data.value);
            }
        }
    };

    $.fn.kumaGauge = function ( method, options ) {
        var _method = method,
            _arguments = arguments,
            _this = this;

        if (typeof _method !== 'string') {
            if (_arguments.length === 1 ) {
                options = _method;
                method = false;

                return this.each(function() {
                    if ( !$.data( this, 'kumaGauge' ) ) {
                        $.data( this, 'kumaGauge', new kumaGauge( this, options, method ) );
                    }
                });
            }
        } else {
            return this.each(function() {
                if (typeof $.data(this, 'kumaGauge')[method] === 'function') {
                    $.data(this, 'kumaGauge')[method](options);
                }
            });
        }


    };

})( jQuery, window, document );

For more information send a message to info at phpclasses dot org.