https://www.ilgonfalonediarpino.it/wp-content/plugins/rselements/a…/jQuery-plugin-progressbar.js?ver=201513434

1//Anonymous sely-executing function
2(function (root, factory) {
3  factory(root.jQuery);
4}(this, function ($) {
5 "use strict";
6  var CanvasRenderer = function (element, options) {
7    var cachedBackground;
8    var canvas = document.createElement('canvas');
9
10    element.appendChild(canvas);
11
12    var ctx = canvas.getContext('2d');
13
14    canvas.width = canvas.height = options.size;
15
16    // move 0,0 coordinates to the center
17    ctx.translate(options.size / 2, options.size / 2);
18
19    // rotate canvas -90deg
20    ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
21
22    var radius = (options.size - options.lineWidth) / 2;
23
24    Date.now = Date.now || function () {
25
26          //convert to milliseconds
27          return +(new Date());
28        };
29
30    var drawCircle = function (color, lineWidth, percent) {
31      percent = Math.min(Math.max(-1, percent || 0), 1);
32      var isNegative = percent <= 0 ? true : false;
33
34      ctx.beginPath();
35      ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
36
37      ctx.strokeStyle = color;
38      ctx.lineWidth = lineWidth;
39
40      ctx.stroke();
41    };
42
43    /**
44     * Return function request animation frame method or timeout fallback
45     */
46    var reqAnimationFrame = (function () {
47      return window.requestAnimationFrame ||
48          window.webkitRequestAnimationFrame ||
49          window.mozRequestAnimationFrame ||
50          function (callback) {
51            window.setTimeout(callback, 1000 / 60);
52          };
53    }());
54
55    /**
56     * Draw the background of the plugin track
57     */
58    var drawBackground = function () {
59      if (options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
60    };
61
62    /**
63     * Clear the complete canvas
64     */
65    this.clear = function () {
66      ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
67    };
68
69    /**
70     * Draw the complete chart
71     * param percent Percent shown by the chart between -100 and 100
72     */
73    this.draw = function (percent) {
74      if (!!options.trackColor) {
75        // getImageData and putImageData are supported
76        if (ctx.getImageData && ctx.putImageData) {
77          if (!cachedBackground) {
78            drawBackground();
79            cachedBackground = ctx.getImageData(0, 0, options.size, options.size);
80          } else {
81            ctx.putImageData(cachedBackground, 0, 0);
82          }
83        } else {
84          this.clear();
85          drawBackground();
86        }
87      } else {
88        this.clear();
89      }
90
91      ctx.lineCap = options.lineCap;
92
93      // draw bar
94      drawCircle(options.barColor, options.lineWidth, percent / 100);
95    }.bind(this);
96
97    this.animate = function (from, to) {
98      var startTime = Date.now();
99
100      var animation = function () {
101        var process = Math.min(Date.now() - startTime, options.animate.duration);
102        var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
103        this.draw(currentValue);
104
105        //Show the number at the center of the circle
106        options.onStep(from, to, currentValue);
107
108        reqAnimationFrame(animation);
109
110      }.bind(this);
111
112      reqAnimationFrame(animation);
113    }.bind(this);
114  };
115
116  var pieChart = function (element, userOptions) {
117    var defaultOptions = {
118      barColor: '#ef1e25',
119      trackColor: '#f9f9f9',
120      lineCap: 'round',
121      lineWidth: 3,
122      size: 150,
123      rotate: 0,
124      animate: {
125        duration: 1000,
126        enabled: true
127      },
128      easing: function (x, t, b, c, d) {//copy from jQuery easing animate
129        t = t / (d / 2);
130        if (t < 1) {
131          return c / 2 * t * t + b;
132        }
133        return -c / 2 * ((--t) * (t - 2) - 1) + b;
134      },
135      onStep: function (from, to, currentValue) {
136        return;
137      },
138      renderer: CanvasRenderer//Maybe SVGRenderer more later
139    };
140
141    var options = {};
142    var currentValue = 0;
143
144    var init = function () {
145      this.element = element;
146      this.options = options;
147
148      // merge user options into default options
149      for (var i in defaultOptions) {
150        if (defaultOptions.hasOwnProperty(i)) {
151          options[i] = userOptions && typeof(userOptions[i]) !== 'undefined' ? userOptions[i] : defaultOptions[i];
152          if (typeof(options[i]) === 'function') {
153            options[i] = options[i].bind(this);
154          }
155        }
156      }
157
158      // check for jQuery easing, use jQuery easing first
159      if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
160        options.easing = jQuery.easing[options.easing];
161      } else {
162        options.easing = defaultOptions.easing;
163      }
164
165      // create renderer
166      this.renderer = new options.renderer(element, options);
167
168      // initial draw
169      this.renderer.draw(currentValue);
170
171      if (element.getAttribute && element.getAttribute('data-percent')) {
172        var newValue = parseFloat(element.getAttribute('data-percent'));
173
174        if (options.animate.enabled) {
175          this.renderer.animate(currentValue, newValue);
176        } else {
177          this.renderer.draw(newValue);
178        }
179
180        currentValue = newValue;
181      }
182    }.bind(this)();
183  };
184
185  $.fn.pieChart = function (options) {
186
187    //Iterate all the dom to draw the pie-charts
188    return this.each(function () {
189      if (!$.data(this, 'pieChart')) {
190        var userOptions = $.extend({}, options, $(this).data());
191        $.data(this, 'pieChart', new pieChart(this, userOptions));
192      }
193    });
194  };
195
196}));