jquery-asProgress.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553
  1. /**
  2. * jQuery asProgress v0.2.4
  3. * https://github.com/amazingSurge/jquery-asProgress
  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.jqueryAsProgressEs = 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 DEFAULTS = {
  52. namespace: 'progress',
  53. bootstrap: false,
  54. min: 0,
  55. max: 100,
  56. goal: 100,
  57. speed: 20, // speed of 1/100
  58. easing: 'ease',
  59. labelCallback: function labelCallback(n) {
  60. var percentage = this.getPercentage(n);
  61. return percentage + '%';
  62. }
  63. };
  64. var easingBezier = function easingBezier(mX1, mY1, mX2, mY2) {
  65. 'use strict';
  66. var a = function a(aA1, aA2) {
  67. return 1.0 - 3.0 * aA2 + 3.0 * aA1;
  68. };
  69. var b = function b(aA1, aA2) {
  70. return 3.0 * aA2 - 6.0 * aA1;
  71. };
  72. var c = function c(aA1) {
  73. return 3.0 * aA1;
  74. };
  75. // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  76. var calcBezier = function calcBezier(aT, aA1, aA2) {
  77. return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
  78. };
  79. // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  80. var getSlope = function getSlope(aT, aA1, aA2) {
  81. return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1);
  82. };
  83. var getTForX = function getTForX(aX) {
  84. // Newton raphson iteration
  85. var aGuessT = aX;
  86. for (var i = 0; i < 4; ++i) {
  87. var currentSlope = getSlope(aGuessT, mX1, mX2);
  88. if (currentSlope === 0.0) {
  89. return aGuessT;
  90. }
  91. var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
  92. aGuessT -= currentX / currentSlope;
  93. }
  94. return aGuessT;
  95. };
  96. if (mX1 === mY1 && mX2 === mY2) {
  97. return {
  98. css: 'linear',
  99. fn: function fn(aX) {
  100. return aX;
  101. }
  102. };
  103. }
  104. return {
  105. css: 'cubic-bezier(' + mX1 + ',' + mY1 + ',' + mX2 + ',' + mY2 + ')',
  106. fn: function fn(aX) {
  107. return calcBezier(getTForX(aX), mY1, mY2);
  108. }
  109. };
  110. };
  111. var EASING = {
  112. ease: easingBezier(0.25, 0.1, 0.25, 1.0),
  113. linear: easingBezier(0.0, 0.0, 1.0, 1.0),
  114. 'ease-in': easingBezier(0.42, 0.0, 1.0, 1.0),
  115. 'ease-out': easingBezier(0.0, 0.0, 0.58, 1.0),
  116. 'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0)
  117. };
  118. if (!Date.now) {
  119. Date.now = function() {
  120. return new Date().getTime();
  121. };
  122. }
  123. var vendors = ['webkit', 'moz'];
  124. for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
  125. var vp = vendors[i];
  126. window.requestAnimationFrame = window[vp + 'RequestAnimationFrame'];
  127. window.cancelAnimationFrame =
  128. window[vp + 'CancelAnimationFrame'] ||
  129. window[vp + 'CancelRequestAnimationFrame'];
  130. }
  131. if (
  132. /iP(ad|hone|od).*OS (6|7)/.test(window.navigator.userAgent) || // iOS6 is buggy
  133. !window.requestAnimationFrame ||
  134. !window.cancelAnimationFrame
  135. ) {
  136. var lastTime = 0;
  137. window.requestAnimationFrame = function(callback) {
  138. var now = Date.now();
  139. var nextTime = Math.max(lastTime + 16, now);
  140. return setTimeout(function() {
  141. callback((lastTime = nextTime));
  142. }, nextTime - now);
  143. };
  144. window.cancelAnimationFrame = clearTimeout;
  145. }
  146. function isPercentage(n) {
  147. return typeof n === 'string' && n.includes('%');
  148. }
  149. function getTime() {
  150. if (typeof window.performance !== 'undefined' && window.performance.now) {
  151. return window.performance.now();
  152. }
  153. return Date.now();
  154. }
  155. var NAMESPACE$1 = 'asProgress';
  156. /**
  157. * Plugin constructor
  158. **/
  159. var asProgress = (function() {
  160. function asProgress(element, options) {
  161. _classCallCheck(this, asProgress);
  162. this.element = element;
  163. this.$element = (0, _jquery2.default)(element);
  164. this.options = _jquery2.default.extend(
  165. {},
  166. DEFAULTS,
  167. options,
  168. this.$element.data()
  169. );
  170. if (this.options.bootstrap) {
  171. this.namespace = 'progress';
  172. this.$target = this.$element.find('.progress-bar');
  173. this.classes = {
  174. label: this.namespace + '-label',
  175. bar: this.namespace + '-bar',
  176. disabled: 'is-disabled'
  177. };
  178. } else {
  179. this.namespace = this.options.namespace;
  180. this.classes = {
  181. label: this.namespace + '__label',
  182. bar: this.namespace + '__bar',
  183. disabled: 'is-disabled'
  184. };
  185. this.$target = this.$element;
  186. this.$element.addClass(this.namespace);
  187. }
  188. this.easing = EASING[this.options.easing] || EASING.ease;
  189. this.min = this.$target.attr('aria-valuemin');
  190. this.max = this.$target.attr('aria-valuemax');
  191. this.min = this.min ? parseInt(this.min, 10) : this.options.min;
  192. this.max = this.max ? parseInt(this.max, 10) : this.options.max;
  193. this.first = this.$target.attr('aria-valuenow');
  194. this.first = this.first ? parseInt(this.first, 10) : this.min;
  195. this.now = this.first;
  196. this.goal = this.options.goal;
  197. this._frameId = null;
  198. // Current state information.
  199. this._states = {};
  200. this.initialized = false;
  201. this._trigger('init');
  202. this.init();
  203. }
  204. _createClass(
  205. asProgress,
  206. [
  207. {
  208. key: 'init',
  209. value: function init() {
  210. this.$bar = this.$element.find('.' + this.classes.bar);
  211. this.$label = this.$element.find('.' + this.classes.label);
  212. this.reset();
  213. this.initialized = true;
  214. this._trigger('ready');
  215. }
  216. },
  217. {
  218. key: '_trigger',
  219. value: function _trigger(eventType) {
  220. for (
  221. var _len = arguments.length,
  222. params = Array(_len > 1 ? _len - 1 : 0),
  223. _key = 1;
  224. _key < _len;
  225. _key++
  226. ) {
  227. params[_key - 1] = arguments[_key];
  228. }
  229. var data = [this].concat(params);
  230. // event
  231. this.$element.trigger(NAMESPACE$1 + '::' + eventType, data);
  232. // callback
  233. eventType = eventType.replace(/\b\w+\b/g, function(word) {
  234. return word.substring(0, 1).toUpperCase() + word.substring(1);
  235. });
  236. var onFunction = 'on' + eventType;
  237. if (typeof this.options[onFunction] === 'function') {
  238. this.options[onFunction].apply(this, params);
  239. }
  240. }
  241. },
  242. {
  243. key: 'is',
  244. value: function is(state) {
  245. return this._states[state] && this._states[state] > 0;
  246. }
  247. },
  248. {
  249. key: 'getPercentage',
  250. value: function getPercentage(n) {
  251. return Math.round(100 * (n - this.min) / (this.max - this.min));
  252. }
  253. },
  254. {
  255. key: 'go',
  256. value: function go(goal) {
  257. if (!this.is('disabled')) {
  258. var that = this;
  259. this._clear();
  260. if (isPercentage(goal)) {
  261. goal = parseInt(goal.replace('%', ''), 10);
  262. goal = Math.round(
  263. this.min + goal / 100 * (this.max - this.min)
  264. );
  265. }
  266. if (typeof goal === 'undefined') {
  267. goal = this.goal;
  268. }
  269. if (goal > this.max) {
  270. goal = this.max;
  271. } else if (goal < this.min) {
  272. goal = this.min;
  273. }
  274. var start = that.now;
  275. var startTime = getTime();
  276. var animation = function animation(time) {
  277. var distance = (time - startTime) / that.options.speed;
  278. var next = Math.round(
  279. that.easing.fn(distance / 100) * (that.max - that.min)
  280. );
  281. if (goal > start) {
  282. next = start + next;
  283. if (next > goal) {
  284. next = goal;
  285. }
  286. } else {
  287. next = start - next;
  288. if (next < goal) {
  289. next = goal;
  290. }
  291. }
  292. that._update(next);
  293. if (next === goal) {
  294. window.cancelAnimationFrame(that._frameId);
  295. that._frameId = null;
  296. if (that.now === that.goal) {
  297. that._trigger('finish');
  298. }
  299. } else {
  300. that._frameId = window.requestAnimationFrame(animation);
  301. }
  302. };
  303. that._frameId = window.requestAnimationFrame(animation);
  304. }
  305. }
  306. },
  307. {
  308. key: '_update',
  309. value: function _update(n) {
  310. this.now = n;
  311. var percenage = this.getPercentage(this.now);
  312. this.$bar.css('width', percenage + '%');
  313. this.$target.attr('aria-valuenow', this.now);
  314. if (
  315. this.$label.length > 0 &&
  316. typeof this.options.labelCallback === 'function'
  317. ) {
  318. this.$label.html(
  319. this.options.labelCallback.call(this, [this.now])
  320. );
  321. }
  322. this._trigger('update', n);
  323. }
  324. },
  325. {
  326. key: '_clear',
  327. value: function _clear() {
  328. if (this._frameId) {
  329. window.cancelAnimationFrame(this._frameId);
  330. this._frameId = null;
  331. }
  332. }
  333. },
  334. {
  335. key: 'get',
  336. value: function get() {
  337. return this.now;
  338. }
  339. },
  340. {
  341. key: 'start',
  342. value: function start() {
  343. if (!this.is('disabled')) {
  344. this._clear();
  345. this._trigger('start');
  346. this.go(this.goal);
  347. }
  348. }
  349. },
  350. {
  351. key: 'reset',
  352. value: function reset() {
  353. if (!this.is('disabled')) {
  354. this._clear();
  355. this._update(this.first);
  356. this._trigger('reset');
  357. }
  358. }
  359. },
  360. {
  361. key: 'stop',
  362. value: function stop() {
  363. this._clear();
  364. this._trigger('stop');
  365. }
  366. },
  367. {
  368. key: 'finish',
  369. value: function finish() {
  370. if (!this.is('disabled')) {
  371. this._clear();
  372. this._update(this.goal);
  373. this._trigger('finish');
  374. }
  375. }
  376. },
  377. {
  378. key: 'destroy',
  379. value: function destroy() {
  380. this.$element.data(NAMESPACE$1, null);
  381. this._trigger('destroy');
  382. }
  383. },
  384. {
  385. key: 'enable',
  386. value: function enable() {
  387. this._states.disabled = 0;
  388. this.$element.removeClass(this.classes.disabled);
  389. }
  390. },
  391. {
  392. key: 'disable',
  393. value: function disable() {
  394. this._states.disabled = 1;
  395. this.$element.addClass(this.classes.disabled);
  396. }
  397. }
  398. ],
  399. [
  400. {
  401. key: 'registerEasing',
  402. value: function registerEasing(name) {
  403. for (
  404. var _len2 = arguments.length,
  405. args = Array(_len2 > 1 ? _len2 - 1 : 0),
  406. _key2 = 1;
  407. _key2 < _len2;
  408. _key2++
  409. ) {
  410. args[_key2 - 1] = arguments[_key2];
  411. }
  412. EASING[name] = easingBezier.apply(undefined, args);
  413. }
  414. },
  415. {
  416. key: 'getEasing',
  417. value: function getEasing(name) {
  418. return EASING[name];
  419. }
  420. },
  421. {
  422. key: 'setDefaults',
  423. value: function setDefaults(options) {
  424. _jquery2.default.extend(
  425. DEFAULTS,
  426. _jquery2.default.isPlainObject(options) && options
  427. );
  428. }
  429. }
  430. ]
  431. );
  432. return asProgress;
  433. })();
  434. var info = {
  435. version: '0.2.4'
  436. };
  437. var NAMESPACE = 'asProgress';
  438. var OtherAsProgress = _jquery2.default.fn.asProgress;
  439. var jQueryAsProgress = function jQueryAsProgress(options) {
  440. for (
  441. var _len3 = arguments.length,
  442. args = Array(_len3 > 1 ? _len3 - 1 : 0),
  443. _key3 = 1;
  444. _key3 < _len3;
  445. _key3++
  446. ) {
  447. args[_key3 - 1] = arguments[_key3];
  448. }
  449. if (typeof options === 'string') {
  450. var method = options;
  451. if (/^_/.test(method)) {
  452. return false;
  453. } else if (/^(get)/.test(method)) {
  454. var instance = this.first().data(NAMESPACE);
  455. if (instance && typeof instance[method] === 'function') {
  456. return instance[method].apply(instance, args);
  457. }
  458. } else {
  459. return this.each(function() {
  460. var instance = _jquery2.default.data(this, NAMESPACE);
  461. if (instance && typeof instance[method] === 'function') {
  462. instance[method].apply(instance, args);
  463. }
  464. });
  465. }
  466. }
  467. return this.each(function() {
  468. if (!(0, _jquery2.default)(this).data(NAMESPACE)) {
  469. (0, _jquery2.default)(this).data(
  470. NAMESPACE,
  471. new asProgress(this, options)
  472. );
  473. }
  474. });
  475. };
  476. _jquery2.default.fn.asProgress = jQueryAsProgress;
  477. _jquery2.default.asProgress = _jquery2.default.extend(
  478. {
  479. setDefaults: asProgress.setDefaults,
  480. registerEasing: asProgress.registerEasing,
  481. getEasing: asProgress.getEasing,
  482. noConflict: function noConflict() {
  483. _jquery2.default.fn.asProgress = OtherAsProgress;
  484. return jQueryAsProgress;
  485. }
  486. },
  487. info
  488. );
  489. });