Subversion-Projekte lars-tiefland.laravel_shop

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
1411 lars 1
(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){
2
/* shifty - v1.5.3 - 2016-11-29 - http://jeremyckahn.github.io/shifty */
3
;(function () {
4
  var root = this || Function('return this')();
5
 
6
/**
7
 * Shifty Core
8
 * By Jeremy Kahn - jeremyckahn@gmail.com
9
 */
10
 
11
var Tweenable = (function () {
12
 
13
  'use strict';
14
 
15
  // Aliases that get defined later in this function
16
  var formula;
17
 
18
  // CONSTANTS
19
  var DEFAULT_SCHEDULE_FUNCTION;
20
  var DEFAULT_EASING = 'linear';
21
  var DEFAULT_DURATION = 500;
22
  var UPDATE_TIME = 1000 / 60;
23
 
24
  var _now = Date.now
25
       ? Date.now
26
       : function () {return +new Date();};
27
 
28
  var now = typeof SHIFTY_DEBUG_NOW !== 'undefined' ? SHIFTY_DEBUG_NOW : _now;
29
 
30
  if (typeof window !== 'undefined') {
31
    // requestAnimationFrame() shim by Paul Irish (modified for Shifty)
32
    // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
33
    DEFAULT_SCHEDULE_FUNCTION = window.requestAnimationFrame
34
       || window.webkitRequestAnimationFrame
35
       || window.oRequestAnimationFrame
36
       || window.msRequestAnimationFrame
37
       || (window.mozCancelRequestAnimationFrame
38
       && window.mozRequestAnimationFrame)
39
       || setTimeout;
40
  } else {
41
    DEFAULT_SCHEDULE_FUNCTION = setTimeout;
42
  }
43
 
44
  function noop () {
45
    // NOOP!
46
  }
47
 
48
  /**
49
   * Handy shortcut for doing a for-in loop. This is not a "normal" each
50
   * function, it is optimized for Shifty.  The iterator function only receives
51
   * the property name, not the value.
52
   * @param {Object} obj
53
   * @param {Function(string)} fn
54
   * @private
55
   */
56
  function each (obj, fn) {
57
    var key;
58
    for (key in obj) {
59
      if (Object.hasOwnProperty.call(obj, key)) {
60
        fn(key);
61
      }
62
    }
63
  }
64
 
65
  /**
66
   * Perform a shallow copy of Object properties.
67
   * @param {Object} targetObject The object to copy into
68
   * @param {Object} srcObject The object to copy from
69
   * @return {Object} A reference to the augmented `targetObj` Object
70
   * @private
71
   */
72
  function shallowCopy (targetObj, srcObj) {
73
    each(srcObj, function (prop) {
74
      targetObj[prop] = srcObj[prop];
75
    });
76
 
77
    return targetObj;
78
  }
79
 
80
  /**
81
   * Copies each property from src onto target, but only if the property to
82
   * copy to target is undefined.
83
   * @param {Object} target Missing properties in this Object are filled in
84
   * @param {Object} src
85
   * @private
86
   */
87
  function defaults (target, src) {
88
    each(src, function (prop) {
89
      if (typeof target[prop] === 'undefined') {
90
        target[prop] = src[prop];
91
      }
92
    });
93
  }
94
 
95
  /**
96
   * Calculates the interpolated tween values of an Object for a given
97
   * timestamp.
98
   * @param {Number} forPosition The position to compute the state for.
99
   * @param {Object} currentState Current state properties.
100
   * @param {Object} originalState: The original state properties the Object is
101
   * tweening from.
102
   * @param {Object} targetState: The destination state properties the Object
103
   * is tweening to.
104
   * @param {number} duration: The length of the tween in milliseconds.
105
   * @param {number} timestamp: The UNIX epoch time at which the tween began.
106
   * @param {Object} easing: This Object's keys must correspond to the keys in
107
   * targetState.
108
   * @private
109
   */
110
  function tweenProps (forPosition, currentState, originalState, targetState,
111
    duration, timestamp, easing) {
112
    var normalizedPosition =
113
        forPosition < timestamp ? 0 : (forPosition - timestamp) / duration;
114
 
115
 
116
    var prop;
117
    var easingObjectProp;
118
    var easingFn;
119
    for (prop in currentState) {
120
      if (currentState.hasOwnProperty(prop)) {
121
        easingObjectProp = easing[prop];
122
        easingFn = typeof easingObjectProp === 'function'
123
          ? easingObjectProp
124
          : formula[easingObjectProp];
125
 
126
        currentState[prop] = tweenProp(
127
          originalState[prop],
128
          targetState[prop],
129
          easingFn,
130
          normalizedPosition
131
        );
132
      }
133
    }
134
 
135
    return currentState;
136
  }
137
 
138
  /**
139
   * Tweens a single property.
140
   * @param {number} start The value that the tween started from.
141
   * @param {number} end The value that the tween should end at.
142
   * @param {Function} easingFunc The easing curve to apply to the tween.
143
   * @param {number} position The normalized position (between 0.0 and 1.0) to
144
   * calculate the midpoint of 'start' and 'end' against.
145
   * @return {number} The tweened value.
146
   * @private
147
   */
148
  function tweenProp (start, end, easingFunc, position) {
149
    return start + (end - start) * easingFunc(position);
150
  }
151
 
152
  /**
153
   * Applies a filter to Tweenable instance.
154
   * @param {Tweenable} tweenable The `Tweenable` instance to call the filter
155
   * upon.
156
   * @param {String} filterName The name of the filter to apply.
157
   * @private
158
   */
159
  function applyFilter (tweenable, filterName) {
160
    var filters = Tweenable.prototype.filter;
161
    var args = tweenable._filterArgs;
162
 
163
    each(filters, function (name) {
164
      if (typeof filters[name][filterName] !== 'undefined') {
165
        filters[name][filterName].apply(tweenable, args);
166
      }
167
    });
168
  }
169
 
170
  var timeoutHandler_endTime;
171
  var timeoutHandler_currentTime;
172
  var timeoutHandler_isEnded;
173
  var timeoutHandler_offset;
174
  /**
175
   * Handles the update logic for one step of a tween.
176
   * @param {Tweenable} tweenable
177
   * @param {number} timestamp
178
   * @param {number} delay
179
   * @param {number} duration
180
   * @param {Object} currentState
181
   * @param {Object} originalState
182
   * @param {Object} targetState
183
   * @param {Object} easing
184
   * @param {Function(Object, *, number)} step
185
   * @param {Function(Function,number)}} schedule
186
   * @param {number=} opt_currentTimeOverride Needed for accurate timestamp in
187
   * Tweenable#seek.
188
   * @private
189
   */
190
  function timeoutHandler (tweenable, timestamp, delay, duration, currentState,
191
    originalState, targetState, easing, step, schedule,
192
    opt_currentTimeOverride) {
193
 
194
    timeoutHandler_endTime = timestamp + delay + duration;
195
 
196
    timeoutHandler_currentTime =
197
    Math.min(opt_currentTimeOverride || now(), timeoutHandler_endTime);
198
 
199
    timeoutHandler_isEnded =
200
      timeoutHandler_currentTime >= timeoutHandler_endTime;
201
 
202
    timeoutHandler_offset = duration - (
203
      timeoutHandler_endTime - timeoutHandler_currentTime);
204
 
205
    if (tweenable.isPlaying()) {
206
      if (timeoutHandler_isEnded) {
207
        step(targetState, tweenable._attachment, timeoutHandler_offset);
208
        tweenable.stop(true);
209
      } else {
210
        tweenable._scheduleId =
211
          schedule(tweenable._timeoutHandler, UPDATE_TIME);
212
 
213
        applyFilter(tweenable, 'beforeTween');
214
 
215
        // If the animation has not yet reached the start point (e.g., there was
216
        // delay that has not yet completed), just interpolate the starting
217
        // position of the tween.
218
        if (timeoutHandler_currentTime < (timestamp + delay)) {
219
          tweenProps(1, currentState, originalState, targetState, 1, 1, easing);
220
        } else {
221
          tweenProps(timeoutHandler_currentTime, currentState, originalState,
222
            targetState, duration, timestamp + delay, easing);
223
        }
224
 
225
        applyFilter(tweenable, 'afterTween');
226
 
227
        step(currentState, tweenable._attachment, timeoutHandler_offset);
228
      }
229
    }
230
  }
231
 
232
 
233
  /**
234
   * Creates a usable easing Object from a string, a function or another easing
235
   * Object.  If `easing` is an Object, then this function clones it and fills
236
   * in the missing properties with `"linear"`.
237
   * @param {Object.<string|Function>} fromTweenParams
238
   * @param {Object|string|Function} easing
239
   * @return {Object.<string|Function>}
240
   * @private
241
   */
242
  function composeEasingObject (fromTweenParams, easing) {
243
    var composedEasing = {};
244
    var typeofEasing = typeof easing;
245
 
246
    if (typeofEasing === 'string' || typeofEasing === 'function') {
247
      each(fromTweenParams, function (prop) {
248
        composedEasing[prop] = easing;
249
      });
250
    } else {
251
      each(fromTweenParams, function (prop) {
252
        if (!composedEasing[prop]) {
253
          composedEasing[prop] = easing[prop] || DEFAULT_EASING;
254
        }
255
      });
256
    }
257
 
258
    return composedEasing;
259
  }
260
 
261
  /**
262
   * Tweenable constructor.
263
   * @class Tweenable
264
   * @param {Object=} opt_initialState The values that the initial tween should
265
   * start at if a `from` object is not provided to `{{#crossLink
266
   * "Tweenable/tween:method"}}{{/crossLink}}` or `{{#crossLink
267
   * "Tweenable/setConfig:method"}}{{/crossLink}}`.
268
   * @param {Object=} opt_config Configuration object to be passed to
269
   * `{{#crossLink "Tweenable/setConfig:method"}}{{/crossLink}}`.
270
   * @module Tweenable
271
   * @constructor
272
   */
273
  function Tweenable (opt_initialState, opt_config) {
274
    this._currentState = opt_initialState || {};
275
    this._configured = false;
276
    this._scheduleFunction = DEFAULT_SCHEDULE_FUNCTION;
277
 
278
    // To prevent unnecessary calls to setConfig do not set default
279
    // configuration here.  Only set default configuration immediately before
280
    // tweening if none has been set.
281
    if (typeof opt_config !== 'undefined') {
282
      this.setConfig(opt_config);
283
    }
284
  }
285
 
286
  /**
287
   * Configure and start a tween.
288
   * @method tween
289
   * @param {Object=} opt_config Configuration object to be passed to
290
   * `{{#crossLink "Tweenable/setConfig:method"}}{{/crossLink}}`.
291
   * @chainable
292
   */
293
  Tweenable.prototype.tween = function (opt_config) {
294
    if (this._isTweening) {
295
      return this;
296
    }
297
 
298
    // Only set default config if no configuration has been set previously and
299
    // none is provided now.
300
    if (opt_config !== undefined || !this._configured) {
301
      this.setConfig(opt_config);
302
    }
303
 
304
    this._timestamp = now();
305
    this._start(this.get(), this._attachment);
306
    return this.resume();
307
  };
308
 
309
  /**
310
   * Configure a tween that will start at some point in the future.
311
   *
312
   * @method setConfig
313
   * @param {Object} config The following values are valid:
314
   * - __from__ (_Object=_): Starting position.  If omitted, `{{#crossLink
315
   *   "Tweenable/get:method"}}get(){{/crossLink}}` is used.
316
   * - __to__ (_Object=_): Ending position.
317
   * - __duration__ (_number=_): How many milliseconds to animate for.
318
   * - __delay__ (_delay=_): How many milliseconds to wait before starting the
319
   *   tween.
320
   * - __start__ (_Function(Object, *)_): Function to execute when the tween
321
   *   begins.  Receives the state of the tween as the first parameter and
322
   *   `attachment` as the second parameter.
323
   * - __step__ (_Function(Object, *, number)_): Function to execute on every
324
   *   tick.  Receives `{{#crossLink
325
   *   "Tweenable/get:method"}}get(){{/crossLink}}` as the first parameter,
326
   *   `attachment` as the second parameter, and the time elapsed since the
327
   *   start of the tween as the third. This function is not called on the
328
   *   final step of the animation, but `finish` is.
329
   * - __finish__ (_Function(Object, *)_): Function to execute upon tween
330
   *   completion.  Receives the state of the tween as the first parameter and
331
   *   `attachment` as the second parameter.
332
   * - __easing__ (_Object.<string|Function>|string|Function=_): Easing curve
333
   *   name(s) or function(s) to use for the tween.
334
   * - __attachment__ (_*_): Cached value that is passed to the
335
   *   `step`/`start`/`finish` methods.
336
   * @chainable
337
   */
338
  Tweenable.prototype.setConfig = function (config) {
339
    config = config || {};
340
    this._configured = true;
341
 
342
    // Attach something to this Tweenable instance (e.g.: a DOM element, an
343
    // object, a string, etc.);
344
    this._attachment = config.attachment;
345
 
346
    // Init the internal state
347
    this._pausedAtTime = null;
348
    this._scheduleId = null;
349
    this._delay = config.delay || 0;
350
    this._start = config.start || noop;
351
    this._step = config.step || noop;
352
    this._finish = config.finish || noop;
353
    this._duration = config.duration || DEFAULT_DURATION;
354
    this._currentState = shallowCopy({}, config.from || this.get());
355
    this._originalState = this.get();
356
    this._targetState = shallowCopy({}, config.to || this.get());
357
 
358
    var self = this;
359
    this._timeoutHandler = function () {
360
      timeoutHandler(self,
361
        self._timestamp,
362
        self._delay,
363
        self._duration,
364
        self._currentState,
365
        self._originalState,
366
        self._targetState,
367
        self._easing,
368
        self._step,
369
        self._scheduleFunction
370
      );
371
    };
372
 
373
    // Aliases used below
374
    var currentState = this._currentState;
375
    var targetState = this._targetState;
376
 
377
    // Ensure that there is always something to tween to.
378
    defaults(targetState, currentState);
379
 
380
    this._easing = composeEasingObject(
381
      currentState, config.easing || DEFAULT_EASING);
382
 
383
    this._filterArgs =
384
      [currentState, this._originalState, targetState, this._easing];
385
 
386
    applyFilter(this, 'tweenCreated');
387
    return this;
388
  };
389
 
390
  /**
391
   * @method get
392
   * @return {Object} The current state.
393
   */
394
  Tweenable.prototype.get = function () {
395
    return shallowCopy({}, this._currentState);
396
  };
397
 
398
  /**
399
   * @method set
400
   * @param {Object} state The current state.
401
   */
402
  Tweenable.prototype.set = function (state) {
403
    this._currentState = state;
404
  };
405
 
406
  /**
407
   * Pause a tween.  Paused tweens can be resumed from the point at which they
408
   * were paused.  This is different from `{{#crossLink
409
   * "Tweenable/stop:method"}}{{/crossLink}}`, as that method
410
   * causes a tween to start over when it is resumed.
411
   * @method pause
412
   * @chainable
413
   */
414
  Tweenable.prototype.pause = function () {
415
    this._pausedAtTime = now();
416
    this._isPaused = true;
417
    return this;
418
  };
419
 
420
  /**
421
   * Resume a paused tween.
422
   * @method resume
423
   * @chainable
424
   */
425
  Tweenable.prototype.resume = function () {
426
    if (this._isPaused) {
427
      this._timestamp += now() - this._pausedAtTime;
428
    }
429
 
430
    this._isPaused = false;
431
    this._isTweening = true;
432
 
433
    this._timeoutHandler();
434
 
435
    return this;
436
  };
437
 
438
  /**
439
   * Move the state of the animation to a specific point in the tween's
440
   * timeline.  If the animation is not running, this will cause the `step`
441
   * handlers to be called.
442
   * @method seek
443
   * @param {millisecond} millisecond The millisecond of the animation to seek
444
   * to.  This must not be less than `0`.
445
   * @chainable
446
   */
447
  Tweenable.prototype.seek = function (millisecond) {
448
    millisecond = Math.max(millisecond, 0);
449
    var currentTime = now();
450
 
451
    if ((this._timestamp + millisecond) === 0) {
452
      return this;
453
    }
454
 
455
    this._timestamp = currentTime - millisecond;
456
 
457
    if (!this.isPlaying()) {
458
      this._isTweening = true;
459
      this._isPaused = false;
460
 
461
      // If the animation is not running, call timeoutHandler to make sure that
462
      // any step handlers are run.
463
      timeoutHandler(this,
464
        this._timestamp,
465
        this._delay,
466
        this._duration,
467
        this._currentState,
468
        this._originalState,
469
        this._targetState,
470
        this._easing,
471
        this._step,
472
        this._scheduleFunction,
473
        currentTime
474
      );
475
 
476
      this.pause();
477
    }
478
 
479
    return this;
480
  };
481
 
482
  /**
483
   * Stops and cancels a tween.
484
   * @param {boolean=} gotoEnd If `false` or omitted, the tween just stops at
485
   * its current state, and the `finish` handler is not invoked.  If `true`,
486
   * the tweened object's values are instantly set to the target values, and
487
   * `finish` is invoked.
488
   * @method stop
489
   * @chainable
490
   */
491
  Tweenable.prototype.stop = function (gotoEnd) {
492
    this._isTweening = false;
493
    this._isPaused = false;
494
    this._timeoutHandler = noop;
495
 
496
    (root.cancelAnimationFrame            ||
497
    root.webkitCancelAnimationFrame     ||
498
    root.oCancelAnimationFrame          ||
499
    root.msCancelAnimationFrame         ||
500
    root.mozCancelRequestAnimationFrame ||
501
    root.clearTimeout)(this._scheduleId);
502
 
503
    if (gotoEnd) {
504
      applyFilter(this, 'beforeTween');
505
      tweenProps(
506
        1,
507
        this._currentState,
508
        this._originalState,
509
        this._targetState,
510
        1,
511
        0,
512
        this._easing
513
      );
514
      applyFilter(this, 'afterTween');
515
      applyFilter(this, 'afterTweenEnd');
516
      this._finish.call(this, this._currentState, this._attachment);
517
    }
518
 
519
    return this;
520
  };
521
 
522
  /**
523
   * @method isPlaying
524
   * @return {boolean} Whether or not a tween is running.
525
   */
526
  Tweenable.prototype.isPlaying = function () {
527
    return this._isTweening && !this._isPaused;
528
  };
529
 
530
  /**
531
   * Set a custom schedule function.
532
   *
533
   * If a custom function is not set,
534
   * [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame)
535
   * is used if available, otherwise
536
   * [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/Window.setTimeout)
537
   * is used.
538
   * @method setScheduleFunction
539
   * @param {Function(Function,number)} scheduleFunction The function to be
540
   * used to schedule the next frame to be rendered.
541
   */
542
  Tweenable.prototype.setScheduleFunction = function (scheduleFunction) {
543
    this._scheduleFunction = scheduleFunction;
544
  };
545
 
546
  /**
547
   * `delete` all "own" properties.  Call this when the `Tweenable` instance
548
   * is no longer needed to free memory.
549
   * @method dispose
550
   */
551
  Tweenable.prototype.dispose = function () {
552
    var prop;
553
    for (prop in this) {
554
      if (this.hasOwnProperty(prop)) {
555
        delete this[prop];
556
      }
557
    }
558
  };
559
 
560
  /**
561
   * Filters are used for transforming the properties of a tween at various
562
   * points in a Tweenable's life cycle.  See the README for more info on this.
563
   * @private
564
   */
565
  Tweenable.prototype.filter = {};
566
 
567
  /**
568
   * This object contains all of the tweens available to Shifty.  It is
569
   * extensible - simply attach properties to the `Tweenable.prototype.formula`
570
   * Object following the same format as `linear`.
571
   *
572
   * `pos` should be a normalized `number` (between 0 and 1).
573
   * @property formula
574
   * @type {Object(function)}
575
   */
576
  Tweenable.prototype.formula = {
577
    linear: function (pos) {
578
      return pos;
579
    }
580
  };
581
 
582
  formula = Tweenable.prototype.formula;
583
 
584
  shallowCopy(Tweenable, {
585
    'now': now
586
    ,'each': each
587
    ,'tweenProps': tweenProps
588
    ,'tweenProp': tweenProp
589
    ,'applyFilter': applyFilter
590
    ,'shallowCopy': shallowCopy
591
    ,'defaults': defaults
592
    ,'composeEasingObject': composeEasingObject
593
  });
594
 
595
  // `root` is provided in the intro/outro files.
596
 
597
  // A hook used for unit testing.
598
  if (typeof SHIFTY_DEBUG_NOW === 'function') {
599
    root.timeoutHandler = timeoutHandler;
600
  }
601
 
602
  // Bootstrap Tweenable appropriately for the environment.
603
  if (typeof exports === 'object') {
604
    // CommonJS
605
    module.exports = Tweenable;
606
  } else if (typeof define === 'function' && define.amd) {
607
    // AMD
608
    define(function () {return Tweenable;});
609
  } else if (typeof root.Tweenable === 'undefined') {
610
    // Browser: Make `Tweenable` globally accessible.
611
    root.Tweenable = Tweenable;
612
  }
613
 
614
  return Tweenable;
615
 
616
} ());
617
 
618
/*!
619
 * All equations are adapted from Thomas Fuchs'
620
 * [Scripty2](https://github.com/madrobby/scripty2/blob/master/src/effects/transitions/penner.js).
621
 *
622
 * Based on Easing Equations (c) 2003 [Robert
623
 * Penner](http://www.robertpenner.com/), all rights reserved. This work is
624
 * [subject to terms](http://www.robertpenner.com/easing_terms_of_use.html).
625
 */
626
 
627
/*!
628
 *  TERMS OF USE - EASING EQUATIONS
629
 *  Open source under the BSD License.
630
 *  Easing Equations (c) 2003 Robert Penner, all rights reserved.
631
 */
632
 
633
;(function () {
634
 
635
  Tweenable.shallowCopy(Tweenable.prototype.formula, {
636
    easeInQuad: function (pos) {
637
      return Math.pow(pos, 2);
638
    },
639
 
640
    easeOutQuad: function (pos) {
641
      return -(Math.pow((pos - 1), 2) - 1);
642
    },
643
 
644
    easeInOutQuad: function (pos) {
645
      if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,2);}
646
      return -0.5 * ((pos -= 2) * pos - 2);
647
    },
648
 
649
    easeInCubic: function (pos) {
650
      return Math.pow(pos, 3);
651
    },
652
 
653
    easeOutCubic: function (pos) {
654
      return (Math.pow((pos - 1), 3) + 1);
655
    },
656
 
657
    easeInOutCubic: function (pos) {
658
      if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,3);}
659
      return 0.5 * (Math.pow((pos - 2),3) + 2);
660
    },
661
 
662
    easeInQuart: function (pos) {
663
      return Math.pow(pos, 4);
664
    },
665
 
666
    easeOutQuart: function (pos) {
667
      return -(Math.pow((pos - 1), 4) - 1);
668
    },
669
 
670
    easeInOutQuart: function (pos) {
671
      if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,4);}
672
      return -0.5 * ((pos -= 2) * Math.pow(pos,3) - 2);
673
    },
674
 
675
    easeInQuint: function (pos) {
676
      return Math.pow(pos, 5);
677
    },
678
 
679
    easeOutQuint: function (pos) {
680
      return (Math.pow((pos - 1), 5) + 1);
681
    },
682
 
683
    easeInOutQuint: function (pos) {
684
      if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,5);}
