radialIndicator-rails 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: b79637f1ddc06f863aa739c48f9a2fbdfe3120d2
4
+ data.tar.gz: 4706224b09ab5a933605e6340df247a6f9bc3b1f
5
+ SHA512:
6
+ metadata.gz: a3643c7abf2f7e59017347392687eed4d05ad288588a474b28d6203ebf74058cb302780b85f82b72be38a31e231abb91af96ea8b9ae6df4c05d3c354971db64d
7
+ data.tar.gz: 5b31f66ff9cea5fb09db9ecfafd76904153c2bcafd0a07c8422822a41bb1908bf9fa793fae162f369108d390d1571d1ed03ce9e242e2b0612ddf68ff575a7b10
data/bin/console ADDED
@@ -0,0 +1,14 @@
1
+ #!/usr/bin/env ruby
2
+
3
+ require "bundler/setup"
4
+ require "radialIndicator/rails"
5
+
6
+ # You can add fixtures and/or initialization code here to make experimenting
7
+ # with your gem easier. You can also use a different console, if you like.
8
+
9
+ # (If you use this, don't forget to add pry to your Gemfile!)
10
+ # require "pry"
11
+ # Pry.start
12
+
13
+ require "irb"
14
+ IRB.start
data/bin/setup ADDED
@@ -0,0 +1,7 @@
1
+ #!/bin/bash
2
+ set -euo pipefail
3
+ IFS=$'\n\t'
4
+
5
+ bundle install
6
+
7
+ # Do any other automated setup that you need to do here
@@ -0,0 +1,8 @@
1
+ require "radialIndicator/rails/version"
2
+
3
+ module RadialIndicator
4
+ module Rails
5
+ class Engine < ::Rails::Engine
6
+ end
7
+ end
8
+ end
@@ -0,0 +1,5 @@
1
+ module RadialIndicator
2
+ module Rails
3
+ VERSION = "0.1.0"
4
+ end
5
+ end
@@ -0,0 +1,49 @@
1
+ /*
2
+ radialIndicator.js v 1.2.1
3
+ Author: Sudhanshu Yadav
4
+ Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
5
+ Demo on: ignitersworld.com/lab/radialIndicator.html
6
+ */
7
+
8
+ /* Angular hook for radialIndicator */
9
+ ;
10
+ (function (angular) {
11
+ angular.module('radialIndicator', []).directive('radialIndicator', ['radialIndicatorInstance',
12
+
13
+ function (radialIndicatorInstance) {
14
+ return {
15
+ restrict: 'A',
16
+ link: function (scope, element, attrs) {
17
+ var element = element,
18
+ id = attrs.radialIndicatorId,
19
+ options = scope.$eval(attrs.radialIndicator),
20
+ model = attrs.radialIndicatorModel;
21
+
22
+ var indInstance = radialIndicator(element, options);
23
+
24
+ //store indicator instance on radialIndicatorConfig so can get through dependency injection
25
+ if (id) radialIndicatorInstance[id] = indInstance;
26
+
27
+ //watch for modal change
28
+ scope.$watch(model, function (newValue) {
29
+ indInstance.value(newValue);
30
+ });
31
+
32
+ //delete the idnicator instance when scope dies
33
+ scope.$on('$destroy', function () {
34
+ if (id) delete radialIndicatorInstance[id];
35
+ });
36
+
37
+ }
38
+ }
39
+ }])
40
+ //a factory to store radial indicators instances which can be injected to controllers or directive to get any indicators instance
41
+ .factory('radialIndicatorInstance', function () {
42
+ if (!window.radialIndicator) throw "Please include radialIndicator.js";
43
+
44
+ var radialIndicatorInstance = {};
45
+
46
+ return radialIndicatorInstance;
47
+
48
+ });
49
+ }(angular));
@@ -0,0 +1,422 @@
1
+ /*
2
+ radialIndicator.js v 1.2.1
3
+ Author: Sudhanshu Yadav
4
+ Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
5
+ Demo on: ignitersworld.com/lab/radialIndicator.html
6
+ */
7
+
8
+ ;(function($, window, document) {
9
+ "use strict";
10
+ //circumfence and quart value to start bar from top
11
+ var circ = Math.PI * 2,
12
+ quart = Math.PI / 2;
13
+
14
+
15
+ //function to smooth canvas drawing for ratina devices
16
+
17
+ //method to manage device pixel ratio in ratina devices
18
+ var smoothCanvas = (function() {
19
+ var ctx = document.createElement("canvas").getContext("2d"),
20
+ dpr = window.devicePixelRatio || 1,
21
+ bsr = ctx.webkitBackingStorePixelRatio ||
22
+ ctx.mozBackingStorePixelRatio ||
23
+ ctx.msBackingStorePixelRatio ||
24
+ ctx.oBackingStorePixelRatio ||
25
+ ctx.backingStorePixelRatio || 1,
26
+
27
+ ratio = dpr / bsr; //PIXEL RATIO
28
+
29
+ return function(w, h, canvasElm) {
30
+ var can = canvasElm || document.createElement("canvas");
31
+ can.width = w * ratio;
32
+ can.height = h * ratio;
33
+ can.style.width = w + "px";
34
+ can.style.height = h + "px";
35
+ can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);
36
+ return can;
37
+ }
38
+ }());
39
+
40
+ //function to convert hex to rgb
41
+ function hexToRgb(hex) {
42
+ // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
43
+ var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
44
+ hex = hex.replace(shorthandRegex, function(m, r, g, b) {
45
+ return r + r + g + g + b + b;
46
+ });
47
+
48
+ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
49
+ return result ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)] : null;
50
+ }
51
+
52
+ function getPropVal(curShift, perShift, bottomRange, topRange) {
53
+ return Math.round(bottomRange + ((topRange - bottomRange) * curShift / perShift));
54
+ }
55
+
56
+
57
+ //function to get current color in case of
58
+ function getCurrentColor(curPer, bottomVal, topVal, bottomColor, topColor) {
59
+ var rgbAryTop = topColor.indexOf('#') != -1 ? hexToRgb(topColor) : topColor.match(/\d+/g),
60
+ rgbAryBottom = bottomColor.indexOf('#') != -1 ? hexToRgb(bottomColor) : bottomColor.match(/\d+/g),
61
+ perShift = topVal - bottomVal,
62
+ curShift = curPer - bottomVal;
63
+
64
+ if (!rgbAryTop || !rgbAryBottom) return null;
65
+
66
+ return 'rgb(' + getPropVal(curShift, perShift, rgbAryBottom[0], rgbAryTop[0]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[1], rgbAryTop[1]) + ',' + getPropVal(curShift, perShift, rgbAryBottom[2], rgbAryTop[2]) + ')';
67
+ }
68
+
69
+ //to merge object
70
+ function merge() {
71
+ var arg = arguments,
72
+ target = arg[0];
73
+ for (var i = 1, ln = arg.length; i < ln; i++) {
74
+ var obj = arg[i];
75
+ for (var k in obj) {
76
+ if (obj.hasOwnProperty(k)) {
77
+ target[k] = obj[k];
78
+ }
79
+ }
80
+ }
81
+ return target;
82
+ }
83
+
84
+ //function to apply formatting on number depending on parameter
85
+ function formatter(pattern) {
86
+ return function(num) {
87
+ if (!pattern) return num.toString();
88
+ num = num || 0
89
+ var numRev = num.toString().split('').reverse(),
90
+ output = pattern.split("").reverse(),
91
+ i = 0,
92
+ lastHashReplaced = 0;
93
+
94
+ //changes hash with numbers
95
+ for (var ln = output.length; i < ln; i++) {
96
+ if (!numRev.length) break;
97
+ if (output[i] == "#") {
98
+ lastHashReplaced = i;
99
+ output[i] = numRev.shift();
100
+ }
101
+ }
102
+
103
+ //add overflowing numbers before prefix
104
+ output.splice(lastHashReplaced + 1, output.lastIndexOf('#') - lastHashReplaced, numRev.reverse().join(""));
105
+
106
+ return output.reverse().join('');
107
+ }
108
+ }
109
+
110
+
111
+ //circle bar class
112
+ function Indicator(container, indOption) {
113
+ var self = this;
114
+
115
+ indOption = indOption || {};
116
+ indOption = merge({}, radialIndicator.defaults, indOption);
117
+
118
+ this.indOption = indOption;
119
+
120
+ //create a queryselector if a selector string is passed in container
121
+ if (typeof container == "string")
122
+ container = document.querySelector(container);
123
+
124
+ //get the first element if container is a node list
125
+ if (container.length)
126
+ container = container[0];
127
+
128
+ this.container = container;
129
+
130
+ //create a canvas element
131
+ var canElm = document.createElement("canvas");
132
+ container.appendChild(canElm);
133
+
134
+ this.canElm = canElm; // dom object where drawing will happen
135
+
136
+ this.ctx = canElm.getContext('2d'); //get 2d canvas context
137
+
138
+ //add intial value
139
+ this.current_value = indOption.initValue || indOption.minValue || 0;
140
+
141
+
142
+ //handeling user interaction
143
+ var startListener = function(e) {
144
+ if (!indOption.interaction) return;
145
+
146
+ var touchMove = e.type == "touchstart" ? "touchmove" : "mousemove",
147
+ touchEnd = e.type == "touchstart" ? "touchend" : "mouseup",
148
+ position = canElm.getBoundingClientRect(),
149
+ cy = position.top + canElm.offsetHeight / 2,
150
+ cx = position.left + canElm.offsetWidth / 2;
151
+
152
+ var moveListener = function(e) {
153
+ e.preventDefault();
154
+
155
+ //get the cordinates
156
+ var mx = e.clientX || e.touches[0].clientX,
157
+ my = e.clientY || e.touches[0].clientY,
158
+ radian = (circ + quart + Math.atan2((my - cy), (mx - cx))) % (circ + 0.0175),
159
+ radius = (indOption.radius - 1 + indOption.barWidth / 2),
160
+ circum = circ * radius,
161
+ precision = indOption.precision != null ? indOption.precision : 0,
162
+ precisionNo = Math.pow(10, precision),
163
+ val = Math.round(precisionNo * radian * radius * (indOption.maxValue - indOption.minValue) / circum) / precisionNo;
164
+
165
+ self.value(val);
166
+ };
167
+
168
+ var endListener = function() {
169
+ document.removeEventListener(touchMove, moveListener, false);
170
+ document.removeEventListener(touchEnd, endListener, false);
171
+ };
172
+
173
+ document.addEventListener(touchMove, moveListener, false);
174
+ document.addEventListener(touchEnd, endListener, false);
175
+ };
176
+
177
+ canElm.addEventListener('touchstart', startListener, false);
178
+ canElm.addEventListener('mousedown', startListener, false);
179
+
180
+
181
+ canElm.addEventListener("mousewheel", MouseWheelHandler, false);
182
+ canElm.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
183
+
184
+ function MouseWheelHandler(e) {
185
+ if (!indOption.interaction) return;
186
+ e.preventDefault();
187
+
188
+ // cross-browser wheel delta
189
+ var delta = -(Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))),
190
+ precision = indOption.precision != null ? indOption.precision : 0,
191
+ precisionNo = Math.pow(10, precision),
192
+ diff = indOption.maxValue - indOption.minValue,
193
+ val = self.current_value + Math.round(precisionNo * delta * diff / Math.min(diff, 100)) / precisionNo;
194
+
195
+ self.value(val);
196
+
197
+ return false;
198
+ }
199
+ }
200
+
201
+
202
+ Indicator.prototype = {
203
+ constructor: radialIndicator,
204
+ _init: function() {
205
+ var indOption = this.indOption,
206
+ canElm = this.canElm,
207
+ ctx = this.ctx,
208
+ dim = (indOption.radius + indOption.barWidth) * 2; //elm width and height
209
+
210
+ //create a formatter function
211
+ this.formatter = typeof indOption.format == "function" ? indOption.format : formatter(indOption.format);
212
+
213
+ //maximum text length;
214
+ this.maxLength = indOption.percentage ? 4 : this.formatter(indOption.maxValue).length;
215
+
216
+ //smooth the canvas elm for ratina display
217
+ smoothCanvas(dim, dim, canElm);
218
+
219
+ //draw background bar
220
+ this._drawBarBg();
221
+
222
+ //put the initial value if defined
223
+ this.value(this.current_value);
224
+
225
+ return this;
226
+ },
227
+ //draw background bar
228
+ _drawBarBg: function() {
229
+ var indOption = this.indOption,
230
+ ctx = this.ctx,
231
+ dim = (indOption.radius + indOption.barWidth) * 2, //elm width and height
232
+ center = dim / 2; //center point in both x and y axis
233
+
234
+ //draw nackground circle
235
+ ctx.strokeStyle = indOption.barBgColor; //background circle color
236
+ ctx.lineWidth = indOption.barWidth;
237
+ if (indOption.barBgColor != "transparent") {
238
+ ctx.beginPath();
239
+ ctx.arc(center, center, indOption.radius - 1 + indOption.barWidth / 2, 0, 2 * Math.PI);
240
+ ctx.stroke();
241
+ }
242
+ },
243
+ //update the value of indicator without animation
244
+ value: function(val) {
245
+ //return the val if val is not provided
246
+ if (val === undefined || isNaN(val)) {
247
+ return this.current_value;
248
+ }
249
+
250
+ val = parseFloat(val);
251
+
252
+ var ctx = this.ctx,
253
+ indOption = this.indOption,
254
+ curColor = indOption.barColor,
255
+ dim = (indOption.radius + indOption.barWidth) * 2,
256
+ minVal = indOption.minValue,
257
+ maxVal = indOption.maxValue,
258
+ center = dim / 2;
259
+
260
+ //limit the val in range of minumum and maximum value
261
+ val = val < minVal ? minVal : val > maxVal ? maxVal : val;
262
+
263
+ var precision = indOption.precision != null ? indOption.precision : 0,
264
+ precisionNo = Math.pow(10, precision),
265
+ perVal = Math.round(((val - minVal) * precisionNo / (maxVal - minVal)) * 100) / precisionNo, //percentage value tp two decimal precision
266
+ dispVal = indOption.percentage ? perVal + '%' : this.formatter(val); //formatted value
267
+
268
+ //save val on object
269
+ this.current_value = val;
270
+
271
+
272
+ //draw the bg circle
273
+ ctx.clearRect(0, 0, dim, dim);
274
+ this._drawBarBg();
275
+
276
+ //get current color if color range is set
277
+ if (typeof curColor == "object") {
278
+ var range = Object.keys(curColor);
279
+
280
+ for (var i = 1, ln = range.length; i < ln; i++) {
281
+ var bottomVal = range[i - 1],
282
+ topVal = range[i],
283
+ bottomColor = curColor[bottomVal],
284
+ topColor = curColor[topVal],
285
+ newColor = val == bottomVal ? bottomColor : val == topVal ? topColor : val > bottomVal && val < topVal ? indOption.interpolate ? getCurrentColor(val, bottomVal, topVal, bottomColor, topColor) : topColor : false;
286
+
287
+ if (newColor != false) {
288
+ curColor = newColor;
289
+ break;
290
+ }
291
+ }
292
+ }
293
+
294
+ //draw th circle value
295
+ ctx.strokeStyle = curColor;
296
+
297
+ //add linecap if value setted on options
298
+ if (indOption.roundCorner) ctx.lineCap = "round";
299
+
300
+ ctx.beginPath();
301
+ ctx.arc(center, center, indOption.radius - 1 + indOption.barWidth / 2, -(quart), ((circ) * perVal / 100) - quart, false);
302
+ ctx.stroke();
303
+
304
+ //add percentage text
305
+ if (indOption.displayNumber) {
306
+ var cFont = ctx.font.split(' '),
307
+ weight = indOption.fontWeight,
308
+ fontSize = indOption.fontSize || (dim / (this.maxLength - (Math.floor(this.maxLength * 1.4 / 4) - 1)));
309
+
310
+ cFont = indOption.fontFamily || cFont[cFont.length - 1];
311
+
312
+ ctx.fillStyle = indOption.fontColor || curColor;
313
+ ctx.font = weight + " " + fontSize + "px " + cFont;
314
+ ctx.textAlign = "center";
315
+ ctx.textBaseline = 'middle';
316
+ ctx.fillText(dispVal, center, center);
317
+ }
318
+
319
+ //call onChange callback
320
+ indOption.onChange.call(this.container,val);
321
+
322
+ return this;
323
+ },
324
+ //animate progressbar to the value
325
+ animate: function(val) {
326
+ var indOption = this.indOption,
327
+ counter = this.current_value || indOption.minValue,
328
+ self = this,
329
+ minVal = indOption.minValue,
330
+ maxVal = indOption.maxValue,
331
+ frameNum = indOption.frameNum || (indOption.percentage ? 100 : 500),
332
+ precision = indOption.precision != null ? indOption.precision : Math.ceil(Math.log(maxVal - minVal / frameNum)),
333
+ precisionNo = Math.pow(10, precision),
334
+ incBy = Math.round((maxVal - minVal) * precisionNo / frameNum) / precisionNo; //increment by .2% on every tick and 1% if showing as percentage
335
+
336
+ //limit the val in range of minumum and maximum value
337
+ val = val < minVal ? minVal : val > maxVal ? maxVal : val;
338
+
339
+ var back = val < counter;
340
+
341
+ //clear interval function if already started
342
+ if (this.intvFunc) clearInterval(this.intvFunc);
343
+
344
+ this.intvFunc = setInterval(function() {
345
+
346
+ if ((!back && counter >= val) || (back && counter <= val)) {
347
+ if (self.current_value == counter) {
348
+ clearInterval(self.intvFunc);
349
+ if (indOption.onAnimationComplete) indOption.onAnimationComplete(self.current_value);
350
+ return;
351
+ } else {
352
+ counter = val;
353
+ }
354
+ }
355
+
356
+ self.value(counter); //dispaly the value
357
+
358
+ if (counter != val) {
359
+ counter = counter + (back ? -incBy : incBy);
360
+ }; //increment or decrement till counter does not reach to value
361
+ }, indOption.frameTime);
362
+
363
+ return this;
364
+ },
365
+ //method to update options
366
+ option: function(key, val) {
367
+ if (val === undefined) return this.option[key];
368
+
369
+ if (['radius', 'barWidth', 'barBgColor', 'format', 'maxValue', 'percentage'].indexOf(key) != -1) {
370
+ this.indOption[key] = val;
371
+ this._init().value(this.current_value);
372
+ }
373
+ this.indOption[key] = val;
374
+ }
375
+
376
+ };
377
+
378
+ /** Initializer function **/
379
+ function radialIndicator(container, options) {
380
+ var progObj = new Indicator(container, options);
381
+ progObj._init();
382
+ return progObj;
383
+ }
384
+
385
+ //radial indicator defaults
386
+ radialIndicator.defaults = {
387
+ radius: 50, //inner radius of indicator
388
+ barWidth: 5, //bar width
389
+ barBgColor: '#eeeeee', //unfilled bar color
390
+ barColor: '#99CC33', //filled bar color , can be a range also having different colors on different value like {0 : "#ccc", 50 : '#333', 100: '#000'}
391
+ format: null, //format indicator numbers, can be a # formator ex (##,###.##) or a function
392
+ frameTime: 10, //miliseconds to move from one frame to another
393
+ frameNum: null, //Defines numbers of frame in indicator, defaults to 100 when showing percentage and 500 for other values
394
+ fontColor: null, //font color
395
+ fontFamily: null, //defines font family
396
+ fontWeight: 'bold', //defines font weight
397
+ fontSize: null, //define the font size of indicator number
398
+ interpolate: true, //interpolate color between ranges
399
+ percentage: false, //show percentage of value
400
+ precision: null, //default value for precision depend on difference between min and max divided by number of frames
401
+ displayNumber: true, //display indicator number
402
+ roundCorner: false, //have round corner in filled bar
403
+ minValue: 0, //minimum value
404
+ maxValue: 100, //maximum value
405
+ initValue: 0, //define initial value of indicator,
406
+ interaction: false, //if true it allows to change radial indicator value using mouse or touch interaction
407
+ onChange: function() {}
408
+ };
409
+
410
+ window.radialIndicator = radialIndicator;
411
+
412
+ //add as a jquery plugin
413
+ if ($) {
414
+ $.fn.radialIndicator = function(options) {
415
+ return this.each(function() {
416
+ var newPCObj = radialIndicator(this, options);
417
+ $.data(this, 'radialIndicator', newPCObj);
418
+ });
419
+ };
420
+ }
421
+
422
+ }(window.jQuery, window, document, void 0));
@@ -0,0 +1,7 @@
1
+ /*
2
+ radialIndicator.js v 1.2.1
3
+ Author: Sudhanshu Yadav
4
+ Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
5
+ Demo on: ignitersworld.com/lab/radialIndicator.html
6
+ */
7
+ !function(t,e,n){"use strict";function i(t){var e=/^#?([a-f\d])([a-f\d])([a-f\d])$/i;t=t.replace(e,function(t,e,n,i){return e+e+n+n+i+i});var n=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return n?[parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)]:null}function r(t,e,n,i){return Math.round(n+(i-n)*t/e)}function a(t,e,n,a,o){var u=-1!=o.indexOf("#")?i(o):o.match(/\d+/g),l=-1!=a.indexOf("#")?i(a):a.match(/\d+/g),s=n-e,c=t-e;return u&&l?"rgb("+r(c,s,l[0],u[0])+","+r(c,s,l[1],u[1])+","+r(c,s,l[2],u[2])+")":null}function o(){for(var t=arguments,e=t[0],n=1,i=t.length;i>n;n++){var r=t[n];for(var a in r)r.hasOwnProperty(a)&&(e[a]=r[a])}return e}function u(t){return function(e){if(!t)return e.toString();e=e||0;for(var n=e.toString().split("").reverse(),i=t.split("").reverse(),r=0,a=0,o=i.length;o>r&&n.length;r++)"#"==i[r]&&(a=r,i[r]=n.shift());return i.splice(a+1,i.lastIndexOf("#")-a,n.reverse().join("")),i.reverse().join("")}}function l(t,e){function i(t){if(e.interaction){t.preventDefault();var n=-Math.max(-1,Math.min(1,t.wheelDelta||-t.detail)),i=null!=e.precision?e.precision:0,a=Math.pow(10,i),o=e.maxValue-e.minValue,u=r.current_value+Math.round(a*n*o/Math.min(o,100))/a;return r.value(u),!1}}var r=this;e=e||{},e=o({},s.defaults,e),this.indOption=e,"string"==typeof t&&(t=n.querySelector(t)),t.length&&(t=t[0]),this.container=t;var a=n.createElement("canvas");t.appendChild(a),this.canElm=a,this.ctx=a.getContext("2d"),this.current_value=e.initValue||e.minValue||0;var u=function(t){if(e.interaction){var i="touchstart"==t.type?"touchmove":"mousemove",o="touchstart"==t.type?"touchend":"mouseup",u=a.getBoundingClientRect(),l=u.top+a.offsetHeight/2,s=u.left+a.offsetWidth/2,d=function(t){t.preventDefault();var n=t.clientX||t.touches[0].clientX,i=t.clientY||t.touches[0].clientY,a=(c+h+Math.atan2(i-l,n-s))%(c+.0175),o=e.radius-1+e.barWidth/2,u=c*o,d=null!=e.precision?e.precision:0,f=Math.pow(10,d),v=Math.round(f*a*o*(e.maxValue-e.minValue)/u)/f;r.value(v)},f=function(){n.removeEventListener(i,d,!1),n.removeEventListener(o,f,!1)};n.addEventListener(i,d,!1),n.addEventListener(o,f,!1)}};a.addEventListener("touchstart",u,!1),a.addEventListener("mousedown",u,!1),a.addEventListener("mousewheel",i,!1),a.addEventListener("DOMMouseScroll",i,!1)}function s(t,e){var n=new l(t,e);return n._init(),n}var c=2*Math.PI,h=Math.PI/2,d=function(){var t=n.createElement("canvas").getContext("2d"),i=e.devicePixelRatio||1,r=t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1,a=i/r;return function(t,e,i){var r=i||n.createElement("canvas");return r.width=t*a,r.height=e*a,r.style.width=t+"px",r.style.height=e+"px",r.getContext("2d").setTransform(a,0,0,a,0,0),r}}();l.prototype={constructor:s,_init:function(){var t=this.indOption,e=this.canElm,n=(this.ctx,2*(t.radius+t.barWidth));return this.formatter="function"==typeof t.format?t.format:u(t.format),this.maxLength=t.percentage?4:this.formatter(t.maxValue).length,d(n,n,e),this._drawBarBg(),this.value(this.current_value),this},_drawBarBg:function(){var t=this.indOption,e=this.ctx,n=2*(t.radius+t.barWidth),i=n/2;e.strokeStyle=t.barBgColor,e.lineWidth=t.barWidth,"transparent"!=t.barBgColor&&(e.beginPath(),e.arc(i,i,t.radius-1+t.barWidth/2,0,2*Math.PI),e.stroke())},value:function(t){if(void 0===t||isNaN(t))return this.current_value;t=parseFloat(t);var e=this.ctx,n=this.indOption,i=n.barColor,r=2*(n.radius+n.barWidth),o=n.minValue,u=n.maxValue,l=r/2;t=o>t?o:t>u?u:t;var s=null!=n.precision?n.precision:0,d=Math.pow(10,s),f=Math.round((t-o)*d/(u-o)*100)/d,v=n.percentage?f+"%":this.formatter(t);if(this.current_value=t,e.clearRect(0,0,r,r),this._drawBarBg(),"object"==typeof i)for(var m=Object.keys(i),p=1,g=m.length;g>p;p++){var x=m[p-1],b=m[p],C=i[x],M=i[b],w=t==x?C:t==b?M:t>x&&b>t?n.interpolate?a(t,x,b,C,M):M:!1;if(0!=w){i=w;break}}if(e.strokeStyle=i,n.roundCorner&&(e.lineCap="round"),e.beginPath(),e.arc(l,l,n.radius-1+n.barWidth/2,-h,c*f/100-h,!1),e.stroke(),n.displayNumber){var y=e.font.split(" "),B=n.fontWeight,V=n.fontSize||r/(this.maxLength-(Math.floor(1.4*this.maxLength/4)-1));y=n.fontFamily||y[y.length-1],e.fillStyle=n.fontColor||i,e.font=B+" "+V+"px "+y,e.textAlign="center",e.textBaseline="middle",e.fillText(v,l,l)}return n.onChange.call(this.container,t),this},animate:function(t){var e=this.indOption,n=this.current_value||e.minValue,i=this,r=e.minValue,a=e.maxValue,o=e.frameNum||(e.percentage?100:500),u=null!=e.precision?e.precision:Math.ceil(Math.log(a-r/o)),l=Math.pow(10,u),s=Math.round((a-r)*l/o)/l;t=r>t?r:t>a?a:t;var c=n>t;return this.intvFunc&&clearInterval(this.intvFunc),this.intvFunc=setInterval(function(){if(!c&&n>=t||c&&t>=n){if(i.current_value==n)return clearInterval(i.intvFunc),void(e.onAnimationComplete&&e.onAnimationComplete(i.current_value));n=t}i.value(n),n!=t&&(n+=c?-s:s)},e.frameTime),this},option:function(t,e){return void 0===e?this.option[t]:(-1!=["radius","barWidth","barBgColor","format","maxValue","percentage"].indexOf(t)&&(this.indOption[t]=e,this._init().value(this.current_value)),void(this.indOption[t]=e))}},s.defaults={radius:50,barWidth:5,barBgColor:"#eeeeee",barColor:"#99CC33",format:null,frameTime:10,frameNum:null,fontColor:null,fontFamily:null,fontWeight:"bold",fontSize:null,interpolate:!0,percentage:!1,precision:null,displayNumber:!0,roundCorner:!1,minValue:0,maxValue:100,initValue:0,interaction:!1,onChange:function(){}},e.radialIndicator=s,t&&(t.fn.radialIndicator=function(e){return this.each(function(){var n=s(this,e);t.data(this,"radialIndicator",n)})})}(window.jQuery,window,document,void 0);
metadata ADDED
@@ -0,0 +1,79 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: radialIndicator-rails
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.1.0
5
+ platform: ruby
6
+ authors:
7
+ - xiajian
8
+ autorequire:
9
+ bindir: exe
10
+ cert_chain: []
11
+ date: 2015-12-21 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: bundler
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - "~>"
18
+ - !ruby/object:Gem::Version
19
+ version: '1.8'
20
+ type: :development
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - "~>"
25
+ - !ruby/object:Gem::Version
26
+ version: '1.8'
27
+ - !ruby/object:Gem::Dependency
28
+ name: rake
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '10.0'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '10.0'
41
+ description: 's-yadav''s radialIndicator Rails assets 打包, 是一款轻量级的图形指示器。 '
42
+ email:
43
+ - jhqy2011@gmail.com
44
+ executables: []
45
+ extensions: []
46
+ extra_rdoc_files: []
47
+ files:
48
+ - bin/console
49
+ - bin/setup
50
+ - lib/radialIndicator/rails.rb
51
+ - lib/radialIndicator/rails/version.rb
52
+ - vendor/assets/javascripts/angular.radialIndicator.js
53
+ - vendor/assets/javascripts/radialIndicator.js
54
+ - vendor/assets/javascripts/radialIndicator.min.js
55
+ homepage: https://github.com/xiajian/radialIndicator-rails
56
+ licenses:
57
+ - MIT
58
+ metadata: {}
59
+ post_install_message:
60
+ rdoc_options: []
61
+ require_paths:
62
+ - lib
63
+ required_ruby_version: !ruby/object:Gem::Requirement
64
+ requirements:
65
+ - - ">="
66
+ - !ruby/object:Gem::Version
67
+ version: '0'
68
+ required_rubygems_version: !ruby/object:Gem::Requirement
69
+ requirements:
70
+ - - ">="
71
+ - !ruby/object:Gem::Version
72
+ version: '0'
73
+ requirements: []
74
+ rubyforge_project:
75
+ rubygems_version: 2.4.8
76
+ signing_key:
77
+ specification_version: 4
78
+ summary: This is a rails assets gem that packaged s-yadav's radialIndicator(圆形图形指示器)
79
+ test_files: []