circle-progress.min.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. /**
  2. * jquery-circle-progress - jQuery Plugin to draw animated circular progress bars:
  3. * {@link http://kottenator.github.io/jquery-circle-progress/}
  4. *
  5. * @author Rostyslav Bryzgunov <kottenator@gmail.com>
  6. * @version 1.2.2
  7. * @licence MIT
  8. * @preserve
  9. */
  10. ! function (i) {
  11. if ("function" == typeof define && define.amd) define(["jquery"], i);
  12. else if ("object" == typeof module && module.exports) {
  13. var t = require("jquery");
  14. i(t), module.exports = t
  15. } else i(jQuery)
  16. }
  17. (function (i) {
  18. function t(i) {
  19. this.init(i)
  20. }
  21. t.prototype = {
  22. value: 0,
  23. size: 100,
  24. startAngle: -Math.PI,
  25. thickness: "auto",
  26. fill: {
  27. gradient: ["#3aeabb", "#fdd250"]
  28. },
  29. emptyFill: "rgba(0, 0, 0, .1)",
  30. animation: {
  31. duration: 1200,
  32. easing: "circleProgressEasing"
  33. },
  34. animationStartValue: 0,
  35. reverse: !1,
  36. lineCap: "butt",
  37. insertMode: "prepend",
  38. constructor: t,
  39. el: null,
  40. canvas: null,
  41. ctx: null,
  42. radius: 0,
  43. arcFill: null,
  44. lastFrameValue: 0,
  45. init: function (t) {
  46. i.extend(this, t), this.radius = this.size / 2, this.initWidget(), this.initFill(), this.draw(), this.el.trigger("circle-inited")
  47. },
  48. initWidget: function () {
  49. this.canvas || (this.canvas = i("<canvas>")["prepend" == this.insertMode ? "prependTo" : "appendTo"](this.el)[0]);
  50. var t = this.canvas;
  51. if (t.width = this.size, t.height = this.size, this.ctx = t.getContext("2d"), window.devicePixelRatio > 1) {
  52. var e = window.devicePixelRatio;
  53. t.style.width = t.style.height = this.size + "px", t.width = t.height = this.size * e, this.ctx.scale(e, e)
  54. }
  55. },
  56. initFill: function () {
  57. function t() {
  58. var t = i("<canvas>")[0];
  59. t.width = e.size, t.height = e.size, t.getContext("2d").drawImage(g, 0, 0, r, r), e.arcFill = e.ctx.createPattern(t, "no-repeat"), e.drawFrame(e.lastFrameValue)
  60. }
  61. var e = this,
  62. a = this.fill,
  63. n = this.ctx,
  64. r = this.size;
  65. if (!a) throw Error("The fill is not specified!");
  66. if ("string" == typeof a && (a = {
  67. color: a
  68. }), a.color && (this.arcFill = a.color), a.gradient) {
  69. var s = a.gradient;
  70. if (1 == s.length) this.arcFill = s[0];
  71. else if (s.length > 1) {
  72. for (var l = a.gradientAngle || 0, o = a.gradientDirection || [r / 2 * (1 - Math.cos(l)), r / 2 * (1 + Math.sin(l)), r / 2 * (1 + Math.cos(l)), r / 2 * (1 - Math.sin(l))], h = n.createLinearGradient.apply(n, o), c = 0; c < s.length; c++) {
  73. var d = s[c],
  74. u = c / (s.length - 1);
  75. i.isArray(d) && (u = d[1], d = d[0]), h.addColorStop(u, d)
  76. }
  77. this.arcFill = h
  78. }
  79. }
  80. if (a.image) {
  81. var g;
  82. a.image instanceof Image ? g = a.image : (g = new Image, g.src = a.image), g.complete ? t() : g.onload = t
  83. }
  84. },
  85. draw: function () {
  86. this.animation ? this.drawAnimated(this.value) : this.drawFrame(this.value)
  87. },
  88. drawFrame: function (i) {
  89. this.lastFrameValue = i, this.ctx.clearRect(0, 0, this.size, this.size), this.drawEmptyArc(i), this.drawArc(i)
  90. },
  91. drawArc: function (i) {
  92. if (0 !== i) {
  93. var t = this.ctx,
  94. e = this.radius,
  95. a = this.getThickness(),
  96. n = this.startAngle;
  97. t.save(), t.beginPath(), this.reverse ? t.arc(e, e, e - a / 2, n - 2 * Math.PI * i, n) : t.arc(e, e, e - a / 2, n, n + 2 * Math.PI * i), t.lineWidth = a, t.lineCap = this.lineCap, t.strokeStyle = this.arcFill, t.stroke(), t.restore()
  98. }
  99. },
  100. drawEmptyArc: function (i) {
  101. var t = this.ctx,
  102. e = this.radius,
  103. a = this.getThickness(),
  104. n = this.startAngle;
  105. i < 1 && (t.save(), t.beginPath(), i <= 0 ? t.arc(e, e, e - a / 2, 0, 2 * Math.PI) : this.reverse ? t.arc(e, e, e - a / 2, n, n - 2 * Math.PI * i) : t.arc(e, e, e - a / 2, n + 2 * Math.PI * i, n), t.lineWidth = a, t.strokeStyle = this.emptyFill, t.stroke(), t.restore())
  106. },
  107. drawAnimated: function (t) {
  108. var e = this,
  109. a = this.el,
  110. n = i(this.canvas);
  111. n.stop(!0, !1), a.trigger("circle-animation-start"), n.css({
  112. animationProgress: 0
  113. }).animate({
  114. animationProgress: 1
  115. }, i.extend({}, this.animation, {
  116. step: function (i) {
  117. var n = e.animationStartValue * (1 - i) + t * i;
  118. e.drawFrame(n), a.trigger("circle-animation-progress", [i, n])
  119. }
  120. })).promise().always(function () {
  121. a.trigger("circle-animation-end")
  122. })
  123. },
  124. getThickness: function () {
  125. return i.isNumeric(this.thickness) ? this.thickness : this.size / 14
  126. },
  127. getValue: function () {
  128. return this.value
  129. },
  130. setValue: function (i) {
  131. this.animation && (this.animationStartValue = this.lastFrameValue), this.value = i, this.draw()
  132. }
  133. }, i.circleProgress = {
  134. defaults: t.prototype
  135. }, i.easing.circleProgressEasing = function (i) {
  136. return i < .5 ? (i = 2 * i, .5 * i * i * i) : (i = 2 - 2 * i, 1 - .5 * i * i * i)
  137. }, i.fn.circleProgress = function (e, a) {
  138. var n = "circle-progress",
  139. r = this.data(n);
  140. if ("widget" == e) {
  141. if (!r) throw Error('Calling "widget" method on not initialized instance is forbidden');
  142. return r.canvas
  143. }
  144. if ("value" == e) {
  145. if (!r) throw Error('Calling "value" method on not initialized instance is forbidden');
  146. if ("undefined" == typeof a) return r.getValue();
  147. var s = arguments[1];
  148. return this.each(function () {
  149. i(this).data(n).setValue(s)
  150. })
  151. }
  152. return this.each(function () {
  153. var a = i(this),
  154. r = a.data(n),
  155. s = i.isPlainObject(e) ? e : {};
  156. if (r) r.init(s);
  157. else {
  158. var l = i.extend({}, a.data());
  159. "string" == typeof l.fill && (l.fill = JSON.parse(l.fill)), "string" == typeof l.animation && (l.animation = JSON.parse(l.animation)), s = i.extend(l, s), s.el = a, r = new t(s), a.data(n, r)
  160. }
  161. })
  162. }
  163. });