685
      return 0.5 * (Math.pow((pos - 2),5) + 2);
686
    },
687
 
688
    easeInSine: function (pos) {
689
      return -Math.cos(pos * (Math.PI / 2)) + 1;
690
    },
691
 
692
    easeOutSine: function (pos) {
693
      return Math.sin(pos * (Math.PI / 2));
694
    },
695
 
696
    easeInOutSine: function (pos) {
697
      return (-0.5 * (Math.cos(Math.PI * pos) - 1));
698
    },
699
 
700
    easeInExpo: function (pos) {
701
      return (pos === 0) ? 0 : Math.pow(2, 10 * (pos - 1));
702
    },
703
 
704
    easeOutExpo: function (pos) {
705
      return (pos === 1) ? 1 : -Math.pow(2, -10 * pos) + 1;
706
    },
707
 
708
    easeInOutExpo: function (pos) {
709
      if (pos === 0) {return 0;}
710
      if (pos === 1) {return 1;}
711
      if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(2,10 * (pos - 1));}
712
      return 0.5 * (-Math.pow(2, -10 * --pos) + 2);
713
    },
714
 
715
    easeInCirc: function (pos) {
716
      return -(Math.sqrt(1 - (pos * pos)) - 1);
717
    },
718
 
719
    easeOutCirc: function (pos) {
720
      return Math.sqrt(1 - Math.pow((pos - 1), 2));
721
    },
