jquery-asPieProgress.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711
  1. /**
  2. * jQuery asPieProgress v0.4.7
  3. * https://github.com/amazingSurge/jquery-asPieProgress
  4. *
  5. * Copyright (c) amazingSurge
  6. * Released under the LGPL-3.0 license
  7. */
  8. (function(global, factory) {
  9. if (typeof define === 'function' && define.amd) {
  10. define(['jquery'], factory);
  11. } else if (typeof exports !== 'undefined') {
  12. factory(require('jquery'));
  13. } else {
  14. var mod = {
  15. exports: {}
  16. };
  17. factory(global.jQuery);
  18. global.jqueryAsPieProgressEs = mod.exports;
  19. }
  20. })(this, function(_jquery) {
  21. 'use strict';
  22. var _jquery2 = _interopRequireDefault(_jquery);
  23. function _interopRequireDefault(obj) {
  24. return obj && obj.__esModule
  25. ? obj
  26. : {
  27. default: obj
  28. };
  29. }
  30. function _classCallCheck(instance, Constructor) {
  31. if (!(instance instanceof Constructor)) {
  32. throw new TypeError('Cannot call a class as a function');
  33. }
  34. }
  35. var _createClass = (function() {
  36. function defineProperties(target, props) {
  37. for (var i = 0; i < props.length; i++) {
  38. var descriptor = props[i];
  39. descriptor.enumerable = descriptor.enumerable || false;
  40. descriptor.configurable = true;
  41. if ('value' in descriptor) descriptor.writable = true;
  42. Object.defineProperty(target, descriptor.key, descriptor);
  43. }
  44. }
  45. return function(Constructor, protoProps, staticProps) {
  46. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  47. if (staticProps) defineProperties(Constructor, staticProps);
  48. return Constructor;
  49. };
  50. })();
  51. var SvgElement = function SvgElement(tag, attrs) {
  52. 'use strict';
  53. var elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
  54. if (!attrs) {
  55. return elem;
  56. }
  57. for (var key in attrs) {
  58. if (!Object.hasOwnProperty.call(attrs, key)) {
  59. continue;
  60. }
  61. elem.setAttribute(key, attrs[key]);
  62. }
  63. return elem;
  64. };
  65. if (!Date.now) {
  66. Date.now = function() {
  67. 'use strict';
  68. return new Date().getTime();
  69. };
  70. }
  71. var vendors = ['webkit', 'moz'];
  72. for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
  73. var vp = vendors[i];
  74. window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
  75. window.cancelAnimationFrame =
  76. window[vp + 'CancelAnimationFrame'] ||
  77. window[vp + 'CancelRequestAnimationFrame'];
  78. }
  79. if (
  80. /iP(ad|hone|od).*OS (6|7|8)/.test(window.navigator.userAgent) || // iOS6 is buggy
  81. !window.requestAnimationFrame ||
  82. !window.cancelAnimationFrame
  83. ) {
  84. var lastTime = 0;
  85. window.requestAnimationFrame = function(callback) {
  86. 'use strict';
  87. var now = getTime();
  88. var nextTime = Math.max(lastTime + 16, now);
  89. return setTimeout(function() {
  90. callback((lastTime = nextTime));
  91. }, nextTime - now);
  92. };
  93. window.cancelAnimationFrame = clearTimeout;
  94. }
  95. var getTime = function getTime() {
  96. if (typeof window.performance !== 'undefined' && window.performance.now) {
  97. return window.performance.now();
  98. }
  99. return Date.now();
  100. };
  101. var isPercentage = function isPercentage(n) {
  102. 'use strict';
  103. return typeof n === 'string' && n.indexOf('%') !== -1;
  104. };
  105. var svgSupported =
  106. 'createElementNS' in document && new SvgElement('svg', {}).createSVGRect;
  107. var easingBezier = function easingBezier(mX1, mY1, mX2, mY2) {
  108. 'use strict';
  109. var a = function a(aA1, aA2) {
  110. return 1.0 - 3.0 * aA2 + 3.0 * aA1;
  111. };
  112. var b = function b(aA1, aA2) {
  113. return 3.0 * aA2 - 6.0 * aA1;
  114. };
  115. var c = function c(aA1) {
  116. return 3.0 * aA1;
  117. };
  118. // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  119. var calcBezier = function calcBezier(aT, aA1, aA2) {
  120. return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
  121. };
  122. // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  123. var getSlope = function getSlope(aT, aA1, aA2) {
  124. return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
  125. };
  126. var getTForX = function getTForX(aX) {
  127. // Newton raphson iteration
  128. var aGuessT = aX;
  129. for (var _i = 0; _i < 4; ++_i) {
  130. var currentSlope = getSlope(aGuessT, mX1, mX2);
  131. if (currentSlope === 0.0) {
  132. return aGuessT;
  133. }
  134. var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
  135. aGuessT -= currentX / currentSlope;
  136. }
  137. return aGuessT;
  138. };
  139. if (mX1 === mY1 && mX2 === mY2) {
  140. return {
  141. css: 'linear',
  142. fn: function fn(aX) {
  143. return aX;
  144. }
  145. };
  146. }
  147. return {
  148. css: 'cubic-bezier(' + mX1 + ',' + mY1 + ',' + mX2 + ',' + mY2 + ')',
  149. fn: function fn(aX) {
  150. return calcBezier(getTForX(aX), mY1, mY2);
  151. }
  152. };
  153. };
  154. var EASING = {
  155. ease: easingBezier(0.25, 0.1, 0.25, 1.0),
  156. linear: easingBezier(0.0, 0.0, 1.0, 1.0),
  157. 'ease-in': easingBezier(0.42, 0.0, 1.0, 1.0),
  158. 'ease-out': easingBezier(0.0, 0.0, 0.58, 1.0),
  159. 'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0)
  160. };
  161. var DEFAULTS = {
  162. namespace: 'asPieProgress',
  163. classes: {
  164. svg: 'pie_progress__svg',
  165. element: 'pie_progress',
  166. number: 'pie_progress__number',
  167. content: 'pie_progress__content'
  168. },
  169. min: 0,
  170. max: 100,
  171. goal: 100,
  172. size: 160,
  173. speed: 15, // speed of 1/100
  174. barcolor: '#ef1e25',
  175. barsize: '4',
  176. trackcolor: '#f2f2f2',
  177. fillcolor: 'none',
  178. easing: 'ease',
  179. numberCallback: function numberCallback(n) {
  180. 'use strict';
  181. var percentage = Math.round(this.getPercentage(n));
  182. return percentage + '%';
  183. },
  184. contentCallback: null
  185. };
  186. var NAMESPACE$1 = 'asPieProgress';
  187. var asPieProgress = (function() {
  188. function asPieProgress(element, options) {
  189. _classCallCheck(this, asPieProgress);
  190. this.element = element;
  191. this.$element = (0, _jquery2.default)(element);
  192. this.options = _jquery2.default.extend(
  193. true,
  194. {},
  195. DEFAULTS,
  196. options,
  197. this.$element.data()
  198. );
  199. this.namespace = this.options.namespace;
  200. this.classes = this.options.classes;
  201. this.easing = EASING[this.options.easing] || EASING.ease;
  202. this.$element.addClass(this.classes.element);
  203. this.min = this.$element.attr('aria-valuemin');
  204. this.max = this.$element.attr('aria-valuemax');
  205. this.min = this.min ? parseInt(this.min, 10) : this.options.min;
  206. this.max = this.max ? parseInt(this.max, 10) : this.options.max;
  207. this.first = this.$element.attr('aria-valuenow');
  208. this.first = this.first
  209. ? parseInt(this.first, 10)
  210. : this.options.first ? this.options.first : this.min;
  211. this.now = this.first;
  212. this.goal = this.options.goal;
  213. this._frameId = null;
  214. this.initialized = false;
  215. this._trigger('init');
  216. this.init();
  217. }
  218. _createClass(
  219. asPieProgress,
  220. [
  221. {
  222. key: 'init',
  223. value: function init() {
  224. this.$number = this.$element.find('.' + this.classes.number);
  225. this.$content = this.$element.find('.' + this.classes.content);
  226. this.size = this.options.size;
  227. this.width = this.size;
  228. this.height = this.size;
  229. this.prepare();
  230. this.initialized = true;
  231. this._trigger('ready');
  232. }
  233. },
  234. {
  235. key: 'prepare',
  236. value: function prepare() {
  237. if (!svgSupported) {
  238. return;
  239. }
  240. this.svg = new SvgElement('svg', {
  241. version: '1.1',
  242. preserveAspectRatio: 'xMinYMin meet',
  243. viewBox: '0 0 ' + this.width + ' ' + this.height
  244. });
  245. this.buildTrack();
  246. this.buildBar();
  247. (0, _jquery2.default)(
  248. '<div class="' + this.classes.svg + '"></div>'
  249. )
  250. .append(this.svg)
  251. .appendTo(this.$element);
  252. }
  253. },
  254. {
  255. key: 'buildTrack',
  256. value: function buildTrack() {
  257. var height = this.size,
  258. width = this.size;
  259. var cx = width / 2,
  260. cy = height / 2;
  261. var barsize = this.options.barsize;
  262. var ellipse = new SvgElement('ellipse', {
  263. rx: cx - barsize / 2,
  264. ry: cy - barsize / 2,
  265. cx: cx,
  266. cy: cy,
  267. stroke: this.options.trackcolor,
  268. fill: this.options.fillcolor,
  269. 'stroke-width': barsize
  270. });
  271. this.svg.appendChild(ellipse);
  272. }
  273. },
  274. {
  275. key: 'buildBar',
  276. value: function buildBar() {
  277. if (!svgSupported) {
  278. return;
  279. }
  280. var path = new SvgElement('path', {
  281. fill: 'none',
  282. 'stroke-width': this.options.barsize,
  283. stroke: this.options.barcolor
  284. });
  285. this.bar = path;
  286. this.svg.appendChild(path);
  287. this._drawBar(this.first);
  288. this._updateBar();
  289. }
  290. },
  291. {
  292. key: '_drawBar',
  293. value: function _drawBar(n) {
  294. if (!svgSupported) {
  295. return;
  296. }
  297. this.barGoal = n;
  298. var height = this.size,
  299. width = this.size;
  300. var cx = width / 2,
  301. cy = height / 2,
  302. startAngle = 0;
  303. var barsize = this.options.barsize;
  304. var r = Math.min(cx, cy) - barsize / 2;
  305. this.r = r;
  306. var percentage = this.getPercentage(n);
  307. if (percentage === 100) {
  308. percentage -= 0.0001;
  309. }
  310. var endAngle = startAngle + percentage * Math.PI * 2 / 100;
  311. var x1 = cx + r * Math.sin(startAngle),
  312. x2 = cx + r * Math.sin(endAngle),
  313. y1 = cy - r * Math.cos(startAngle),
  314. y2 = cy - r * Math.cos(endAngle);
  315. // This is a flag for angles larger than than a half circle
  316. // It is required by the SVG arc drawing component
  317. var big = 0;
  318. if (endAngle - startAngle > Math.PI) {
  319. big = 1;
  320. }
  321. // This string holds the path details
  322. var d =
  323. 'M' +
  324. x1 +
  325. ',' +
  326. y1 +
  327. ' A' +
  328. r +
  329. ',' +
  330. r +
  331. ' 0 ' +
  332. big +
  333. ' 1 ' +
  334. x2 +
  335. ',' +
  336. y2;
  337. this.bar.setAttribute('d', d);
  338. }
  339. },
  340. {
  341. key: '_updateBar',
  342. value: function _updateBar() {
  343. if (!svgSupported) {
  344. return;
  345. }
  346. var percenage = this.getPercentage(this.now);
  347. var length = this.bar.getTotalLength();
  348. var offset =
  349. length * (1 - percenage / this.getPercentage(this.barGoal));
  350. this.bar.style.strokeDasharray = length + ' ' + length;
  351. this.bar.style.strokeDashoffset = offset;
  352. }
  353. },
  354. {
  355. key: '_trigger',
  356. value: function _trigger(eventType) {
  357. for (
  358. var _len = arguments.length,
  359. params = Array(_len > 1 ? _len - 1 : 0),
  360. _key = 1;
  361. _key < _len;
  362. _key++
  363. ) {
  364. params[_key - 1] = arguments[_key];
  365. }
  366. var data = [this].concat(params);
  367. // event
  368. this.$element.trigger(NAMESPACE$1 + '::' + eventType, data);
  369. // callback
  370. eventType = eventType.replace(/\b\w+\b/g, function(word) {
  371. return word.substring(0, 1).toUpperCase() + word.substring(1);
  372. });
  373. var onFunction = 'on' + eventType;
  374. if (typeof this.options[onFunction] === 'function') {
  375. this.options[onFunction].apply(this, params);
  376. }
  377. }
  378. },
  379. {
  380. key: 'getPercentage',
  381. value: function getPercentage(n) {
  382. return 100 * (n - this.min) / (this.max - this.min);
  383. }
  384. },
  385. {
  386. key: 'go',
  387. value: function go(goal) {
  388. var that = this;
  389. this._clear();
  390. if (isPercentage(goal)) {
  391. goal = parseInt(goal.replace('%', ''), 10);
  392. goal = Math.round(this.min + goal / 100 * (this.max - this.min));
  393. }
  394. if (typeof goal === 'undefined') {
  395. goal = this.goal;
  396. }
  397. if (goal > this.max) {
  398. goal = this.max;
  399. } else if (goal < this.min) {
  400. goal = this.min;
  401. }
  402. if (this.barGoal < goal) {
  403. this._drawBar(goal);
  404. }
  405. var start = that.now;
  406. var startTime = getTime();
  407. var endTime =
  408. startTime +
  409. Math.abs(start - goal) *
  410. 100 *
  411. that.options.speed /
  412. (that.max - that.min);
  413. var animation = function animation(time) {
  414. var next = void 0;
  415. if (time > endTime) {
  416. next = goal;
  417. } else {
  418. var distance = (time - startTime) / that.options.speed;
  419. next = Math.round(
  420. that.easing.fn(distance / 100) * (that.max - that.min)
  421. );
  422. if (goal > start) {
  423. next = start + next;
  424. if (next > goal) {
  425. next = goal;
  426. }
  427. } else {
  428. next = start - next;
  429. if (next < goal) {
  430. next = goal;
  431. }
  432. }
  433. }
  434. that._update(next);
  435. if (next === goal) {
  436. window.cancelAnimationFrame(that._frameId);
  437. that._frameId = null;
  438. if (that.now === that.goal) {
  439. that._trigger('finish');
  440. }
  441. } else {
  442. that._frameId = window.requestAnimationFrame(animation);
  443. }
  444. };
  445. that._frameId = window.requestAnimationFrame(animation);
  446. }
  447. },
  448. {
  449. key: '_update',
  450. value: function _update(n) {
  451. this.now = n;
  452. this._updateBar();
  453. this.$element.attr('aria-valuenow', this.now);
  454. if (
  455. this.$number.length > 0 &&
  456. typeof this.options.numberCallback === 'function'
  457. ) {
  458. this.$number.html(
  459. this.options.numberCallback.call(this, [this.now])
  460. );
  461. }
  462. if (
  463. this.$content.length > 0 &&
  464. typeof this.options.contentCallback === 'function'
  465. ) {
  466. this.$content.html(
  467. this.options.contentCallback.call(this, [this.now])
  468. );
  469. }
  470. this._trigger('update', n);
  471. }
  472. },
  473. {
  474. key: '_clear',
  475. value: function _clear() {
  476. if (this._frameId) {
  477. window.cancelAnimationFrame(this._frameId);
  478. this._frameId = null;
  479. }
  480. }
  481. },
  482. {
  483. key: 'get',
  484. value: function get() {
  485. return this.now;
  486. }
  487. },
  488. {
  489. key: 'start',
  490. value: function start() {
  491. this._clear();
  492. this._trigger('start');
  493. this.go(this.goal);
  494. }
  495. },
  496. {
  497. key: 'reset',
  498. value: function reset() {
  499. this._clear();
  500. this._drawBar(this.first);
  501. this._update(this.first);
  502. this._trigger('reset');
  503. }
  504. },
  505. {
  506. key: 'stop',
  507. value: function stop() {
  508. this._clear();
  509. this._trigger('stop');
  510. }
  511. },
  512. {
  513. key: 'finish',
  514. value: function finish() {
  515. this._clear();
  516. this._update(this.goal);
  517. this._trigger('finish');
  518. }
  519. },
  520. {
  521. key: 'destroy',
  522. value: function destroy() {
  523. this.$element.data(NAMESPACE$1, null);
  524. this._trigger('destroy');
  525. }
  526. }
  527. ],
  528. [
  529. {
  530. key: 'registerEasing',
  531. value: function registerEasing(name) {
  532. for (
  533. var _len2 = arguments.length,
  534. args = Array(_len2 > 1 ? _len2 - 1 : 0),
  535. _key2 = 1;
  536. _key2 < _len2;
  537. _key2++
  538. ) {
  539. args[_key2 - 1] = arguments[_key2];
  540. }
  541. EASING[name] = easingBezier.apply(undefined, args);
  542. }
  543. },
  544. {
  545. key: 'getEasing',
  546. value: function getEasing(name) {
  547. return EASING[name];
  548. }
  549. },
  550. {
  551. key: 'setDefaults',
  552. value: function setDefaults(options) {
  553. _jquery2.default.extend(
  554. true,
  555. DEFAULTS,
  556. _jquery2.default.isPlainObject(options) && options
  557. );
  558. }
  559. }
  560. ]
  561. );
  562. return asPieProgress;
  563. })();
  564. var info = {
  565. version: '0.4.7'
  566. };
  567. var NAMESPACE = 'asPieProgress';
  568. var OtherAsPieProgress = _jquery2.default.fn.asPieProgress;
  569. var jQueryAsPieProgress = function jQueryAsPieProgress(options) {
  570. for (
  571. var _len3 = arguments.length,
  572. args = Array(_len3 > 1 ? _len3 - 1 : 0),
  573. _key3 = 1;
  574. _key3 < _len3;
  575. _key3++
  576. ) {
  577. args[_key3 - 1] = arguments[_key3];
  578. }
  579. if (typeof options === 'string') {
  580. var method = options;
  581. if (/^_/.test(method)) {
  582. return false;
  583. } else if (/^(get)/.test(method)) {
  584. var instance = this.first().data(NAMESPACE);
  585. if (instance && typeof instance[method] === 'function') {
  586. return instance[method].apply(instance, args);
  587. }
  588. } else {
  589. return this.each(function() {
  590. var instance = _jquery2.default.data(this, NAMESPACE);
  591. if (instance && typeof instance[method] === 'function') {
  592. instance[method].apply(instance, args);
  593. }
  594. });
  595. }
  596. }
  597. return this.each(function() {
  598. if (!(0, _jquery2.default)(this).data(NAMESPACE)) {
  599. (0, _jquery2.default)(this).data(
  600. NAMESPACE,
  601. new asPieProgress(this, options)
  602. );
  603. }
  604. });
  605. };
  606. _jquery2.default.fn.asPieProgress = jQueryAsPieProgress;
  607. _jquery2.default.asPieProgress = _jquery2.default.extend(
  608. {
  609. setDefaults: asPieProgress.setDefaults,
  610. registerEasing: asPieProgress.registerEasing,
  611. getEasing: asPieProgress.getEasing,
  612. noConflict: function noConflict() {
  613. _jquery2.default.fn.asPieProgress = OtherAsPieProgress;
  614. return jQueryAsPieProgress;
  615. }
  616. },
  617. info
  618. );
  619. });