123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433 |
- // ProgressBar.js 1.0.1
- // https://kimmobrunfeldt.github.io/progressbar.js
- // License: MIT
- (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ProgressBar = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
- /* shifty - v1.5.2 - 2016-02-10 - http://jeremyckahn.github.io/shifty */
- ;(function () {
- var root = this || Function('return this')();
- /**
- * Shifty Core
- * By Jeremy Kahn - jeremyckahn@gmail.com
- */
- var Tweenable = (function () {
- 'use strict';
- // Aliases that get defined later in this function
- var formula;
- // CONSTANTS
- var DEFAULT_SCHEDULE_FUNCTION;
- var DEFAULT_EASING = 'linear';
- var DEFAULT_DURATION = 500;
- var UPDATE_TIME = 1000 / 60;
- var _now = Date.now
- ? Date.now
- : function () {return +new Date();};
- var now = typeof SHIFTY_DEBUG_NOW !== 'undefined' ? SHIFTY_DEBUG_NOW : _now;
- if (typeof window !== 'undefined') {
- // requestAnimationFrame() shim by Paul Irish (modified for Shifty)
- // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
- DEFAULT_SCHEDULE_FUNCTION = window.requestAnimationFrame
- || window.webkitRequestAnimationFrame
- || window.oRequestAnimationFrame
- || window.msRequestAnimationFrame
- || (window.mozCancelRequestAnimationFrame
- && window.mozRequestAnimationFrame)
- || setTimeout;
- } else {
- DEFAULT_SCHEDULE_FUNCTION = setTimeout;
- }
- function noop () {
- // NOOP!
- }
- /**
- * Handy shortcut for doing a for-in loop. This is not a "normal" each
- * function, it is optimized for Shifty. The iterator function only receives
- * the property name, not the value.
- * @param {Object} obj
- * @param {Function(string)} fn
- * @private
- */
- function each (obj, fn) {
- var key;
- for (key in obj) {
- if (Object.hasOwnProperty.call(obj, key)) {
- fn(key);
- }
- }
- }
- /**
- * Perform a shallow copy of Object properties.
- * @param {Object} targetObject The object to copy into
- * @param {Object} srcObject The object to copy from
- * @return {Object} A reference to the augmented `targetObj` Object
- * @private
- */
- function shallowCopy (targetObj, srcObj) {
- each(srcObj, function (prop) {
- targetObj[prop] = srcObj[prop];
- });
- return targetObj;
- }
- /**
- * Copies each property from src onto target, but only if the property to
- * copy to target is undefined.
- * @param {Object} target Missing properties in this Object are filled in
- * @param {Object} src
- * @private
- */
- function defaults (target, src) {
- each(src, function (prop) {
- if (typeof target[prop] === 'undefined') {
- target[prop] = src[prop];
- }
- });
- }
- /**
- * Calculates the interpolated tween values of an Object for a given
- * timestamp.
- * @param {Number} forPosition The position to compute the state for.
- * @param {Object} currentState Current state properties.
- * @param {Object} originalState: The original state properties the Object is
- * tweening from.
- * @param {Object} targetState: The destination state properties the Object
- * is tweening to.
- * @param {number} duration: The length of the tween in milliseconds.
- * @param {number} timestamp: The UNIX epoch time at which the tween began.
- * @param {Object} easing: This Object's keys must correspond to the keys in
- * targetState.
- * @private
- */
- function tweenProps (forPosition, currentState, originalState, targetState,
- duration, timestamp, easing) {
- var normalizedPosition =
- forPosition < timestamp ? 0 : (forPosition - timestamp) / duration;
- var prop;
- var easingObjectProp;
- var easingFn;
- for (prop in currentState) {
- if (currentState.hasOwnProperty(prop)) {
- easingObjectProp = easing[prop];
- easingFn = typeof easingObjectProp === 'function'
- ? easingObjectProp
- : formula[easingObjectProp];
- currentState[prop] = tweenProp(
- originalState[prop],
- targetState[prop],
- easingFn,
- normalizedPosition
- );
- }
- }
- return currentState;
- }
- /**
- * Tweens a single property.
- * @param {number} start The value that the tween started from.
- * @param {number} end The value that the tween should end at.
- * @param {Function} easingFunc The easing curve to apply to the tween.
- * @param {number} position The normalized position (between 0.0 and 1.0) to
- * calculate the midpoint of 'start' and 'end' against.
- * @return {number} The tweened value.
- * @private
- */
- function tweenProp (start, end, easingFunc, position) {
- return start + (end - start) * easingFunc(position);
- }
- /**
- * Applies a filter to Tweenable instance.
- * @param {Tweenable} tweenable The `Tweenable` instance to call the filter
- * upon.
- * @param {String} filterName The name of the filter to apply.
- * @private
- */
- function applyFilter (tweenable, filterName) {
- var filters = Tweenable.prototype.filter;
- var args = tweenable._filterArgs;
- each(filters, function (name) {
- if (typeof filters[name][filterName] !== 'undefined') {
- filters[name][filterName].apply(tweenable, args);
- }
- });
- }
- var timeoutHandler_endTime;
- var timeoutHandler_currentTime;
- var timeoutHandler_isEnded;
- var timeoutHandler_offset;
- /**
- * Handles the update logic for one step of a tween.
- * @param {Tweenable} tweenable
- * @param {number} timestamp
- * @param {number} delay
- * @param {number} duration
- * @param {Object} currentState
- * @param {Object} originalState
- * @param {Object} targetState
- * @param {Object} easing
- * @param {Function(Object, *, number)} step
- * @param {Function(Function,number)}} schedule
- * @param {number=} opt_currentTimeOverride Needed for accurate timestamp in
- * Tweenable#seek.
- * @private
- */
- function timeoutHandler (tweenable, timestamp, delay, duration, currentState,
- originalState, targetState, easing, step, schedule,
- opt_currentTimeOverride) {
- timeoutHandler_endTime = timestamp + delay + duration;
- timeoutHandler_currentTime =
- Math.min(opt_currentTimeOverride || now(), timeoutHandler_endTime);
- timeoutHandler_isEnded =
- timeoutHandler_currentTime >= timeoutHandler_endTime;
- timeoutHandler_offset = duration - (
- timeoutHandler_endTime - timeoutHandler_currentTime);
- if (tweenable.isPlaying()) {
- if (timeoutHandler_isEnded) {
- step(targetState, tweenable._attachment, timeoutHandler_offset);
- tweenable.stop(true);
- } else {
- tweenable._scheduleId =
- schedule(tweenable._timeoutHandler, UPDATE_TIME);
- applyFilter(tweenable, 'beforeTween');
- // If the animation has not yet reached the start point (e.g., there was
- // delay that has not yet completed), just interpolate the starting
- // position of the tween.
- if (timeoutHandler_currentTime < (timestamp + delay)) {
- tweenProps(1, currentState, originalState, targetState, 1, 1, easing);
- } else {
- tweenProps(timeoutHandler_currentTime, currentState, originalState,
- targetState, duration, timestamp + delay, easing);
- }
- applyFilter(tweenable, 'afterTween');
- step(currentState, tweenable._attachment, timeoutHandler_offset);
- }
- }
- }
- /**
- * Creates a usable easing Object from a string, a function or another easing
- * Object. If `easing` is an Object, then this function clones it and fills
- * in the missing properties with `"linear"`.
- * @param {Object.<string|Function>} fromTweenParams
- * @param {Object|string|Function} easing
- * @return {Object.<string|Function>}
- * @private
- */
- function composeEasingObject (fromTweenParams, easing) {
- var composedEasing = {};
- var typeofEasing = typeof easing;
- if (typeofEasing === 'string' || typeofEasing === 'function') {
- each(fromTweenParams, function (prop) {
- composedEasing[prop] = easing;
- });
- } else {
- each(fromTweenParams, function (prop) {
- if (!composedEasing[prop]) {
- composedEasing[prop] = easing[prop] || DEFAULT_EASING;
- }
- });
- }
- return composedEasing;
- }
- /**
- * Tweenable constructor.
- * @class Tweenable
- * @param {Object=} opt_initialState The values that the initial tween should
- * start at if a `from` object is not provided to `{{#crossLink
- * "Tweenable/tween:method"}}{{/crossLink}}` or `{{#crossLink
- * "Tweenable/setConfig:method"}}{{/crossLink}}`.
- * @param {Object=} opt_config Configuration object to be passed to
- * `{{#crossLink "Tweenable/setConfig:method"}}{{/crossLink}}`.
- * @module Tweenable
- * @constructor
- */
- function Tweenable (opt_initialState, opt_config) {
- this._currentState = opt_initialState || {};
- this._configured = false;
- this._scheduleFunction = DEFAULT_SCHEDULE_FUNCTION;
- // To prevent unnecessary calls to setConfig do not set default
- // configuration here. Only set default configuration immediately before
- // tweening if none has been set.
- if (typeof opt_config !== 'undefined') {
- this.setConfig(opt_config);
- }
- }
- /**
- * Configure and start a tween.
- * @method tween
- * @param {Object=} opt_config Configuration object to be passed to
- * `{{#crossLink "Tweenable/setConfig:method"}}{{/crossLink}}`.
- * @chainable
- */
- Tweenable.prototype.tween = function (opt_config) {
- if (this._isTweening) {
- return this;
- }
- // Only set default config if no configuration has been set previously and
- // none is provided now.
- if (opt_config !== undefined || !this._configured) {
- this.setConfig(opt_config);
- }
- this._timestamp = now();
- this._start(this.get(), this._attachment);
- return this.resume();
- };
- /**
- * Configure a tween that will start at some point in the future.
- *
- * @method setConfig
- * @param {Object} config The following values are valid:
- * - __from__ (_Object=_): Starting position. If omitted, `{{#crossLink
- * "Tweenable/get:method"}}get(){{/crossLink}}` is used.
- * - __to__ (_Object=_): Ending position.
- * - __duration__ (_number=_): How many milliseconds to animate for.
- * - __delay__ (_delay=_): How many milliseconds to wait before starting the
- * tween.
- * - __start__ (_Function(Object, *)_): Function to execute when the tween
- * begins. Receives the state of the tween as the first parameter and
- * `attachment` as the second parameter.
- * - __step__ (_Function(Object, *, number)_): Function to execute on every
- * tick. Receives `{{#crossLink
- * "Tweenable/get:method"}}get(){{/crossLink}}` as the first parameter,
- * `attachment` as the second parameter, and the time elapsed since the
- * start of the tween as the third. This function is not called on the
- * final step of the animation, but `finish` is.
- * - __finish__ (_Function(Object, *)_): Function to execute upon tween
- * completion. Receives the state of the tween as the first parameter and
- * `attachment` as the second parameter.
- * - __easing__ (_Object.<string|Function>|string|Function=_): Easing curve
- * name(s) or function(s) to use for the tween.
- * - __attachment__ (_*_): Cached value that is passed to the
- * `step`/`start`/`finish` methods.
- * @chainable
- */
- Tweenable.prototype.setConfig = function (config) {
- config = config || {};
- this._configured = true;
- // Attach something to this Tweenable instance (e.g.: a DOM element, an
- // object, a string, etc.);
- this._attachment = config.attachment;
- // Init the internal state
- this._pausedAtTime = null;
- this._scheduleId = null;
- this._delay = config.delay || 0;
- this._start = config.start || noop;
- this._step = config.step || noop;
- this._finish = config.finish || noop;
- this._duration = config.duration || DEFAULT_DURATION;
- this._currentState = shallowCopy({}, config.from) || this.get();
- this._originalState = this.get();
- this._targetState = shallowCopy({}, config.to) || this.get();
- var self = this;
- this._timeoutHandler = function () {
- timeoutHandler(self,
- self._timestamp,
- self._delay,
- self._duration,
- self._currentState,
- self._originalState,
- self._targetState,
- self._easing,
- self._step,
- self._scheduleFunction
- );
- };
- // Aliases used below
- var currentState = this._currentState;
- var targetState = this._targetState;
- // Ensure that there is always something to tween to.
- defaults(targetState, currentState);
- this._easing = composeEasingObject(
- currentState, config.easing || DEFAULT_EASING);
- this._filterArgs =
- [currentState, this._originalState, targetState, this._easing];
- applyFilter(this, 'tweenCreated');
- return this;
- };
- /**
- * @method get
- * @return {Object} The current state.
- */
- Tweenable.prototype.get = function () {
- return shallowCopy({}, this._currentState);
- };
- /**
- * @method set
- * @param {Object} state The current state.
- */
- Tweenable.prototype.set = function (state) {
- this._currentState = state;
- };
- /**
- * Pause a tween. Paused tweens can be resumed from the point at which they
- * were paused. This is different from `{{#crossLink
- * "Tweenable/stop:method"}}{{/crossLink}}`, as that method
- * causes a tween to start over when it is resumed.
- * @method pause
- * @chainable
- */
- Tweenable.prototype.pause = function () {
- this._pausedAtTime = now();
- this._isPaused = true;
- return this;
- };
- /**
- * Resume a paused tween.
- * @method resume
- * @chainable
- */
- Tweenable.prototype.resume = function () {
- if (this._isPaused) {
- this._timestamp += now() - this._pausedAtTime;
- }
- this._isPaused = false;
- this._isTweening = true;
- this._timeoutHandler();
- return this;
- };
- /**
- * Move the state of the animation to a specific point in the tween's
- * timeline. If the animation is not running, this will cause the `step`
- * handlers to be called.
- * @method seek
- * @param {millisecond} millisecond The millisecond of the animation to seek
- * to. This must not be less than `0`.
- * @chainable
- */
- Tweenable.prototype.seek = function (millisecond) {
- millisecond = Math.max(millisecond, 0);
- var currentTime = now();
- if ((this._timestamp + millisecond) === 0) {
- return this;
- }
- this._timestamp = currentTime - millisecond;
- if (!this.isPlaying()) {
- this._isTweening = true;
- this._isPaused = false;
- // If the animation is not running, call timeoutHandler to make sure that
- // any step handlers are run.
- timeoutHandler(this,
- this._timestamp,
- this._delay,
- this._duration,
- this._currentState,
- this._originalState,
- this._targetState,
- this._easing,
- this._step,
- this._scheduleFunction,
- currentTime
- );
- this.pause();
- }
- return this;
- };
- /**
- * Stops and cancels a tween.
- * @param {boolean=} gotoEnd If `false` or omitted, the tween just stops at
- * its current state, and the `finish` handler is not invoked. If `true`,
- * the tweened object's values are instantly set to the target values, and
- * `finish` is invoked.
- * @method stop
- * @chainable
- */
- Tweenable.prototype.stop = function (gotoEnd) {
- this._isTweening = false;
- this._isPaused = false;
- this._timeoutHandler = noop;
- (root.cancelAnimationFrame ||
- root.webkitCancelAnimationFrame ||
- root.oCancelAnimationFrame ||
- root.msCancelAnimationFrame ||
- root.mozCancelRequestAnimationFrame ||
- root.clearTimeout)(this._scheduleId);
- if (gotoEnd) {
- applyFilter(this, 'beforeTween');
- tweenProps(
- 1,
- this._currentState,
- this._originalState,
- this._targetState,
- 1,
- 0,
- this._easing
- );
- applyFilter(this, 'afterTween');
- applyFilter(this, 'afterTweenEnd');
- this._finish.call(this, this._currentState, this._attachment);
- }
- return this;
- };
- /**
- * @method isPlaying
- * @return {boolean} Whether or not a tween is running.
- */
- Tweenable.prototype.isPlaying = function () {
- return this._isTweening && !this._isPaused;
- };
- /**
- * Set a custom schedule function.
- *
- * If a custom function is not set,
- * [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame)
- * is used if available, otherwise
- * [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout)
- * is used.
- * @method setScheduleFunction
- * @param {Function(Function,number)} scheduleFunction The function to be
- * used to schedule the next frame to be rendered.
- */
- Tweenable.prototype.setScheduleFunction = function (scheduleFunction) {
- this._scheduleFunction = scheduleFunction;
- };
- /**
- * `delete` all "own" properties. Call this when the `Tweenable` instance
- * is no longer needed to free memory.
- * @method dispose
- */
- Tweenable.prototype.dispose = function () {
- var prop;
- for (prop in this) {
- if (this.hasOwnProperty(prop)) {
- delete this[prop];
- }
- }
- };
- /**
- * Filters are used for transforming the properties of a tween at various
- * points in a Tweenable's life cycle. See the README for more info on this.
- * @private
- */
- Tweenable.prototype.filter = {};
- /**
- * This object contains all of the tweens available to Shifty. It is
- * extensible - simply attach properties to the `Tweenable.prototype.formula`
- * Object following the same format as `linear`.
- *
- * `pos` should be a normalized `number` (between 0 and 1).
- * @property formula
- * @type {Object(function)}
- */
- Tweenable.prototype.formula = {
- linear: function (pos) {
- return pos;
- }
- };
- formula = Tweenable.prototype.formula;
- shallowCopy(Tweenable, {
- 'now': now
- ,'each': each
- ,'tweenProps': tweenProps
- ,'tweenProp': tweenProp
- ,'applyFilter': applyFilter
- ,'shallowCopy': shallowCopy
- ,'defaults': defaults
- ,'composeEasingObject': composeEasingObject
- });
- // `root` is provided in the intro/outro files.
- // A hook used for unit testing.
- if (typeof SHIFTY_DEBUG_NOW === 'function') {
- root.timeoutHandler = timeoutHandler;
- }
- // Bootstrap Tweenable appropriately for the environment.
- if (typeof exports === 'object') {
- // CommonJS
- module.exports = Tweenable;
- } else if (typeof define === 'function' && define.amd) {
- // AMD
- define(function () {return Tweenable;});
- } else if (typeof root.Tweenable === 'undefined') {
- // Browser: Make `Tweenable` globally accessible.
- root.Tweenable = Tweenable;
- }
- return Tweenable;
- } ());
- /*!
- * All equations are adapted from Thomas Fuchs'
- * [Scripty2](https://github.com/madrobby/scripty2/blob/master/src/effects/transitions/penner.js).
- *
- * Based on Easing Equations (c) 2003 [Robert
- * Penner](http://www.robertpenner.com/), all rights reserved. This work is
- * [subject to terms](http://www.robertpenner.com/easing_terms_of_use.html).
- */
- /*!
- * TERMS OF USE - EASING EQUATIONS
- * Open source under the BSD License.
- * Easing Equations (c) 2003 Robert Penner, all rights reserved.
- */
- ;(function () {
- Tweenable.shallowCopy(Tweenable.prototype.formula, {
- easeInQuad: function (pos) {
- return Math.pow(pos, 2);
- },
- easeOutQuad: function (pos) {
- return -(Math.pow((pos - 1), 2) - 1);
- },
- easeInOutQuad: function (pos) {
- if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,2);}
- return -0.5 * ((pos -= 2) * pos - 2);
- },
- easeInCubic: function (pos) {
- return Math.pow(pos, 3);
- },
- easeOutCubic: function (pos) {
- return (Math.pow((pos - 1), 3) + 1);
- },
- easeInOutCubic: function (pos) {
- if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,3);}
- return 0.5 * (Math.pow((pos - 2),3) + 2);
- },
- easeInQuart: function (pos) {
- return Math.pow(pos, 4);
- },
- easeOutQuart: function (pos) {
- return -(Math.pow((pos - 1), 4) - 1);
- },
- easeInOutQuart: function (pos) {
- if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,4);}
- return -0.5 * ((pos -= 2) * Math.pow(pos,3) - 2);
- },
- easeInQuint: function (pos) {
- return Math.pow(pos, 5);
- },
- easeOutQuint: function (pos) {
- return (Math.pow((pos - 1), 5) + 1);
- },
- easeInOutQuint: function (pos) {
- if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,5);}
- return 0.5 * (Math.pow((pos - 2),5) + 2);
- },
- easeInSine: function (pos) {
- return -Math.cos(pos * (Math.PI / 2)) + 1;
- },
- easeOutSine: function (pos) {
- return Math.sin(pos * (Math.PI / 2));
- },
- easeInOutSine: function (pos) {
- return (-0.5 * (Math.cos(Math.PI * pos) - 1));
- },
- easeInExpo: function (pos) {
- return (pos === 0) ? 0 : Math.pow(2, 10 * (pos - 1));
- },
- easeOutExpo: function (pos) {
- return (pos === 1) ? 1 : -Math.pow(2, -10 * pos) + 1;
- },
- easeInOutExpo: function (pos) {
- if (pos === 0) {return 0;}
- if (pos === 1) {return 1;}
- if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(2,10 * (pos - 1));}
- return 0.5 * (-Math.pow(2, -10 * --pos) + 2);
- },
- easeInCirc: function (pos) {
- return -(Math.sqrt(1 - (pos * pos)) - 1);
- },
- easeOutCirc: function (pos) {
- return Math.sqrt(1 - Math.pow((pos - 1), 2));
- },
- easeInOutCirc: function (pos) {
- if ((pos /= 0.5) < 1) {return -0.5 * (Math.sqrt(1 - pos * pos) - 1);}
- return 0.5 * (Math.sqrt(1 - (pos -= 2) * pos) + 1);
- },
- easeOutBounce: function (pos) {
- if ((pos) < (1 / 2.75)) {
- return (7.5625 * pos * pos);
- } else if (pos < (2 / 2.75)) {
- return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
- } else if (pos < (2.5 / 2.75)) {
- return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
- } else {
- return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
- }
- },
- easeInBack: function (pos) {
- var s = 1.70158;
- return (pos) * pos * ((s + 1) * pos - s);
- },
- easeOutBack: function (pos) {
- var s = 1.70158;
- return (pos = pos - 1) * pos * ((s + 1) * pos + s) + 1;
- },
- easeInOutBack: function (pos) {
- var s = 1.70158;
- if ((pos /= 0.5) < 1) {
- return 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s));
- }
- return 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
- },
- elastic: function (pos) {
- // jshint maxlen:90
- return -1 * Math.pow(4,-8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1;
- },
- swingFromTo: function (pos) {
- var s = 1.70158;
- return ((pos /= 0.5) < 1) ?
- 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s)) :
- 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
- },
- swingFrom: function (pos) {
- var s = 1.70158;
- return pos * pos * ((s + 1) * pos - s);
- },
- swingTo: function (pos) {
- var s = 1.70158;
- return (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
- },
- bounce: function (pos) {
- if (pos < (1 / 2.75)) {
- return (7.5625 * pos * pos);
- } else if (pos < (2 / 2.75)) {
- return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
- } else if (pos < (2.5 / 2.75)) {
- return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
- } else {
- return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
- }
- },
- bouncePast: function (pos) {
- if (pos < (1 / 2.75)) {
- return (7.5625 * pos * pos);
- } else if (pos < (2 / 2.75)) {
- return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
- } else if (pos < (2.5 / 2.75)) {
- return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
- } else {
- return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
- }
- },
- easeFromTo: function (pos) {
- if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,4);}
- return -0.5 * ((pos -= 2) * Math.pow(pos,3) - 2);
- },
- easeFrom: function (pos) {
- return Math.pow(pos,4);
- },
- easeTo: function (pos) {
- return Math.pow(pos,0.25);
- }
- });
- }());
- // jshint maxlen:100
- /**
- * The Bezier magic in this file is adapted/copied almost wholesale from
- * [Scripty2](https://github.com/madrobby/scripty2/blob/master/src/effects/transitions/cubic-bezier.js),
- * which was adapted from Apple code (which probably came from
- * [here](http://opensource.apple.com/source/WebCore/WebCore-955.66/platform/graphics/UnitBezier.h)).
- * Special thanks to Apple and Thomas Fuchs for much of this code.
- */
- /**
- * Copyright (c) 2006 Apple Computer, Inc. All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice,
- * this list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- * this list of conditions and the following disclaimer in the documentation
- * and/or other materials provided with the distribution.
- *
- * 3. Neither the name of the copyright holder(s) nor the names of any
- * contributors may be used to endorse or promote products derived from
- * this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
- * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
- * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
- * POSSIBILITY OF SUCH DAMAGE.
- */
- ;(function () {
- // port of webkit cubic bezier handling by http://www.netzgesta.de/dev/
- function cubicBezierAtTime(t,p1x,p1y,p2x,p2y,duration) {
- var ax = 0,bx = 0,cx = 0,ay = 0,by = 0,cy = 0;
- function sampleCurveX(t) {
- return ((ax * t + bx) * t + cx) * t;
- }
- function sampleCurveY(t) {
- return ((ay * t + by) * t + cy) * t;
- }
- function sampleCurveDerivativeX(t) {
- return (3.0 * ax * t + 2.0 * bx) * t + cx;
- }
- function solveEpsilon(duration) {
- return 1.0 / (200.0 * duration);
- }
- function solve(x,epsilon) {
- return sampleCurveY(solveCurveX(x, epsilon));
- }
- function fabs(n) {
- if (n >= 0) {
- return n;
- } else {
- return 0 - n;
- }
- }
- function solveCurveX(x, epsilon) {
- var t0,t1,t2,x2,d2,i;
- for (t2 = x, i = 0; i < 8; i++) {
- x2 = sampleCurveX(t2) - x;
- if (fabs(x2) < epsilon) {
- return t2;
- }
- d2 = sampleCurveDerivativeX(t2);
- if (fabs(d2) < 1e-6) {
- break;
- }
- t2 = t2 - x2 / d2;
- }
- t0 = 0.0;
- t1 = 1.0;
- t2 = x;
- if (t2 < t0) {
- return t0;
- }
- if (t2 > t1) {
- return t1;
- }
- while (t0 < t1) {
- x2 = sampleCurveX(t2);
- if (fabs(x2 - x) < epsilon) {
- return t2;
- }
- if (x > x2) {
- t0 = t2;
- }else {
- t1 = t2;
- }
- t2 = (t1 - t0) * 0.5 + t0;
- }
- return t2; // Failure.
- }
- cx = 3.0 * p1x;
- bx = 3.0 * (p2x - p1x) - cx;
- ax = 1.0 - cx - bx;
- cy = 3.0 * p1y;
- by = 3.0 * (p2y - p1y) - cy;
- ay = 1.0 - cy - by;
- return solve(t, solveEpsilon(duration));
- }
- /**
- * getCubicBezierTransition(x1, y1, x2, y2) -> Function
- *
- * Generates a transition easing function that is compatible
- * with WebKit's CSS transitions `-webkit-transition-timing-function`
- * CSS property.
- *
- * The W3C has more information about CSS3 transition timing functions:
- * http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
- *
- * @param {number} x1
- * @param {number} y1
- * @param {number} x2
- * @param {number} y2
- * @return {function}
- * @private
- */
- function getCubicBezierTransition (x1, y1, x2, y2) {
- return function (pos) {
- return cubicBezierAtTime(pos,x1,y1,x2,y2,1);
- };
- }
- // End ported code
- /**
- * Create a Bezier easing function and attach it to `{{#crossLink
- * "Tweenable/formula:property"}}Tweenable#formula{{/crossLink}}`. This
- * function gives you total control over the easing curve. Matthew Lein's
- * [Ceaser](http://matthewlein.com/ceaser/) is a useful tool for visualizing
- * the curves you can make with this function.
- * @method setBezierFunction
- * @param {string} name The name of the easing curve. Overwrites the old
- * easing function on `{{#crossLink
- * "Tweenable/formula:property"}}Tweenable#formula{{/crossLink}}` if it
- * exists.
- * @param {number} x1
- * @param {number} y1
- * @param {number} x2
- * @param {number} y2
- * @return {function} The easing function that was attached to
- * Tweenable.prototype.formula.
- */
- Tweenable.setBezierFunction = function (name, x1, y1, x2, y2) {
- var cubicBezierTransition = getCubicBezierTransition(x1, y1, x2, y2);
- cubicBezierTransition.displayName = name;
- cubicBezierTransition.x1 = x1;
- cubicBezierTransition.y1 = y1;
- cubicBezierTransition.x2 = x2;
- cubicBezierTransition.y2 = y2;
- return Tweenable.prototype.formula[name] = cubicBezierTransition;
- };
- /**
- * `delete` an easing function from `{{#crossLink
- * "Tweenable/formula:property"}}Tweenable#formula{{/crossLink}}`. Be
- * careful with this method, as it `delete`s whatever easing formula matches
- * `name` (which means you can delete standard Shifty easing functions).
- * @method unsetBezierFunction
- * @param {string} name The name of the easing function to delete.
- * @return {function}
- */
- Tweenable.unsetBezierFunction = function (name) {
- delete Tweenable.prototype.formula[name];
- };
- })();
- ;(function () {
- function getInterpolatedValues (
- from, current, targetState, position, easing, delay) {
- return Tweenable.tweenProps(
- position, current, from, targetState, 1, delay, easing);
- }
- // Fake a Tweenable and patch some internals. This approach allows us to
- // skip uneccessary processing and object recreation, cutting down on garbage
- // collection pauses.
- var mockTweenable = new Tweenable();
- mockTweenable._filterArgs = [];
- /**
- * Compute the midpoint of two Objects. This method effectively calculates a
- * specific frame of animation that `{{#crossLink
- * "Tweenable/tween:method"}}{{/crossLink}}` does many times over the course
- * of a full tween.
- *
- * var interpolatedValues = Tweenable.interpolate({
- * width: '100px',
- * opacity: 0,
- * color: '#fff'
- * }, {
- * width: '200px',
- * opacity: 1,
- * color: '#000'
- * }, 0.5);
- *
- * // {opacity: 0.5, width: "150px", color: "rgb(127,127,127)"}
- *
- * @static
- * @method interpolate
- * @param {Object} from The starting values to tween from.
- * @param {Object} targetState The ending values to tween to.
- * @param {number} position The normalized position value (between `0.0` and
- * `1.0`) to interpolate the values between `from` and `to` for. `from`
- * represents `0` and `to` represents `1`.
- * @param {Object.<string|Function>|string|Function} easing The easing
- * curve(s) to calculate the midpoint against. You can reference any easing
- * function attached to `Tweenable.prototype.formula`, or provide the easing
- * function(s) directly. If omitted, this defaults to "linear".
- * @param {number=} opt_delay Optional delay to pad the beginning of the
- * interpolated tween with. This increases the range of `position` from (`0`
- * through `1`) to (`0` through `1 + opt_delay`). So, a delay of `0.5` would
- * increase all valid values of `position` to numbers between `0` and `1.5`.
- * @return {Object}
- */
- Tweenable.interpolate = function (
- from, targetState, position, easing, opt_delay) {
- var current = Tweenable.shallowCopy({}, from);
- var delay = opt_delay || 0;
- var easingObject = Tweenable.composeEasingObject(
- from, easing || 'linear');
- mockTweenable.set({});
- // Alias and reuse the _filterArgs array instead of recreating it.
- var filterArgs = mockTweenable._filterArgs;
- filterArgs.length = 0;
- filterArgs[0] = current;
- filterArgs[1] = from;
- filterArgs[2] = targetState;
- filterArgs[3] = easingObject;
- // Any defined value transformation must be applied
- Tweenable.applyFilter(mockTweenable, 'tweenCreated');
- Tweenable.applyFilter(mockTweenable, 'beforeTween');
- var interpolatedValues = getInterpolatedValues(
- from, current, targetState, position, easingObject, delay);
- // Transform values back into their original format
- Tweenable.applyFilter(mockTweenable, 'afterTween');
- return interpolatedValues;
- };
- }());
- /**
- * This module adds string interpolation support to Shifty.
- *
- * The Token extension allows Shifty to tween numbers inside of strings. Among
- * other things, this allows you to animate CSS properties. For example, you
- * can do this:
- *
- * var tweenable = new Tweenable();
- * tweenable.tween({
- * from: { transform: 'translateX(45px)' },
- * to: { transform: 'translateX(90xp)' }
- * });
- *
- * `translateX(45)` will be tweened to `translateX(90)`. To demonstrate:
- *
- * var tweenable = new Tweenable();
- * tweenable.tween({
- * from: { transform: 'translateX(45px)' },
- * to: { transform: 'translateX(90px)' },
- * step: function (state) {
- * console.log(state.transform);
- * }
- * });
- *
- * The above snippet will log something like this in the console:
- *
- * translateX(60.3px)
- * ...
- * translateX(76.05px)
- * ...
- * translateX(90px)
- *
- * Another use for this is animating colors:
- *
- * var tweenable = new Tweenable();
- * tweenable.tween({
- * from: { color: 'rgb(0,255,0)' },
- * to: { color: 'rgb(255,0,255)' },
- * step: function (state) {
- * console.log(state.color);
- * }
- * });
- *
- * The above snippet will log something like this:
- *
- * rgb(84,170,84)
- * ...
- * rgb(170,84,170)
- * ...
- * rgb(255,0,255)
- *
- * This extension also supports hexadecimal colors, in both long (`#ff00ff`)
- * and short (`#f0f`) forms. Be aware that hexadecimal input values will be
- * converted into the equivalent RGB output values. This is done to optimize
- * for performance.
- *
- * var tweenable = new Tweenable();
- * tweenable.tween({
- * from: { color: '#0f0' },
- * to: { color: '#f0f' },
- * step: function (state) {
- * console.log(state.color);
- * }
- * });
- *
- * This snippet will generate the same output as the one before it because
- * equivalent values were supplied (just in hexadecimal form rather than RGB):
- *
- * rgb(84,170,84)
- * ...
- * rgb(170,84,170)
- * ...
- * rgb(255,0,255)
- *
- * ## Easing support
- *
- * Easing works somewhat differently in the Token extension. This is because
- * some CSS properties have multiple values in them, and you might need to
- * tween each value along its own easing curve. A basic example:
- *
- * var tweenable = new Tweenable();
- * tweenable.tween({
- * from: { transform: 'translateX(0px) translateY(0px)' },
- * to: { transform: 'translateX(100px) translateY(100px)' },
- * easing: { transform: 'easeInQuad' },
- * step: function (state) {
- * console.log(state.transform);
- * }
- * });
- *
- * The above snippet will create values like this:
- *
- * translateX(11.56px) translateY(11.56px)
- * ...
- * translateX(46.24px) translateY(46.24px)
- * ...
- * translateX(100px) translateY(100px)
- *
- * In this case, the values for `translateX` and `translateY` are always the
- * same for each step of the tween, because they have the same start and end
- * points and both use the same easing curve. We can also tween `translateX`
- * and `translateY` along independent curves:
- *
- * var tweenable = new Tweenable();
- * tweenable.tween({
- * from: { transform: 'translateX(0px) translateY(0px)' },
- * to: { transform: 'translateX(100px) translateY(100px)' },
- * easing: { transform: 'easeInQuad bounce' },
- * step: function (state) {
- * console.log(state.transform);
- * }
- * });
- *
- * The above snippet will create values like this:
- *
- * translateX(10.89px) translateY(82.35px)
- * ...
- * translateX(44.89px) translateY(86.73px)
- * ...
- * translateX(100px) translateY(100px)
- *
- * `translateX` and `translateY` are not in sync anymore, because `easeInQuad`
- * was specified for `translateX` and `bounce` for `translateY`. Mixing and
- * matching easing curves can make for some interesting motion in your
- * animations.
- *
- * The order of the space-separated easing curves correspond the token values
- * they apply to. If there are more token values than easing curves listed,
- * the last easing curve listed is used.
- * @submodule Tweenable.token
- */
- // token function is defined above only so that dox-foundation sees it as
- // documentation and renders it. It is never used, and is optimized away at
- // build time.
- ;(function (Tweenable) {
- /**
- * @typedef {{
- * formatString: string
- * chunkNames: Array.<string>
- * }}
- * @private
- */
- var formatManifest;
- // CONSTANTS
- var R_NUMBER_COMPONENT = /(\d|\-|\.)/;
- var R_FORMAT_CHUNKS = /([^\-0-9\.]+)/g;
- var R_UNFORMATTED_VALUES = /[0-9.\-]+/g;
- var R_RGB = new RegExp(
- 'rgb\\(' + R_UNFORMATTED_VALUES.source +
- (/,\s*/.source) + R_UNFORMATTED_VALUES.source +
- (/,\s*/.source) + R_UNFORMATTED_VALUES.source + '\\)', 'g');
- var R_RGB_PREFIX = /^.*\(/;
- var R_HEX = /#([0-9]|[a-f]){3,6}/gi;
- var VALUE_PLACEHOLDER = 'VAL';
- // HELPERS
- /**
- * @param {Array.number} rawValues
- * @param {string} prefix
- *
- * @return {Array.<string>}
- * @private
- */
- function getFormatChunksFrom (rawValues, prefix) {
- var accumulator = [];
- var rawValuesLength = rawValues.length;
- var i;
- for (i = 0; i < rawValuesLength; i++) {
- accumulator.push('_' + prefix + '_' + i);
- }
- return accumulator;
- }
- /**
- * @param {string} formattedString
- *
- * @return {string}
- * @private
- */
- function getFormatStringFrom (formattedString) {
- var chunks = formattedString.match(R_FORMAT_CHUNKS);
- if (!chunks) {
- // chunks will be null if there were no tokens to parse in
- // formattedString (for example, if formattedString is '2'). Coerce
- // chunks to be useful here.
- chunks = ['', ''];
- // If there is only one chunk, assume that the string is a number
- // followed by a token...
- // NOTE: This may be an unwise assumption.
- } else if (chunks.length === 1 ||
- // ...or if the string starts with a number component (".", "-", or a
- // digit)...
- formattedString[0].match(R_NUMBER_COMPONENT)) {
- // ...prepend an empty string here to make sure that the formatted number
- // is properly replaced by VALUE_PLACEHOLDER
- chunks.unshift('');
- }
- return chunks.join(VALUE_PLACEHOLDER);
- }
- /**
- * Convert all hex color values within a string to an rgb string.
- *
- * @param {Object} stateObject
- *
- * @return {Object} The modified obj
- * @private
- */
- function sanitizeObjectForHexProps (stateObject) {
- Tweenable.each(stateObject, function (prop) {
- var currentProp = stateObject[prop];
- if (typeof currentProp === 'string' && currentProp.match(R_HEX)) {
- stateObject[prop] = sanitizeHexChunksToRGB(currentProp);
- }
- });
- }
- /**
- * @param {string} str
- *
- * @return {string}
- * @private
- */
- function sanitizeHexChunksToRGB (str) {
- return filterStringChunks(R_HEX, str, convertHexToRGB);
- }
- /**
- * @param {string} hexString
- *
- * @return {string}
- * @private
- */
- function convertHexToRGB (hexString) {
- var rgbArr = hexToRGBArray(hexString);
- return 'rgb(' + rgbArr[0] + ',' + rgbArr[1] + ',' + rgbArr[2] + ')';
- }
- var hexToRGBArray_returnArray = [];
- /**
- * Convert a hexadecimal string to an array with three items, one each for
- * the red, blue, and green decimal values.
- *
- * @param {string} hex A hexadecimal string.
- *
- * @returns {Array.<number>} The converted Array of RGB values if `hex` is a
- * valid string, or an Array of three 0's.
- * @private
- */
- function hexToRGBArray (hex) {
- hex = hex.replace(/#/, '');
- // If the string is a shorthand three digit hex notation, normalize it to
- // the standard six digit notation
- if (hex.length === 3) {
- hex = hex.split('');
- hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
- }
- hexToRGBArray_returnArray[0] = hexToDec(hex.substr(0, 2));
- hexToRGBArray_returnArray[1] = hexToDec(hex.substr(2, 2));
- hexToRGBArray_returnArray[2] = hexToDec(hex.substr(4, 2));
- return hexToRGBArray_returnArray;
- }
- /**
- * Convert a base-16 number to base-10.
- *
- * @param {Number|String} hex The value to convert
- *
- * @returns {Number} The base-10 equivalent of `hex`.
- * @private
- */
- function hexToDec (hex) {
- return parseInt(hex, 16);
- }
- /**
- * Runs a filter operation on all chunks of a string that match a RegExp
- *
- * @param {RegExp} pattern
- * @param {string} unfilteredString
- * @param {function(string)} filter
- *
- * @return {string}
- * @private
- */
- function filterStringChunks (pattern, unfilteredString, filter) {
- var pattenMatches = unfilteredString.match(pattern);
- var filteredString = unfilteredString.replace(pattern, VALUE_PLACEHOLDER);
- if (pattenMatches) {
- var pattenMatchesLength = pattenMatches.length;
- var currentChunk;
- for (var i = 0; i < pattenMatchesLength; i++) {
- currentChunk = pattenMatches.shift();
- filteredString = filteredString.replace(
- VALUE_PLACEHOLDER, filter(currentChunk));
- }
- }
- return filteredString;
- }
- /**
- * Check for floating point values within rgb strings and rounds them.
- *
- * @param {string} formattedString
- *
- * @return {string}
- * @private
- */
- function sanitizeRGBChunks (formattedString) {
- return filterStringChunks(R_RGB, formattedString, sanitizeRGBChunk);
- }
- /**
- * @param {string} rgbChunk
- *
- * @return {string}
- * @private
- */
- function sanitizeRGBChunk (rgbChunk) {
- var numbers = rgbChunk.match(R_UNFORMATTED_VALUES);
- var numbersLength = numbers.length;
- var sanitizedString = rgbChunk.match(R_RGB_PREFIX)[0];
- for (var i = 0; i < numbersLength; i++) {
- sanitizedString += parseInt(numbers[i], 10) + ',';
- }
- sanitizedString = sanitizedString.slice(0, -1) + ')';
- return sanitizedString;
- }
- /**
- * @param {Object} stateObject
- *
- * @return {Object} An Object of formatManifests that correspond to
- * the string properties of stateObject
- * @private
- */
- function getFormatManifests (stateObject) {
- var manifestAccumulator = {};
- Tweenable.each(stateObject, function (prop) {
- var currentProp = stateObject[prop];
- if (typeof currentProp === 'string') {
- var rawValues = getValuesFrom(currentProp);
- manifestAccumulator[prop] = {
- 'formatString': getFormatStringFrom(currentProp)
- ,'chunkNames': getFormatChunksFrom(rawValues, prop)
- };
- }
- });
- return manifestAccumulator;
- }
- /**
- * @param {Object} stateObject
- * @param {Object} formatManifests
- * @private
- */
- function expandFormattedProperties (stateObject, formatManifests) {
- Tweenable.each(formatManifests, function (prop) {
- var currentProp = stateObject[prop];
- var rawValues = getValuesFrom(currentProp);
- var rawValuesLength = rawValues.length;
- for (var i = 0; i < rawValuesLength; i++) {
- stateObject[formatManifests[prop].chunkNames[i]] = +rawValues[i];
- }
- delete stateObject[prop];
- });
- }
- /**
- * @param {Object} stateObject
- * @param {Object} formatManifests
- * @private
- */
- function collapseFormattedProperties (stateObject, formatManifests) {
- Tweenable.each(formatManifests, function (prop) {
- var currentProp = stateObject[prop];
- var formatChunks = extractPropertyChunks(
- stateObject, formatManifests[prop].chunkNames);
- var valuesList = getValuesList(
- formatChunks, formatManifests[prop].chunkNames);
- currentProp = getFormattedValues(
- formatManifests[prop].formatString, valuesList);
- stateObject[prop] = sanitizeRGBChunks(currentProp);
- });
- }
- /**
- * @param {Object} stateObject
- * @param {Array.<string>} chunkNames
- *
- * @return {Object} The extracted value chunks.
- * @private
- */
- function extractPropertyChunks (stateObject, chunkNames) {
- var extractedValues = {};
- var currentChunkName, chunkNamesLength = chunkNames.length;
- for (var i = 0; i < chunkNamesLength; i++) {
- currentChunkName = chunkNames[i];
- extractedValues[currentChunkName] = stateObject[currentChunkName];
- delete stateObject[currentChunkName];
- }
- return extractedValues;
- }
- var getValuesList_accumulator = [];
- /**
- * @param {Object} stateObject
- * @param {Array.<string>} chunkNames
- *
- * @return {Array.<number>}
- * @private
- */
- function getValuesList (stateObject, chunkNames) {
- getValuesList_accumulator.length = 0;
- var chunkNamesLength = chunkNames.length;
- for (var i = 0; i < chunkNamesLength; i++) {
- getValuesList_accumulator.push(stateObject[chunkNames[i]]);
- }
- return getValuesList_accumulator;
- }
- /**
- * @param {string} formatString
- * @param {Array.<number>} rawValues
- *
- * @return {string}
- * @private
- */
- function getFormattedValues (formatString, rawValues) {
- var formattedValueString = formatString;
- var rawValuesLength = rawValues.length;
- for (var i = 0; i < rawValuesLength; i++) {
- formattedValueString = formattedValueString.replace(
- VALUE_PLACEHOLDER, +rawValues[i].toFixed(4));
- }
- return formattedValueString;
- }
- /**
- * Note: It's the duty of the caller to convert the Array elements of the
- * return value into numbers. This is a performance optimization.
- *
- * @param {string} formattedString
- *
- * @return {Array.<string>|null}
- * @private
- */
- function getValuesFrom (formattedString) {
- return formattedString.match(R_UNFORMATTED_VALUES);
- }
- /**
- * @param {Object} easingObject
- * @param {Object} tokenData
- * @private
- */
- function expandEasingObject (easingObject, tokenData) {
- Tweenable.each(tokenData, function (prop) {
- var currentProp = tokenData[prop];
- var chunkNames = currentProp.chunkNames;
- var chunkLength = chunkNames.length;
- var easing = easingObject[prop];
- var i;
- if (typeof easing === 'string') {
- var easingChunks = easing.split(' ');
- var lastEasingChunk = easingChunks[easingChunks.length - 1];
- for (i = 0; i < chunkLength; i++) {
- easingObject[chunkNames[i]] = easingChunks[i] || lastEasingChunk;
- }
- } else {
- for (i = 0; i < chunkLength; i++) {
- easingObject[chunkNames[i]] = easing;
- }
- }
- delete easingObject[prop];
- });
- }
- /**
- * @param {Object} easingObject
- * @param {Object} tokenData
- * @private
- */
- function collapseEasingObject (easingObject, tokenData) {
- Tweenable.each(tokenData, function (prop) {
- var currentProp = tokenData[prop];
- var chunkNames = currentProp.chunkNames;
- var chunkLength = chunkNames.length;
- var firstEasing = easingObject[chunkNames[0]];
- var typeofEasings = typeof firstEasing;
- if (typeofEasings === 'string') {
- var composedEasingString = '';
- for (var i = 0; i < chunkLength; i++) {
- composedEasingString += ' ' + easingObject[chunkNames[i]];
- delete easingObject[chunkNames[i]];
- }
- easingObject[prop] = composedEasingString.substr(1);
- } else {
- easingObject[prop] = firstEasing;
- }
- });
- }
- Tweenable.prototype.filter.token = {
- 'tweenCreated': function (currentState, fromState, toState, easingObject) {
- sanitizeObjectForHexProps(currentState);
- sanitizeObjectForHexProps(fromState);
- sanitizeObjectForHexProps(toState);
- this._tokenData = getFormatManifests(currentState);
- },
- 'beforeTween': function (currentState, fromState, toState, easingObject) {
- expandEasingObject(easingObject, this._tokenData);
- expandFormattedProperties(currentState, this._tokenData);
- expandFormattedProperties(fromState, this._tokenData);
- expandFormattedProperties(toState, this._tokenData);
- },
- 'afterTween': function (currentState, fromState, toState, easingObject) {
- collapseFormattedProperties(currentState, this._tokenData);
- collapseFormattedProperties(fromState, this._tokenData);
- collapseFormattedProperties(toState, this._tokenData);
- collapseEasingObject(easingObject, this._tokenData);
- }
- };
- } (Tweenable));
- }).call(null);
- },{}],2:[function(require,module,exports){
- // Circle shaped progress bar
- var Shape = require('./shape');
- var utils = require('./utils');
- var Circle = function Circle(container, options) {
- // Use two arcs to form a circle
- // See this answer http://stackoverflow.com/a/10477334/1446092
- this._pathTemplate =
- 'M 50,50 m 0,-{radius}' +
- ' a {radius},{radius} 0 1 1 0,{2radius}' +
- ' a {radius},{radius} 0 1 1 0,-{2radius}';
- this.containerAspectRatio = 1;
- Shape.apply(this, arguments);
- };
- Circle.prototype = new Shape();
- Circle.prototype.constructor = Circle;
- Circle.prototype._pathString = function _pathString(opts) {
- var widthOfWider = opts.strokeWidth;
- if (opts.trailWidth && opts.trailWidth > opts.strokeWidth) {
- widthOfWider = opts.trailWidth;
- }
- var r = 50 - widthOfWider / 2;
- return utils.render(this._pathTemplate, {
- radius: r,
- '2radius': r * 2
- });
- };
- Circle.prototype._trailString = function _trailString(opts) {
- return this._pathString(opts);
- };
- module.exports = Circle;
- },{"./shape":7,"./utils":8}],3:[function(require,module,exports){
- // Line shaped progress bar
- var Shape = require('./shape');
- var utils = require('./utils');
- var Line = function Line(container, options) {
- this._pathTemplate = 'M 0,{center} L 100,{center}';
- Shape.apply(this, arguments);
- };
- Line.prototype = new Shape();
- Line.prototype.constructor = Line;
- Line.prototype._initializeSvg = function _initializeSvg(svg, opts) {
- svg.setAttribute('viewBox', '0 0 100 ' + opts.strokeWidth);
- svg.setAttribute('preserveAspectRatio', 'none');
- };
- Line.prototype._pathString = function _pathString(opts) {
- return utils.render(this._pathTemplate, {
- center: opts.strokeWidth / 2
- });
- };
- Line.prototype._trailString = function _trailString(opts) {
- return this._pathString(opts);
- };
- module.exports = Line;
- },{"./shape":7,"./utils":8}],4:[function(require,module,exports){
- module.exports = {
- // Higher level API, different shaped progress bars
- Line: require('./line'),
- Circle: require('./circle'),
- SemiCircle: require('./semicircle'),
- // Lower level API to use any SVG path
- Path: require('./path'),
- // Base-class for creating new custom shapes
- // to be in line with the API of built-in shapes
- // Undocumented.
- Shape: require('./shape'),
- // Internal utils, undocumented.
- utils: require('./utils')
- };
- },{"./circle":2,"./line":3,"./path":5,"./semicircle":6,"./shape":7,"./utils":8}],5:[function(require,module,exports){
- // Lower level API to animate any kind of svg path
- var Tweenable = require('shifty');
- var utils = require('./utils');
- var EASING_ALIASES = {
- easeIn: 'easeInCubic',
- easeOut: 'easeOutCubic',
- easeInOut: 'easeInOutCubic'
- };
- var Path = function Path(path, opts) {
- // Throw a better error if not initialized with `new` keyword
- if (!(this instanceof Path)) {
- throw new Error('Constructor was called without new keyword');
- }
- // Default parameters for animation
- opts = utils.extend({
- duration: 800,
- easing: 'linear',
- from: {},
- to: {},
- step: function() {}
- }, opts);
- var element;
- if (utils.isString(path)) {
- element = document.querySelector(path);
- } else {
- element = path;
- }
- // Reveal .path as public attribute
- this.path = element;
- this._opts = opts;
- this._tweenable = null;
- // Set up the starting positions
- var length = this.path.getTotalLength();
- this.path.style.strokeDasharray = length + ' ' + length;
- this.set(0);
- };
- Path.prototype.value = function value() {
- var offset = this._getComputedDashOffset();
- var length = this.path.getTotalLength();
- var progress = 1 - offset / length;
- // Round number to prevent returning very small number like 1e-30, which
- // is practically 0
- return parseFloat(progress.toFixed(6), 10);
- };
- Path.prototype.set = function set(progress) {
- this.stop();
- this.path.style.strokeDashoffset = this._progressToOffset(progress);
- var step = this._opts.step;
- if (utils.isFunction(step)) {
- var easing = this._easing(this._opts.easing);
- var values = this._calculateTo(progress, easing);
- var reference = this._opts.shape || this;
- step(values, reference, this._opts.attachment);
- }
- };
- Path.prototype.stop = function stop() {
- this._stopTween();
- this.path.style.strokeDashoffset = this._getComputedDashOffset();
- };
- // Method introduced here:
- // http://jakearchibald.com/2013/animated-line-drawing-svg/
- Path.prototype.animate = function animate(progress, opts, cb) {
- opts = opts || {};
- if (utils.isFunction(opts)) {
- cb = opts;
- opts = {};
- }
- var passedOpts = utils.extend({}, opts);
- // Copy default opts to new object so defaults are not modified
- var defaultOpts = utils.extend({}, this._opts);
- opts = utils.extend(defaultOpts, opts);
- var shiftyEasing = this._easing(opts.easing);
- var values = this._resolveFromAndTo(progress, shiftyEasing, passedOpts);
- this.stop();
- // Trigger a layout so styles are calculated & the browser
- // picks up the starting position before animating
- this.path.getBoundingClientRect();
- var offset = this._getComputedDashOffset();
- var newOffset = this._progressToOffset(progress);
- var self = this;
- this._tweenable = new Tweenable();
- this._tweenable.tween({
- from: utils.extend({ offset: offset }, values.from),
- to: utils.extend({ offset: newOffset }, values.to),
- duration: opts.duration,
- easing: shiftyEasing,
- step: function(state) {
- self.path.style.strokeDashoffset = state.offset;
- var reference = opts.shape || self;
- opts.step(state, reference, opts.attachment);
- },
- finish: function(state) {
- if (utils.isFunction(cb)) {
- cb();
- }
- }
- });
- };
- Path.prototype._getComputedDashOffset = function _getComputedDashOffset() {
- var computedStyle = window.getComputedStyle(this.path, null);
- return parseFloat(computedStyle.getPropertyValue('stroke-dashoffset'), 10);
- };
- Path.prototype._progressToOffset = function _progressToOffset(progress) {
- var length = this.path.getTotalLength();
- return length - progress * length;
- };
- // Resolves from and to values for animation.
- Path.prototype._resolveFromAndTo = function _resolveFromAndTo(progress, easing, opts) {
- if (opts.from && opts.to) {
- return {
- from: opts.from,
- to: opts.to
- };
- }
- return {
- from: this._calculateFrom(easing),
- to: this._calculateTo(progress, easing)
- };
- };
- // Calculate `from` values from options passed at initialization
- Path.prototype._calculateFrom = function _calculateFrom(easing) {
- return Tweenable.interpolate(this._opts.from, this._opts.to, this.value(), easing);
- };
- // Calculate `to` values from options passed at initialization
- Path.prototype._calculateTo = function _calculateTo(progress, easing) {
- return Tweenable.interpolate(this._opts.from, this._opts.to, progress, easing);
- };
- Path.prototype._stopTween = function _stopTween() {
- if (this._tweenable !== null) {
- this._tweenable.stop();
- this._tweenable = null;
- }
- };
- Path.prototype._easing = function _easing(easing) {
- if (EASING_ALIASES.hasOwnProperty(easing)) {
- return EASING_ALIASES[easing];
- }
- return easing;
- };
- module.exports = Path;
- },{"./utils":8,"shifty":1}],6:[function(require,module,exports){
- // Semi-SemiCircle shaped progress bar
- var Shape = require('./shape');
- var Circle = require('./circle');
- var utils = require('./utils');
- var SemiCircle = function SemiCircle(container, options) {
- // Use one arc to form a SemiCircle
- // See this answer http://stackoverflow.com/a/10477334/1446092
- this._pathTemplate =
- 'M 50,50 m -{radius},0' +
- ' a {radius},{radius} 0 1 1 {2radius},0';
- this.containerAspectRatio = 2;
- Shape.apply(this, arguments);
- };
- SemiCircle.prototype = new Shape();
- SemiCircle.prototype.constructor = SemiCircle;
- SemiCircle.prototype._initializeSvg = function _initializeSvg(svg, opts) {
- svg.setAttribute('viewBox', '0 0 100 50');
- };
- SemiCircle.prototype._initializeTextContainer = function _initializeTextContainer(
- opts,
- container,
- textContainer
- ) {
- if (opts.text.style) {
- // Reset top style
- textContainer.style.top = 'auto';
- textContainer.style.bottom = '0';
- if (opts.text.alignToBottom) {
- utils.setStyle(textContainer, 'transform', 'translate(-50%, 0)');
- } else {
- utils.setStyle(textContainer, 'transform', 'translate(-50%, 50%)');
- }
- }
- };
- // Share functionality with Circle, just have different path
- SemiCircle.prototype._pathString = Circle.prototype._pathString;
- SemiCircle.prototype._trailString = Circle.prototype._trailString;
- module.exports = SemiCircle;
- },{"./circle":2,"./shape":7,"./utils":8}],7:[function(require,module,exports){
- // Base object for different progress bar shapes
- var Path = require('./path');
- var utils = require('./utils');
- var DESTROYED_ERROR = 'Object is destroyed';
- var Shape = function Shape(container, opts) {
- // Throw a better error if progress bars are not initialized with `new`
- // keyword
- if (!(this instanceof Shape)) {
- throw new Error('Constructor was called without new keyword');
- }
- // Prevent calling constructor without parameters so inheritance
- // works correctly. To understand, this is how Shape is inherited:
- //
- // Line.prototype = new Shape();
- //
- // We just want to set the prototype for Line.
- if (arguments.length === 0) {
- return;
- }
- // Default parameters for progress bar creation
- this._opts = utils.extend({
- color: '#555',
- strokeWidth: 1.0,
- trailColor: null,
- trailWidth: null,
- fill: null,
- text: {
- style: {
- color: null,
- position: 'absolute',
- left: '50%',
- top: '50%',
- padding: 0,
- margin: 0,
- transform: {
- prefix: true,
- value: 'translate(-50%, -50%)'
- }
- },
- autoStyleContainer: true,
- alignToBottom: true,
- value: null,
- className: 'progressbar-text'
- },
- svgStyle: {
- display: 'block',
- width: '100%'
- },
- warnings: false
- }, opts, true); // Use recursive extend
- // If user specifies e.g. svgStyle or text style, the whole object
- // should replace the defaults to make working with styles easier
- if (utils.isObject(opts) && opts.svgStyle !== undefined) {
- this._opts.svgStyle = opts.svgStyle;
- }
- if (utils.isObject(opts) && utils.isObject(opts.text) && opts.text.style !== undefined) {
- this._opts.text.style = opts.text.style;
- }
- var svgView = this._createSvgView(this._opts);
- var element;
- if (utils.isString(container)) {
- element = document.querySelector(container);
- } else {
- element = container;
- }
- if (!element) {
- throw new Error('Container does not exist: ' + container);
- }
- this._container = element;
- this._container.appendChild(svgView.svg);
- if (this._opts.warnings) {
- this._warnContainerAspectRatio(this._container);
- }
- if (this._opts.svgStyle) {
- utils.setStyles(svgView.svg, this._opts.svgStyle);
- }
- // Expose public attributes before Path initialization
- this.svg = svgView.svg;
- this.path = svgView.path;
- this.trail = svgView.trail;
- this.text = null;
- var newOpts = utils.extend({
- attachment: undefined,
- shape: this
- }, this._opts);
- this._progressPath = new Path(svgView.path, newOpts);
- if (utils.isObject(this._opts.text) && this._opts.text.value !== null) {
- this.setText(this._opts.text.value);
- }
- };
- Shape.prototype.animate = function animate(progress, opts, cb) {
- if (this._progressPath === null) {
- throw new Error(DESTROYED_ERROR);
- }
- this._progressPath.animate(progress, opts, cb);
- };
- Shape.prototype.stop = function stop() {
- if (this._progressPath === null) {
- throw new Error(DESTROYED_ERROR);
- }
- // Don't crash if stop is called inside step function
- if (this._progressPath === undefined) {
- return;
- }
- this._progressPath.stop();
- };
- Shape.prototype.destroy = function destroy() {
- if (this._progressPath === null) {
- throw new Error(DESTROYED_ERROR);
- }
- this.stop();
- this.svg.parentNode.removeChild(this.svg);
- this.svg = null;
- this.path = null;
- this.trail = null;
- this._progressPath = null;
- if (this.text !== null) {
- this.text.parentNode.removeChild(this.text);
- this.text = null;
- }
- };
- Shape.prototype.set = function set(progress) {
- if (this._progressPath === null) {
- throw new Error(DESTROYED_ERROR);
- }
- this._progressPath.set(progress);
- };
- Shape.prototype.value = function value() {
- if (this._progressPath === null) {
- throw new Error(DESTROYED_ERROR);
- }
- if (this._progressPath === undefined) {
- return 0;
- }
- return this._progressPath.value();
- };
- Shape.prototype.setText = function setText(newText) {
- if (this._progressPath === null) {
- throw new Error(DESTROYED_ERROR);
- }
- if (this.text === null) {
- // Create new text node
- this.text = this._createTextContainer(this._opts, this._container);
- this._container.appendChild(this.text);
- }
- // Remove previous text and add new
- if (utils.isObject(newText)) {
- utils.removeChildren(this.text);
- this.text.appendChild(newText);
- } else {
- this.text.innerHTML = newText;
- }
- };
- Shape.prototype._createSvgView = function _createSvgView(opts) {
- var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
- this._initializeSvg(svg, opts);
- var trailPath = null;
- // Each option listed in the if condition are 'triggers' for creating
- // the trail path
- if (opts.trailColor || opts.trailWidth) {
- trailPath = this._createTrail(opts);
- svg.appendChild(trailPath);
- }
- var path = this._createPath(opts);
- svg.appendChild(path);
- return {
- svg: svg,
- path: path,
- trail: trailPath
- };
- };
- Shape.prototype._initializeSvg = function _initializeSvg(svg, opts) {
- svg.setAttribute('viewBox', '0 0 100 100');
- };
- Shape.prototype._createPath = function _createPath(opts) {
- var pathString = this._pathString(opts);
- return this._createPathElement(pathString, opts);
- };
- Shape.prototype._createTrail = function _createTrail(opts) {
- // Create path string with original passed options
- var pathString = this._trailString(opts);
- // Prevent modifying original
- var newOpts = utils.extend({}, opts);
- // Defaults for parameters which modify trail path
- if (!newOpts.trailColor) {
- newOpts.trailColor = '#eee';
- }
- if (!newOpts.trailWidth) {
- newOpts.trailWidth = newOpts.strokeWidth;
- }
- newOpts.color = newOpts.trailColor;
- newOpts.strokeWidth = newOpts.trailWidth;
- // When trail path is set, fill must be set for it instead of the
- // actual path to prevent trail stroke from clipping
- newOpts.fill = null;
- return this._createPathElement(pathString, newOpts);
- };
- Shape.prototype._createPathElement = function _createPathElement(pathString, opts) {
- var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
- path.setAttribute('d', pathString);
- path.setAttribute('stroke', opts.color);
- path.setAttribute('stroke-width', opts.strokeWidth);
- if (opts.fill) {
- path.setAttribute('fill', opts.fill);
- } else {
- path.setAttribute('fill-opacity', '0');
- }
- return path;
- };
- Shape.prototype._createTextContainer = function _createTextContainer(opts, container) {
- var textContainer = document.createElement('div');
- textContainer.className = opts.text.className;
- var textStyle = opts.text.style;
- if (textStyle) {
- if (opts.text.autoStyleContainer) {
- container.style.position = 'relative';
- }
- utils.setStyles(textContainer, textStyle);
- // Default text color to progress bar's color
- if (!textStyle.color) {
- textContainer.style.color = opts.color;
- }
- }
- this._initializeTextContainer(opts, container, textContainer);
- return textContainer;
- };
- // Give custom shapes possibility to modify text element
- Shape.prototype._initializeTextContainer = function(opts, container, element) {
- // By default, no-op
- // Custom shapes should respect API options, such as text.style
- };
- Shape.prototype._pathString = function _pathString(opts) {
- throw new Error('Override this function for each progress bar');
- };
- Shape.prototype._trailString = function _trailString(opts) {
- throw new Error('Override this function for each progress bar');
- };
- Shape.prototype._warnContainerAspectRatio = function _warnContainerAspectRatio(container) {
- if (!this.containerAspectRatio) {
- return;
- }
- var computedStyle = window.getComputedStyle(container, null);
- var width = parseFloat(computedStyle.getPropertyValue('width'), 10);
- var height = parseFloat(computedStyle.getPropertyValue('height'), 10);
- if (!utils.floatEquals(this.containerAspectRatio, width / height)) {
- console.warn(
- 'Incorrect aspect ratio of container',
- '#' + container.id,
- 'detected:',
- computedStyle.getPropertyValue('width') + '(width)',
- '/',
- computedStyle.getPropertyValue('height') + '(height)',
- '=',
- width / height
- );
- console.warn(
- 'Aspect ratio of should be',
- this.containerAspectRatio
- );
- }
- };
- module.exports = Shape;
- },{"./path":5,"./utils":8}],8:[function(require,module,exports){
- // Utility functions
- var PREFIXES = 'Webkit Moz O ms'.split(' ');
- var FLOAT_COMPARISON_EPSILON = 0.001;
- // Copy all attributes from source object to destination object.
- // destination object is mutated.
- function extend(destination, source, recursive) {
- destination = destination || {};
- source = source || {};
- recursive = recursive || false;
- for (var attrName in source) {
- if (source.hasOwnProperty(attrName)) {
- var destVal = destination[attrName];
- var sourceVal = source[attrName];
- if (recursive && isObject(destVal) && isObject(sourceVal)) {
- destination[attrName] = extend(destVal, sourceVal, recursive);
- } else {
- destination[attrName] = sourceVal;
- }
- }
- }
- return destination;
- }
- // Renders templates with given variables. Variables must be surrounded with
- // braces without any spaces, e.g. {variable}
- // All instances of variable placeholders will be replaced with given content
- // Example:
- // render('Hello, {message}!', {message: 'world'})
- function render(template, vars) {
- var rendered = template;
- for (var key in vars) {
- if (vars.hasOwnProperty(key)) {
- var val = vars[key];
- var regExpString = '\\{' + key + '\\}';
- var regExp = new RegExp(regExpString, 'g');
- rendered = rendered.replace(regExp, val);
- }
- }
- return rendered;
- }
- function setStyle(element, style, value) {
- var elStyle = element.style; // cache for performance
- for (var i = 0; i < PREFIXES.length; ++i) {
- var prefix = PREFIXES[i];
- elStyle[prefix + capitalize(style)] = value;
- }
- elStyle[style] = value;
- }
- function setStyles(element, styles) {
- forEachObject(styles, function(styleValue, styleName) {
- // Allow disabling some individual styles by setting them
- // to null or undefined
- if (styleValue === null || styleValue === undefined) {
- return;
- }
- // If style's value is {prefix: true, value: '50%'},
- // Set also browser prefixed styles
- if (isObject(styleValue) && styleValue.prefix === true) {
- setStyle(element, styleName, styleValue.value);
- } else {
- element.style[styleName] = styleValue;
- }
- });
- }
- function capitalize(text) {
- return text.charAt(0).toUpperCase() + text.slice(1);
- }
- function isString(obj) {
- return typeof obj === 'string' || obj instanceof String;
- }
- function isFunction(obj) {
- return typeof obj === 'function';
- }
- function isArray(obj) {
- return Object.prototype.toString.call(obj) === '[object Array]';
- }
- // Returns true if `obj` is object as in {a: 1, b: 2}, not if it's function or
- // array
- function isObject(obj) {
- if (isArray(obj)) {
- return false;
- }
- var type = typeof obj;
- return type === 'object' && !!obj;
- }
- function forEachObject(object, callback) {
- for (var key in object) {
- if (object.hasOwnProperty(key)) {
- var val = object[key];
- callback(val, key);
- }
- }
- }
- function floatEquals(a, b) {
- return Math.abs(a - b) < FLOAT_COMPARISON_EPSILON;
- }
- // https://coderwall.com/p/nygghw/don-t-use-innerhtml-to-empty-dom-elements
- function removeChildren(el) {
- while (el.firstChild) {
- el.removeChild(el.firstChild);
- }
- }
- module.exports = {
- extend: extend,
- render: render,
- setStyle: setStyle,
- setStyles: setStyles,
- capitalize: capitalize,
- isString: isString,
- isFunction: isFunction,
- isObject: isObject,
- forEachObject: forEachObject,
- floatEquals: floatEquals,
- removeChildren: removeChildren
- };
- },{}]},{},[4])(4)
- });
|