722
 
723
    easeInOutCirc: function (pos) {
724
      if ((pos /= 0.5) < 1) {return -0.5 * (Math.sqrt(1 - pos * pos) - 1);}
725
      return 0.5 * (Math.sqrt(1 - (pos -= 2) * pos) + 1);
726
    },
727
 
728
    easeOutBounce: function (pos) {
729
      if ((pos) < (1 / 2.75)) {
730
        return (7.5625 * pos * pos);
731
      } else if (pos < (2 / 2.75)) {
732
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
733
      } else if (pos < (2.5 / 2.75)) {
734
        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
735
      } else {
736
        return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
737
      }
738
    },
739
 
740
    easeInBack: function (pos) {
741
      var s = 1.70158;
742
      return (pos) * pos * ((s + 1) * pos - s);
743
    },
744
 
745
    easeOutBack: function (pos) {
746
      var s = 1.70158;
747
      return (pos = pos - 1) * pos * ((s + 1) * pos + s) + 1;
748
    },
749
 
750
    easeInOutBack: function (pos) {
751
      var s = 1.70158;
752
      if ((pos /= 0.5) < 1) {
753
        return 0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s));
754
      }
755
      return 0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
756
    },
757
 
758
    elastic: function (pos) {
759
      // jshint maxlen:90
760
      return -1 * Math.pow(4,-8 * pos) * Math.sin((pos * 6 - 1) * (2 * Math.PI) / 2) + 1;
761
    },
762
 
763
    swingFromTo: function (pos) {
764
      var s = 1.70158;
765
      return ((pos /= 0.5) < 1) ?
766
          0.5 * (pos * pos * (((s *= (1.525)) + 1) * pos - s)) :
767
          0.5 * ((pos -= 2) * pos * (((s *= (1.525)) + 1) * pos + s) + 2);
768
    },
769
 
770
    swingFrom: function (pos) {
771
      var s = 1.70158;
772
      return pos * pos * ((s + 1) * pos - s);
773
    },
774
 
775
    swingTo: function (pos) {
776
      var s = 1.70158;
777
      return (pos -= 1) * pos * ((s + 1) * pos + s) + 1;
778
    },
779
 
780
    bounce: function (pos) {
781
      if (pos < (1 / 2.75)) {
782
        return (7.5625 * pos * pos);
783
      } else if (pos < (2 / 2.75)) {
784
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
785
      } else if (pos < (2.5 / 2.75)) {
786
        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
787
      } else {
788
        return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
789
      }
790
    },
791
 
792
    bouncePast: function (pos) {
793
      if (pos < (1 / 2.75)) {
794
        return (7.5625 * pos * pos);
795
      } else if (pos < (2 / 2.75)) {
796
        return 2 - (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
797
      } else if (pos < (2.5 / 2.75)) {
798
        return 2 - (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
799
      } else {
800
        return 2 - (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
801
      }
802
    },
803
 
804
    easeFromTo: function (pos) {
805
      if ((pos /= 0.5) < 1) {return 0.5 * Math.pow(pos,4);}
806
      return -0.5 * ((pos -= 2) * Math.pow(pos,3) - 2);
807
    },
808
 
809
    easeFrom: function (pos) {
810
      return Math.pow(pos,4);
811
    },
812
 
813
    easeTo: function (pos) {
814
      return Math.pow(pos,0.25);
815
    }
816
  });
817
 
818
}());
819
 
820
// jshint maxlen:100
821
/**
822
 * The Bezier magic in this file is adapted/copied almost wholesale from
823
 * [Scripty2](https://github.com/madrobby/scripty2/blob/master/src/effects/transitions/cubic-bezier.js),
824
 * which was adapted from Apple code (which probably came from
825
 * [here](http://opensource.apple.com/source/WebCore/WebCore-955.66/platform/graphics/UnitBezier.h)).
826
 * Special thanks to Apple and Thomas Fuchs for much of this code.
827
 */
828
 
829
/**
830
 *  Copyright (c) 2006 Apple Computer, Inc. All rights reserved.
831
 *
832
 *  Redistribution and use in source and binary forms, with or without
833
 *  modification, are permitted provided that the following conditions are met:
834
 *
835
 *  1. Redistributions of source code must retain the above copyright notice,
836
 *  this list of conditions and the following disclaimer.
837
 *
838
 *  2. Redistributions in binary form must reproduce the above copyright notice,
839
 *  this list of conditions and the following disclaimer in the documentation
840
 *  and/or other materials provided with the distribution.
841
 *
842
 *  3. Neither the name of the copyright holder(s) nor the names of any
843
 *  contributors may be used to endorse or promote products derived from
844
 *  this software without specific prior written permission.
845
 *
846
 *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
847
 *  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
848
 *  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
849
 *  ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
850
 *  LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
851
 *  CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
852
 *  SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
853
 *  INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
854
 *  CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
855
 *  ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
856
 *  POSSIBILITY OF SUCH DAMAGE.
857
 */
858
;(function () {
859
  // port of webkit cubic bezier handling by http://www.netzgesta.de/dev/
860
  function cubicBezierAtTime(t,p1x,p1y,p2x,p2y,duration) {
861
    var ax = 0,bx = 0,cx = 0,ay = 0,by = 0,cy = 0;
862
    function sampleCurveX(t) {
863
      return ((ax * t + bx) * t + cx) * t;
864
    }
865
    function sampleCurveY(t) {
866
      return ((ay * t + by) * t + cy) * t;
867
    }
868
    function sampleCurveDerivativeX(t) {
869
      return (3.0 * ax * t + 2.0 * bx) * t + cx;
870
    }
871
    function solveEpsilon(duration) {
872
      return 1.0 / (200.0 * duration);
873
    }
874
    function solve(x,epsilon) {
875
      return sampleCurveY(solveCurveX(x, epsilon));
876
    }
877
    function fabs(n) {
878
      if (n >= 0) {
879
        return n;
880
      } else {
881
        return 0 - n;
882
      }
883
    }
884
    function solveCurveX(x, epsilon) {
885
      var t0,t1,t2,x2,d2,i;
886
      for (t2 = x, i = 0; i < 8; i++) {
887
        x2 = sampleCurveX(t2) - x;
888
        if (fabs(x2) < epsilon) {
889
          return t2;
890
        }
891
        d2 = sampleCurveDerivativeX(t2);
892
        if (fabs(d2) < 1e-6) {
893
          break;
894
        }
895
        t2 = t2 - x2 / d2;
896
      }
897
      t0 = 0.0;
898
      t1 = 1.0;
899
      t2 = x;
900
      if (t2 < t0) {
901
        return t0;
902
      }
903
      if (t2 > t1) {
904
        return t1;
905
      }
906
      while (t0 < t1) {
907
        x2 = sampleCurveX(t2);
908
        if (fabs(x2 - x) < epsilon) {
909
          return t2;
910
        }
911
        if (x > x2) {
912
          t0 = t2;
913
        }else {
914
          t1 = t2;
915
        }
916
        t2 = (t1 - t0) * 0.5 + t0;
917
      }
918
      return t2; // Failure.
919
    }
920
    cx = 3.0 * p1x;
921
    bx = 3.0 * (p2x - p1x) - cx;
922
    ax = 1.0 - cx - bx;
923
    cy = 3.0 * p1y;
924
    by = 3.0 * (p2y - p1y) - cy;
925
    ay = 1.0 - cy - by;
926
    return solve(t, solveEpsilon(duration));
927
  }
928
  /**
929
   *  getCubicBezierTransition(x1, y1, x2, y2) -> Function
930
   *
931
   *  Generates a transition easing function that is compatible
932
   *  with WebKit's CSS transitions `-webkit-transition-timing-function`
933
   *  CSS property.
934
   *
935
   *  The W3C has more information about CSS3 transition timing functions:
936
   *  http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
937
   *
938
   *  @param {number} x1
939
   *  @param {number} y1
940
   *  @param {number} x2
941
   *  @param {number} y2
942
   *  @return {function}
943
   *  @private
944
   */
945
  function getCubicBezierTransition (x1, y1, x2, y2) {
946
    return function (pos) {
947
      return cubicBezierAtTime(pos,x1,y1,x2,y2,1);
948
    };
949
  }
950
  // End ported code
951
 
952
  /**
953
   * Create a Bezier easing function and attach it to `{{#crossLink
954
   * "Tweenable/formula:property"}}Tweenable#formula{{/crossLink}}`.  This
955
   * function gives you total control over the easing curve.  Matthew Lein's
956
   * [Ceaser](http://matthewlein.com/ceaser/) is a useful tool for visualizing
957
   * the curves you can make with this function.
958
   * @method setBezierFunction
959
   * @param {string} name The name of the easing curve.  Overwrites the old
960
   * easing function on `{{#crossLink
961
   * "Tweenable/formula:property"}}Tweenable#formula{{/crossLink}}` if it
962
   * exists.
963
   * @param {number} x1
964
   * @param {number} y1
965
   * @param {number} x2
966
   * @param {number} y2
967
   * @return {function} The easing function that was attached to
968
   * Tweenable.prototype.formula.
969
   */
970
  Tweenable.setBezierFunction = function (name, x1, y1, x2, y2) {
971
    var cubicBezierTransition = getCubicBezierTransition(x1, y1, x2, y2);
972
    cubicBezierTransition.displayName = name;
973
    cubicBezierTransition.x1 = x1;
974
    cubicBezierTransition.y1 = y1;
975
    cubicBezierTransition.x2 = x2;
976
    cubicBezierTransition.y2 = y2;
977
 
978
    return Tweenable.prototype.formula[name] = cubicBezierTransition;
979
  };
980
 
981
 
982
  /**
983
   * `delete` an easing function from `{{#crossLink
984
   * "Tweenable/formula:property"}}Tweenable#formula{{/crossLink}}`.  Be
985
   * careful with this method, as it `delete`s whatever easing formula matches
986
   * `name` (which means you can delete standard Shifty easing functions).
987
   * @method unsetBezierFunction
988
   * @param {string} name The name of the easing function to delete.
989
   * @return {function}
990
   */
991
  Tweenable.unsetBezierFunction = function (name) {
992
    delete Tweenable.prototype.formula[name];
993
  };
994
 
995
})();
996
 
