jquery-asPieProgress
Advanced tools
Comparing version 0.3.4 to 0.4.0
/** | ||
* jQuery asPieProgress | ||
* A jQuery plugin that animate the progress bar | ||
* Compiled: Fri Sep 02 2016 14:07:00 GMT+0800 (CST) | ||
* @version v0.3.4 | ||
* @link https://github.com/amazingSurge/jquery-asPieProgress | ||
* @copyright LGPL-3.0 | ||
* jQuery asPieProgress v0.4.0 | ||
* https://github.com/amazingSurge/jquery-asPieProgress | ||
* | ||
* Copyright (c) amazingSurge | ||
* Released under the LGPL-3.0 license | ||
*/ | ||
import $ from 'jQuery'; | ||
import $ from 'jquery'; | ||
var getTime = () => { | ||
const SvgElement = (tag, attrs) => { | ||
'use strict'; | ||
const elem = document.createElementNS('http://www.w3.org/2000/svg', tag); | ||
if (!attrs) { | ||
return elem; | ||
} | ||
for (let key in attrs) { | ||
if (!Object.hasOwnProperty.call(attrs, key)) { | ||
continue; | ||
} | ||
elem.setAttribute(key, attrs[key]); | ||
} | ||
return elem; | ||
}; | ||
if (!Date.now) { | ||
Date.now = () => { | ||
'use strict'; | ||
return new Date().getTime(); | ||
} | ||
} | ||
const vendors = ['webkit', 'moz']; | ||
for (let i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { | ||
const vp = vendors[i]; | ||
window.requestAnimationFrame = window[`${vp}RequestAnimationFrame`]; | ||
window.cancelAnimationFrame = (window[`${vp}CancelAnimationFrame`] || window[`${vp}CancelRequestAnimationFrame`]); | ||
} | ||
if (/iP(ad|hone|od).*OS (6|7)/.test(window.navigator.userAgent) // iOS6 is buggy | ||
|| | ||
!window.requestAnimationFrame || !window.cancelAnimationFrame) { | ||
let lastTime = 0; | ||
window.requestAnimationFrame = callback => { | ||
'use strict'; | ||
const now = getTime(); | ||
const nextTime = Math.max(lastTime + 16, now); | ||
return setTimeout(() => { | ||
callback(lastTime = nextTime); | ||
}, | ||
nextTime - now); | ||
}; | ||
window.cancelAnimationFrame = clearTimeout; | ||
} | ||
const getTime = () => { | ||
if (typeof window.performance !== 'undefined' && window.performance.now) { | ||
@@ -19,56 +65,48 @@ return window.performance.now(); | ||
const SvgElement = (tag, attrs) => { | ||
const isPercentage = (n) => { | ||
'use strict'; | ||
const elem = document.createElementNS('http://www.w3.org/2000/svg', tag); | ||
$.each(attrs, (name, value) => { | ||
elem.setAttribute(name, value); | ||
}); | ||
return elem; | ||
}; | ||
var isPercentage = n => { | ||
'use strict'; | ||
return typeof n === 'string' && n.indexOf('%') !== -1; | ||
}; | ||
const svgSupported = 'createElementNS' in document && new SvgElement('svg', {}).createSVGRect; | ||
const easingBezier = (mX1, mY1, mX2, mY2) => { | ||
'use strict'; | ||
function A(aA1, aA2) { | ||
let a = (aA1, aA2) => { | ||
return 1.0 - 3.0 * aA2 + 3.0 * aA1; | ||
} | ||
}; | ||
function B(aA1, aA2) { | ||
let b = (aA1, aA2) => { | ||
return 3.0 * aA2 - 6.0 * aA1; | ||
} | ||
}; | ||
function C(aA1) { | ||
let c = (aA1) => { | ||
return 3.0 * aA1; | ||
} | ||
}; | ||
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. | ||
function CalcBezier(aT, aA1, aA2) { | ||
return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; | ||
} | ||
let calcBezier = (aT, aA1, aA2) => { | ||
return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT; | ||
}; | ||
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. | ||
function GetSlope(aT, aA1, aA2) { | ||
return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); | ||
} | ||
let getSlope = (aT, aA1, aA2) => { | ||
return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1); | ||
}; | ||
function GetTForX(aX) { | ||
let getTForX = (aX) => { | ||
// Newton raphson iteration | ||
let aGuessT = aX; | ||
for (let i = 0; i < 4; ++i) { | ||
const currentSlope = GetSlope(aGuessT, mX1, mX2); | ||
let currentSlope = getSlope(aGuessT, mX1, mX2); | ||
if (currentSlope === 0.0) { | ||
return aGuessT; | ||
} | ||
const currentX = CalcBezier(aGuessT, mX1, mX2) - aX; | ||
let currentX = calcBezier(aGuessT, mX1, mX2) - aX; | ||
aGuessT -= currentX / currentSlope; | ||
} | ||
return aGuessT; | ||
} | ||
}; | ||
@@ -83,6 +121,7 @@ if (mX1 === mY1 && mX2 === mY2) { | ||
} | ||
return { | ||
css: `cubic-bezier(${mX1},${mY1},${mX2},${mY2})`, | ||
fn(aX) { | ||
return CalcBezier(GetTForX(aX), mY1, mY2); | ||
return calcBezier(getTForX(aX), mY1, mY2); | ||
} | ||
@@ -92,3 +131,11 @@ }; | ||
var defaults = { | ||
var EASING = { | ||
ease: easingBezier(0.25, 0.1, 0.25, 1.0), | ||
linear: easingBezier(0.00, 0.0, 1.00, 1.0), | ||
'ease-in': easingBezier(0.42, 0.0, 1.00, 1.0), | ||
'ease-out': easingBezier(0.00, 0.0, 0.58, 1.0), | ||
'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0) | ||
}; | ||
var DEFAULTS = { | ||
namespace: '', | ||
@@ -119,44 +166,4 @@ classes: { | ||
/* | ||
* jquery-asPieProgress | ||
* https://github.com/amazingSurge/jquery-asPieProgress | ||
* | ||
* Copyright (c) 2015 amazingSurge | ||
* Licensed under the GPL license. | ||
*/ | ||
if (!Date.now) { | ||
Date.now = () => { | ||
'use strict'; | ||
return new Date().getTime(); | ||
} | ||
} | ||
const NAME$1 = 'asPieProgress'; | ||
const vendors = ['webkit', 'moz']; | ||
for (let i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { | ||
const vp = vendors[i]; | ||
window.requestAnimationFrame = window[`${vp}RequestAnimationFrame`]; | ||
window.cancelAnimationFrame = (window[`${vp}CancelAnimationFrame`] || window[`${vp}CancelRequestAnimationFrame`]); | ||
} | ||
if (/iP(ad|hone|od).*OS (6|7)/.test(window.navigator.userAgent) // iOS6 is buggy | ||
|| | ||
!window.requestAnimationFrame || !window.cancelAnimationFrame) { | ||
let lastTime = 0; | ||
window.requestAnimationFrame = callback => { | ||
'use strict'; | ||
const now = getTime(); | ||
const nextTime = Math.max(lastTime + 16, now); | ||
return setTimeout(() => { | ||
callback(lastTime = nextTime); | ||
}, | ||
nextTime - now); | ||
}; | ||
window.cancelAnimationFrame = clearTimeout; | ||
} | ||
const svgSupported = 'createElementNS' in document && new SvgElement('svg', {}).createSVGRect; | ||
const pluginName = 'asPieProgress'; | ||
defaults.namespace = pluginName; | ||
class asPieProgress { | ||
@@ -167,7 +174,7 @@ constructor(element, options) { | ||
this.options = $.extend({}, defaults, options, this.$element.data()); | ||
this.options = $.extend({}, DEFAULTS, {namespace: NAME$1}, options, this.$element.data()); | ||
this.namespace = this.options.namespace; | ||
this.classes = this.options.classes; | ||
this.easing = asPieProgress.easing[this.options.easing] || asPieProgress.easing.ease; | ||
this.easing = EASING[this.options.easing] || EASING.ease; | ||
this.$element.addClass(this.classes.element); | ||
@@ -205,2 +212,3 @@ | ||
} | ||
prepare() { | ||
@@ -222,2 +230,3 @@ if (!svgSupported) { | ||
} | ||
buildTrack() { | ||
@@ -244,2 +253,3 @@ const height = this.size, | ||
} | ||
buildBar() { | ||
@@ -261,2 +271,3 @@ if (!svgSupported) { | ||
} | ||
_drawBar(n) { | ||
@@ -303,2 +314,3 @@ if (!svgSupported) { | ||
} | ||
_updateBar() { | ||
@@ -316,21 +328,24 @@ if (!svgSupported) { | ||
} | ||
_trigger(eventType, ...args) { | ||
const data = [this].concat(args); | ||
const data = [this].concat(args); | ||
// event | ||
this.$element.trigger(`${pluginName}::${eventType}`, data); | ||
// event | ||
this.$element.trigger(`${NAME$1}::${eventType}`, data); | ||
// callback | ||
eventType = eventType.replace(/\b\w+\b/g, word => word.substring(0, 1).toUpperCase() + word.substring(1)); | ||
const onFunction = `on${eventType}`; | ||
if (typeof this.options[onFunction] === 'function') { | ||
this.options[onFunction](args); | ||
} | ||
// callback | ||
eventType = eventType.replace(/\b\w+\b/g, word => word.substring(0, 1).toUpperCase() + word.substring(1)); | ||
const onFunction = `on${eventType}`; | ||
if (typeof this.options[onFunction] === 'function') { | ||
this.options[onFunction](args); | ||
} | ||
// Return the percentage based on the current step | ||
} | ||
// Return the percentage based on the current step | ||
getPercentage(n) { | ||
return 100 * (n - this.min) / (this.max - this.min); | ||
} | ||
go(goal) { | ||
const self = this; | ||
const that = this; | ||
this._clear(); | ||
@@ -356,5 +371,5 @@ | ||
const start = self.now; | ||
const start = that.now; | ||
const startTime = getTime(); | ||
const endTime = startTime + Math.abs(start - goal) * 100 * self.options.speed / (self.max - self.min); | ||
const endTime = startTime + Math.abs(start - goal) * 100 * that.options.speed / (that.max - that.min); | ||
@@ -367,4 +382,4 @@ const animation = time => { | ||
} else { | ||
const distance = (time - startTime) / self.options.speed; | ||
next = Math.round(self.easing.fn(distance / 100) * (self.max - self.min)); | ||
const distance = (time - startTime) / that.options.speed; | ||
next = Math.round(that.easing.fn(distance / 100) * (that.max - that.min)); | ||
@@ -384,17 +399,18 @@ if (goal > start) { | ||
self._update(next); | ||
that._update(next); | ||
if (next === goal) { | ||
window.cancelAnimationFrame(self._frameId); | ||
self._frameId = null; | ||
window.cancelAnimationFrame(that._frameId); | ||
that._frameId = null; | ||
if (self.now === self.goal) { | ||
self._trigger('finish'); | ||
if (that.now === that.goal) { | ||
that._trigger('finish'); | ||
} | ||
} else { | ||
self._frameId = window.requestAnimationFrame(animation); | ||
that._frameId = window.requestAnimationFrame(animation); | ||
} | ||
}; | ||
self._frameId = window.requestAnimationFrame(animation); | ||
that._frameId = window.requestAnimationFrame(animation); | ||
} | ||
_update(n) { | ||
@@ -415,2 +431,3 @@ this.now = n; | ||
} | ||
_clear() { | ||
@@ -422,5 +439,7 @@ if (this._frameId) { | ||
} | ||
get() { | ||
return this.now; | ||
} | ||
start() { | ||
@@ -431,2 +450,3 @@ this._clear(); | ||
} | ||
reset() { | ||
@@ -438,2 +458,3 @@ this._clear(); | ||
} | ||
stop() { | ||
@@ -443,2 +464,3 @@ this._clear(); | ||
} | ||
finish() { | ||
@@ -449,51 +471,64 @@ this._clear(); | ||
} | ||
destory() { | ||
this.$element.data(pluginName, null); | ||
this.$element.data(NAME$1, null); | ||
this._trigger('destory'); | ||
} | ||
static _jQueryInterface(options, ...args) { | ||
if (typeof options === 'string') { | ||
const method = options; | ||
static registerEasing(name, ...args) { | ||
EASING[name] = easingBezier(...args); | ||
} | ||
if (/^\_/.test(method)) { | ||
return false; | ||
} else if ((/^(get)$/.test(method))) { | ||
const api = this.first().data(pluginName); | ||
if (api && typeof api[method] === 'function') { | ||
return api[method](...args); | ||
static getEasing(name) { | ||
return EASING[name]; | ||
} | ||
static setDefaults(options) { | ||
$.extend(DEFAULTS, $.isPlainObject(options) && options); | ||
} | ||
} | ||
var info = { | ||
version:'0.4.0' | ||
}; | ||
const NAME = 'asPieProgress'; | ||
const OtherAsPieProgress = $.fn.asPieProgress; | ||
$.fn.asPieProgress = function jQueryAsPieProgress(options, ...args) { | ||
if (typeof options === 'string') { | ||
let method = options; | ||
if (/^_/.test(method)) { | ||
return false; | ||
} else if ((/^(get)/.test(method))) { | ||
let instance = this.first().data(NAME); | ||
if (instance && typeof instance[method] === 'function') { | ||
return instance[method](...args); | ||
} | ||
} else { | ||
return this.each(function() { | ||
let instance = $.data(this, NAME); | ||
if (instance && typeof instance[method] === 'function') { | ||
instance[method](...args); | ||
} | ||
} else { | ||
return this.each(function() { | ||
const api = $.data(this, pluginName); | ||
if (api && typeof api[method] === 'function') { | ||
api[method](...args); | ||
} | ||
}); | ||
} | ||
}); | ||
} | ||
return this.each(function() { | ||
if (!$.data(this, pluginName)) { | ||
$.data(this, pluginName, new asPieProgress(this, options)); | ||
} | ||
}); | ||
} | ||
} | ||
$.extend(asPieProgress.easing = {}, { | ||
ease: easingBezier(0.25, 0.1, 0.25, 1.0), | ||
linear: easingBezier(0.00, 0.0, 1.00, 1.0), | ||
'ease-in': easingBezier(0.42, 0.0, 1.00, 1.0), | ||
'ease-out': easingBezier(0.00, 0.0, 0.58, 1.0), | ||
'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0) | ||
}); | ||
$.fn[pluginName] = asPieProgress._jQueryInterface; | ||
$.fn[pluginName].constructor = asPieProgress; | ||
$.fn[pluginName].noConflict = () => { | ||
'use strict'; | ||
$.fn[pluginName] = window.JQUERY_NO_CONFLICT; | ||
return asPieProgress._jQueryInterface; | ||
return this.each(function() { | ||
if (!$(this).data(NAME)) { | ||
$(this).data(NAME, new asPieProgress(this, options)); | ||
} | ||
}); | ||
}; | ||
export default asPieProgress; | ||
$.asPieProgress = $.extend({ | ||
setDefaults: asPieProgress.setDefaults, | ||
registerEasing: asPieProgress.registerEasing, | ||
getEasing: asPieProgress.getEasing, | ||
noConflict: function() { | ||
$.fn.asPieProgress = OtherAsPieProgress; | ||
return this; | ||
} | ||
}, info); |
/** | ||
* jQuery asPieProgress | ||
* A jQuery plugin that animate the progress bar | ||
* Compiled: Fri Sep 02 2016 14:07:00 GMT+0800 (CST) | ||
* @version v0.3.4 | ||
* @link https://github.com/amazingSurge/jquery-asPieProgress | ||
* @copyright LGPL-3.0 | ||
* jQuery asPieProgress v0.4.0 | ||
* https://github.com/amazingSurge/jquery-asPieProgress | ||
* | ||
* Copyright (c) amazingSurge | ||
* Released under the LGPL-3.0 license | ||
*/ | ||
(function(global, factory) { | ||
if (typeof define === "function" && define.amd) { | ||
define(['exports', 'jQuery'], factory); | ||
define(['jquery'], factory); | ||
} else if (typeof exports !== "undefined") { | ||
factory(exports, require('jQuery')); | ||
factory(require('jquery')); | ||
} else { | ||
@@ -18,16 +17,12 @@ var mod = { | ||
}; | ||
factory(mod.exports, global.jQuery); | ||
global.jqueryAsPieProgress = mod.exports; | ||
factory(global.jQuery); | ||
global.jqueryAsPieProgressEs = mod.exports; | ||
} | ||
})(this, | ||
function(exports, _jQuery) { | ||
function(_jquery) { | ||
'use strict'; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
var _jquery2 = _interopRequireDefault(_jquery); | ||
var _jQuery2 = _interopRequireDefault(_jQuery); | ||
function _interopRequireDefault(obj) { | ||
@@ -80,26 +75,70 @@ return obj && obj.__esModule ? obj : { | ||
var getTime = function getTime() { | ||
var SvgElement = function SvgElement(tag, attrs) { | ||
'use strict'; | ||
if (typeof window.performance !== 'undefined' && window.performance.now) { | ||
var elem = document.createElementNS('http://www.w3.org/2000/svg', tag); | ||
return window.performance.now(); | ||
if (!attrs) { | ||
return elem; | ||
} | ||
return Date.now(); | ||
for (var key in attrs) { | ||
if (!Object.hasOwnProperty.call(attrs, key)) { | ||
continue; | ||
} | ||
elem.setAttribute(key, attrs[key]); | ||
} | ||
return elem; | ||
}; | ||
var SvgElement = function SvgElement(tag, attrs) { | ||
'use strict'; | ||
if (!Date.now) { | ||
Date.now = function() { | ||
'use strict'; | ||
var elem = document.createElementNS('http://www.w3.org/2000/svg', tag); | ||
return new Date().getTime(); | ||
} | ||
; | ||
} | ||
_jQuery2.default.each(attrs, | ||
var vendors = ['webkit', 'moz']; | ||
function(name, value) { | ||
elem.setAttribute(name, value); | ||
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { | ||
var vp = vendors[i]; | ||
window.requestAnimationFrame = window[vp + 'RequestAnimationFrame']; | ||
window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame']; | ||
} | ||
if (/iP(ad|hone|od).*OS (6|7)/.test(window.navigator.userAgent) // iOS6 is buggy | ||
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) { | ||
(function() { | ||
var lastTime = 0; | ||
window.requestAnimationFrame = function(callback) { | ||
'use strict'; | ||
var now = getTime(); | ||
var nextTime = Math.max(lastTime + 16, now); | ||
return setTimeout( | ||
function() { | ||
callback(lastTime = nextTime); | ||
} | ||
, nextTime - now); | ||
} | ||
); | ||
; | ||
window.cancelAnimationFrame = clearTimeout; | ||
})(); | ||
} | ||
return elem; | ||
var getTime = function getTime() { | ||
if (typeof window.performance !== 'undefined' && window.performance.now) { | ||
return window.performance.now(); | ||
} | ||
return Date.now(); | ||
}; | ||
@@ -113,35 +152,35 @@ | ||
var svgSupported = 'createElementNS' in document && new SvgElement('svg', {}).createSVGRect; | ||
var easingBezier = function easingBezier(mX1, mY1, mX2, mY2) { | ||
'use strict'; | ||
function A(aA1, aA2) { | ||
var a = function a(aA1, aA2) { | ||
return 1.0 - 3.0 * aA2 + 3.0 * aA1; | ||
} | ||
}; | ||
function B(aA1, aA2) { | ||
var b = function b(aA1, aA2) { | ||
return 3.0 * aA2 - 6.0 * aA1; | ||
} | ||
}; | ||
function C(aA1) { | ||
var c = function c(aA1) { | ||
return 3.0 * aA1; | ||
} | ||
}; | ||
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. | ||
var calcBezier = function calcBezier(aT, aA1, aA2) { | ||
return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT; | ||
}; | ||
function CalcBezier(aT, aA1, aA2) { | ||
return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; | ||
} | ||
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. | ||
var getSlope = function getSlope(aT, aA1, aA2) { | ||
return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1); | ||
}; | ||
function GetSlope(aT, aA1, aA2) { | ||
return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); | ||
} | ||
function GetTForX(aX) { | ||
var getTForX = function getTForX(aX) { | ||
// Newton raphson iteration | ||
var aGuessT = aX; | ||
for (var i = 0; i < 4; ++i) { | ||
var currentSlope = GetSlope(aGuessT, mX1, mX2); | ||
for (var _i = 0; _i < 4; ++_i) { | ||
var currentSlope = getSlope(aGuessT, mX1, mX2); | ||
@@ -152,3 +191,3 @@ if (currentSlope === 0.0) { | ||
} | ||
var currentX = CalcBezier(aGuessT, mX1, mX2) - aX; | ||
var currentX = calcBezier(aGuessT, mX1, mX2) - aX; | ||
aGuessT -= currentX / currentSlope; | ||
@@ -158,3 +197,3 @@ } | ||
return aGuessT; | ||
} | ||
}; | ||
@@ -174,3 +213,3 @@ if (mX1 === mY1 && mX2 === mY2) { | ||
fn: function fn(aX) { | ||
return CalcBezier(GetTForX(aX), mY1, mY2); | ||
return calcBezier(getTForX(aX), mY1, mY2); | ||
} | ||
@@ -180,3 +219,11 @@ }; | ||
var defaults = { | ||
var EASING = { | ||
ease: easingBezier(0.25, 0.1, 0.25, 1.0), | ||
linear: easingBezier(0.00, 0.0, 1.00, 1.0), | ||
'ease-in': easingBezier(0.42, 0.0, 1.00, 1.0), | ||
'ease-out': easingBezier(0.00, 0.0, 0.58, 1.0), | ||
'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0) | ||
}; | ||
var DEFAULTS = { | ||
namespace: '', | ||
@@ -210,55 +257,4 @@ classes: { | ||
/* | ||
* jquery-asPieProgress | ||
* https://github.com/amazingSurge/jquery-asPieProgress | ||
* | ||
* Copyright (c) 2015 amazingSurge | ||
* Licensed under the GPL license. | ||
*/ | ||
var NAME$1 = 'asPieProgress'; | ||
if (!Date.now) { | ||
Date.now = function() { | ||
'use strict'; | ||
return new Date().getTime(); | ||
} | ||
; | ||
} | ||
var vendors = ['webkit', 'moz']; | ||
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { | ||
var vp = vendors[i]; | ||
window.requestAnimationFrame = window[vp + 'RequestAnimationFrame']; | ||
window.cancelAnimationFrame = window[vp + 'CancelAnimationFrame'] || window[vp + 'CancelRequestAnimationFrame']; | ||
} | ||
if (/iP(ad|hone|od).*OS (6|7)/.test(window.navigator.userAgent) // iOS6 is buggy | ||
|| !window.requestAnimationFrame || !window.cancelAnimationFrame) { | ||
(function() { | ||
var lastTime = 0; | ||
window.requestAnimationFrame = function(callback) { | ||
'use strict'; | ||
var now = getTime(); | ||
var nextTime = Math.max(lastTime + 16, now); | ||
return setTimeout( | ||
function() { | ||
callback(lastTime = nextTime); | ||
} | ||
, nextTime - now); | ||
} | ||
; | ||
window.cancelAnimationFrame = clearTimeout; | ||
})(); | ||
} | ||
var svgSupported = 'createElementNS' in document && new SvgElement('svg', {}).createSVGRect; | ||
var pluginName = 'asPieProgress'; | ||
defaults.namespace = pluginName; | ||
var asPieProgress = function() { | ||
@@ -269,9 +265,11 @@ function asPieProgress(element, options) { | ||
this.element = element; | ||
this.$element = (0, _jQuery2.default)(element); | ||
this.$element = (0, _jquery2.default)(element); | ||
this.options = _jQuery2.default.extend({}, defaults, options, this.$element.data()); | ||
this.options = _jquery2.default.extend({}, DEFAULTS, { | ||
namespace: NAME$1 | ||
}, options, this.$element.data()); | ||
this.namespace = this.options.namespace; | ||
this.classes = this.options.classes; | ||
this.easing = asPieProgress.easing[this.options.easing] || asPieProgress.easing.ease; | ||
this.easing = EASING[this.options.easing] || EASING.ease; | ||
this.$element.addClass(this.classes.element); | ||
@@ -328,3 +326,3 @@ | ||
(0, _jQuery2.default)('<div class="' + this.classes.svg + '"></div>').append(this.svg).appendTo(this.$element); | ||
(0, _jquery2.default)('<div class="' + this.classes.svg + '"></div>').append(this.svg).appendTo(this.$element); | ||
} | ||
@@ -443,3 +441,3 @@ }, { | ||
// event | ||
this.$element.trigger(pluginName + '::' + eventType, data); | ||
this.$element.trigger(NAME$1 + '::' + eventType, data); | ||
@@ -467,3 +465,3 @@ // callback | ||
value: function go(goal) { | ||
var self = this; | ||
var that = this; | ||
this._clear(); | ||
@@ -490,5 +488,5 @@ | ||
var start = self.now; | ||
var start = that.now; | ||
var startTime = getTime(); | ||
var endTime = startTime + Math.abs(start - goal) * 100 * self.options.speed / (self.max - self.min); | ||
var endTime = startTime + Math.abs(start - goal) * 100 * that.options.speed / (that.max - that.min); | ||
@@ -501,4 +499,4 @@ var animation = function animation(time) { | ||
} else { | ||
var distance = (time - startTime) / self.options.speed; | ||
next = Math.round(self.easing.fn(distance / 100) * (self.max - self.min)); | ||
var distance = (time - startTime) / that.options.speed; | ||
next = Math.round(that.easing.fn(distance / 100) * (that.max - that.min)); | ||
@@ -520,17 +518,17 @@ if (goal > start) { | ||
self._update(next); | ||
that._update(next); | ||
if (next === goal) { | ||
window.cancelAnimationFrame(self._frameId); | ||
self._frameId = null; | ||
window.cancelAnimationFrame(that._frameId); | ||
that._frameId = null; | ||
if (self.now === self.goal) { | ||
self._trigger('finish'); | ||
if (that.now === that.goal) { | ||
that._trigger('finish'); | ||
} | ||
} else { | ||
self._frameId = window.requestAnimationFrame(animation); | ||
that._frameId = window.requestAnimationFrame(animation); | ||
} | ||
}; | ||
self._frameId = window.requestAnimationFrame(animation); | ||
that._frameId = window.requestAnimationFrame(animation); | ||
} | ||
@@ -600,10 +598,8 @@ }, { | ||
value: function destory() { | ||
this.$element.data(pluginName, null); | ||
this.$element.data(NAME$1, null); | ||
this._trigger('destory'); | ||
} | ||
}], [{ | ||
key: '_jQueryInterface', | ||
value: function _jQueryInterface(options) { | ||
var _this = this; | ||
key: 'registerEasing', | ||
value: function registerEasing(name) { | ||
for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { | ||
@@ -613,77 +609,95 @@ args[_key2 - 1] = arguments[_key2]; | ||
if (typeof options === 'string') { | ||
var _ret2 = function() { | ||
var method = options; | ||
EASING[name] = easingBezier.apply(undefined, args); | ||
} | ||
}, { | ||
key: 'getEasing', | ||
value: function getEasing(name) { | ||
return EASING[name]; | ||
} | ||
}, { | ||
key: 'setDefaults', | ||
value: function setDefaults(options) { | ||
_jquery2.default.extend(DEFAULTS, _jquery2.default.isPlainObject(options) && options); | ||
} | ||
}]); | ||
if (/^\_/.test(method)) { | ||
return asPieProgress; | ||
}(); | ||
return { | ||
v: false | ||
}; | ||
} else if (/^(get)$/.test(method)) { | ||
var api = _this.first().data(pluginName); | ||
var info = { | ||
version: '0.4.0' | ||
}; | ||
if (api && typeof api[method] === 'function') { | ||
var NAME = 'asPieProgress'; | ||
var OtherAsPieProgress = _jquery2.default.fn.asPieProgress; | ||
return { | ||
v: api[method].apply(api, args) | ||
}; | ||
} | ||
} else { | ||
_jquery2.default.fn.asPieProgress = function jQueryAsPieProgress(options) { | ||
var _this = this; | ||
return { | ||
v: _this.each( | ||
for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { | ||
args[_key3 - 1] = arguments[_key3]; | ||
} | ||
function() { | ||
var api = _jQuery2.default.data(this, pluginName); | ||
if (typeof options === 'string') { | ||
var _ret2 = function() { | ||
var method = options; | ||
if (api && typeof api[method] === 'function') { | ||
api[method].apply(api, args); | ||
} | ||
} | ||
) | ||
}; | ||
} | ||
}(); | ||
if (/^_/.test(method)) { | ||
if ((typeof _ret2 === 'undefined' ? 'undefined' : _typeof(_ret2)) === "object") | ||
return { | ||
v: false | ||
}; | ||
} else if (/^(get)/.test(method)) { | ||
var instance = _this.first().data(NAME); | ||
return _ret2.v; | ||
} | ||
if (instance && typeof instance[method] === 'function') { | ||
return this.each( | ||
function() { | ||
if (!_jQuery2.default.data(this, pluginName)) { | ||
_jQuery2.default.data(this, pluginName, new asPieProgress(this, options)); | ||
} | ||
return { | ||
v: instance[method].apply(instance, args) | ||
}; | ||
} | ||
); | ||
} | ||
}]); | ||
} else { | ||
return asPieProgress; | ||
}(); | ||
return { | ||
v: _this.each( | ||
_jQuery2.default.extend(asPieProgress.easing = {}, { | ||
ease: easingBezier(0.25, 0.1, 0.25, 1.0), | ||
linear: easingBezier(0.00, 0.0, 1.00, 1.0), | ||
'ease-in': easingBezier(0.42, 0.0, 1.00, 1.0), | ||
'ease-out': easingBezier(0.00, 0.0, 0.58, 1.0), | ||
'ease-in-out': easingBezier(0.42, 0.0, 0.58, 1.0) | ||
}); | ||
function() { | ||
var instance = _jquery2.default.data(this, NAME); | ||
_jQuery2.default.fn[pluginName] = asPieProgress._jQueryInterface; | ||
_jQuery2.default.fn[pluginName].constructor = asPieProgress; | ||
_jQuery2.default.fn[pluginName].noConflict = function() { | ||
'use strict'; | ||
if (instance && typeof instance[method] === 'function') { | ||
instance[method].apply(instance, args); | ||
} | ||
} | ||
) | ||
}; | ||
} | ||
}(); | ||
_jQuery2.default.fn[pluginName] = window.JQUERY_NO_CONFLICT; | ||
if ((typeof _ret2 === 'undefined' ? 'undefined' : _typeof(_ret2)) === "object") | ||
return asPieProgress._jQueryInterface; | ||
return _ret2.v; | ||
} | ||
return this.each( | ||
function() { | ||
if (!(0, _jquery2.default)(this).data(NAME)) { | ||
(0, _jquery2.default)(this).data(NAME, new asPieProgress(this, options)); | ||
} | ||
} | ||
); | ||
} | ||
; | ||
exports.default = asPieProgress; | ||
_jquery2.default.asPieProgress = _jquery2.default.extend({ | ||
setDefaults: asPieProgress.setDefaults, | ||
registerEasing: asPieProgress.registerEasing, | ||
getEasing: asPieProgress.getEasing, | ||
noConflict: function noConflict() { | ||
_jquery2.default.fn.asPieProgress = OtherAsPieProgress; | ||
return this; | ||
} | ||
}, info); | ||
} | ||
); |
/** | ||
* jQuery asPieProgress | ||
* A jQuery plugin that animate the progress bar | ||
* Compiled: Fri Sep 02 2016 14:07:00 GMT+0800 (CST) | ||
* @version v0.3.4 | ||
* @link https://github.com/amazingSurge/jquery-asPieProgress | ||
* @copyright LGPL-3.0 | ||
* jQuery asPieProgress v0.4.0 | ||
* https://github.com/amazingSurge/jquery-asPieProgress | ||
* | ||
* Copyright (c) amazingSurge | ||
* Released under the LGPL-3.0 license | ||
*/ | ||
!function(t,e){if("function"==typeof define&&define.amd)define(["exports","jQuery"],e);else if("undefined"!=typeof exports)e(exports,require("jQuery"));else{var i={exports:{}};e(i.exports,t.jQuery),t.jqueryAsPieProgress=i.exports}}(this,function(t,e){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var s=i(e),r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},a=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),o=function(){return"undefined"!=typeof window.performance&&window.performance.now?window.performance.now():Date.now()},u=function(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);return s.default.each(e,function(t,e){i.setAttribute(t,e)}),i},h=function(t){return"string"==typeof t&&t.indexOf("%")!==-1},l=function(t,e,i,n){function s(t,e){return 1-3*e+3*t}function r(t,e){return 3*e-6*t}function a(t){return 3*t}function o(t,e,i){return((s(e,i)*t+r(e,i))*t+a(e))*t}function u(t,e,i){return 3*s(e,i)*t*t+2*r(e,i)*t+a(e)}function h(e){for(var n=e,s=0;s<4;++s){var r=u(n,t,i);if(0===r)return n;var a=o(n,t,i)-e;n-=a/r}return n}return t===e&&i===n?{css:"linear",fn:function(t){return t}}:{css:"cubic-bezier("+t+","+e+","+i+","+n+")",fn:function(t){return o(h(t),e,n)}}},f={namespace:"",classes:{svg:"pie_progress__svg",element:"pie_progress",number:"pie_progress__number",content:"pie_progress__content"},min:0,max:100,goal:100,size:160,speed:15,barcolor:"#ef1e25",barsize:"4",trackcolor:"#f2f2f2",fillcolor:"none",easing:"ease",numberCallback:function(t){var e=Math.round(this.getPercentage(t));return e+"%"},contentCallback:null};Date.now||(Date.now=function(){return(new Date).getTime()});for(var c=["webkit","moz"],d=0;d<c.length&&!window.requestAnimationFrame;++d){var m=c[d];window.requestAnimationFrame=window[m+"RequestAnimationFrame"],window.cancelAnimationFrame=window[m+"CancelAnimationFrame"]||window[m+"CancelRequestAnimationFrame"]}!/iP(ad|hone|od).*OS (6|7)/.test(window.navigator.userAgent)&&window.requestAnimationFrame&&window.cancelAnimationFrame||!function(){var t=0;window.requestAnimationFrame=function(e){var i=o(),n=Math.max(t+16,i);return setTimeout(function(){e(t=n)},n-i)},window.cancelAnimationFrame=clearTimeout}();var p="createElementNS"in document&&new u("svg",{}).createSVGRect,g="asPieProgress";f.namespace=g;var v=function(){function t(e,i){n(this,t),this.element=e,this.$element=(0,s.default)(e),this.options=s.default.extend({},f,i,this.$element.data()),this.namespace=this.options.namespace,this.classes=this.options.classes,this.easing=t.easing[this.options.easing]||t.easing.ease,this.$element.addClass(this.classes.element),this.min=this.$element.attr("aria-valuemin"),this.max=this.$element.attr("aria-valuemax"),this.min=this.min?parseInt(this.min,10):this.options.min,this.max=this.max?parseInt(this.max,10):this.options.max,this.first=this.$element.attr("aria-valuenow"),this.first=this.first?parseInt(this.first,10):this.options.first?this.options.first:this.min,this.now=this.first,this.goal=this.options.goal,this._frameId=null,this.initialized=!1,this._trigger("init"),this.init()}return a(t,[{key:"init",value:function(){this.$number=this.$element.find("."+this.classes.number),this.$content=this.$element.find("."+this.classes.content),this.size=this.options.size,this.width=this.size,this.height=this.size,this.prepare(),this.initialized=!0,this._trigger("ready")}},{key:"prepare",value:function(){p&&(this.svg=new u("svg",{version:"1.1",preserveAspectRatio:"xMinYMin meet",viewBox:"0 0 "+this.width+" "+this.height}),this.buildTrack(),this.buildBar(),(0,s.default)('<div class="'+this.classes.svg+'"></div>').append(this.svg).appendTo(this.$element))}},{key:"buildTrack",value:function(){var t=this.size,e=this.size,i=e/2,n=t/2,s=this.options.barsize,r=new u("ellipse",{rx:i-s/2,ry:n-s/2,cx:i,cy:n,stroke:this.options.trackcolor,fill:this.options.fillcolor,"stroke-width":s});this.svg.appendChild(r)}},{key:"buildBar",value:function(){if(p){var t=new u("path",{fill:"none","stroke-width":this.options.barsize,stroke:this.options.barcolor});this.bar=t,this.svg.appendChild(t),this._drawBar(this.first),this._updateBar()}}},{key:"_drawBar",value:function(t){if(p){this.barGoal=t;var e=this.size,i=this.size,n=i/2,s=e/2,r=0,a=this.options.barsize,o=Math.min(n,s)-a/2;this.r=o;var u=this.getPercentage(t);100===u&&(u-=1e-4);var h=r+u*Math.PI*2/100,l=n+o*Math.sin(r),f=n+o*Math.sin(h),c=s-o*Math.cos(r),d=s-o*Math.cos(h),m=0;h-r>Math.PI&&(m=1);var g="M"+l+","+c+" A"+o+","+o+" 0 "+m+" 1 "+f+","+d;this.bar.setAttribute("d",g)}}},{key:"_updateBar",value:function(){if(p){var t=this.getPercentage(this.now),e=this.bar.getTotalLength(),i=e*(1-t/this.getPercentage(this.barGoal));this.bar.style.strokeDasharray=e+" "+e,this.bar.style.strokeDashoffset=i}}},{key:"_trigger",value:function(t){for(var e=arguments.length,i=Array(e>1?e-1:0),n=1;n<e;n++)i[n-1]=arguments[n];var s=[this].concat(i);this.$element.trigger(g+"::"+t,s),t=t.replace(/\b\w+\b/g,function(t){return t.substring(0,1).toUpperCase()+t.substring(1)});var r="on"+t;"function"==typeof this.options[r]&&this.options[r](i)}},{key:"getPercentage",value:function(t){return 100*(t-this.min)/(this.max-this.min)}},{key:"go",value:function(t){var e=this;this._clear(),h(t)&&(t=parseInt(t.replace("%",""),10),t=Math.round(this.min+t/100*(this.max-this.min))),"undefined"==typeof t&&(t=this.goal),t>this.max?t=this.max:t<this.min&&(t=this.min),this.barGoal<t&&this._drawBar(t);var i=e.now,n=o(),s=n+100*Math.abs(i-t)*e.options.speed/(e.max-e.min),r=function r(a){var o=void 0;if(a>s)o=t;else{var u=(a-n)/e.options.speed;o=Math.round(e.easing.fn(u/100)*(e.max-e.min)),t>i?(o=i+o,o>t&&(o=t)):(o=i-o,o<t&&(o=t))}e._update(o),o===t?(window.cancelAnimationFrame(e._frameId),e._frameId=null,e.now===e.goal&&e._trigger("finish")):e._frameId=window.requestAnimationFrame(r)};e._frameId=window.requestAnimationFrame(r)}},{key:"_update",value:function(t){this.now=t,this._updateBar(),this.$element.attr("aria-valuenow",this.now),this.$number.length>0&&"function"==typeof this.options.numberCallback&&this.$number.html(this.options.numberCallback.call(this,[this.now])),this.$content.length>0&&"function"==typeof this.options.contentCallback&&this.$content.html(this.options.contentCallback.call(this,[this.now])),this._trigger("update",t)}},{key:"_clear",value:function(){this._frameId&&(window.cancelAnimationFrame(this._frameId),this._frameId=null)}},{key:"get",value:function(){return this.now}},{key:"start",value:function(){this._clear(),this._trigger("start"),this.go(this.goal)}},{key:"reset",value:function(){this._clear(),this._drawBar(this.first),this._update(this.first),this._trigger("reset")}},{key:"stop",value:function(){this._clear(),this._trigger("stop")}},{key:"finish",value:function(){this._clear(),this._update(this.goal),this._trigger("finish")}},{key:"destory",value:function(){this.$element.data(g,null),this._trigger("destory")}}],[{key:"_jQueryInterface",value:function(e){for(var i=this,n=arguments.length,a=Array(n>1?n-1:0),o=1;o<n;o++)a[o-1]=arguments[o];if("string"==typeof e){var u=function(){var t=e;if(/^\_/.test(t))return{v:!1};if(!/^(get)$/.test(t))return{v:i.each(function(){var e=s.default.data(this,g);e&&"function"==typeof e[t]&&e[t].apply(e,a)})};var n=i.first().data(g);return n&&"function"==typeof n[t]?{v:n[t].apply(n,a)}:void 0}();if("object"===("undefined"==typeof u?"undefined":r(u)))return u.v}return this.each(function(){s.default.data(this,g)||s.default.data(this,g,new t(this,e))})}}]),t}();s.default.extend(v.easing={},{ease:l(.25,.1,.25,1),linear:l(0,0,1,1),"ease-in":l(.42,0,1,1),"ease-out":l(0,0,.58,1),"ease-in-out":l(.42,0,.58,1)}),s.default.fn[g]=v._jQueryInterface,s.default.fn[g].constructor=v,s.default.fn[g].noConflict=function(){return s.default.fn[g]=window.JQUERY_NO_CONFLICT,v._jQueryInterface},t.default=v}); | ||
!function(t,e){if("function"==typeof define&&define.amd)define(["jquery"],e);else if("undefined"!=typeof exports)e(require("jquery"));else{var i={exports:{}};e(t.jQuery),t.jqueryAsPieProgressEs=i.exports}}(this,function(t){"use strict";function e(t){return t&&t.__esModule?t:{default:t}}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var n=e(t),s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol?"symbol":typeof t},r=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),a=function(t,e){var i=document.createElementNS("http://www.w3.org/2000/svg",t);if(!e)return i;for(var n in e)Object.hasOwnProperty.call(e,n)&&i.setAttribute(n,e[n]);return i};Date.now||(Date.now=function(){return(new Date).getTime()});for(var o=["webkit","moz"],u=0;u<o.length&&!window.requestAnimationFrame;++u){var h=o[u];window.requestAnimationFrame=window[h+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h+"CancelAnimationFrame"]||window[h+"CancelRequestAnimationFrame"]}!/iP(ad|hone|od).*OS (6|7)/.test(window.navigator.userAgent)&&window.requestAnimationFrame&&window.cancelAnimationFrame||!function(){var t=0;window.requestAnimationFrame=function(e){var i=l(),n=Math.max(t+16,i);return setTimeout(function(){e(t=n)},n-i)},window.cancelAnimationFrame=clearTimeout}();var l=function(){return"undefined"!=typeof window.performance&&window.performance.now?window.performance.now():Date.now()},f=function(t){return"string"==typeof t&&t.indexOf("%")!==-1},c="createElementNS"in document&&new a("svg",{}).createSVGRect,m=function(t,e,i,n){var s=function(t,e){return 1-3*e+3*t},r=function(t,e){return 3*e-6*t},a=function(t){return 3*t},o=function(t,e,i){return((s(e,i)*t+r(e,i))*t+a(e))*t},u=function(t,e,i){return 3*s(e,i)*t*t+2*r(e,i)*t+a(e)},h=function(e){for(var n=e,s=0;s<4;++s){var r=u(n,t,i);if(0===r)return n;var a=o(n,t,i)-e;n-=a/r}return n};return t===e&&i===n?{css:"linear",fn:function(t){return t}}:{css:"cubic-bezier("+t+","+e+","+i+","+n+")",fn:function(t){return o(h(t),e,n)}}},d={ease:m(.25,.1,.25,1),linear:m(0,0,1,1),"ease-in":m(.42,0,1,1),"ease-out":m(0,0,.58,1),"ease-in-out":m(.42,0,.58,1)},p={namespace:"",classes:{svg:"pie_progress__svg",element:"pie_progress",number:"pie_progress__number",content:"pie_progress__content"},min:0,max:100,goal:100,size:160,speed:15,barcolor:"#ef1e25",barsize:"4",trackcolor:"#f2f2f2",fillcolor:"none",easing:"ease",numberCallback:function(t){var e=Math.round(this.getPercentage(t));return e+"%"},contentCallback:null},g="asPieProgress",v=function(){function t(e,s){i(this,t),this.element=e,this.$element=(0,n.default)(e),this.options=n.default.extend({},p,{namespace:g},s,this.$element.data()),this.namespace=this.options.namespace,this.classes=this.options.classes,this.easing=d[this.options.easing]||d.ease,this.$element.addClass(this.classes.element),this.min=this.$element.attr("aria-valuemin"),this.max=this.$element.attr("aria-valuemax"),this.min=this.min?parseInt(this.min,10):this.options.min,this.max=this.max?parseInt(this.max,10):this.options.max,this.first=this.$element.attr("aria-valuenow"),this.first=this.first?parseInt(this.first,10):this.options.first?this.options.first:this.min,this.now=this.first,this.goal=this.options.goal,this._frameId=null,this.initialized=!1,this._trigger("init"),this.init()}return r(t,[{key:"init",value:function(){this.$number=this.$element.find("."+this.classes.number),this.$content=this.$element.find("."+this.classes.content),this.size=this.options.size,this.width=this.size,this.height=this.size,this.prepare(),this.initialized=!0,this._trigger("ready")}},{key:"prepare",value:function(){c&&(this.svg=new a("svg",{version:"1.1",preserveAspectRatio:"xMinYMin meet",viewBox:"0 0 "+this.width+" "+this.height}),this.buildTrack(),this.buildBar(),(0,n.default)('<div class="'+this.classes.svg+'"></div>').append(this.svg).appendTo(this.$element))}},{key:"buildTrack",value:function(){var t=this.size,e=this.size,i=e/2,n=t/2,s=this.options.barsize,r=new a("ellipse",{rx:i-s/2,ry:n-s/2,cx:i,cy:n,stroke:this.options.trackcolor,fill:this.options.fillcolor,"stroke-width":s});this.svg.appendChild(r)}},{key:"buildBar",value:function(){if(c){var t=new a("path",{fill:"none","stroke-width":this.options.barsize,stroke:this.options.barcolor});this.bar=t,this.svg.appendChild(t),this._drawBar(this.first),this._updateBar()}}},{key:"_drawBar",value:function(t){if(c){this.barGoal=t;var e=this.size,i=this.size,n=i/2,s=e/2,r=0,a=this.options.barsize,o=Math.min(n,s)-a/2;this.r=o;var u=this.getPercentage(t);100===u&&(u-=1e-4);var h=r+u*Math.PI*2/100,l=n+o*Math.sin(r),f=n+o*Math.sin(h),m=s-o*Math.cos(r),d=s-o*Math.cos(h),p=0;h-r>Math.PI&&(p=1);var g="M"+l+","+m+" A"+o+","+o+" 0 "+p+" 1 "+f+","+d;this.bar.setAttribute("d",g)}}},{key:"_updateBar",value:function(){if(c){var t=this.getPercentage(this.now),e=this.bar.getTotalLength(),i=e*(1-t/this.getPercentage(this.barGoal));this.bar.style.strokeDasharray=e+" "+e,this.bar.style.strokeDashoffset=i}}},{key:"_trigger",value:function(t){for(var e=arguments.length,i=Array(e>1?e-1:0),n=1;n<e;n++)i[n-1]=arguments[n];var s=[this].concat(i);this.$element.trigger(g+"::"+t,s),t=t.replace(/\b\w+\b/g,function(t){return t.substring(0,1).toUpperCase()+t.substring(1)});var r="on"+t;"function"==typeof this.options[r]&&this.options[r](i)}},{key:"getPercentage",value:function(t){return 100*(t-this.min)/(this.max-this.min)}},{key:"go",value:function(t){var e=this;this._clear(),f(t)&&(t=parseInt(t.replace("%",""),10),t=Math.round(this.min+t/100*(this.max-this.min))),"undefined"==typeof t&&(t=this.goal),t>this.max?t=this.max:t<this.min&&(t=this.min),this.barGoal<t&&this._drawBar(t);var i=e.now,n=l(),s=n+100*Math.abs(i-t)*e.options.speed/(e.max-e.min),r=function r(a){var o=void 0;if(a>s)o=t;else{var u=(a-n)/e.options.speed;o=Math.round(e.easing.fn(u/100)*(e.max-e.min)),t>i?(o=i+o,o>t&&(o=t)):(o=i-o,o<t&&(o=t))}e._update(o),o===t?(window.cancelAnimationFrame(e._frameId),e._frameId=null,e.now===e.goal&&e._trigger("finish")):e._frameId=window.requestAnimationFrame(r)};e._frameId=window.requestAnimationFrame(r)}},{key:"_update",value:function(t){this.now=t,this._updateBar(),this.$element.attr("aria-valuenow",this.now),this.$number.length>0&&"function"==typeof this.options.numberCallback&&this.$number.html(this.options.numberCallback.call(this,[this.now])),this.$content.length>0&&"function"==typeof this.options.contentCallback&&this.$content.html(this.options.contentCallback.call(this,[this.now])),this._trigger("update",t)}},{key:"_clear",value:function(){this._frameId&&(window.cancelAnimationFrame(this._frameId),this._frameId=null)}},{key:"get",value:function(){return this.now}},{key:"start",value:function(){this._clear(),this._trigger("start"),this.go(this.goal)}},{key:"reset",value:function(){this._clear(),this._drawBar(this.first),this._update(this.first),this._trigger("reset")}},{key:"stop",value:function(){this._clear(),this._trigger("stop")}},{key:"finish",value:function(){this._clear(),this._update(this.goal),this._trigger("finish")}},{key:"destory",value:function(){this.$element.data(g,null),this._trigger("destory")}}],[{key:"registerEasing",value:function(t){for(var e=arguments.length,i=Array(e>1?e-1:0),n=1;n<e;n++)i[n-1]=arguments[n];d[t]=m.apply(void 0,i)}},{key:"getEasing",value:function(t){return d[t]}},{key:"setDefaults",value:function(t){n.default.extend(p,n.default.isPlainObject(t)&&t)}}]),t}(),w={version:"0.4.0"},y="asPieProgress",b=n.default.fn.asPieProgress;n.default.fn.asPieProgress=function(t){for(var e=this,i=arguments.length,r=Array(i>1?i-1:0),a=1;a<i;a++)r[a-1]=arguments[a];if("string"==typeof t){var o=function(){var i=t;if(/^_/.test(i))return{v:!1};if(!/^(get)/.test(i))return{v:e.each(function(){var t=n.default.data(this,y);t&&"function"==typeof t[i]&&t[i].apply(t,r)})};var s=e.first().data(y);return s&&"function"==typeof s[i]?{v:s[i].apply(s,r)}:void 0}();if("object"===("undefined"==typeof o?"undefined":s(o)))return o.v}return this.each(function(){(0,n.default)(this).data(y)||(0,n.default)(this).data(y,new v(this,t))})},n.default.asPieProgress=n.default.extend({setDefaults:v.setDefaults,registerEasing:v.registerEasing,getEasing:v.getEasing,noConflict:function(){return n.default.fn.asPieProgress=b,this}},w)}); |
119
package.json
{ | ||
"_args": [ | ||
[ | ||
"jquery-asPieProgress@git+https://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"/home/vytenis/Projects/nfq.de/dynamic-ads-frontend" | ||
] | ||
], | ||
"_from": "git+https://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"_id": "jquery-asPieProgress@0.3.4", | ||
"_inCache": true, | ||
"_location": "/jquery-asPieProgress", | ||
"_phantomChildren": {}, | ||
"_requested": { | ||
"hosted": { | ||
"directUrl": "https://raw.githubusercontent.com/amazingSurge/jquery-asPieProgress/483b1fa2f601944a16e548240046f5780c498cb0/package.json", | ||
"gitUrl": "git://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"httpsUrl": "git+https://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"shortcut": "github:amazingSurge/jquery-asPieProgress#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"ssh": "git@github.com:amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"sshUrl": "git+ssh://git@github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"type": "github" | ||
}, | ||
"name": "jquery-asPieProgress", | ||
"raw": "jquery-asPieProgress@git+https://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"rawSpec": "git+https://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"scope": null, | ||
"spec": "git+https://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"type": "hosted" | ||
}, | ||
"_requiredBy": [ | ||
"/" | ||
], | ||
"_resolved": "git+https://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"_shasum": "d5d7455add09ee5755394f8612ce008701399495", | ||
"_shrinkwrap": null, | ||
"_spec": "jquery-asPieProgress@git+https://github.com/amazingSurge/jquery-asPieProgress.git#483b1fa2f601944a16e548240046f5780c498cb0", | ||
"_where": "/home/vytenis/Projects/nfq.de/dynamic-ads-frontend", | ||
"name": "jquery-asPieProgress", | ||
"title": "jQuery asPieProgress", | ||
"description": "A jQuery plugin that animate the pie progress.", | ||
"version": "0.4.0", | ||
"homepage": "https://github.com/amazingSurge/jquery-asPieProgress", | ||
"author": { | ||
"email": "amazingsurge@gmail.com", | ||
"name": "amazingSurge", | ||
"email": "amazingSurge@gmail.com", | ||
"url": "amazingSurge.com" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/amazingSurge/jquery-asPieProgress/issues" | ||
"repository": { | ||
"type": "git", | ||
"url": "git@github.com:amazingSurge/jquery-asPieProgress.git" | ||
}, | ||
"dependencies": {}, | ||
"description": "A jQuery plugin that animate the progress bar", | ||
"keywords": [ | ||
"jquery", | ||
"jquery-plugin", | ||
"ecosystem:jquery", | ||
"ui", | ||
"es6" | ||
], | ||
"bugs": "https://github.com/amazingSurge/jquery-asPieProgress/issues", | ||
"licenses": [ | ||
{ | ||
"type": "LGPL-3.0", | ||
"url": "https://github.com/amazingSurge/jquery-asPieProgress/blob/master/LICENSE" | ||
} | ||
], | ||
"license": "LGPL-3.0", | ||
"main": "dist/jquery-asPieProgress.js", | ||
"files": [ | ||
"dist", | ||
"src" | ||
], | ||
"scripts": { | ||
"prestart": "npm install", | ||
"start": "gulp serve", | ||
"build": "npm run prestart && gulp build", | ||
"deploy": "gulp deploy", | ||
"deploy:prepare": "gulp deploy:prepare", | ||
"release": "gulp release", | ||
"test": "gulp test" | ||
}, | ||
"devDependencies": { | ||
"argv": "*", | ||
"assets-manager": "*", | ||
"babel-core": "*", | ||
"babel-eslint": "*", | ||
"babel-istanbul": "*", | ||
"babel-plugin-transform-es2015-modules-umd": "^6.12.0", | ||
"babel-plugin-transform-es2015-modules-umd": "*", | ||
"babel-preset-es2015": "*", | ||
@@ -72,3 +70,2 @@ "babel-preset-es2015-rollup": "*", | ||
"gulp-filter": "*", | ||
"gulp-fontmin": "*", | ||
"gulp-header": "*", | ||
@@ -109,4 +106,6 @@ "gulp-iconfont-css": "*", | ||
"node-notifier": "*", | ||
"normalize.css": "^4.2.0", | ||
"path-exists": "*", | ||
"phantomjs-prebuilt": "*", | ||
"release-it": "*", | ||
"rollup-plugin-babel": "*", | ||
@@ -124,33 +123,5 @@ "rollup-plugin-istanbul": "*", | ||
}, | ||
"files": [ | ||
"dist", | ||
"src" | ||
], | ||
"gitHead": "483b1fa2f601944a16e548240046f5780c498cb0", | ||
"homepage": "https://github.com/amazingSurge/jquery-asPieProgress", | ||
"license": "LGPL-3.0", | ||
"licenses": [ | ||
{ | ||
"type": "LGPL-3.0", | ||
"url": "https://github.com/amazingSurge/jquery-asPieProgress/blob/master/LICENSE" | ||
} | ||
], | ||
"name": "jquery-asPieProgress", | ||
"optionalDependencies": {}, | ||
"readme": "# jQuery asPieProgress\nA jQuery plugin that animate the pie progress.\n\n## Usage\n\nImport this libraries:\n* jQuery\n* jquery-asPieProgress.js\n\nAnd CSS:\n* progress.css\n\nCreate base html element:\n```html\n <div class=\"pieProgress\" role=\"progressbar\" data-goal=\"100\" aria-valuemin=\"0\" data-step=\"2\" aria-valuemax=\"100\">\n <div class=\"progress__meter\"><span class=\"progress__label\"></span></div>\n </div>\n```\n\nInitialize progress:\n```javascript\n$(\".progress\").asPieProgress({\n namespace: 'pieProgress'\n});\n```\n\n## Settings\n\n```javascript\n{\n namespace: 'asPieProgress',\n min: 0,\n max: 100,\n goal: 100,\n step: 1,\n speed: 50, // refresh speed\n delay: 300,\n easing: 'ease',\n label: function(n) {\n var percentage = this.getPercentage(n);\n return percentage;\n },\n onStart: function(){},\n onStop: function(){},\n onUpdate: function(){},\n onReset: function(){}\n}\n```\n\n## Public methods\n\njquery asPieProgress has different methods , we can use it as below :\n```javascript\n$(\".progress\").asPieProgress(\"start\");\n$(\".progress\").asPieProgress(\"stop\");\n$(\".progress\").asPieProgress(\"done\");\n$(\".progress\").asPieProgress(\"go\", 50);\n$(\".progress\").asPieProgress(\"go\", '50%');\n$(\".progress\").asPieProgress(\"reset\");\n```\n## Event\n\n* <code>asPieProgress::start</code>\n* <code>asPieProgress::stop</code>\n* <code>asPieProgress::done</code>\n* <code>asPieProgress::update</code>\n* <code>asPieProgress::reset</code>\n\n## Author\n[amazingSurge](http://amazingSurge.com)\n\n## Creit\n* http://anthonyterrien.com/knob/\n* https://github.com/benpickles/peity\n* https://github.com/zurb/pizza\n* https://github.com/pguso/jquery-plugin-circliful\n* http://widgets.better2web.com/loader/\n* https://github.com/rendro/easy-pie-chart\n\n## License\njQuery-asPieProgress plugin is released under the <a href=\"https://github.com/amazingSurge/jquery-asPieProgress/blob/master/LICENCE.GPL\" target=\"_blank\">GPL licence</a>.", | ||
"readmeFilename": "README.md", | ||
"repository": { | ||
"type": "git", | ||
"url": "git+ssh://git@github.com/amazingSurge/jquery-asPieProgress.git" | ||
}, | ||
"scripts": { | ||
"build": "npm run prestart && gulp build", | ||
"deploy": "gulp deploy", | ||
"deploy:prepare": "gulp deploy:prepare", | ||
"prestart": "npm install", | ||
"start": "gulp serve", | ||
"test": "gulp test" | ||
}, | ||
"title": "jQuery asPieProgress", | ||
"version": "0.3.4" | ||
"dependencies": { | ||
"jquery": ">=2.2.0" | ||
} | ||
} |
295
README.md
@@ -1,81 +0,264 @@ | ||
# jQuery asPieProgress | ||
A jQuery plugin that animate the pie progress. | ||
# [jQuery asPieProgress](https://github.com/amazingSurge/jquery-asPieProgress) ![bower][bower-image] [![NPM version][npm-image]][npm-url] [![Dependency Status][daviddm-image]][daviddm-url] [![prs-welcome]](#contributing) | ||
> A jquery plugin that do amazing things. | ||
## Table of contents | ||
- [Main files](#main-files) | ||
- [Quick start](#quick-start) | ||
- [Requirements](#requirements) | ||
- [Usage](#usage) | ||
- [Examples](#examples) | ||
- [Options](#options) | ||
- [Methods](#methods) | ||
- [Events](#events) | ||
- [No conflict](#no-conflict) | ||
- [Browser support](#browser-support) | ||
- [Contributing](#contributing) | ||
- [Development](#development) | ||
- [Changelog](#changelog) | ||
- [Copyright and license](#copyright-and-license) | ||
## Main files | ||
``` | ||
dist/ | ||
├── jquery-asPieProgress.js | ||
├── jquery-asPieProgress.es.js | ||
├── jquery-asPieProgress.min.js | ||
└── css/ | ||
├── asPieProgress.css | ||
└── asPieProgress.min.css | ||
``` | ||
## Quick start | ||
Several quick start options are available: | ||
#### Download the latest build | ||
* [Development](https://raw.githubusercontent.com/amazingSurge/jquery-asPieProgress/master/dist/jquery-asPieProgress.js) - unminified | ||
* [Production](https://raw.githubusercontent.com/amazingSurge/jquery-asPieProgress/master/dist/jquery-asPieProgress.min.js) - minified | ||
#### Install From Bower | ||
```sh | ||
bower install jquery-asPieProgress --save | ||
``` | ||
#### Install From Npm | ||
```sh | ||
npm install jquery-asPieProgress --save | ||
``` | ||
#### Build From Source | ||
If you want build from source: | ||
```sh | ||
git clone git@github.com:amazingSurge/jquery-asPieProgress.git | ||
cd jquery-asPieProgress | ||
npm install | ||
npm install -g gulp-cli babel-cli | ||
gulp build | ||
``` | ||
Done! | ||
## Requirements | ||
`jquery-asPieProgress` requires the latest version of [`jQuery`](https://jquery.com/download/). | ||
## Usage | ||
#### Including files: | ||
Import this libraries: | ||
* jQuery | ||
* jquery-asPieProgress.js | ||
```html | ||
<link rel="stylesheet" href="/path/to/asPieProgress.css"> | ||
<script src="/path/to/jquery.js"></script> | ||
<script src="/path/to/jquery-asPieProgress.js"></script> | ||
``` | ||
And CSS: | ||
* progress.css | ||
#### Required HTML structure | ||
Create base html element: | ||
```html | ||
<div class="pieProgress" role="progressbar" data-goal="100" aria-valuemin="0" data-step="2" aria-valuemax="100"> | ||
<div class="progress__meter"><span class="progress__label"></span></div> | ||
</div> | ||
<div class="pieProgress" role="progressbar" data-goal="100" aria-valuemin="0" data-step="2" aria-valuemax="100"> | ||
<div class="progress__meter"><span class="progress__label"></span></div> | ||
</div> | ||
``` | ||
Initialize progress: | ||
#### Initialization | ||
All you need to do is call the plugin on the element: | ||
```javascript | ||
$(".progress").asPieProgress({ | ||
jQuery(function($) { | ||
$('.example').asPieProgress({ | ||
namespace: 'pieProgress' | ||
}); | ||
}); | ||
``` | ||
## Settings | ||
## Examples | ||
There are some example usages that you can look at to get started. They can be found in the | ||
[examples folder](https://github.com/amazingSurge/jquery-asPieProgress/tree/master/examples). | ||
```javascript | ||
## Options | ||
`jquery-asPieProgress` can accept an options object to alter the way it behaves. You can see the default options by call `$.asPieProgress.setDefaults()`. The structure of an options object is as follows: | ||
``` | ||
{ | ||
namespace: 'asPieProgress', | ||
min: 0, | ||
max: 100, | ||
goal: 100, | ||
step: 1, | ||
speed: 50, // refresh speed | ||
delay: 300, | ||
easing: 'ease', | ||
label: function(n) { | ||
var percentage = this.getPercentage(n); | ||
return percentage; | ||
}, | ||
onStart: function(){}, | ||
onStop: function(){}, | ||
onUpdate: function(){}, | ||
onReset: function(){} | ||
namespace: '', | ||
classes: { | ||
svg: 'pie_progress__svg', | ||
element: 'pie_progress', | ||
number: 'pie_progress__number', | ||
content: 'pie_progress__content' | ||
}, | ||
min: 0, | ||
max: 100, | ||
goal: 100, | ||
size: 160, | ||
speed: 15, // speed of 1/100 | ||
barcolor: '#ef1e25', | ||
barsize: '4', | ||
trackcolor: '#f2f2f2', | ||
fillcolor: 'none', | ||
easing: 'ease', | ||
numberCallback(n) { | ||
'use strict'; | ||
const percentage = Math.round(this.getPercentage(n)); | ||
return `${percentage}%`; | ||
}, | ||
contentCallback: null | ||
} | ||
``` | ||
## Public methods | ||
## Methods | ||
Methods are called on asPieProgress instances through the asPieProgress method itself. | ||
You can also save the instances to variable for further use. | ||
jquery asPieProgress has different methods , we can use it as below : | ||
```javascript | ||
$(".progress").asPieProgress("start"); | ||
$(".progress").asPieProgress("stop"); | ||
$(".progress").asPieProgress("done"); | ||
$(".progress").asPieProgress("go", 50); | ||
$(".progress").asPieProgress("go", '50%'); | ||
$(".progress").asPieProgress("reset"); | ||
// call directly | ||
$().asPieProgress('start'); | ||
// or | ||
var api = $().data('asPieProgress'); | ||
api.start(); | ||
``` | ||
## Event | ||
* <code>asPieProgress::start</code> | ||
* <code>asPieProgress::stop</code> | ||
* <code>asPieProgress::done</code> | ||
* <code>asPieProgress::update</code> | ||
* <code>asPieProgress::reset</code> | ||
#### start() | ||
Start the pie progress animation. | ||
```javascript | ||
$().asPieProgress('start'); | ||
``` | ||
## Author | ||
[amazingSurge](http://amazingSurge.com) | ||
#### stop() | ||
Stop the pie progress animation. | ||
```javascript | ||
$().asPieProgress('stop'); | ||
``` | ||
## Creit | ||
* http://anthonyterrien.com/knob/ | ||
* https://github.com/benpickles/peity | ||
* https://github.com/zurb/pizza | ||
* https://github.com/pguso/jquery-plugin-circliful | ||
* http://widgets.better2web.com/loader/ | ||
* https://github.com/rendro/easy-pie-chart | ||
#### finish() | ||
Finish the pie progress animation. The progress value will update to the goal value immediately. | ||
```javascript | ||
$().asPieProgress('finish'); | ||
``` | ||
## License | ||
jQuery-asPieProgress plugin is released under the <a href="https://github.com/amazingSurge/jquery-asPieProgress/blob/master/LICENCE.GPL" target="_blank">GPL licence</a>. | ||
#### reset() | ||
Reset the pie progress. The progress value will reset to first value. | ||
```javascript | ||
$().asPieProgress('reset'); | ||
``` | ||
#### go(value) | ||
Update the pie progress to the specific value. | ||
```javascript | ||
$().asPieProgress("go", 50); | ||
$().asPieProgress("go", '50%'); | ||
``` | ||
#### destroy() | ||
Destroy the pie progress instance. | ||
```javascript | ||
$().asPieProgress('destroy'); | ||
``` | ||
## Events | ||
`jquery-asPieProgress` provides custom events for the plugin’s unique actions. | ||
```javascript | ||
$('.the-element').on('asPieProgress::ready', function (e) { | ||
// on instance ready | ||
}); | ||
``` | ||
Event | Description | ||
------- | ----------- | ||
init | Fires when the instance is setup for the first time. | ||
ready | Fires when the instance is ready for API use. | ||
start | This event is fired immediately when the `start` instance method has been called. | ||
stop | This event is fired immediately when the `stop` instance method has been called. | ||
update | Fires when the progress value is changing. | ||
finish | Fires when the animation is finished, Or the `finish` instance method has been called. | ||
reset | This event is fired immediately when the `reset` instance method has been called. | ||
destroy | Fires when an instance is destroyed. | ||
## No conflict | ||
If you have to use other plugin with the same namespace, just call the `$.asPieProgress.noConflict` method to revert to it. | ||
```html | ||
<script src="other-plugin.js"></script> | ||
<script src="jquery-asPieProgress.js"></script> | ||
<script> | ||
$.asPieProgress.noConflict(); | ||
// Code that uses other plugin's "$().asPieProgress" can follow here. | ||
</script> | ||
``` | ||
## Browser support | ||
Tested on all major browsers. | ||
| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/safari/safari_32x32.png" alt="Safari"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/chrome/chrome_32x32.png" alt="Chrome"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/firefox/firefox_32x32.png" alt="Firefox"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/edge/edge_32x32.png" alt="Edge"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/internet-explorer/internet-explorer_32x32.png" alt="IE"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/opera/opera_32x32.png" alt="Opera"> | | ||
|:--:|:--:|:--:|:--:|:--:|:--:| | ||
| Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ | | ||
As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/). | ||
## Contributing | ||
Anyone and everyone is welcome to contribute. Please take a moment to | ||
review the [guidelines for contributing](CONTRIBUTING.md). Make sure you're using the latest version of `jquery-asPieProgress` before submitting an issue. There are several ways to help out: | ||
* [Bug reports](CONTRIBUTING.md#bug-reports) | ||
* [Feature requests](CONTRIBUTING.md#feature-requests) | ||
* [Pull requests](CONTRIBUTING.md#pull-requests) | ||
* Write test cases for open bug issues | ||
* Contribute to the documentation | ||
## Development | ||
`jquery-asPieProgress` is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run: | ||
```sh | ||
npm install -g gulp | ||
npm install -g babel-cli | ||
npm install | ||
``` | ||
Then you can generate new distributable files from the sources, using: | ||
``` | ||
gulp build | ||
``` | ||
More gulp tasks can be found [here](CONTRIBUTING.md#available-tasks). | ||
## Changelog | ||
To see the list of recent changes, see [Releases section](https://github.com/amazingSurge/jquery-asPieProgress/releases). | ||
## Copyright and license | ||
Copyright (C) 2016 amazingSurge. | ||
Licensed under [the LGPL license](LICENSE). | ||
[⬆ back to top](#table-of-contents) | ||
[bower-image]: https://img.shields.io/bower/v/jquery-asPieProgress.svg?style=flat | ||
[bower-link]: https://david-dm.org/amazingSurge/jquery-asPieProgress/dev-status.svg | ||
[npm-image]: https://badge.fury.io/js/jquery-asPieProgress.svg?style=flat | ||
[npm-url]: https://npmjs.org/package/jquery-asPieProgress | ||
[license]: https://img.shields.io/npm/l/jquery-asPieProgress.svg?style=flat | ||
[prs-welcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg | ||
[daviddm-image]: https://david-dm.org/amazingSurge/jquery-asPieProgress.svg?style=flat | ||
[daviddm-url]: https://david-dm.org/amazingSurge/jquery-asPieProgress |
const easingBezier = (mX1, mY1, mX2, mY2) => { | ||
'use strict'; | ||
function A(aA1, aA2) { | ||
let a = (aA1, aA2) => { | ||
return 1.0 - 3.0 * aA2 + 3.0 * aA1; | ||
} | ||
}; | ||
function B(aA1, aA2) { | ||
let b = (aA1, aA2) => { | ||
return 3.0 * aA2 - 6.0 * aA1; | ||
} | ||
}; | ||
function C(aA1) { | ||
let c = (aA1) => { | ||
return 3.0 * aA1; | ||
} | ||
}; | ||
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. | ||
function CalcBezier(aT, aA1, aA2) { | ||
return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; | ||
} | ||
let calcBezier = (aT, aA1, aA2) => { | ||
return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT; | ||
}; | ||
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. | ||
function GetSlope(aT, aA1, aA2) { | ||
return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); | ||
} | ||
let getSlope = (aT, aA1, aA2) => { | ||
return 3.0 * a(aA1, aA2) * aT * aT + 2.0 * b(aA1, aA2) * aT + c(aA1); | ||
}; | ||
function GetTForX(aX) { | ||
let getTForX = (aX) => { | ||
// Newton raphson iteration | ||
let aGuessT = aX; | ||
for (let i = 0; i < 4; ++i) { | ||
const currentSlope = GetSlope(aGuessT, mX1, mX2); | ||
let currentSlope = getSlope(aGuessT, mX1, mX2); | ||
if (currentSlope === 0.0) { | ||
return aGuessT; | ||
} | ||
const currentX = CalcBezier(aGuessT, mX1, mX2) - aX; | ||
let currentX = calcBezier(aGuessT, mX1, mX2) - aX; | ||
aGuessT -= currentX / currentSlope; | ||
} | ||
return aGuessT; | ||
} | ||
}; | ||
@@ -48,6 +48,7 @@ if (mX1 === mY1 && mX2 === mY2) { | ||
} | ||
return { | ||
css: `cubic-bezier(${mX1},${mY1},${mX2},${mY2})`, | ||
fn(aX) { | ||
return CalcBezier(GetTForX(aX), mY1, mY2); | ||
return calcBezier(getTForX(aX), mY1, mY2); | ||
} | ||
@@ -57,2 +58,2 @@ }; | ||
export default easingBezier; | ||
export default easingBezier; |
@@ -1,3 +0,1 @@ | ||
import $ from 'jQuery'; | ||
const SvgElement = (tag, attrs) => { | ||
@@ -7,9 +5,16 @@ 'use strict'; | ||
$.each(attrs, (name, value) => { | ||
elem.setAttribute(name, value); | ||
}); | ||
if (!attrs) { | ||
return elem; | ||
} | ||
for (let key in attrs) { | ||
if (!Object.hasOwnProperty.call(attrs, key)) { | ||
continue; | ||
} | ||
elem.setAttribute(key, attrs[key]); | ||
} | ||
return elem; | ||
}; | ||
export default SvgElement; | ||
export default SvgElement; |
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
73878
17
1458
264
1
70
2
2
+ Addedjquery@>=2.2.0
+ Addedjquery@3.7.1(transitive)