997
;(function () {
998
 
999
  function getInterpolatedValues (
1000
    from, current, targetState, position, easing, delay) {
1001
    return Tweenable.tweenProps(
1002
      position, current, from, targetState, 1, delay, easing);
1003
  }
1004
 
1005
  // Fake a Tweenable and patch some internals.  This approach allows us to
1006
  // skip uneccessary processing and object recreation, cutting down on garbage
1007
  // collection pauses.
1008
  var mockTweenable = new Tweenable();
1009
  mockTweenable._filterArgs = [];
1010
 
1011
  /**
1012
   * Compute the midpoint of two Objects.  This method effectively calculates a
1013
   * specific frame of animation that `{{#crossLink
1014
   * "Tweenable/tween:method"}}{{/crossLink}}` does many times over the course
1015
   * of a full tween.
1016
   *
1017
   *     var interpolatedValues = Tweenable.interpolate({
1018
   *       width: '100px',
1019
   *       opacity: 0,
1020
   *       color: '#fff'
1021
   *     }, {
1022
   *       width: '200px',
1023
   *       opacity: 1,
1024
   *       color: '#000'
1025
   *     }, 0.5);
1026
   *
1027
   *     console.log(interpolatedValues);
1028
   *     // {opacity: 0.5, width: "150px", color: "rgb(127,127,127)"}
1029
   *
1030
   * @static
1031
   * @method interpolate
1032
   * @param {Object} from The starting values to tween from.
1033
   * @param {Object} targetState The ending values to tween to.
1034
   * @param {number} position The normalized position value (between `0.0` and
1035
   * `1.0`) to interpolate the values between `from` and `to` for.  `from`
1036
   * represents `0` and `to` represents `1`.
1037
   * @param {Object.<string|Function>|string|Function} easing The easing
1038
   * curve(s) to calculate the midpoint against.  You can reference any easing
1039
   * function attached to `Tweenable.prototype.formula`, or provide the easing
1040
   * function(s) directly.  If omitted, this defaults to "linear".
1041
   * @param {number=} opt_delay Optional delay to pad the beginning of the
1042
   * interpolated tween with.  This increases the range of `position` from (`0`
1043
   * through `1`) to (`0` through `1 + opt_delay`).  So, a delay of `0.5` would
1044
   * increase all valid values of `position` to numbers between `0` and `1.5`.
1045
   * @return {Object}
1046
   */
1047
  Tweenable.interpolate = function (
1048
    from, targetState, position, easing, opt_delay) {
1049
 
1050
    var current = Tweenable.shallowCopy({}, from);
1051
    var delay = opt_delay || 0;
1052
    var easingObject = Tweenable.composeEasingObject(
1053
      from, easing || 'linear');
1054
 
1055
    mockTweenable.set({});
1056
 
1057
    // Alias and reuse the _filterArgs array instead of recreating it.
1058
    var filterArgs = mockTweenable._filterArgs;
1059
    filterArgs.length = 0;
1060
    filterArgs[0] = current;
1061
    filterArgs[1] = from;
1062
    filterArgs[2] = targetState;
1063
    filterArgs[3] = easingObject;
1064
 
1065
    // Any defined value transformation must be applied
1066
    Tweenable.applyFilter(mockTweenable, 'tweenCreated');
1067
    Tweenable.applyFilter(mockTweenable, 'beforeTween');
1068
 
1069
    var interpolatedValues = getInterpolatedValues(
1070
      from, current, targetState, position, easingObject, delay);
1071
 
1072
    // Transform values back into their original format
1073
    Tweenable.applyFilter(mockTweenable, 'afterTween');
1074
 
1075
    return interpolatedValues;
1076
  };
1077
 
1078
}());
1079
 
1080
/**
1081
 * This module adds string interpolation support to Shifty.
1082
 *
1083
 * The Token extension allows Shifty to tween numbers inside of strings.  Among
1084
 * other things, this allows you to animate CSS properties.  For example, you
1085
 * can do this:
1086
 *
1087
 *     var tweenable = new Tweenable();
1088
 *     tweenable.tween({
1089
 *       from: { transform: 'translateX(45px)' },
1090
 *       to: { transform: 'translateX(90xp)' }
1091
 *     });
1092
 *
1093
 * `translateX(45)` will be tweened to `translateX(90)`.  To demonstrate:
1094
 *
1095
 *     var tweenable = new Tweenable();
1096
 *     tweenable.tween({
1097
 *       from: { transform: 'translateX(45px)' },
1098
 *       to: { transform: 'translateX(90px)' },
1099
 *       step: function (state) {
1100
 *         console.log(state.transform);
1101
 *       }
1102
 *     });
1103
 *
1104
 * The above snippet will log something like this in the console:
1105
 *
1106
 *     translateX(60.3px)
1107
 *     ...
1108
 *     translateX(76.05px)
1109
 *     ...
1110
 *     translateX(90px)
1111
 *
1112
 * Another use for this is animating colors:
1113
 *
1114
 *     var tweenable = new Tweenable();
1115
 *     tweenable.tween({
1116
 *       from: { color: 'rgb(0,255,0)' },
1117
 *       to: { color: 'rgb(255,0,255)' },
1118
 *       step: function (state) {
1119
 *         console.log(state.color);
1120
 *       }
1121
 *     });
1122
 *
1123
 * The above snippet will log something like this:
1124
 *
1125
 *     rgb(84,170,84)
1126
 *     ...
1127
 *     rgb(170,84,170)
1128
 *     ...
1129
 *     rgb(255,0,255)
1130
 *
1131
 * This extension also supports hexadecimal colors, in both long (`#ff00ff`)
1132
 * and short (`#f0f`) forms.  Be aware that hexadecimal input values will be
1133
 * converted into the equivalent RGB output values.  This is done to optimize
1134
 * for performance.
1135
 *
1136
 *     var tweenable = new Tweenable();
1137
 *     tweenable.tween({
1138
 *       from: { color: '#0f0' },
1139
 *       to: { color: '#f0f' },
1140
 *       step: function (state) {
1141
 *         console.log(state.color);
1142
 *       }
1143
 *     });
1144
 *
1145
 * This snippet will generate the same output as the one before it because
1146
 * equivalent values were supplied (just in hexadecimal form rather than RGB):
1147
 *
1148
 *     rgb(84,170,84)
1149
 *     ...
1150
 *     rgb(170,84,170)
1151
 *     ...
1152
 *     rgb(255,0,255)
1153
 *
1154
 * ## Easing support
1155
 *
1156
 * Easing works somewhat differently in the Token extension.  This is because
1157
 * some CSS properties have multiple values in them, and you might need to
1158
 * tween each value along its own easing curve.  A basic example:
1159
 *
1160
 *     var tweenable = new Tweenable();
1161
 *     tweenable.tween({
1162
 *       from: { transform: 'translateX(0px) translateY(0px)' },
1163
 *       to: { transform:   'translateX(100px) translateY(100px)' },
1164
 *       easing: { transform: 'easeInQuad' },
1165
 *       step: function (state) {
1166
 *         console.log(state.transform);
1167
 *       }
1168
 *     });
1169
 *
1170
 * The above snippet will create values like this:
1171
 *
1172
 *     translateX(11.56px) translateY(11.56px)
1173
 *     ...
1174
 *     translateX(46.24px) translateY(46.24px)
1175
 *     ...
1176
 *     translateX(100px) translateY(100px)
1177
 *
1178
 * In this case, the values for `translateX` and `translateY` are always the
1179
 * same for each step of the tween, because they have the same start and end
1180
 * points and both use the same easing curve.  We can also tween `translateX`
1181
 * and `translateY` along independent curves:
1182
 *
1183
 *     var tweenable = new Tweenable();
1184
 *     tweenable.tween({
1185
 *       from: { transform: 'translateX(0px) translateY(0px)' },
1186
 *       to: { transform:   'translateX(100px) translateY(100px)' },
1187
 *       easing: { transform: 'easeInQuad bounce' },
1188
 *       step: function (state) {
1189
 *         console.log(state.transform);
1190
 *       }
1191
 *     });
1192
 *
1193
 * The above snippet will create values like this:
1194
 *
1195
 *     translateX(10.89px) translateY(82.35px)
1196
 *     ...
1197
 *     translateX(44.89px) translateY(86.73px)
1198
 *     ...
1199
 *     translateX(100px) translateY(100px)
1200
 *
1201
 * `translateX` and `translateY` are not in sync anymore, because `easeInQuad`
1202
 * was specified for `translateX` and `bounce` for `translateY`.  Mixing and
1203
 * matching easing curves can make for some interesting motion in your
1204
 * animations.
1205
 *
1206
 * The order of the space-separated easing curves correspond the token values
1207
 * they apply to.  If there are more token values than easing curves listed,
1208
 * the last easing curve listed is used.
1209
 * @submodule Tweenable.token
1210
 */
1211
 
1212
// token function is defined above only so that dox-foundation sees it as
1213
// documentation and renders it.  It is never used, and is optimized away at
1214
// build time.
1215
 
1216
;(function (Tweenable) {
1217
 
1218
  /**
1219
   * @typedef {{
1220
   *   formatString: string
1221
   *   chunkNames: Array.<string>
1222
   * }}
1223
   * @private
1224
   */
1225
  var formatManifest;
1226
 
1227
  // CONSTANTS
1228
 
1229
  var R_NUMBER_COMPONENT = /(\d|\-|\.)/;
1230
  var R_FORMAT_CHUNKS = /([^\-0-9\.]+)/g;
1231
  var R_UNFORMATTED_VALUES = /[0-9.\-]+/g;
1232
  var R_RGB = new RegExp(
1233
    'rgb\\(' + R_UNFORMATTED_VALUES.source +
1234
    (/,\s*/.source) + R_UNFORMATTED_VALUES.source +
1235
    (/,\s*/.source) + R_UNFORMATTED_VALUES.source + '\\)', 'g');
1236
  var R_RGB_PREFIX = /^.*\(/;
1237
  var R_HEX = /#([0-9]|[a-f]){3,6}/gi;
1238
  var VALUE_PLACEHOLDER = 'VAL';
1239
 
1240
  // HELPERS
1241
 
1242
  /**
1243
   * @param {Array.number} rawValues
1244
   * @param {string} prefix
1245
   *
1246
   * @return {Array.<string>}
1247
   * @private
1248
   */
1249
  function getFormatChunksFrom (rawValues, prefix) {
1250
    var accumulator = [];
1251
 
1252
    var rawValuesLength = rawValues.length;
1253
    var i;
1254
 
1255
    for (i = 0; i < rawValuesLength; i++) {
1256
      accumulator.push('_' + prefix + '_' + i);
1257
    }
1258
 
1259
    return accumulator;
1260
  }
1261
 
1262
  /**
1263
   * @param {string} formattedString
1264
   *
1265
   * @return {string}
1266
   * @private
1267
   */
1268
  function getFormatStringFrom (formattedString) {
1269
    var chunks = formattedString.match(R_FORMAT_CHUNKS);
1270
 
1271
    if (!chunks) {
1272
      // chunks will be null if there were no tokens to parse in
1273
      // formattedString (for example, if formattedString is '2').  Coerce
1274
      // chunks to be useful here.
1275
      chunks = ['', ''];
1276
 
1277
      // If there is only one chunk, assume that the string is a number
1278
      // followed by a token...
1279
      // NOTE: This may be an unwise assumption.
1280
    } else if (chunks.length === 1 ||
1281
      // ...or if the string starts with a number component (".", "-", or a
1282
      // digit)...
1283
    formattedString.charAt(0).match(R_NUMBER_COMPONENT)) {
1284
      // ...prepend an empty string here to make sure that the formatted number
1285
      // is properly replaced by VALUE_PLACEHOLDER
1286
      chunks.unshift('');
1287
    }
1288
 
1289
    return chunks.join(VALUE_PLACEHOLDER);
1290
  }
1291
 
1292
  /**
1293
   * Convert all hex color values within a string to an rgb string.
1294
   *
1295
   * @param {Object} stateObject
1296
   *
1297
   * @return {Object} The modified obj
1298
   * @private
1299
   */
1300
  function sanitizeObjectForHexProps (stateObject) {
1301
    Tweenable.each(stateObject, function (prop) {
1302
      var currentProp = stateObject[prop];
1303
 
1304
      if (typeof currentProp === 'string' && currentProp.match(R_HEX)) {
1305
        stateObject[prop] = sanitizeHexChunksToRGB(currentProp);
1306
      }
1307
    });
1308
  }
1309
 
1310
  /**
1311
   * @param {string} str
1312
   *
1313
   * @return {string}
1314
   * @private
1315
   */
1316
  function  sanitizeHexChunksToRGB (str) {
1317
    return filterStringChunks(R_HEX, str, convertHexToRGB);
1318
  }
1319
 
1320
  /**
1321
   * @param {string} hexString
1322
   *
1323
   * @return {string}
1324
   * @private
1325
   */
1326
  function convertHexToRGB (hexString) {
1327
    var rgbArr = hexToRGBArray(hexString);
1328
    return 'rgb(' + rgbArr[0] + ',' + rgbArr[1] + ',' + rgbArr[2] + ')';
1329
  }
1330
 
1331
  var hexToRGBArray_returnArray = [];
1332
  /**
1333
   * Convert a hexadecimal string to an array with three items, one each for
1334
   * the red, blue, and green decimal values.
1335
   *
1336
   * @param {string} hex A hexadecimal string.
1337
   *
1338
   * @returns {Array.<number>} The converted Array of RGB values if `hex` is a
1339
   * valid string, or an Array of three 0's.
1340
   * @private
1341
   */
1342
  function hexToRGBArray (hex) {
1343
 
1344
    hex = hex.replace(/#/, '');
1345
 
1346
    // If the string is a shorthand three digit hex notation, normalize it to
1347
    // the standard six digit notation
1348
    if (hex.length === 3) {
1349
      hex = hex.split('');
1350
      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
1351
    }
1352
 
1353
    hexToRGBArray_returnArray[0] = hexToDec(hex.substr(0, 2));
1354
    hexToRGBArray_returnArray[1] = hexToDec(hex.substr(2, 2));
1355
    hexToRGBArray_returnArray[2] = hexToDec(hex.substr(4, 2));
1356
 
1357
    return hexToRGBArray_returnArray;
1358
  }
1359
 
1360
  /**
1361
   * Convert a base-16 number to base-10.
1362
   *
1363
   * @param {Number|String} hex The value to convert
1364
   *
1365
   * @returns {Number} The base-10 equivalent of `hex`.
1366
   * @private
1367
   */
1368
  function hexToDec (hex) {
1369
    return parseInt(hex, 16);
1370
  }
1371
 
1372
  /**
1373
   * Runs a filter operation on all chunks of a string that match a RegExp
1374
   *
1375
   * @param {RegExp} pattern
1376
   * @param {string} unfilteredString
1377
   * @param {function(string)} filter
1378
   *
1379
   * @return {string}
1380
   * @private
1381
   */
1382
  function filterStringChunks (pattern, unfilteredString, filter) {
1383
    var pattenMatches = unfilteredString.match(pattern);
1384
    var filteredString = unfilteredString.replace(pattern, VALUE_PLACEHOLDER);
1385
 
1386
    if (pattenMatches) {
1387
      var pattenMatchesLength = pattenMatches.length;
1388
      var currentChunk;
1389
 
1390
      for (var i = 0; i < pattenMatchesLength; i++) {
1391
        currentChunk = pattenMatches.shift();
1392
        filteredString = filteredString.replace(
1393
          VALUE_PLACEHOLDER, filter(currentChunk));
1394
      }
1395
    }
1396
 
1397
    return filteredString;
1398
  }
1399
 
1400
  /**
1401
   * Check for floating point values within rgb strings and rounds them.
1402
   *
1403
   * @param {string} formattedString
1404
   *
1405
   * @return {string}
1406
   * @private
1407
   */
1408
  function sanitizeRGBChunks (formattedString) {
1409
    return filterStringChunks(R_RGB, formattedString, sanitizeRGBChunk);
1410
  }
1411
 
1412
  /**
1413
   * @param {string} rgbChunk
1414
   *
1415
   * @return {string}
1416
   * @private
1417
   */
1418
  function sanitizeRGBChunk (rgbChunk) {
1419
    var numbers = rgbChunk.match(R_UNFORMATTED_VALUES);
1420
    var numbersLength = numbers.length;
1421
    var sanitizedString = rgbChunk.match(R_RGB_PREFIX)[0];
1422
 
1423
    for (var i = 0; i < numbersLength; i++) {
1424
      sanitizedString += parseInt(numbers[i], 10) + ',';
1425
    }
1426
 
1427
    sanitizedString = sanitizedString.slice(0, -1) + ')';
1428
 
1429
    return sanitizedString;
1430
  }
1431
 
1432
  /**
1433
   * @param {Object} stateObject
1434
   *
1435
   * @return {Object} An Object of formatManifests that correspond to
1436
   * the string properties of stateObject
1437
   * @private
1438
   */
1439
  function getFormatManifests (stateObject) {
1440
    var manifestAccumulator = {};
1441
 
1442
    Tweenable.each(stateObject, function (prop) {
1443
      var currentProp = stateObject[prop];
1444
 
1445
      if (typeof currentProp === 'string') {
1446
        var rawValues = getValuesFrom(currentProp);
1447
 
1448
        manifestAccumulator[prop] = {
1449
          'formatString': getFormatStringFrom(currentProp)
1450
          ,'chunkNames': getFormatChunksFrom(rawValues, prop)
1451
        };
1452
      }
1453
    });
1454
 
1455
    return manifestAccumulator;
1456
  }
1457
 
1458
  /**
1459
   * @param {Object} stateObject
1460
   * @param {Object} formatManifests
1461
   * @private
1462
   */
1463
  function expandFormattedProperties (stateObject, formatManifests) {
1464
    Tweenable.each(formatManifests, function (prop) {
1465
      var currentProp = stateObject[prop];
1466
      var rawValues = getValuesFrom(currentProp);
1467
      var rawValuesLength = rawValues.length;
1468
 
1469
      for (var i = 0; i < rawValuesLength; i++) {
1470
        stateObject[formatManifests[prop].chunkNames[i]] = +rawValues[i];
1471
      }
1472
 
1473
      delete stateObject[prop];
1474
    });
1475
  }
1476
 
1477
  /**
1478
   * @param {Object} stateObject
1479
   * @param {Object} formatManifests
1480
   * @private
1481
   */
1482
  function collapseFormattedProperties (stateObject, formatManifests) {
1483
    Tweenable.each(formatManifests, function (prop) {
1484
      var currentProp = stateObject[prop];
1485
      var formatChunks = extractPropertyChunks(
1486
        stateObject, formatManifests[prop].chunkNames);
1487
      var valuesList = getValuesList(
1488
        formatChunks, formatManifests[prop].chunkNames);
1489
      currentProp = getFormattedValues(
1490
        formatManifests[prop].formatString, valuesList);
1491
      stateObject[prop] = sanitizeRGBChunks(currentProp);
1492
    });
1493
  }
1494
 
1495
  /**
1496
   * @param {Object} stateObject
1497
   * @param {Array.<string>} chunkNames
1498
   *
1499
   * @return {Object} The extracted value chunks.
1500
   * @private
1501
   */
1502
  function extractPropertyChunks (stateObject, chunkNames) {
1503
    var extractedValues = {};
1504
    var currentChunkName, chunkNamesLength = chunkNames.length;
1505
 
1506
    for (var i = 0; i < chunkNamesLength; i++) {
1507
      currentChunkName = chunkNames[i];
1508
      extractedValues[currentChunkName] = stateObject[currentChunkName];
1509
      delete stateObject[currentChunkName];
1510
    }
1511
 
1512
    return extractedValues;
1513
  }
1514
 
1515
  var getValuesList_accumulator = [];
1516
  /**
1517
   * @param {Object} stateObject
1518
   * @param {Array.<string>} chunkNames
1519
   *
1520
   * @return {Array.<number>}
1521
   * @private
1522
   */
1523
  function getValuesList (stateObject, chunkNames) {
1524
    getValuesList_accumulator.length = 0;
1525
    var chunkNamesLength = chunkNames.length;
1526
 
1527
    for (var i = 0; i < chunkNamesLength; i++) {
1528
      getValuesList_accumulator.push(stateObject[chunkNames[i]]);
1529
    }
1530
 
1531
    return getValuesList_accumulator;
1532
  }
1533
 
1534
  /**
1535
   * @param {string} formatString
1536
   * @param {Array.<number>} rawValues
1537
   *
1538
   * @return {string}
1539
   * @private
1540
   */
1541
  function getFormattedValues (formatString, rawValues) {
1542
    var formattedValueString = formatString;
1543
    var rawValuesLength = rawValues.length;
1544
 
1545
    for (var i = 0; i < rawValuesLength; i++) {
1546
      formattedValueString = formattedValueString.replace(
1547
        VALUE_PLACEHOLDER, +rawValues[i].toFixed(4));
1548
    }
1549
 
1550
    return formattedValueString;
1551
  }
1552
 
1553
  /**
1554
   * Note: It's the duty of the caller to convert the Array elements of the
1555
   * return value into numbers.  This is a performance optimization.
1556
   *
1557
   * @param {string} formattedString
1558
   *
1559
   * @return {Array.<string>|null}
1560
   * @private
1561
   */
1562
  function getValuesFrom (formattedString) {
1563
    return formattedString.match(R_UNFORMATTED_VALUES);
1564
  }
1565
 
1566
  /**
1567
   * @param {Object} easingObject
1568
   * @param {Object} tokenData
1569
   * @private
1570
   */
1571
  function expandEasingObject (easingObject, tokenData) {
1572
    Tweenable.each(tokenData, function (prop) {
1573
      var currentProp = tokenData[prop];
1574
      var chunkNames = currentProp.chunkNames;
1575
      var chunkLength = chunkNames.length;
1576
 
1577
      var easing = easingObject[prop];
1578
      var i;
1579
 
1580
      if (typeof easing === 'string') {
1581
        var easingChunks = easing.split(' ');
1582
        var lastEasingChunk = easingChunks[easingChunks.length - 1];
1583
 
1584
        for (i = 0; i < chunkLength; i++) {
1585
          easingObject[chunkNames[i]] = easingChunks[i] || lastEasingChunk;
1586
        }
1587
 
1588
      } else {
1589
        for (i = 0; i < chunkLength; i++) {
1590
          easingObject[chunkNames[i]] = easing;
1591
        }
1592
      }
1593
 
1594
      delete easingObject[prop];
1595
    });
1596
  }
1597
 
1598
  /**
1599
   * @param {Object} easingObject
1600
   * @param {Object} tokenData
1601
   * @private
1602
   */
1603
  function collapseEasingObject (easingObject, tokenData) {
1604
    Tweenable.each(tokenData, function (prop) {
1605
      var currentProp = tokenData[prop];
1606
      var chunkNames = currentProp.chunkNames;
1607
      var chunkLength = chunkNames.length;
1608
 
1609
      var firstEasing = easingObject[chunkNames[0]];
1610
      var typeofEasings = typeof firstEasing;
1611
 
1612
      if (typeofEasings === 'string') {
1613
        var composedEasingString = '';
1614
 
1615
        for (var i = 0; i < chunkLength; i++) {
1616
          composedEasingString += ' ' + easingObject[chunkNames[i]];
1617
          delete easingObject[chunkNames[i]];
1618
        }
1619
 
1620
        easingObject[prop] = composedEasingString.substr(1);
1621
      } else {
1622
        easingObject[prop] = firstEasing;
1623
      }
1624
    });
1625
  }
1626
 
1627
  Tweenable.prototype.filter.token = {
1628
    'tweenCreated': function (currentState, fromState, toState, easingObject) {
1629
      sanitizeObjectForHexProps(currentState);
1630
      sanitizeObjectForHexProps(fromState);
1631
      sanitizeObjectForHexProps(toState);
1632
      this._tokenData = getFormatManifests(currentState);
1633
    },
1634
 
1635
    'beforeTween': function (currentState, fromState, toState, easingObject) {
1636
      expandEasingObject(easingObject, this._tokenData);
1637
      expandFormattedProperties(currentState, this._tokenData);
1638
      expandFormattedProperties(fromState, this._tokenData);
1639
      expandFormattedProperties(toState, this._tokenData);
1640
    },
1641
 
1642
    'afterTween': function (currentState, fromState, toState, easingObject) {
1643
      collapseFormattedProperties(currentState, this._tokenData);
1644
      collapseFormattedProperties(fromState, this._tokenData);
1645
      collapseFormattedProperties(toState, this._tokenData);
1646
      collapseEasingObject(easingObject, this._tokenData);
1647
    }
1648
  };
1649
 
1650
} (Tweenable));
1651
 
1652
}).call(null);
1653
 
1654
},{}],2:[function(require,module,exports){
1655
// Circle shaped progress bar
1656
 
1657
var Shape = require('./shape');
1658
var utils = require('./utils');
1659
 
1660
var Circle = function Circle(container, options) {
1661
    // Use two arcs to form a circle
1662
    // See this answer http://stackoverflow.com/a/10477334/1446092
1663
    this._pathTemplate =
1664
        'M 50,50 m 0,-{radius}' +
1665
        ' a {radius},{radius} 0 1 1 0,{2radius}' +
1666
        ' a {radius},{radius} 0 1 1 0,-{2radius}';
1667
 
1668
    this.containerAspectRatio = 1;
1669
 
1670
    Shape.apply(this, arguments);
1671
};
1672
 
1673
Circle.prototype = new Shape();
1674
Circle.prototype.constructor = Circle;
1675
 
1676
Circle.prototype._pathString = function _pathString(opts) {
1677
    var widthOfWider = opts.strokeWidth;
1678
    if (opts.trailWidth && opts.trailWidth > opts.strokeWidth) {
1679
        widthOfWider = opts.trailWidth;
1680
    }
1681
 
1682
    var r = 50 - widthOfWider / 2;
1683
 
1684
    return utils.render(this._pathTemplate, {
1685
        radius: r,
1686
        '2radius': r * 2
1687
    });
1688
};
1689
 
1690
Circle.prototype._trailString = function _trailString(opts) {
1691
    return this._pathString(opts);
1692
};
1693
 
1694
module.exports = Circle;
1695
 
1696
},{"./shape":7,"./utils":9}],3:[function(require,module,exports){
1697
// Line shaped progress bar
1698
 
1699
var Shape = require('./shape');
1700
var utils = require('./utils');
1701
 
1702
var Line = function Line(container, options) {
1703
    this._pathTemplate = 'M 0,{center} L 100,{center}';
1704
    Shape.apply(this, arguments);
1705
};
1706
 
1707
Line.prototype = new Shape();
1708
Line.prototype.constructor = Line;
1709
 
1710
Line.prototype._initializeSvg = function _initializeSvg(svg, opts) {
1711
    svg.setAttribute('viewBox', '0 0 100 ' + opts.strokeWidth);
1712
    svg.setAttribute('preserveAspectRatio', 'none');
1713
};
1714
 
1715
Line.prototype._pathString = function _pathString(opts) {
1716
    return utils.render(this._pathTemplate, {
1717
        center: opts.strokeWidth / 2
1718
    });
1719
};
1720
 
1721
Line.prototype._trailString = function _trailString(opts) {
1722
    return this._pathString(opts);
1723
};
1724
 
1725
module.exports = Line;
1726
 
1727
},{"./shape":7,"./utils":9}],4:[function(require,module,exports){
1728
module.exports = {
1729
    // Higher level API, different shaped progress bars
1730
    Line: require('./line'),
1731
    Circle: require('./circle'),
1732
    SemiCircle: require('./semicircle'),
1733
    Square: require('./square'),
1734
 
1735
    // Lower level API to use any SVG path
1736
    Path: require('./path'),
1737
 
1738
    // Base-class for creating new custom shapes
1739
    // to be in line with the API of built-in shapes
1740
    // Undocumented.
1741
    Shape: require('./shape'),
1742
 
1743
    // Internal utils, undocumented.
1744
    utils: require('./utils')
1745
};
1746
 
1747
},{"./circle":2,"./line":3,"./path":5,"./semicircle":6,"./shape":7,"./square":8,"./utils":9}],5:[function(require,module,exports){
1748
// Lower level API to animate any kind of svg path
1749
 
1750
var Tweenable = require('shifty');
1751
var utils = require('./utils');
1752
 
1753
var EASING_ALIASES = {
1754
    easeIn: 'easeInCubic',
1755
    easeOut: 'easeOutCubic',
1756
    easeInOut: 'easeInOutCubic'
1757
};
1758
 
1759
var Path = function Path(path, opts) {
1760
    // Throw a better error if not initialized with `new` keyword
1761
    if (!(this instanceof Path)) {
1762
        throw new Error('Constructor was called without new keyword');
1763
    }
1764
 
1765
    // Default parameters for animation
1766
    opts = utils.extend({
1767
        duration: 800,
1768
        easing: 'linear',
1769
        from: {},
1770
        to: {},
1771
        step: function() {}
1772
    }, opts);
1773
 
1774
    var element;
1775
    if (utils.isString(path)) {
1776
        element = document.querySelector(path);
1777
    } else {
1778
        element = path;
1779
    }
1780
 
1781
    // Reveal .path as public attribute
1782
    this.path = element;
1783
    this._opts = opts;
1784
    this._tweenable = null;
1785
 
1786
    // Set up the starting positions
1787
    var length = this.path.getTotalLength();
1788
    this.path.style.strokeDasharray = length + ' ' + length;
1789
    this.set(0);
1790
};
1791
 
1792
Path.prototype.value = function value() {
1793
    var offset = this._getComputedDashOffset();
1794
    var length = this.path.getTotalLength();
1795
 
1796
    var progress = 1 - offset / length;
1797
    // Round number to prevent returning very small number like 1e-30, which
1798
    // is practically 0
1799
    return parseFloat(progress.toFixed(6), 10);
1800
};
1801
 
1802
Path.prototype.set = function set(progress) {
1803
    this.stop();
1804
 
1805
    this.path.style.strokeDashoffset = this._progressToOffset(progress);
1806
 
1807
    var step = this._opts.step;
1808
    if (utils.isFunction(step)) {
1809
        var easing = this._easing(this._opts.easing);
1810
        var values = this._calculateTo(progress, easing);
1811
        var reference = this._opts.shape || this;
1812
        step(values, reference, this._opts.attachment);
1813
    }
1814
};
1815
 
1816
Path.prototype.stop = function stop() {
1817
    this._stopTween();
1818
    this.path.style.strokeDashoffset = this._getComputedDashOffset();
1819
};
1820
 
1821
// Method introduced here:
1822
// http://jakearchibald.com/2013/animated-line-drawing-svg/
1823
Path.prototype.animate = function animate(progress, opts, cb) {
1824
    opts = opts || {};
1825
 
1826
    if (utils.isFunction(opts)) {
1827
        cb = opts;
1828
        opts = {};
1829
    }
1830
 
1831
    var passedOpts = utils.extend({}, opts);
1832
 
1833
    // Copy default opts to new object so defaults are not modified
1834
    var defaultOpts = utils.extend({}, this._opts);
1835
    opts = utils.extend(defaultOpts, opts);
1836
 
1837
    var shiftyEasing = this._easing(opts.easing);
1838
    var values = this._resolveFromAndTo(progress, shiftyEasing, passedOpts);
1839
 
1840
    this.stop();
1841
 
1842
    // Trigger a layout so styles are calculated & the browser
1843
    // picks up the starting position before animating
1844
    this.path.getBoundingClientRect();
1845
 
1846
    var offset = this._getComputedDashOffset();
1847
    var newOffset = this._progressToOffset(progress);
1848
 
1849
    var self = this;
1850
    this._tweenable = new Tweenable();
1851
    this._tweenable.tween({
1852
        from: utils.extend({ offset: offset }, values.from),
1853
        to: utils.extend({ offset: newOffset }, values.to),
1854
        duration: opts.duration,
1855
        easing: shiftyEasing,
1856
        step: function(state) {
1857
            self.path.style.strokeDashoffset = state.offset;
1858
            var reference = opts.shape || self;
1859
            opts.step(state, reference, opts.attachment);
1860
        },
1861
        finish: function(state) {
1862
            if (utils.isFunction(cb)) {
1863
                cb();
1864
            }
1865
        }
1866
    });
1867
};
1868
 
1869
Path.prototype._getComputedDashOffset = function _getComputedDashOffset() {
1870
    var computedStyle = window.getComputedStyle(this.path, null);
1871
    return parseFloat(computedStyle.getPropertyValue('stroke-dashoffset'), 10);
1872
};
1873
 
1874
Path.prototype._progressToOffset = function _progressToOffset(progress) {
1875
    var length = this.path.getTotalLength();
1876
    return length - progress * length;
1877
};
1878
 
1879
// Resolves from and to values for animation.
1880
Path.prototype._resolveFromAndTo = function _resolveFromAndTo(progress, easing, opts) {
1881
    if (opts.from && opts.to) {
1882
        return {
1883
            from: opts.from,
1884
            to: opts.to
1885
        };
1886
    }
1887
 
1888
    return {
1889
        from: this._calculateFrom(easing),
1890
        to: this._calculateTo(progress, easing)
1891
    };
1892
};
1893
 
1894
// Calculate `from` values from options passed at initialization
1895
Path.prototype._calculateFrom = function _calculateFrom(easing) {
1896
    return Tweenable.interpolate(this._opts.from, this._opts.to, this.value(), easing);
1897
};
1898
 
1899
// Calculate `to` values from options passed at initialization
1900
Path.prototype._calculateTo = function _calculateTo(progress, easing) {
1901
    return Tweenable.interpolate(this._opts.from, this._opts.to, progress, easing);
1902
};
1903
 
1904
Path.prototype._stopTween = function _stopTween() {
1905
    if (this._tweenable !== null) {
1906
        this._tweenable.stop();
1907
        this._tweenable = null;
1908
    }
1909
};
1910
 
1911
Path.prototype._easing = function _easing(easing) {
1912
    if (EASING_ALIASES.hasOwnProperty(easing)) {
1913
        return EASING_ALIASES[easing];
1914
    }
1915
 
1916
    return easing;
1917
};
1918
 
1919
module.exports = Path;
1920
 
1921
},{"./utils":9,"shifty":1}],6:[function(require,module,exports){
1922
// Semi-SemiCircle shaped progress bar
1923
 
1924
var Shape = require('./shape');
1925
var Circle = require('./circle');
1926
var utils = require('./utils');
1927
 
1928
var SemiCircle = function SemiCircle(container, options) {
1929
    // Use one arc to form a SemiCircle
1930
    // See this answer http://stackoverflow.com/a/10477334/1446092
1931
    this._pathTemplate =
1932
        'M 50,50 m -{radius},0' +
1933
        ' a {radius},{radius} 0 1 1 {2radius},0';
1934
 
1935
    this.containerAspectRatio = 2;
1936
 
1937
    Shape.apply(this, arguments);
1938
};
1939
 
1940
SemiCircle.prototype = new Shape();
1941
SemiCircle.prototype.constructor = SemiCircle;
1942
 
1943
SemiCircle.prototype._initializeSvg = function _initializeSvg(svg, opts) {
1944
    svg.setAttribute('viewBox', '0 0 100 50');
1945
};
1946
 
1947
SemiCircle.prototype._initializeTextContainer = function _initializeTextContainer(
1948
    opts,
1949
    container,
1950
    textContainer
1951
) {
1952
    if (opts.text.style) {
1953
        // Reset top style
1954
        textContainer.style.top = 'auto';
1955
        textContainer.style.bottom = '0';
1956
 
1957
        if (opts.text.alignToBottom) {
1958
            utils.setStyle(textContainer, 'transform', 'translate(-50%, 0)');
1959
        } else {
1960
            utils.setStyle(textContainer, 'transform', 'translate(-50%, 50%)');
1961
        }
1962
    }
1963
};
1964
 
1965
// Share functionality with Circle, just have different path
1966
SemiCircle.prototype._pathString = Circle.prototype._pathString;
1967
SemiCircle.prototype._trailString = Circle.prototype._trailString;
1968
 
1969
module.exports = SemiCircle;
1970
 
1971
},{"./circle":2,"./shape":7,"./utils":9}],7:[function(require,module,exports){
1972
// Base object for different progress bar shapes
1973
 
1974
var Path = require('./path');
1975
var utils = require('./utils');
1976
 
1977
var DESTROYED_ERROR = 'Object is destroyed';
1978
 
1979
var Shape = function Shape(container, opts) {
1980
    // Throw a better error if progress bars are not initialized with `new`
1981
    // keyword
1982
    if (!(this instanceof Shape)) {
1983
        throw new Error('Constructor was called without new keyword');
1984
    }
1985
 
1986
    // Prevent calling constructor without parameters so inheritance
1987
    // works correctly. To understand, this is how Shape is inherited:
1988
    //
1989
    //   Line.prototype = new Shape();
1990
    //
1991
    // We just want to set the prototype for Line.
1992
    if (arguments.length === 0) {
1993
        return;
1994
    }
1995
 
1996
    // Default parameters for progress bar creation
1997
    this._opts = utils.extend({
1998
        color: '#555',
1999
        strokeWidth: 1.0,
2000
        trailColor: null,
2001
        trailWidth: null,
2002
        fill: null,
2003
        text: {
2004
            style: {
2005
                color: null,
2006
                position: 'absolute',
2007
                left: '50%',
2008
                top: '50%',
2009
                padding: 0,
2010
                margin: 0,
2011
                transform: {
2012
                    prefix: true,
2013
                    value: 'translate(-50%, -50%)'
2014
                }
2015
            },
2016
            autoStyleContainer: true,
2017
            alignToBottom: true,
2018
            value: null,
2019
            className: 'progressbar-text'
2020
        },
2021
        svgStyle: {
2022
            display: 'block',
2023
            width: '100%'
2024
        },
2025
        warnings: false
2026
    }, opts, true);  // Use recursive extend
2027
 
2028
    // If user specifies e.g. svgStyle or text style, the whole object
2029
    // should replace the defaults to make working with styles easier
2030
    if (utils.isObject(opts) && opts.svgStyle !== undefined) {
2031
        this._opts.svgStyle = opts.svgStyle;
2032
    }
2033
    if (utils.isObject(opts) && utils.isObject(opts.text) && opts.text.style !== undefined) {
2034
        this._opts.text.style = opts.text.style;
2035
    }
2036
 
2037
    var svgView = this._createSvgView(this._opts);
2038
 
2039
    var element;
2040
    if (utils.isString(container)) {
2041
        element = document.querySelector(container);
2042
    } else {
2043
        element = container;
2044
    }
2045
 
2046
    if (!element) {
2047
        throw new Error('Container does not exist: ' + container);
2048
    }
2049
 
2050
    this._container = element;
2051
    this._container.appendChild(svgView.svg);
2052
    if (this._opts.warnings) {
2053
        this._warnContainerAspectRatio(this._container);
2054
    }
2055
 
2056
    if (this._opts.svgStyle) {
2057
        utils.setStyles(svgView.svg, this._opts.svgStyle);
2058
    }
2059
 
2060
    // Expose public attributes before Path initialization
2061
    this.svg = svgView.svg;
2062
    this.path = svgView.path;
2063
    this.trail = svgView.trail;
2064
    this.text = null;
2065
 
2066
    var newOpts = utils.extend({
2067
        attachment: undefined,
2068
        shape: this
2069
    }, this._opts);
2070
    this._progressPath = new Path(svgView.path, newOpts);
2071
 
2072
    if (utils.isObject(this._opts.text) && this._opts.text.value !== null) {
2073
        this.setText(this._opts.text.value);
2074
    }
2075
};
2076
 
2077
Shape.prototype.animate = function animate(progress, opts, cb) {
2078
    if (this._progressPath === null) {
2079
        throw new Error(DESTROYED_ERROR);
2080
    }
2081
 
2082
    this._progressPath.animate(progress, opts, cb);
2083
};
2084
 
2085
Shape.prototype.stop = function stop() {
2086
    if (this._progressPath === null) {
2087
        throw new Error(DESTROYED_ERROR);
2088
    }
2089
 
2090
    // Don't crash if stop is called inside step function
2091
    if (this._progressPath === undefined) {
2092
        return;
2093
    }
2094
 
2095
    this._progressPath.stop();
2096
};
2097
 
2098
Shape.prototype.destroy = function destroy() {
2099
    if (this._progressPath === null) {
2100
        throw new Error(DESTROYED_ERROR);
2101
    }
2102
 
2103
    this.stop();
2104
    this.svg.parentNode.removeChild(this.svg);
2105
    this.svg = null;
2106
    this.path = null;
2107
    this.trail = null;
2108
    this._progressPath = null;
2109
 
2110
    if (this.text !== null) {
2111
        this.text.parentNode.removeChild(this.text);
2112
        this.text = null;
2113
    }
2114
};
2115
 
2116
Shape.prototype.set = function set(progress) {
2117
    if (this._progressPath === null) {
2118
        throw new Error(DESTROYED_ERROR);
2119
    }
2120
 
2121
    this._progressPath.set(progress);
2122
};
2123
 
2124
Shape.prototype.value = function value() {
2125
    if (this._progressPath === null) {
2126
        throw new Error(DESTROYED_ERROR);
2127
    }
2128
 
2129
    if (this._progressPath === undefined) {
2130
        return 0;
2131
    }
2132
 
2133
    return this._progressPath.value();
2134
};
2135
 
2136
Shape.prototype.setText = function setText(newText) {
2137
    if (this._progressPath === null) {
2138
        throw new Error(DESTROYED_ERROR);
2139
    }
2140
 
2141
    if (this.text === null) {
2142
        // Create new text node
2143
        this.text = this._createTextContainer(this._opts, this._container);
2144
        this._container.appendChild(this.text);
2145
    }
2146
 
2147
    // Remove previous text and add new
2148
    if (utils.isObject(newText)) {
2149
        utils.removeChildren(this.text);
2150
        this.text.appendChild(newText);
2151
    } else {
2152
        this.text.innerHTML = newText;
2153
    }
2154
};
2155
 
2156
Shape.prototype._createSvgView = function _createSvgView(opts) {
2157
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
2158
    this._initializeSvg(svg, opts);
2159
 
2160
    var trailPath = null;
2161
    // Each option listed in the if condition are 'triggers' for creating
2162
    // the trail path
2163
    if (opts.trailColor || opts.trailWidth) {
2164
        trailPath = this._createTrail(opts);
2165
        svg.appendChild(trailPath);
2166
    }
2167
 
2168
    var path = this._createPath(opts);
2169
    svg.appendChild(path);
2170
 
2171
    return {
2172
        svg: svg,
2173
        path: path,
2174
        trail: trailPath
2175
    };
2176
};
2177
 
2178
Shape.prototype._initializeSvg = function _initializeSvg(svg, opts) {
2179
    svg.setAttribute('viewBox', '0 0 100 100');
2180
};
2181
 
2182
Shape.prototype._createPath = function _createPath(opts) {
2183
    var pathString = this._pathString(opts);
2184
    return this._createPathElement(pathString, opts);
2185
};
2186
 
2187
Shape.prototype._createTrail = function _createTrail(opts) {
2188
    // Create path string with original passed options
2189
    var pathString = this._trailString(opts);
2190
 
2191
    // Prevent modifying original
2192
    var newOpts = utils.extend({}, opts);
2193
 
2194
    // Defaults for parameters which modify trail path
2195
    if (!newOpts.trailColor) {
2196
        newOpts.trailColor = '#eee';
2197
    }
2198
    if (!newOpts.trailWidth) {
2199
        newOpts.trailWidth = newOpts.strokeWidth;
2200
    }
2201
 
2202
    newOpts.color = newOpts.trailColor;
2203
    newOpts.strokeWidth = newOpts.trailWidth;
2204
 
2205
    // When trail path is set, fill must be set for it instead of the
2206
    // actual path to prevent trail stroke from clipping
2207
    newOpts.fill = null;
2208
 
2209
    return this._createPathElement(pathString, newOpts);
2210
};
2211
 
2212
Shape.prototype._createPathElement = function _createPathElement(pathString, opts) {
2213
    var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
2214
    path.setAttribute('d', pathString);
2215
    path.setAttribute('stroke', opts.color);
2216
    path.setAttribute('stroke-width', opts.strokeWidth);
2217
 
2218
    if (opts.fill) {
2219
        path.setAttribute('fill', opts.fill);
2220
    } else {
2221
        path.setAttribute('fill-opacity', '0');
2222
    }
2223
 
2224
    return path;
2225
};
2226
 
2227
Shape.prototype._createTextContainer = function _createTextContainer(opts, container) {
2228
    var textContainer = document.createElement('div');
2229
    textContainer.className = opts.text.className;
2230
 
2231
    var textStyle = opts.text.style;
2232
    if (textStyle) {
2233
        if (opts.text.autoStyleContainer) {
2234
            container.style.position = 'relative';
2235
        }
2236
 
2237
        utils.setStyles(textContainer, textStyle);
2238
        // Default text color to progress bar's color
2239
        if (!textStyle.color) {
2240
            textContainer.style.color = opts.color;
2241
        }
2242
    }
2243
 
2244
    this._initializeTextContainer(opts, container, textContainer);
2245
    return textContainer;
2246
};
2247
 
2248
// Give custom shapes possibility to modify text element
2249
Shape.prototype._initializeTextContainer = function(opts, container, element) {
2250
    // By default, no-op
2251
    // Custom shapes should respect API options, such as text.style
2252
};
2253
 
2254
Shape.prototype._pathString = function _pathString(opts) {
2255
    throw new Error('Override this function for each progress bar');
2256
};
2257
 
2258
Shape.prototype._trailString = function _trailString(opts) {
2259
    throw new Error('Override this function for each progress bar');
2260
};
2261
 
2262
Shape.prototype._warnContainerAspectRatio = function _warnContainerAspectRatio(container) {
2263
    if (!this.containerAspectRatio) {
2264
        return;
2265
    }
2266
 
2267
    var computedStyle = window.getComputedStyle(container, null);
2268
    var width = parseFloat(computedStyle.getPropertyValue('width'), 10);
2269
    var height = parseFloat(computedStyle.getPropertyValue('height'), 10);
2270
    if (!utils.floatEquals(this.containerAspectRatio, width / height)) {
2271
        console.warn(
2272
            'Incorrect aspect ratio of container',
2273
            '#' + container.id,
2274
            'detected:',
2275
            computedStyle.getPropertyValue('width') + '(width)',
2276
            '/',
2277
            computedStyle.getPropertyValue('height') + '(height)',
2278
            '=',
2279
            width / height
2280
        );
2281
 
2282
        console.warn(
2283
            'Aspect ratio of should be',
2284
            this.containerAspectRatio
2285
        );
2286
    }
2287
};
2288
 
2289
module.exports = Shape;
2290
 
2291
},{"./path":5,"./utils":9}],8:[function(require,module,exports){
2292
// Square shaped progress bar
2293
// Note: Square is not core part of API anymore. It's left here
2294
//       for reference. square is not included to the progressbar
2295
//       build anymore
2296
 
2297
var Shape = require('./shape');
2298
var utils = require('./utils');
2299
 
2300
var Square = function Square(container, options) {
2301
    this._pathTemplate =
2302
        'M 0,{halfOfStrokeWidth}' +
2303
        ' L {width},{halfOfStrokeWidth}' +
2304
        ' L {width},{width}' +
2305
        ' L {halfOfStrokeWidth},{width}' +
2306
        ' L {halfOfStrokeWidth},{strokeWidth}';
2307
 
2308
    this._trailTemplate =
2309
        'M {startMargin},{halfOfStrokeWidth}' +
2310
        ' L {width},{halfOfStrokeWidth}' +
2311
        ' L {width},{width}' +
2312
        ' L {halfOfStrokeWidth},{width}' +
2313
        ' L {halfOfStrokeWidth},{halfOfStrokeWidth}';
2314
 
2315
    Shape.apply(this, arguments);
2316
};
2317
 
2318
Square.prototype = new Shape();
2319
Square.prototype.constructor = Square;
2320
 
2321
Square.prototype._pathString = function _pathString(opts) {
2322
    var w = 100 - opts.strokeWidth / 2;
2323
 
2324
    return utils.render(this._pathTemplate, {
2325
        width: w,
2326
        strokeWidth: opts.strokeWidth,
2327
        halfOfStrokeWidth: opts.strokeWidth / 2
2328
    });
2329
};
2330
 
2331
Square.prototype._trailString = function _trailString(opts) {
2332
    var w = 100 - opts.strokeWidth / 2;
2333
 
2334
    return utils.render(this._trailTemplate, {
2335
        width: w,
2336
        strokeWidth: opts.strokeWidth,
2337
        halfOfStrokeWidth: opts.strokeWidth / 2,
2338
        startMargin: opts.strokeWidth / 2 - opts.trailWidth / 2
2339
    });
2340
};
2341
 
2342
module.exports = Square;
2343
 
2344
},{"./shape":7,"./utils":9}],9:[function(require,module,exports){
2345
// Utility functions
2346
 
2347
var PREFIXES = 'Webkit Moz O ms'.split(' ');
2348
var FLOAT_COMPARISON_EPSILON = 0.001;
2349
 
2350
// Copy all attributes from source object to destination object.
2351
// destination object is mutated.
2352
function extend(destination, source, recursive) {
2353
    destination = destination || {};
2354
    source = source || {};
2355
    recursive = recursive || false;
2356
 
2357
    for (var attrName in source) {
2358
        if (source.hasOwnProperty(attrName)) {
2359
            var destVal = destination[attrName];
2360
            var sourceVal = source[attrName];
2361
            if (recursive && isObject(destVal) && isObject(sourceVal)) {
2362
                destination[attrName] = extend(destVal, sourceVal, recursive);
2363
            } else {
2364
                destination[attrName] = sourceVal;
2365
            }
2366
        }
2367
    }
2368
 
2369
    return destination;
2370
}
2371
 
2372
// Renders templates with given variables. Variables must be surrounded with
2373
// braces without any spaces, e.g. {variable}
2374
// All instances of variable placeholders will be replaced with given content
2375
// Example:
2376
// render('Hello, {message}!', {message: 'world'})
2377
function render(template, vars) {
2378
    var rendered = template;
2379
 
2380
    for (var key in vars) {
2381
        if (vars.hasOwnProperty(key)) {
2382
            var val = vars[key];
2383
            var regExpString = '\\{' + key + '\\}';
2384
            var regExp = new RegExp(regExpString, 'g');
2385
 
2386
            rendered = rendered.replace(regExp, val);
2387
        }
2388
    }
2389
 
2390
    return rendered;
2391
}
2392
 
2393
function setStyle(element, style, value) {
2394
    var elStyle = element.style;  // cache for performance
2395
 
2396
    for (var i = 0; i < PREFIXES.length; ++i) {
2397
        var prefix = PREFIXES[i];
2398
        elStyle[prefix + capitalize(style)] = value;
2399
    }
2400
 
2401
    elStyle[style] = value;
2402
}
2403
 
2404
function setStyles(element, styles) {
2405
    forEachObject(styles, function(styleValue, styleName) {
2406
        // Allow disabling some individual styles by setting them
2407
        // to null or undefined
2408
        if (styleValue === null || styleValue === undefined) {
2409
            return;
2410
        }
2411
 
2412
        // If style's value is {prefix: true, value: '50%'},
2413
        // Set also browser prefixed styles
2414
        if (isObject(styleValue) && styleValue.prefix === true) {
2415
            setStyle(element, styleName, styleValue.value);
2416
        } else {
2417
            element.style[styleName] = styleValue;
2418
        }
2419
    });
2420
}
2421
 
2422
function capitalize(text) {
2423
    return text.charAt(0).toUpperCase() + text.slice(1);
2424
}
2425
 
2426
function isString(obj) {
2427
    return typeof obj === 'string' || obj instanceof String;
2428
}
2429
 
2430
function isFunction(obj) {
2431
    return typeof obj === 'function';
2432
}
2433
 
2434
function isArray(obj) {
2435
    return Object.prototype.toString.call(obj) === '[object Array]';
2436
}
2437
 
2438
// Returns true if `obj` is object as in {a: 1, b: 2}, not if it's function or
2439
// array
2440
function isObject(obj) {
2441
    if (isArray(obj)) {
2442
        return false;
2443
    }
2444
 
2445
    var type = typeof obj;
2446
    return type === 'object' && !!obj;
2447
}
2448
 
2449
function forEachObject(object, callback) {
2450
    for (var key in object) {
2451
        if (object.hasOwnProperty(key)) {
2452
            var val = object[key];
2453
            callback(val, key);
2454
        }
2455
    }
2456
}
2457
 
2458
function floatEquals(a, b) {
2459
    return Math.abs(a - b) < FLOAT_COMPARISON_EPSILON;
2460
}
2461
 
2462
// https://coderwall.com/p/nygghw/don-t-use-innerhtml-to-empty-dom-elements
2463
function removeChildren(el) {
2464
    while (el.firstChild) {
2465
        el.removeChild(el.firstChild);
2466
    }
2467
}
2468
 
2469
module.exports = {
2470
    extend: extend,
2471
    render: render,
2472
    setStyle: setStyle,
2473
    setStyles: setStyles,
2474
    capitalize: capitalize,
2475
    isString: isString,
2476
    isFunction: isFunction,
2477
    isObject: isObject,
2478
    forEachObject: forEachObject,
2479
    floatEquals: floatEquals,
2480
    removeChildren: removeChildren
2481
};
2482
 
2483
},{}]},{},[4])(4)
2484
});