├── .editorconfig
├── .gitattributes
├── .gitignore
├── README.md
├── assets
    ├── bt1.ai
    └── bt2.ai
├── demo
    ├── css
    │   ├── main.css
    │   └── normalize.css
    ├── favicon.ico
    ├── fonts
    │   └── codropsicons
    │   │   ├── codropsicons.eot
    │   │   ├── codropsicons.svg
    │   │   ├── codropsicons.ttf
    │   │   ├── codropsicons.woff
    │   │   └── license.txt
    ├── img
    │   └── related
    │   │   ├── AnimatedProgressButton.jpg
    │   │   └── ProgressButtonStyles.jpg
    ├── index.html
    └── js
    │   └── main.js
├── dist
    ├── elastic-progress.js
    └── elastic-progress.min.js
├── gulpfile.js
├── package.json
├── src
    ├── clone.js
    ├── console-graph.js
    ├── create-svg.js
    ├── cutoff.js
    ├── elastic-progress.js
    ├── gfx-of.js
    ├── is-set.js
    ├── main.js
    ├── pointer-events.js
    ├── svg
    │   └── bt.svg
    └── to-array.js
├── test
    └── concurrency-visual.html
└── watch


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | 
 3 | root = true
 4 | 
 5 | [*]
 6 | charset = utf-8
 7 | indent_size = 4
 8 | indent_style = space
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Include your project-specific ignores in this file
2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
3 | 
4 | node_modules/
5 | .DS_Store
6 | .htaccess
7 | npm-debug.log
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Elastic Progress
  2 | Creates a button that turns into a progress bar with a elastic effect. Based on a [Dribbble shot](https://dribbble.com/shots/1887815-Download) by [xjw](https://dribbble.com/xjw). By Lucas Bebber.
  3 | 
  4 | [Article on Codrops](http://tympanus.net/codrops/?p=25030)
  5 | 
  6 | [Demo](http://tympanus.net/Development/ElasticProgress/)
  7 | 
  8 | ![Elastic Progress](http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2015/09/elasticprogress.gif)
  9 | 
 10 | ## Instructions
 11 | 
 12 | This project requires [GSAP](http://greensock.com/gsap). You can use either  TweenMax...
 13 | 
 14 | ```html
 15 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
 16 | ```
 17 | 
 18 | ...or TweenLite, with EasePack and the CSS and attr plugins:
 19 | 
 20 | ```html
 21 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
 22 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
 23 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
 24 | <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/AttrPlugin.min.js"></script>
 25 | ```
 26 | 
 27 | Then, include the `elastic-progress.min.js` file, located in the `dist` folder:
 28 | 
 29 | ```html
 30 | <script src="path/to/js/elastic-progress.min.js"></script>
 31 | ```
 32 | 
 33 | ### Usage
 34 | 
 35 | Create the element you want to turn into a button:
 36 | 
 37 | ```html
 38 | <div class="Upload" role="button" aria-label="Upload file"></div>
 39 | ```
 40 | <sub> **Note:** We are using a `div` element with `role="button"` instead of a `button` element because, according to W3C recommendation, `button` elements should have no interactive elements as descendants. </sub>
 41 | 
 42 | Then, via JS:
 43 | 
 44 | ```js
 45 | var element=document.querySelector('.Upload');
 46 | var progress=new ElasticProgress(element, { /*options*/ });
 47 | 
 48 | // or...
 49 | 
 50 | var progress=new ElasticProgress('.Upload', { /*options*/});
 51 | ```
 52 | 
 53 | Or, in case you are using jQuery:
 54 | 
 55 | ```js
 56 | $('.Upload').ElasticProgress({/*options*/});
 57 | ```
 58 | 
 59 | ### Setting Options
 60 | 
 61 | Options are set on the constructor, like this:
 62 | ```js
 63 | var progress=new ElasticProgress('.Upload', {
 64 |   colorFg:"#FF0000",
 65 |   buttonSize:80,
 66 |   //...
 67 | })
 68 | ```
 69 | 
 70 | A [complete list of options](#options) can be found below.
 71 | 
 72 | ### Calling Methods
 73 | 
 74 | The button doesn't do much by itself - controlling the opening, bar progress, etc. is in your charge.
 75 | 
 76 | ```js
 77 | var progress=new ElasticProgress('.Upload', {
 78 |   // ...
 79 |   onClick:function(){
 80 |     progress.open();
 81 |   }
 82 | });
 83 | function theFunctionYouAreUsingToCheckProgress(){
 84 |   // ...
 85 |   progress.setValue(value);
 86 | }
 87 | 
 88 | 
 89 | // with jQuery
 90 | $(".Upload").ElasticProgress({
 91 |   // ...
 92 |   onClick:function(){
 93 |     $(this).ElasticProgress('open');
 94 |   }
 95 | });
 96 | 
 97 | function theFunctionYouAreUsingToCheckProgress(){
 98 |   // ...
 99 |   $(".Upload").ElasticProgress('setValue',value);
100 | }
101 | 
102 | ```
103 | 
104 | A [complete list of methods](#methods) can be found below.
105 | 
106 | ## Options
107 | 
108 | * **arrowDirection** `string`  
109 | Either `'up'` or `'down'`. Defaults to `'down'`.
110 | 
111 | #### Colors
112 | 
113 | * **colorFg**, **colorBg** `string`  
114 | Colors of the foreground (the arrow, the filled part of the progress bar) and the background (the circle, the empty part of the progress bar), respectively.
115 | Defaults are white and black.
116 | 
117 | * **highlightColor** `string`  
118 | Color of the highlight outline. Defaults to `#08F`.
119 | 
120 | * **background** `string`  
121 | Color of the overlay during the "pop" animation. Defaults to the background color of the `body`.
122 | 
123 | #### Size
124 | 
125 | * **buttonSize** `number`  
126 | Circumference of the button. Defaults to the height of the element.
127 | 
128 | * **width** `number`  
129 | Width of the expanded progress bar. Defaults to the width of the element.
130 | 
131 | * **labelHeight** `number`  
132 | Height of the label, in pixels. Defaults to 53.
133 | 
134 | * **barHeight** `number`  
135 | Thickness of the progress bar. Defaults to 4.
136 | 
137 | * **barInset** `number`  
138 | Inset of the filled part of the progress bar. Defaults to -0.5 <sub>Helps covering jagged edges</sub>.
139 | 
140 | * **bleedTop**, **bleedRight**, **bleedLeft** and **bleedBottom** `number`  
141 | Margin to draw the graphics. If there's clipping during the animation, increase these values. Performance might take a hit for values too large.
142 | Defaults to 100, 50, 50 and 60 respectively.
143 | 
144 | #### Text
145 | 
146 | * **fontFamily** `string`  
147 | Font used for the label. Defaults to `'Helvetica Neue','Helvetica','Arial',sans-serif`. This default is added to the value set, so there's no need to manually set these as fallback.
148 | 
149 | * **fontWeight** `string`  
150 | Defaults to `'bold'`.
151 | 
152 | * **textComplete**, **textFail** and **textCancel** `string`  
153 | Texts that will be shown on these events. Defaults are `'Done'`, `'Failed'` and `'Canceled'`.
154 | 
155 | #### Animation
156 | 
157 | * **barStretch** `number`  
158 | The maximum distance the bar will stretch. Defaults to 20.
159 | 
160 | * **jumpHeight** `number`  
161 | How hight the arrow/label will jump. Defaults to 50.
162 | 
163 | * **barElasticOvershoot** and **barElasticPeriod** `number`  
164 | Settings for the elastic animation. Defaults are 1.8 and 0.15, respectively.
165 | 
166 | * **labelWobbliness** `number`  
167 | Setting for the animation of the label during progress. Defaults to 40.
168 | 
169 | * **arrowHangOnFail** and **arrowHangOnCancel** `boolean`  
170 | Whether the arrow should 'fall' on these events or not. Default is `true` for both.
171 | 
172 | #### Events
173 | 
174 | * **onClick** `function`  
175 | Called when the user clicks the button only.
176 | 
177 | * **onOpen** `function`  
178 | Called when the progress bar finishes the opening animation.
179 | 
180 | * **onChange** `function`  
181 | Called when the bar value is changed.
182 | 
183 | * **onComplete** `function`  
184 | Called when the bar is full.
185 | 
186 | * **onClose** `function`  
187 | Called when the close animation is finished.
188 | 
189 | * **onFail** `function`  
190 | Called when the fail animation starts.
191 | 
192 | * **onCancel** `function`  
193 | Called when the cancel animation starts.
194 | 
195 | ## Methods
196 | 
197 | * **open()**  
198 | Starts the opening animation (turns the button into a progress bar).
199 | 
200 | * **close()**  
201 | Turns the progress bar back into a button.
202 | 
203 | * **setValue(value`number`)**  
204 | Sets the percentage loaded of the progress bar. From 0 to 1.
205 | 
206 | * **getValue()** `number`  
207 | Returns the current value of the progress bar.
208 | 
209 | * **fail()** and **cancel()**  
210 | Runs the fail and the cancel animations, respectively.
211 | 
212 | * **complete()**  
213 | Runs the complete animation, regardless of the progress. You should probably call `setValue(1)` instead.
214 | 
215 | * **onClick(callback`function`)**, **onOpen(callback`function`)**, **onChange(callback`function`)**, **onComplete(callback`function`)**, **onClose(callback`function`)**, **onFail(callback`function`)** and **onCancel(callback`function`)**  
216 | Aliases to the options of the same name.
217 | 
218 | ## Build
219 | 
220 | You need [node and npm](https://nodejs.org/) installed. Clone the repo, and on the terminal enter:
221 | 
222 | ```
223 | $ npm install
224 | $ npm run build
225 | ```
226 | 
227 | ## License
228 | 
229 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
230 | 
231 | Read more here: [License](http://tympanus.net/codrops/licensing/)
232 | 
233 | ## Misc
234 | 
235 | Follow Lucas: [Twitter](https://twitter.com/lucasbebber), [Codepen](http://codepen.io/lbebber/), [GitHub](https://github.com/lbebber)
236 | 
237 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/)
238 | 
239 | [© Codrops 2015](http://www.codrops.com)
240 | 


--------------------------------------------------------------------------------
/assets/bt1.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ElasticProgress/2055f0e6533efdeb3ba3b6ca6419c3ecaa7ed551/assets/bt1.ai


--------------------------------------------------------------------------------
/assets/bt2.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ElasticProgress/2055f0e6533efdeb3ba3b6ca6419c3ecaa7ed551/assets/bt2.ai


--------------------------------------------------------------------------------
/demo/css/main.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |     font-weight: normal;
  3 |     font-style: normal;
  4 |     font-family: 'codropsicons';
  5 |     src: url('../fonts/codropsicons/codropsicons.eot');
  6 |     src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
  7 | }
  8 | 
  9 | *,
 10 | *:after,
 11 | *:before {
 12 |     -webkit-box-sizing: border-box;
 13 |     box-sizing: border-box;
 14 | }
 15 | 
 16 | .clearfix:before,
 17 | .clearfix:after {
 18 |     display: table;
 19 |     content: '';
 20 | }
 21 | 
 22 | .clearfix:after {
 23 |     clear: both;
 24 | }
 25 | 
 26 | body {
 27 |     font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
 28 |     color: #2e343f;
 29 |     background: #f8f8f8;
 30 |     -webkit-font-smoothing: antialiased;
 31 |     -moz-osx-font-smoothing: grayscale;
 32 | }
 33 | 
 34 | a {
 35 |     outline: none;
 36 |     color: #7cc576;
 37 |     text-decoration: none;
 38 | }
 39 | 
 40 | a:hover,
 41 | a:focus {
 42 |     color: #2e343f;
 43 | }
 44 | 
 45 | /* Header */
 46 | 
 47 | .codrops-header {
 48 |     padding: 2em 1em 0;
 49 |     text-align: center;
 50 | }
 51 | 
 52 | .codrops-header h1 {
 53 |     margin: 0.5em 0 0;
 54 |     letter-spacing: -1px;
 55 |     font-size: 3em;
 56 |     line-height: 1;
 57 | }
 58 | 
 59 | .codrops-header h1 span {
 60 |     display: block;
 61 |     padding: 0.5em 0 1em;
 62 |     font-weight: normal;
 63 |     font-size: 0.425em;
 64 | }
 65 | 
 66 | /* Top Navigation Style */
 67 | 
 68 | .codrops-links {
 69 |     position: relative;
 70 |     display: inline-block;
 71 |     text-align: center;
 72 |     white-space: nowrap;
 73 | }
 74 | 
 75 | .codrops-links::after {
 76 |     position: absolute;
 77 |     top: 0;
 78 |     left: 50%;
 79 |     width: 1px;
 80 |     height: 100%;
 81 |     background: rgba(0, 0, 0, 0.1);
 82 |     content: '';
 83 |     -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
 84 |     transform: rotate3d(0, 0, 1, 22.5deg);
 85 | }
 86 | 
 87 | .codrops-icon {
 88 |     display: inline-block;
 89 |     margin: 0.5em;
 90 |     padding: 0em 0;
 91 |     width: 1.5em;
 92 |     text-decoration: none;
 93 | }
 94 | 
 95 | .codrops-icon span {
 96 |     display: none;
 97 | }
 98 | 
 99 | .codrops-icon:before {
100 |     margin: 0 5px;
101 |     text-transform: none;
102 |     font-weight: normal;
103 |     font-style: normal;
104 |     font-variant: normal;
105 |     font-family: 'codropsicons';
106 |     line-height: 1;
107 |     speak: none;
108 |     -webkit-font-smoothing: antialiased;
109 | }
110 | 
111 | .codrops-icon--drop:before {
112 |     content: "\e001";
113 | }
114 | 
115 | .codrops-icon--prev:before {
116 |     content: "\e004";
117 | }
118 | 
119 | 
120 | /* Demo links */
121 | 
122 | .codrops-demos {
123 |     margin: 2em 0 0;
124 | }
125 | 
126 | .codrops-demos a {
127 |     display: inline-block;
128 |     margin: 0 0.5em;
129 | }
130 | 
131 | .codrops-demos a.current-demo {
132 |     color: #333;
133 | }
134 | 
135 | 
136 | /* Content */
137 | 
138 | .content {
139 |     padding: 3em 0;
140 | }
141 | 
142 | .row {
143 | 	display: -webkit-flex;
144 | 	display: flex;
145 | 	-webkit-flex-direction: row;
146 | 	flex-direction: row;
147 | 	padding: 0 2em;
148 | }
149 | 
150 | .box {
151 | 	width: 50%;
152 | 	border: 10px solid #f9f9f9;
153 | 	background: #fff;
154 | 	display: -webkit-flex;
155 | 	display: flex;
156 | 	-webkit-justify-content: center;
157 | 	justify-content: center;
158 | 	-webkit-align-items: center;
159 | 	align-items: center;
160 | }
161 | 
162 | .box:last-child {
163 | 	background: #E8EBEC;
164 | 	-webkit-justify-content: flex-start;
165 | 	justify-content: flex-start;
166 | }
167 | 
168 | .box--centered {
169 | 	text-align: center;
170 | }
171 | 
172 | pre {
173 | 	padding: 0 2em;
174 | 	margin: 0;
175 | 	color: #436843;
176 | 	tab-size: 2;
177 | 	font-family: 'Inconsolata', monospace;
178 | 	line-height: 1.5;
179 | 	font-weight: bold;
180 | 	font-size: 0.85em;
181 | }
182 | 
183 | /* Download button style */
184 | 
185 | .Download {
186 |     display: inline-block;
187 |     width: 300px;
188 |     height: 120px;
189 | }
190 | 
191 | /* Related demos */
192 | 
193 | .content--related {
194 |     text-align: center;
195 |     font-weight: bold;
196 | }
197 | 
198 | .media-item {
199 |     display: inline-block;
200 |     padding: 1em;
201 |     vertical-align: top;
202 |     -webkit-transition: color 0.3s;
203 |     transition: color 0.3s;
204 | }
205 | 
206 | .media-item__img {
207 |     max-width: 100%;
208 |     opacity: 0.3;
209 |     -webkit-transition: opacity 0.3s;
210 |     transition: opacity 0.3s;
211 | }
212 | 
213 | .media-item:hover .media-item__img,
214 | .media-item:focus .media-item__img {
215 |     opacity: 1;
216 | }
217 | 
218 | .media-item__title {
219 |     margin: 0;
220 |     padding: 0.5em;
221 |     font-size: 1em;
222 | }
223 | 
224 | @media screen and (max-width: 60em) {
225 |     .row {
226 | 		display: block;
227 | 		margin-bottom: 3em;
228 | 	}
229 | 
230 | 	.box {
231 | 		width: 100%;
232 | 		padding: 1em;
233 | 		background: transparent;
234 | 	}
235 | }
236 | 
237 | @media screen and (max-width: 40em) {
238 |     .codrops-header h1 {
239 |         font-size: 2.8em;
240 |     }
241 | }
242 | 


--------------------------------------------------------------------------------
/demo/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS and IE text size adjust after device orientation change,
  6 |  *    without disabling user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 29 |  * and Firefox.
 30 |  * Correct `block` display not defined for `main` in IE 11.
 31 |  */
 32 | 
 33 | article,
 34 | aside,
 35 | details,
 36 | figcaption,
 37 | figure,
 38 | footer,
 39 | header,
 40 | hgroup,
 41 | main,
 42 | menu,
 43 | nav,
 44 | section,
 45 | summary {
 46 |   display: block;
 47 | }
 48 | 
 49 | /**
 50 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 51 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 52 |  */
 53 | 
 54 | audio,
 55 | canvas,
 56 | progress,
 57 | video {
 58 |   display: inline-block; /* 1 */
 59 |   vertical-align: baseline; /* 2 */
 60 | }
 61 | 
 62 | /**
 63 |  * Prevent modern browsers from displaying `audio` without controls.
 64 |  * Remove excess height in iOS 5 devices.
 65 |  */
 66 | 
 67 | audio:not([controls]) {
 68 |   display: none;
 69 |   height: 0;
 70 | }
 71 | 
 72 | /**
 73 |  * Address `[hidden]` styling not present in IE 8/9/10.
 74 |  * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 75 |  */
 76 | 
 77 | [hidden],
 78 | template {
 79 |   display: none;
 80 | }
 81 | 
 82 | /* Links
 83 |    ========================================================================== */
 84 | 
 85 | /**
 86 |  * Remove the gray background color from active links in IE 10.
 87 |  */
 88 | 
 89 | a {
 90 |   background-color: transparent;
 91 | }
 92 | 
 93 | /**
 94 |  * Improve readability of focused elements when they are also in an
 95 |  * active/hover state.
 96 |  */
 97 | 
 98 | a:active,
 99 | a:hover {
100 |   outline: 0;
101 | }
102 | 
103 | /* Text-level semantics
104 |    ========================================================================== */
105 | 
106 | /**
107 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
108 |  */
109 | 
110 | abbr[title] {
111 |   border-bottom: 1px dotted;
112 | }
113 | 
114 | /**
115 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
116 |  */
117 | 
118 | b,
119 | strong {
120 |   font-weight: bold;
121 | }
122 | 
123 | /**
124 |  * Address styling not present in Safari and Chrome.
125 |  */
126 | 
127 | dfn {
128 |   font-style: italic;
129 | }
130 | 
131 | /**
132 |  * Address variable `h1` font-size and margin within `section` and `article`
133 |  * contexts in Firefox 4+, Safari, and Chrome.
134 |  */
135 | 
136 | h1 {
137 |   font-size: 2em;
138 |   margin: 0.67em 0;
139 | }
140 | 
141 | /**
142 |  * Address styling not present in IE 8/9.
143 |  */
144 | 
145 | mark {
146 |   background: #ff0;
147 |   color: #000;
148 | }
149 | 
150 | /**
151 |  * Address inconsistent and variable font size in all browsers.
152 |  */
153 | 
154 | small {
155 |   font-size: 80%;
156 | }
157 | 
158 | /**
159 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
160 |  */
161 | 
162 | sub,
163 | sup {
164 |   font-size: 75%;
165 |   line-height: 0;
166 |   position: relative;
167 |   vertical-align: baseline;
168 | }
169 | 
170 | sup {
171 |   top: -0.5em;
172 | }
173 | 
174 | sub {
175 |   bottom: -0.25em;
176 | }
177 | 
178 | /* Embedded content
179 |    ========================================================================== */
180 | 
181 | /**
182 |  * Remove border when inside `a` element in IE 8/9/10.
183 |  */
184 | 
185 | img {
186 |   border: 0;
187 | }
188 | 
189 | /**
190 |  * Correct overflow not hidden in IE 9/10/11.
191 |  */
192 | 
193 | svg:not(:root) {
194 |   overflow: hidden;
195 | }
196 | 
197 | /* Grouping content
198 |    ========================================================================== */
199 | 
200 | /**
201 |  * Address margin not present in IE 8/9 and Safari.
202 |  */
203 | 
204 | figure {
205 |   margin: 1em 40px;
206 | }
207 | 
208 | /**
209 |  * Address differences between Firefox and other browsers.
210 |  */
211 | 
212 | hr {
213 |   box-sizing: content-box;
214 |   height: 0;
215 | }
216 | 
217 | /**
218 |  * Contain overflow in all browsers.
219 |  */
220 | 
221 | pre {
222 |   overflow: auto;
223 | }
224 | 
225 | /**
226 |  * Address odd `em`-unit font size rendering in all browsers.
227 |  */
228 | 
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 |   font-family: monospace, monospace;
234 |   font-size: 1em;
235 | }
236 | 
237 | /* Forms
238 |    ========================================================================== */
239 | 
240 | /**
241 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 |  * styling of `select`, unless a `border` property is set.
243 |  */
244 | 
245 | /**
246 |  * 1. Correct color not being inherited.
247 |  *    Known issue: affects color of disabled elements.
248 |  * 2. Correct font properties not being inherited.
249 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 |  */
251 | 
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 |   color: inherit; /* 1 */
258 |   font: inherit; /* 2 */
259 |   margin: 0; /* 3 */
260 | }
261 | 
262 | /**
263 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 |  */
265 | 
266 | button {
267 |   overflow: visible;
268 | }
269 | 
270 | /**
271 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 |  * All other form control elements do not inherit `text-transform` values.
273 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 |  * Correct `select` style inheritance in Firefox.
275 |  */
276 | 
277 | button,
278 | select {
279 |   text-transform: none;
280 | }
281 | 
282 | /**
283 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 |  *    and `video` controls.
285 |  * 2. Correct inability to style clickable `input` types in iOS.
286 |  * 3. Improve usability and consistency of cursor style between image-type
287 |  *    `input` and others.
288 |  */
289 | 
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 |   -webkit-appearance: button; /* 2 */
295 |   cursor: pointer; /* 3 */
296 | }
297 | 
298 | /**
299 |  * Re-set default cursor for disabled elements.
300 |  */
301 | 
302 | button[disabled],
303 | html input[disabled] {
304 |   cursor: default;
305 | }
306 | 
307 | /**
308 |  * Remove inner padding and border in Firefox 4+.
309 |  */
310 | 
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 |   border: 0;
314 |   padding: 0;
315 | }
316 | 
317 | /**
318 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 |  * the UA stylesheet.
320 |  */
321 | 
322 | input {
323 |   line-height: normal;
324 | }
325 | 
326 | /**
327 |  * It's recommended that you don't attempt to style these elements.
328 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 |  *
330 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 |  * 2. Remove excess padding in IE 8/9/10.
332 |  */
333 | 
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 |   box-sizing: border-box; /* 1 */
337 |   padding: 0; /* 2 */
338 | }
339 | 
340 | /**
341 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 |  * `font-size` values of the `input`, it causes the cursor style of the
343 |  * decrement button to change from `default` to `text`.
344 |  */
345 | 
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 |   height: auto;
349 | }
350 | 
351 | /**
352 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
354 |  */
355 | 
356 | input[type="search"] {
357 |   -webkit-appearance: textfield; /* 1 */
358 |   box-sizing: content-box; /* 2 */
359 | }
360 | 
361 | /**
362 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363 |  * Safari (but not Chrome) clips the cancel button when the search input has
364 |  * padding (and `textfield` appearance).
365 |  */
366 | 
367 | input[type="search"]::-webkit-search-cancel-button,
368 | input[type="search"]::-webkit-search-decoration {
369 |   -webkit-appearance: none;
370 | }
371 | 
372 | /**
373 |  * Define consistent border, margin, and padding.
374 |  */
375 | 
376 | fieldset {
377 |   border: 1px solid #c0c0c0;
378 |   margin: 0 2px;
379 |   padding: 0.35em 0.625em 0.75em;
380 | }
381 | 
382 | /**
383 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
384 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385 |  */
386 | 
387 | legend {
388 |   border: 0; /* 1 */
389 |   padding: 0; /* 2 */
390 | }
391 | 
392 | /**
393 |  * Remove default vertical scrollbar in IE 8/9/10/11.
394 |  */
395 | 
396 | textarea {
397 |   overflow: auto;
398 | }
399 | 
400 | /**
401 |  * Don't inherit the `font-weight` (applied by a rule above).
402 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403 |  */
404 | 
405 | optgroup {
406 |   font-weight: bold;
407 | }
408 | 
409 | /* Tables
410 |    ========================================================================== */
411 | 
412 | /**
413 |  * Remove most spacing between table cells.
414 |  */
415 | 
416 | table {
417 |   border-collapse: collapse;
418 |   border-spacing: 0;
419 | }
420 | 
421 | td,
422 | th {
423 |   padding: 0;
424 | }
425 | 


--------------------------------------------------------------------------------
/demo/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ElasticProgress/2055f0e6533efdeb3ba3b6ca6419c3ecaa7ed551/demo/favicon.ico


--------------------------------------------------------------------------------
/demo/fonts/codropsicons/codropsicons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ElasticProgress/2055f0e6533efdeb3ba3b6ca6419c3ecaa7ed551/demo/fonts/codropsicons/codropsicons.eot


--------------------------------------------------------------------------------
/demo/fonts/codropsicons/codropsicons.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 3 | <svg xmlns="http://www.w3.org/2000/svg">
 4 | <metadata>
 5 | This is a custom SVG font generated by IcoMoon.
 6 | <iconset grid="14"></iconset>
 7 | </metadata>
 8 | <defs>
 9 | <font id="codropsicons" horiz-adv-x="448" >
10 | <font-face units-per-em="448" ascent="384" descent="-64" />
11 | <missing-glyph horiz-adv-x="448" />
12 | <glyph unicode="&#xe001;" d="M 221.657,359.485 ,m0.00,0.00,c 0.00,0.00 -132.984-182.838 -132.205-286.236 0.515-68.522 61.089-123.688 135.314-123.218 74.202,0.479 133.943,56.421 133.428,124.943 C 357.414,178.368 221.657,359.485 221.657,359.485 z"  />
13 | <glyph unicode="&#xe004;" d="M 384.00,160.00l0.00-32.00 q0.00-13.25 -8.125-22.625t-21.125-9.375l-176.00,0.00 l 73.25-73.50q 9.50-9.00 9.50-22.50t-9.50-22.50l-18.75-19.00q-9.25-9.25 -22.50-9.25q-13.00,0.00 -22.75,9.25l-162.75,163.00q-9.25,9.25 -9.25,22.50q0.00,13.00 9.25,22.75l 162.75,162.50q 9.50,9.50 22.75,9.50q 13.00,0.00 22.50-9.50l 18.75-18.50q 9.50-9.50 9.50-22.75t-9.50-22.75l-73.25-73.25l 176.00,0.00 q 13.00,0.00 21.125-9.375 t 8.125-22.625z" horiz-adv-x="384"  />
14 | <glyph unicode="&#xe002;" d="M 407.273-23.273c0.00,0.00-325.818,0.00-366.545,0.00s-40.727,40.727-40.727,40.727l0.00,142.545 l 101.818,183.273l 244.364,0.00 l 101.818-183.273c0.00,0.00,0.00-101.818,0.00-142.545S 407.273-23.273, 407.273-23.273z M 325.818,302.545L 122.182,302.545 
15 | 	l-71.273-142.545L 142.545,160.00 c0.00,0.00, 40.727,0.00, 40.727-40.727l0.00-20.364 l 81.455,0.00 l0.00,20.364 c0.00,0.00,0.00,40.727, 40.727,40.727l 91.636,0.00 L 325.818,302.545z M 407.273,119.273l-96.911,0.00 C 307.532,113.917, 305.455,107.503, 305.455,98.909c0.00-40.727-40.727-40.727-40.727-40.727L 183.273,58.182 c0.00,0.00-40.727,0.00-40.727,40.727
16 | 	c0.00,8.593-2.077,15.008-4.908,20.364L 40.727,119.273 l0.00-101.818 l 366.545,0.00 L 407.273,119.273 z M 132.364,221.091l 183.273,0.00 L 325.818,200.727L 122.182,200.727 L 132.364,221.091z M 152.727,261.818l 142.545,0.00 L 305.455,241.455L 142.545,241.455 L 152.727,261.818z"  />
17 | <glyph unicode="&#xe000;" d="M 368.00,144.00q0.00-13.50 -9.25-22.75l-162.75-162.75q-9.75-9.25 -22.75-9.25q-12.75,0.00 -22.50,9.25l-18.75,18.75q-9.50,9.50 -9.50,22.75t 9.50,22.75l 73.25,73.25l-176.00,0.00 q-13.00,0.00 -21.125,9.375t-8.125,22.625l0.00,32.00 q0.00,13.25 8.125,22.625t 21.125,9.375l 176.00,0.00 l-73.25,73.50q-9.50,9.00 -9.50,22.50t 9.50,22.50l 18.75,18.75q 9.50,9.50 22.50,9.50q 13.25,0.00 22.75-9.50l 162.75-162.75q 9.25-8.75 9.25-22.50z" horiz-adv-x="384"  />
18 | <glyph unicode="&#xe003;" d="M 224.00-64.00C 100.291-64.00,0.00,36.291,0.00,160.00S 100.291,384.00, 224.00,384.00s 224.00-100.291, 224.00-224.00S 347.709-64.00, 224.00-64.00z
19 | 	 M 224.00,343.273c-101.228,0.00-183.273-82.045-183.273-183.273s 82.045-183.273, 183.273-183.273s 183.273,82.045, 183.273,183.273S 325.228,343.273, 224.00,343.273z M 244.364,122.164C 244.364,111.005, 244.364,98.909, 244.364,98.909l-40.727,0.00 c0.00,0.00,0.00,29.466,0.00,40.727
20 | 	s 9.123,20.364, 20.364,20.364l0.00,0.00c 22.481,0.00, 40.727,18.246, 40.727,40.727s-18.246,40.727-40.727,40.727S 183.273,223.209, 183.273,200.727c0.00-7.453, 2.138-14.356, 5.641-20.364L 145.437,180.364 C 143.727,186.90, 142.545,193.661, 142.545,200.727
21 | 	c0.00,44.983, 36.471,81.455, 81.455,81.455s 81.455-36.471, 81.455-81.455C 305.455,162.831, 279.45,131.247, 244.364,122.164z M 244.364,37.818l-40.727,0.00 l0.00,40.727 l 40.727,0.00 L 244.364,37.818 z"  />
22 | <glyph unicode="&#x20;" horiz-adv-x="224" />
23 | <glyph class="hidden" unicode="&#xf000;" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
24 | </font></defs></svg>


--------------------------------------------------------------------------------
/demo/fonts/codropsicons/codropsicons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ElasticProgress/2055f0e6533efdeb3ba3b6ca6419c3ecaa7ed551/demo/fonts/codropsicons/codropsicons.ttf


--------------------------------------------------------------------------------
/demo/fonts/codropsicons/codropsicons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ElasticProgress/2055f0e6533efdeb3ba3b6ca6419c3ecaa7ed551/demo/fonts/codropsicons/codropsicons.woff


--------------------------------------------------------------------------------
/demo/fonts/codropsicons/license.txt:
--------------------------------------------------------------------------------
1 | Icon Set:	Font Awesome -- http://fortawesome.github.com/Font-Awesome/
2 | License:	SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
3 | 
4 | 
5 | Icon Set:	Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
6 | License:	CC0 -- http://creativecommons.org/publicdomain/zero/1.0/


--------------------------------------------------------------------------------
/demo/img/related/AnimatedProgressButton.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ElasticProgress/2055f0e6533efdeb3ba3b6ca6419c3ecaa7ed551/demo/img/related/AnimatedProgressButton.jpg


--------------------------------------------------------------------------------
/demo/img/related/ProgressButtonStyles.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/ElasticProgress/2055f0e6533efdeb3ba3b6ca6419c3ecaa7ed551/demo/img/related/ProgressButtonStyles.jpg


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="no-js">
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 | 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  7 | 		<title>Elastic Progress | Codrops</title>
  8 | 		<meta name="description" content="" />
  9 | 		<meta name="keywords" content="" />
 10 | 		<meta name="author" content="Codrops" />
 11 | 		<link rel="shortcut icon" href="favicon.ico">
 12 | 		<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
 13 | 		<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
 14 | 		<link href='https://fonts.googleapis.com/css?family=Inconsolata:700' rel='stylesheet' type='text/css'>
 15 | 		<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
 16 | 		<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
 17 | 		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
 18 | 		<link rel="stylesheet" type="text/css" href="css/main.css" />
 19 | 		<!--[if IE]>
 20 | 		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 21 | 		<![endif]-->
 22 | 	</head>
 23 | 	<body>
 24 | 		<div class="container">
 25 | 			<header class="codrops-header">
 26 | 				<div class="codrops-links">
 27 | 					<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Tutorials/VideoOpeningAnimation/" title="Previous Demo"><span>Previous Demo</span></a>
 28 | 					<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=25030" title="Back to the article"><span>Back to the Codrops article</span></a>
 29 | 				</div>
 30 | 				<h1>Elastic Progress <span>Based on the <a href="https://dribbble.com/shots/1887815-Download">Dribbble shot 'Download'</a> by <a href="https://dribbble.com/xjw">xjw</a></span></h1>
 31 | 			</header>
 32 | 			<div class="content">
 33 | 				<div class="row">
 34 | 					<div class="box box--centered">
 35 | 						<div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br>
 36 | 					</div>
 37 | 					<div class="box">
 38 | 						<pre><code>
 39 | element.ElasticProgress({
 40 | 	buttonSize: 60,
 41 | 	fontFamily: "Montserrat",
 42 | 	colorBg: "#adeca8",
 43 | 	colorFg: "#7cc576",
 44 | 	onClick: function(event) {
 45 | 	console.log("onClick");
 46 | 	$(this).ElasticProgress("open");
 47 | },
 48 | onOpen: function(event) {
 49 | 	fakeLoading($(this));
 50 | },
 51 | onFail: function(event) {
 52 | 	$(this).ElasticProgress("open");
 53 | },
 54 | onCancel: function(event) {
 55 | 	$(this).ElasticProgress("open");
 56 | }
 57 | });
 58 | 						</code></pre>
 59 | 					</div>
 60 | 				</div>
 61 | 				<div class="row">
 62 | 					<div class="box box--centered">
 63 | 						<div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br>
 64 | 					</div>
 65 | 					<div class="box">
 66 | 						<pre><code>
 67 | element.ElasticProgress({
 68 | 	align: "center",
 69 | 	fontFamily: "Roboto",
 70 | 	colorFg: "#77c2ff",
 71 | 	colorBg: "#4e80dd",
 72 | 	bleedTop: 110,
 73 | 	bleedBottom: 40,
 74 | 	buttonSize: 100,
 75 | 	labelTilt: 70,
 76 | 	arrowDirection: "up",
 77 | 	onClick: function() {
 78 | 		$(this).ElasticProgress("open");
 79 | 	},
 80 | 	onOpen: function() {
 81 | 		fakeLoading($(this))
 82 | 	},
 83 | 	onCancel: function() {
 84 | 		$(this).ElasticProgress("close");
 85 | 	},
 86 | 	onComplete: function() {
 87 | 		var $obj = $(this)
 88 | 		$obj.ElasticProgress("close");
 89 | 	}
 90 | });
 91 | 						</code></pre>
 92 | 					</div>
 93 | 				</div>
 94 | 				<div class="row">
 95 | 					<div class="box box--centered">
 96 | 						<div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div> <br>
 97 | 					</div>
 98 | 					<div class="box">
 99 | 						<pre><code>
100 | element.ElasticProgress({
101 | 	align: "center",
102 | 	colorFg: "#686e85",
103 | 	colorBg: "#b4bad2",
104 | 	highlightColor: "#ffab91",
105 | 	width: Math.min($(window).width()/2 - 100, 600),
106 | 	barHeight: 10,
107 | 	labelHeight: 50,
108 | 	labelWobbliness: 0,
109 | 	bleedTop: 120,
110 | 	bleedRight: 100,
111 | 	buttonSize: 60,
112 | 	fontFamily: "Arvo",
113 | 	barStretch: 0,
114 | 	barInset: 4,
115 | 	barElasticOvershoot: 1,
116 | 	barElasticPeriod: 0.6,
117 | 	textFail: "Download Failed",
118 | 	textComplete: "Download Complete",
119 | 	arrowHangOnFail: false,
120 | 	onClick: function() {
121 | 			$(this).ElasticProgress("open");
122 | 	},
123 | 	onOpen: function() {
124 | 			fakeLoading($(this))
125 | 	},
126 | 	onComplete: function() {
127 | 			var $obj = $(this)
128 | 
129 | 			TweenMax.delayedCall(1.5, function() {
130 | 					$obj.ElasticProgress("close");
131 | 			})
132 | 	}
133 | });
134 | 						</code></pre>
135 | 					</div>
136 | 				</div>
137 | 				<div class="row">
138 | 					<div class="box box--centered">
139 | 						<div role="button" tabindex="0" aria-label="Download" class="Download" data-progressbar-label="Downloading item..."></div>
140 | 					</div>
141 | 					<div class="box">
142 | 						<pre><code>
143 | var e = new ElasticProgress(document.querySelectorAll('.Download')[3], {
144 | 	colorFg: "#ed7499",
145 | 	colorBg: "#635c73",
146 | 	highlightColor: "#ed7499",
147 | 	barHeight: 14,
148 | 	barInset: 10,
149 | 	fontFamily: "Indie Flower"
150 | });
151 | e.onClick(function() {
152 | 	e.open();
153 | })
154 | e.onOpen(function() {
155 | 	fakeLoading(e, 2, 0.5);
156 | });
157 | e.onFail(function() {
158 | 	e.close();
159 | })
160 | 						</code></pre>
161 | 				</div>
162 | 			</div>
163 | 			<!-- Related demos -->
164 | 			<section class="content content--related">
165 | 				<p>If you enjoyed this demo you might also like:</p>
166 | 				<a class="media-item" href="http://tympanus.net/Tutorials/CircularProgressButton/">
167 | 					<img class="media-item__img" src="img/related/AnimatedProgressButton.jpg">
168 | 					<h3 class="media-item__title">Circular Progress Button</h3>
169 | 				</a>
170 | 				<a class="media-item" href="http://tympanus.net/Development/ProgressButtonStyles/">
171 | 					<img class="media-item__img" src="img/related/ProgressButtonStyles.jpg">
172 | 					<h3 class="media-item__title">Progress Button Styles</h3>
173 | 				</a>
174 | 			</section>
175 | 		</div><!-- /container -->
176 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
177 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
178 | 		<script src="../dist/elastic-progress.min.js"></script>
179 | 		<script src="js/main.js"></script>
180 | 	</body>
181 | </html>
182 | 


--------------------------------------------------------------------------------
/demo/js/main.js:
--------------------------------------------------------------------------------
  1 | $(document).ready(function() {
  2 | 		$(".Download").eq(0).ElasticProgress({
  3 | 				buttonSize: 60,
  4 | 				fontFamily: "Montserrat",
  5 | 				colorBg: "#adeca8",
  6 | 				colorFg: "#7cc576",
  7 | 				onClick: function(event) {
  8 | 						console.log("onClick");
  9 | 						$(this).ElasticProgress("open");
 10 | 				},
 11 | 				onOpen: function(event) {
 12 | 						console.log("onOpen");
 13 | 						fakeLoading($(this));
 14 | 				},
 15 | 				onComplete: function(event) {
 16 | 						console.log("onComplete");
 17 | 				},
 18 | 				onClose: function(event) {
 19 | 						console.log("onClose");
 20 | 				},
 21 | 				onFail: function(event) {
 22 | 						console.log("onFail");
 23 | 						$(this).ElasticProgress("open");
 24 | 				},
 25 | 				onCancel: function(event) {
 26 | 						console.log("onCancel");
 27 | 						$(this).ElasticProgress("open");
 28 | 				}
 29 | 		});
 30 | 
 31 | 		$(".Download").eq(1).ElasticProgress({
 32 | 				align: "center",
 33 | 				fontFamily: "Roboto",
 34 | 				colorFg: "#77c2ff",
 35 | 				colorBg: "#4e80dd",
 36 | 				bleedTop: 110,
 37 | 				bleedBottom: 40,
 38 | 				buttonSize: 100,
 39 | 				labelTilt: 70,
 40 | 				arrowDirection: "up",
 41 | 				onClick: function() {
 42 | 						$(this).ElasticProgress("open");
 43 | 						//$(this).ElasticProgress("close");
 44 | 				},
 45 | 				onOpen: function() {
 46 | 						fakeLoading($(this))
 47 | 				},
 48 | 				onCancel: function() {
 49 | 						$(this).ElasticProgress("close");
 50 | 				},
 51 | 				onComplete: function() {
 52 | 						var $obj = $(this)
 53 | 
 54 | 						$obj.ElasticProgress("close");
 55 | 				}
 56 | 		});
 57 | 
 58 | 		$(".Download").eq(2).ElasticProgress({
 59 | 				align: "center",
 60 | 				colorFg: "#686e85",
 61 | 				colorBg: "#b4bad2",
 62 | 				highlightColor: "#ffab91",
 63 | 				width: Math.min($(window).width()/2 - 100, 600),
 64 | 				barHeight: 10,
 65 | 				labelHeight: 50,
 66 | 				labelWobbliness: 0,
 67 | 				bleedTop: 120,
 68 | 				bleedRight: 100,
 69 | 				buttonSize: 60,
 70 | 				fontFamily: "Arvo",
 71 | 				barStretch: 0,
 72 | 				barInset: 4,
 73 | 				barElasticOvershoot: 1,
 74 | 				barElasticPeriod: 0.6,
 75 | 				textFail: "Download Failed",
 76 | 				textComplete: "Download Complete",
 77 | 				arrowHangOnFail: false,
 78 | 				onClick: function() {
 79 | 						$(this).ElasticProgress("open");
 80 | 				},
 81 | 				onOpen: function() {
 82 | 						fakeLoading($(this))
 83 | 				},
 84 | 				onComplete: function() {
 85 | 						var $obj = $(this)
 86 | 
 87 | 						TweenMax.delayedCall(1.5, function() {
 88 | 								$obj.ElasticProgress("close");
 89 | 						})
 90 | 				}
 91 | 		});
 92 | 
 93 | 		var e = new ElasticProgress(document.querySelectorAll('.Download')[3], {
 94 | 				colorFg: "#ed7499",
 95 | 				colorBg: "#635c73",
 96 | 				highlightColor: "#ed7499",
 97 | 				barHeight: 14,
 98 | 				barInset: 10,
 99 | 				fontFamily: "Indie Flower"
100 | 		});
101 | 		e.onClick(function() {
102 | 				e.open();
103 | 		})
104 | 		e.onOpen(function() {
105 | 				fakeLoading(e, 2, 0.5);
106 | 		});
107 | 		e.onFail(function() {
108 | 				e.close();
109 | 		})
110 | 
111 | 		function fakeLoading($obj, speed, failAt) {
112 | 				if (typeof speed == "undefined") speed = 2;
113 | 				if (typeof failAt == "undefined") failAt = -1;
114 | 				var v = 0;
115 | 				var l = function() {
116 | 						if (failAt > -1) {
117 | 								if (v >= failAt) {
118 | 										if (typeof $obj.jquery != "undefined") {
119 | 												$obj.ElasticProgress("fail");
120 | 										} else {
121 | 												$obj.fail();
122 | 										}
123 | 										return;
124 | 								}
125 | 						}
126 | 						v += Math.pow(Math.random(), 2) * 0.1 * speed;
127 | 
128 | 						if (typeof $obj.jquery != "undefined") {
129 | 								$obj.ElasticProgress("setValue", v);
130 | 						} else {
131 | 								$obj.setValue(v);
132 | 						}
133 | 						if (v < 1) {
134 | 								TweenMax.delayedCall(0.05 + (Math.random() * 0.14), l)
135 | 						}
136 | 				};
137 | 				l();
138 | 		}
139 | });
140 | 


--------------------------------------------------------------------------------
/dist/elastic-progress.min.js:
--------------------------------------------------------------------------------
1 | !function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var e;e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,e.ElasticProgress=t()}}(function(){return function t(e,n,r){function i(s,a){if(!n[s]){if(!e[s]){var u="function"==typeof require&&require;if(!a&&u)return u(s,!0);if(o)return o(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var l=n[s]={exports:{}};e[s][0].call(l.exports,function(t){var n=e[s][1][t];return i(n?n:t)},l,l.exports,t,e,n,r)}return n[s].exports}for(var o="function"==typeof require&&require,s=0;s<r.length;s++)i(r[s]);return i}({1:[function(t,e,n){var r="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";!function(t){"use strict";function e(t){var e=t.charCodeAt(0);return e===s||e===h?62:e===a||e===f?63:u>e?-1:u+10>e?e-u+26+26:l+26>e?e-l:c+26>e?e-c+26:void 0}function n(t){function n(t){c[h++]=t}var r,i,s,a,u,c;if(t.length%4>0)throw new Error("Invalid string. Length must be a multiple of 4");var l=t.length;u="="===t.charAt(l-2)?2:"="===t.charAt(l-1)?1:0,c=new o(3*t.length/4-u),s=u>0?t.length-4:t.length;var h=0;for(r=0,i=0;s>r;r+=4,i+=3)a=e(t.charAt(r))<<18|e(t.charAt(r+1))<<12|e(t.charAt(r+2))<<6|e(t.charAt(r+3)),n((16711680&a)>>16),n((65280&a)>>8),n(255&a);return 2===u?(a=e(t.charAt(r))<<2|e(t.charAt(r+1))>>4,n(255&a)):1===u&&(a=e(t.charAt(r))<<10|e(t.charAt(r+1))<<4|e(t.charAt(r+2))>>2,n(a>>8&255),n(255&a)),c}function i(t){function e(t){return r.charAt(t)}function n(t){return e(t>>18&63)+e(t>>12&63)+e(t>>6&63)+e(63&t)}var i,o,s,a=t.length%3,u="";for(i=0,s=t.length-a;s>i;i+=3)o=(t[i]<<16)+(t[i+1]<<8)+t[i+2],u+=n(o);switch(a){case 1:o=t[t.length-1],u+=e(o>>2),u+=e(o<<4&63),u+="==";break;case 2:o=(t[t.length-2]<<8)+t[t.length-1],u+=e(o>>10),u+=e(o>>4&63),u+=e(o<<2&63),u+="="}return u}var o="undefined"!=typeof Uint8Array?Uint8Array:Array,s="+".charCodeAt(0),a="/".charCodeAt(0),u="0".charCodeAt(0),c="a".charCodeAt(0),l="A".charCodeAt(0),h="-".charCodeAt(0),f="_".charCodeAt(0);t.toByteArray=n,t.fromByteArray=i}("undefined"==typeof n?this.base64js={}:n)},{}],2:[function(t,e,n){},{}],3:[function(t,e,n){arguments[4][2][0].apply(n,arguments)},{dup:2}],4:[function(t,e,n){(function(e){function r(){return i.TYPED_ARRAY_SUPPORT?2147483647:1073741823}function i(t){return this instanceof i?(this.length=0,this.parent=void 0,"number"==typeof t?o(this,t):"string"==typeof t?s(this,t,arguments.length>1?arguments[1]:"utf8"):a(this,t)):arguments.length>1?new i(t,arguments[1]):new i(t)}function o(t,e){if(t=p(t,0>e?0:0|g(e)),!i.TYPED_ARRAY_SUPPORT)for(var n=0;e>n;n++)t[n]=0;return t}function s(t,e,n){("string"!=typeof n||""===n)&&(n="utf8");var r=0|y(e,n);return t=p(t,r),t.write(e,n),t}function a(t,e){if(i.isBuffer(e))return u(t,e);if(G(e))return c(t,e);if(null==e)throw new TypeError("must start with number, buffer, array or string");if("undefined"!=typeof ArrayBuffer){if(e.buffer instanceof ArrayBuffer)return l(t,e);if(e instanceof ArrayBuffer)return h(t,e)}return e.length?f(t,e):d(t,e)}function u(t,e){var n=0|g(e.length);return t=p(t,n),e.copy(t,0,0,n),t}function c(t,e){var n=0|g(e.length);t=p(t,n);for(var r=0;n>r;r+=1)t[r]=255&e[r];return t}function l(t,e){var n=0|g(e.length);t=p(t,n);for(var r=0;n>r;r+=1)t[r]=255&e[r];return t}function h(t,e){return i.TYPED_ARRAY_SUPPORT?(e.byteLength,t=i._augment(new Uint8Array(e))):t=l(t,new Uint8Array(e)),t}function f(t,e){var n=0|g(e.length);t=p(t,n);for(var r=0;n>r;r+=1)t[r]=255&e[r];return t}function d(t,e){var n,r=0;"Buffer"===e.type&&G(e.data)&&(n=e.data,r=0|g(n.length)),t=p(t,r);for(var i=0;r>i;i+=1)t[i]=255&n[i];return t}function p(t,e){i.TYPED_ARRAY_SUPPORT?(t=i._augment(new Uint8Array(e)),t.__proto__=i.prototype):(t.length=e,t._isBuffer=!0);var n=0!==e&&e<=i.poolSize>>>1;return n&&(t.parent=K),t}function g(t){if(t>=r())throw new RangeError("Attempt to allocate Buffer larger than maximum size: 0x"+r().toString(16)+" bytes");return 0|t}function m(t,e){if(!(this instanceof m))return new m(t,e);var n=new i(t,e);return delete n.parent,n}function y(t,e){"string"!=typeof t&&(t=""+t);var n=t.length;if(0===n)return 0;for(var r=!1;;)switch(e){case"ascii":case"binary":case"raw":case"raws":return n;case"utf8":case"utf-8":return F(t).length;case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return 2*n;case"hex":return n>>>1;case"base64":return q(t).length;default:if(r)return F(t).length;e=(""+e).toLowerCase(),r=!0}}function b(t,e,n){var r=!1;if(e=0|e,n=void 0===n||n===1/0?this.length:0|n,t||(t="utf8"),0>e&&(e=0),n>this.length&&(n=this.length),e>=n)return"";for(;;)switch(t){case"hex":return M(this,e,n);case"utf8":case"utf-8":return x(this,e,n);case"ascii":return C(this,e,n);case"binary":return R(this,e,n);case"base64":return A(this,e,n);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return L(this,e,n);default:if(r)throw new TypeError("Unknown encoding: "+t);t=(t+"").toLowerCase(),r=!0}}function v(t,e,n,r){n=Number(n)||0;var i=t.length-n;r?(r=Number(r),r>i&&(r=i)):r=i;var o=e.length;if(o%2!==0)throw new Error("Invalid hex string");r>o/2&&(r=o/2);for(var s=0;r>s;s++){var a=parseInt(e.substr(2*s,2),16);if(isNaN(a))throw new Error("Invalid hex string");t[n+s]=a}return s}function E(t,e,n,r){return z(F(e,t.length-n),t,n,r)}function w(t,e,n,r){return z(Y(e),t,n,r)}function T(t,e,n,r){return w(t,e,n,r)}function _(t,e,n,r){return z(q(e),t,n,r)}function S(t,e,n,r){return z(Q(e,t.length-n),t,n,r)}function A(t,e,n){return 0===e&&n===t.length?X.fromByteArray(t):X.fromByteArray(t.slice(e,n))}function x(t,e,n){n=Math.min(t.length,n);for(var r=[],i=e;n>i;){var o=t[i],s=null,a=o>239?4:o>223?3:o>191?2:1;if(n>=i+a){var u,c,l,h;switch(a){case 1:128>o&&(s=o);break;case 2:u=t[i+1],128===(192&u)&&(h=(31&o)<<6|63&u,h>127&&(s=h));break;case 3:u=t[i+1],c=t[i+2],128===(192&u)&&128===(192&c)&&(h=(15&o)<<12|(63&u)<<6|63&c,h>2047&&(55296>h||h>57343)&&(s=h));break;case 4:u=t[i+1],c=t[i+2],l=t[i+3],128===(192&u)&&128===(192&c)&&128===(192&l)&&(h=(15&o)<<18|(63&u)<<12|(63&c)<<6|63&l,h>65535&&1114112>h&&(s=h))}}null===s?(s=65533,a=1):s>65535&&(s-=65536,r.push(s>>>10&1023|55296),s=56320|1023&s),r.push(s),i+=a}return O(r)}function O(t){var e=t.length;if(Z>=e)return String.fromCharCode.apply(String,t);for(var n="",r=0;e>r;)n+=String.fromCharCode.apply(String,t.slice(r,r+=Z));return n}function C(t,e,n){var r="";n=Math.min(t.length,n);for(var i=e;n>i;i++)r+=String.fromCharCode(127&t[i]);return r}function R(t,e,n){var r="";n=Math.min(t.length,n);for(var i=e;n>i;i++)r+=String.fromCharCode(t[i]);return r}function M(t,e,n){var r=t.length;(!e||0>e)&&(e=0),(!n||0>n||n>r)&&(n=r);for(var i="",o=e;n>o;o++)i+=H(t[o]);return i}function L(t,e,n){for(var r=t.slice(e,n),i="",o=0;o<r.length;o+=2)i+=String.fromCharCode(r[o]+256*r[o+1]);return i}function N(t,e,n){if(t%1!==0||0>t)throw new RangeError("offset is not uint");if(t+e>n)throw new RangeError("Trying to access beyond buffer length")}function I(t,e,n,r,o,s){if(!i.isBuffer(t))throw new TypeError("buffer must be a Buffer instance");if(e>o||s>e)throw new RangeError("value is out of bounds");if(n+r>t.length)throw new RangeError("index out of range")}function B(t,e,n,r){0>e&&(e=65535+e+1);for(var i=0,o=Math.min(t.length-n,2);o>i;i++)t[n+i]=(e&255<<8*(r?i:1-i))>>>8*(r?i:1-i)}function U(t,e,n,r){0>e&&(e=4294967295+e+1);for(var i=0,o=Math.min(t.length-n,4);o>i;i++)t[n+i]=e>>>8*(r?i:3-i)&255}function P(t,e,n,r,i,o){if(e>i||o>e)throw new RangeError("value is out of bounds");if(n+r>t.length)throw new RangeError("index out of range");if(0>n)throw new RangeError("index out of range")}function k(t,e,n,r,i){return i||P(t,e,n,4,3.4028234663852886e38,-3.4028234663852886e38),W.write(t,e,n,r,23,4),n+4}function D(t,e,n,r,i){return i||P(t,e,n,8,1.7976931348623157e308,-1.7976931348623157e308),W.write(t,e,n,r,52,8),n+8}function j(t){if(t=V(t).replace($,""),t.length<2)return"";for(;t.length%4!==0;)t+="=";return t}function V(t){return t.trim?t.trim():t.replace(/^\s+|\s+$/g,"")}function H(t){return 16>t?"0"+t.toString(16):t.toString(16)}function F(t,e){e=e||1/0;for(var n,r=t.length,i=null,o=[],s=0;r>s;s++){if(n=t.charCodeAt(s),n>55295&&57344>n){if(!i){if(n>56319){(e-=3)>-1&&o.push(239,191,189);continue}if(s+1===r){(e-=3)>-1&&o.push(239,191,189);continue}i=n;continue}if(56320>n){(e-=3)>-1&&o.push(239,191,189),i=n;continue}n=i-55296<<10|n-56320|65536}else i&&(e-=3)>-1&&o.push(239,191,189);if(i=null,128>n){if((e-=1)<0)break;o.push(n)}else if(2048>n){if((e-=2)<0)break;o.push(n>>6|192,63&n|128)}else if(65536>n){if((e-=3)<0)break;o.push(n>>12|224,n>>6&63|128,63&n|128)}else{if(!(1114112>n))throw new Error("Invalid code point");if((e-=4)<0)break;o.push(n>>18|240,n>>12&63|128,n>>6&63|128,63&n|128)}}return o}function Y(t){for(var e=[],n=0;n<t.length;n++)e.push(255&t.charCodeAt(n));return e}function Q(t,e){for(var n,r,i,o=[],s=0;s<t.length&&!((e-=2)<0);s++)n=t.charCodeAt(s),r=n>>8,i=n%256,o.push(i),o.push(r);return o}function q(t){return X.toByteArray(j(t))}function z(t,e,n,r){for(var i=0;r>i&&!(i+n>=e.length||i>=t.length);i++)e[i+n]=t[i];return i}var X=t("base64-js"),W=t("ieee754"),G=t("is-array");n.Buffer=i,n.SlowBuffer=m,n.INSPECT_MAX_BYTES=50,i.poolSize=8192;var K={};i.TYPED_ARRAY_SUPPORT=void 0!==e.TYPED_ARRAY_SUPPORT?e.TYPED_ARRAY_SUPPORT:function(){function t(){}try{var e=new Uint8Array(1);return e.foo=function(){return 42},e.constructor=t,42===e.foo()&&e.constructor===t&&"function"==typeof e.subarray&&0===e.subarray(1,1).byteLength}catch(n){return!1}}(),i.TYPED_ARRAY_SUPPORT&&(i.prototype.__proto__=Uint8Array.prototype,i.__proto__=Uint8Array),i.isBuffer=function(t){return!(null==t||!t._isBuffer)},i.compare=function(t,e){if(!i.isBuffer(t)||!i.isBuffer(e))throw new TypeError("Arguments must be Buffers");if(t===e)return 0;for(var n=t.length,r=e.length,o=0,s=Math.min(n,r);s>o&&t[o]===e[o];)++o;return o!==s&&(n=t[o],r=e[o]),r>n?-1:n>r?1:0},i.isEncoding=function(t){switch(String(t).toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"binary":case"base64":case"raw":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return!0;default:return!1}},i.concat=function(t,e){if(!G(t))throw new TypeError("list argument must be an Array of Buffers.");if(0===t.length)return new i(0);var n;if(void 0===e)for(e=0,n=0;n<t.length;n++)e+=t[n].length;var r=new i(e),o=0;for(n=0;n<t.length;n++){var s=t[n];s.copy(r,o),o+=s.length}return r},i.byteLength=y,i.prototype.length=void 0,i.prototype.parent=void 0,i.prototype.toString=function(){var t=0|this.length;return 0===t?"":0===arguments.length?x(this,0,t):b.apply(this,arguments)},i.prototype.equals=function(t){if(!i.isBuffer(t))throw new TypeError("Argument must be a Buffer");return this===t?!0:0===i.compare(this,t)},i.prototype.inspect=function(){var t="",e=n.INSPECT_MAX_BYTES;return this.length>0&&(t=this.toString("hex",0,e).match(/.{2}/g).join(" "),this.length>e&&(t+=" ... ")),"<Buffer "+t+">"},i.prototype.compare=function(t){if(!i.isBuffer(t))throw new TypeError("Argument must be a Buffer");return this===t?0:i.compare(this,t)},i.prototype.indexOf=function(t,e){function n(t,e,n){for(var r=-1,i=0;n+i<t.length;i++)if(t[n+i]===e[-1===r?0:i-r]){if(-1===r&&(r=i),i-r+1===e.length)return n+r}else r=-1;return-1}if(e>2147483647?e=2147483647:-2147483648>e&&(e=-2147483648),e>>=0,0===this.length)return-1;if(e>=this.length)return-1;if(0>e&&(e=Math.max(this.length+e,0)),"string"==typeof t)return 0===t.length?-1:String.prototype.indexOf.call(this,t,e);if(i.isBuffer(t))return n(this,t,e);if("number"==typeof t)return i.TYPED_ARRAY_SUPPORT&&"function"===Uint8Array.prototype.indexOf?Uint8Array.prototype.indexOf.call(this,t,e):n(this,[t],e);throw new TypeError("val must be string, number or Buffer")},i.prototype.get=function(t){return console.log(".get() is deprecated. Access using array indexes instead."),this.readUInt8(t)},i.prototype.set=function(t,e){return console.log(".set() is deprecated. Access using array indexes instead."),this.writeUInt8(t,e)},i.prototype.write=function(t,e,n,r){if(void 0===e)r="utf8",n=this.length,e=0;else if(void 0===n&&"string"==typeof e)r=e,n=this.length,e=0;else if(isFinite(e))e=0|e,isFinite(n)?(n=0|n,void 0===r&&(r="utf8")):(r=n,n=void 0);else{var i=r;r=e,e=0|n,n=i}var o=this.length-e;if((void 0===n||n>o)&&(n=o),t.length>0&&(0>n||0>e)||e>this.length)throw new RangeError("attempt to write outside buffer bounds");r||(r="utf8");for(var s=!1;;)switch(r){case"hex":return v(this,t,e,n);case"utf8":case"utf-8":return E(this,t,e,n);case"ascii":return w(this,t,e,n);case"binary":return T(this,t,e,n);case"base64":return _(this,t,e,n);case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":return S(this,t,e,n);default:if(s)throw new TypeError("Unknown encoding: "+r);r=(""+r).toLowerCase(),s=!0}},i.prototype.toJSON=function(){return{type:"Buffer",data:Array.prototype.slice.call(this._arr||this,0)}};var Z=4096;i.prototype.slice=function(t,e){var n=this.length;t=~~t,e=void 0===e?n:~~e,0>t?(t+=n,0>t&&(t=0)):t>n&&(t=n),0>e?(e+=n,0>e&&(e=0)):e>n&&(e=n),t>e&&(e=t);var r;if(i.TYPED_ARRAY_SUPPORT)r=i._augment(this.subarray(t,e));else{var o=e-t;r=new i(o,void 0);for(var s=0;o>s;s++)r[s]=this[s+t]}return r.length&&(r.parent=this.parent||this),r},i.prototype.readUIntLE=function(t,e,n){t=0|t,e=0|e,n||N(t,e,this.length);for(var r=this[t],i=1,o=0;++o<e&&(i*=256);)r+=this[t+o]*i;return r},i.prototype.readUIntBE=function(t,e,n){t=0|t,e=0|e,n||N(t,e,this.length);for(var r=this[t+--e],i=1;e>0&&(i*=256);)r+=this[t+--e]*i;return r},i.prototype.readUInt8=function(t,e){return e||N(t,1,this.length),this[t]},i.prototype.readUInt16LE=function(t,e){return e||N(t,2,this.length),this[t]|this[t+1]<<8},i.prototype.readUInt16BE=function(t,e){return e||N(t,2,this.length),this[t]<<8|this[t+1]},i.prototype.readUInt32LE=function(t,e){return e||N(t,4,this.length),(this[t]|this[t+1]<<8|this[t+2]<<16)+16777216*this[t+3]},i.prototype.readUInt32BE=function(t,e){return e||N(t,4,this.length),16777216*this[t]+(this[t+1]<<16|this[t+2]<<8|this[t+3])},i.prototype.readIntLE=function(t,e,n){t=0|t,e=0|e,n||N(t,e,this.length);for(var r=this[t],i=1,o=0;++o<e&&(i*=256);)r+=this[t+o]*i;return i*=128,r>=i&&(r-=Math.pow(2,8*e)),r},i.prototype.readIntBE=function(t,e,n){t=0|t,e=0|e,n||N(t,e,this.length);for(var r=e,i=1,o=this[t+--r];r>0&&(i*=256);)o+=this[t+--r]*i;return i*=128,o>=i&&(o-=Math.pow(2,8*e)),o},i.prototype.readInt8=function(t,e){return e||N(t,1,this.length),128&this[t]?-1*(255-this[t]+1):this[t]},i.prototype.readInt16LE=function(t,e){e||N(t,2,this.length);var n=this[t]|this[t+1]<<8;return 32768&n?4294901760|n:n},i.prototype.readInt16BE=function(t,e){e||N(t,2,this.length);var n=this[t+1]|this[t]<<8;return 32768&n?4294901760|n:n},i.prototype.readInt32LE=function(t,e){return e||N(t,4,this.length),this[t]|this[t+1]<<8|this[t+2]<<16|this[t+3]<<24},i.prototype.readInt32BE=function(t,e){return e||N(t,4,this.length),this[t]<<24|this[t+1]<<16|this[t+2]<<8|this[t+3]},i.prototype.readFloatLE=function(t,e){return e||N(t,4,this.length),W.read(this,t,!0,23,4)},i.prototype.readFloatBE=function(t,e){return e||N(t,4,this.length),W.read(this,t,!1,23,4)},i.prototype.readDoubleLE=function(t,e){return e||N(t,8,this.length),W.read(this,t,!0,52,8)},i.prototype.readDoubleBE=function(t,e){return e||N(t,8,this.length),W.read(this,t,!1,52,8)},i.prototype.writeUIntLE=function(t,e,n,r){t=+t,e=0|e,n=0|n,r||I(this,t,e,n,Math.pow(2,8*n),0);var i=1,o=0;for(this[e]=255&t;++o<n&&(i*=256);)this[e+o]=t/i&255;return e+n},i.prototype.writeUIntBE=function(t,e,n,r){t=+t,e=0|e,n=0|n,r||I(this,t,e,n,Math.pow(2,8*n),0);var i=n-1,o=1;for(this[e+i]=255&t;--i>=0&&(o*=256);)this[e+i]=t/o&255;return e+n},i.prototype.writeUInt8=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,1,255,0),i.TYPED_ARRAY_SUPPORT||(t=Math.floor(t)),this[e]=t,e+1},i.prototype.writeUInt16LE=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,2,65535,0),i.TYPED_ARRAY_SUPPORT?(this[e]=t,this[e+1]=t>>>8):B(this,t,e,!0),e+2},i.prototype.writeUInt16BE=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,2,65535,0),i.TYPED_ARRAY_SUPPORT?(this[e]=t>>>8,this[e+1]=t):B(this,t,e,!1),e+2},i.prototype.writeUInt32LE=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,4,4294967295,0),i.TYPED_ARRAY_SUPPORT?(this[e+3]=t>>>24,this[e+2]=t>>>16,this[e+1]=t>>>8,this[e]=t):U(this,t,e,!0),e+4},i.prototype.writeUInt32BE=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,4,4294967295,0),i.TYPED_ARRAY_SUPPORT?(this[e]=t>>>24,this[e+1]=t>>>16,this[e+2]=t>>>8,this[e+3]=t):U(this,t,e,!1),e+4},i.prototype.writeIntLE=function(t,e,n,r){if(t=+t,e=0|e,!r){var i=Math.pow(2,8*n-1);I(this,t,e,n,i-1,-i)}var o=0,s=1,a=0>t?1:0;for(this[e]=255&t;++o<n&&(s*=256);)this[e+o]=(t/s>>0)-a&255;return e+n},i.prototype.writeIntBE=function(t,e,n,r){if(t=+t,e=0|e,!r){var i=Math.pow(2,8*n-1);I(this,t,e,n,i-1,-i)}var o=n-1,s=1,a=0>t?1:0;for(this[e+o]=255&t;--o>=0&&(s*=256);)this[e+o]=(t/s>>0)-a&255;return e+n},i.prototype.writeInt8=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,1,127,-128),i.TYPED_ARRAY_SUPPORT||(t=Math.floor(t)),0>t&&(t=255+t+1),this[e]=t,e+1},i.prototype.writeInt16LE=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,2,32767,-32768),i.TYPED_ARRAY_SUPPORT?(this[e]=t,this[e+1]=t>>>8):B(this,t,e,!0),e+2},i.prototype.writeInt16BE=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,2,32767,-32768),i.TYPED_ARRAY_SUPPORT?(this[e]=t>>>8,this[e+1]=t):B(this,t,e,!1),e+2},i.prototype.writeInt32LE=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,4,2147483647,-2147483648),i.TYPED_ARRAY_SUPPORT?(this[e]=t,this[e+1]=t>>>8,this[e+2]=t>>>16,this[e+3]=t>>>24):U(this,t,e,!0),e+4},i.prototype.writeInt32BE=function(t,e,n){return t=+t,e=0|e,n||I(this,t,e,4,2147483647,-2147483648),0>t&&(t=4294967295+t+1),i.TYPED_ARRAY_SUPPORT?(this[e]=t>>>24,this[e+1]=t>>>16,this[e+2]=t>>>8,this[e+3]=t):U(this,t,e,!1),e+4},i.prototype.writeFloatLE=function(t,e,n){return k(this,t,e,!0,n)},i.prototype.writeFloatBE=function(t,e,n){return k(this,t,e,!1,n)},i.prototype.writeDoubleLE=function(t,e,n){return D(this,t,e,!0,n)},i.prototype.writeDoubleBE=function(t,e,n){return D(this,t,e,!1,n)},i.prototype.copy=function(t,e,n,r){if(n||(n=0),r||0===r||(r=this.length),e>=t.length&&(e=t.length),e||(e=0),r>0&&n>r&&(r=n),r===n)return 0;if(0===t.length||0===this.length)return 0;if(0>e)throw new RangeError("targetStart out of bounds");if(0>n||n>=this.length)throw new RangeError("sourceStart out of bounds");if(0>r)throw new RangeError("sourceEnd out of bounds");r>this.length&&(r=this.length),t.length-e<r-n&&(r=t.length-e+n);var o,s=r-n;if(this===t&&e>n&&r>e)for(o=s-1;o>=0;o--)t[o+e]=this[o+n];else if(1e3>s||!i.TYPED_ARRAY_SUPPORT)for(o=0;s>o;o++)t[o+e]=this[o+n];else t._set(this.subarray(n,n+s),e);return s},i.prototype.fill=function(t,e,n){if(t||(t=0),e||(e=0),n||(n=this.length),e>n)throw new RangeError("end < start");if(n!==e&&0!==this.length){if(0>e||e>=this.length)throw new RangeError("start out of bounds");if(0>n||n>this.length)throw new RangeError("end out of bounds");var r;if("number"==typeof t)for(r=e;n>r;r++)this[r]=t;else{var i=F(t.toString()),o=i.length;for(r=e;n>r;r++)this[r]=i[r%o]}return this}},i.prototype.toArrayBuffer=function(){if("undefined"!=typeof Uint8Array){if(i.TYPED_ARRAY_SUPPORT)return new i(this).buffer;for(var t=new Uint8Array(this.length),e=0,n=t.length;n>e;e+=1)t[e]=this[e];return t.buffer}throw new TypeError("Buffer.toArrayBuffer not supported in this browser")};var J=i.prototype;i._augment=function(t){return t.constructor=i,t._isBuffer=!0,t._set=t.set,t.get=J.get,t.set=J.set,t.write=J.write,t.toString=J.toString,t.toLocaleString=J.toString,t.toJSON=J.toJSON,t.equals=J.equals,t.compare=J.compare,t.indexOf=J.indexOf,t.copy=J.copy,t.slice=J.slice,t.readUIntLE=J.readUIntLE,t.readUIntBE=J.readUIntBE,t.readUInt8=J.readUInt8,t.readUInt16LE=J.readUInt16LE,t.readUInt16BE=J.readUInt16BE,t.readUInt32LE=J.readUInt32LE,t.readUInt32BE=J.readUInt32BE,t.readIntLE=J.readIntLE,t.readIntBE=J.readIntBE,t.readInt8=J.readInt8,t.readInt16LE=J.readInt16LE,t.readInt16BE=J.readInt16BE,t.readInt32LE=J.readInt32LE,t.readInt32BE=J.readInt32BE,t.readFloatLE=J.readFloatLE,t.readFloatBE=J.readFloatBE,t.readDoubleLE=J.readDoubleLE,t.readDoubleBE=J.readDoubleBE,t.writeUInt8=J.writeUInt8,t.writeUIntLE=J.writeUIntLE,t.writeUIntBE=J.writeUIntBE,t.writeUInt16LE=J.writeUInt16LE,t.writeUInt16BE=J.writeUInt16BE,t.writeUInt32LE=J.writeUInt32LE,t.writeUInt32BE=J.writeUInt32BE,t.writeIntLE=J.writeIntLE,t.writeIntBE=J.writeIntBE,t.writeInt8=J.writeInt8,t.writeInt16LE=J.writeInt16LE,t.writeInt16BE=J.writeInt16BE,t.writeInt32LE=J.writeInt32LE,t.writeInt32BE=J.writeInt32BE,t.writeFloatLE=J.writeFloatLE,t.writeFloatBE=J.writeFloatBE,t.writeDoubleLE=J.writeDoubleLE,t.writeDoubleBE=J.writeDoubleBE,t.fill=J.fill,t.inspect=J.inspect,t.toArrayBuffer=J.toArrayBuffer,t};var $=/[^+\/0-9A-Za-z-_]/g}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"base64-js":1,ieee754:8,"is-array":10}],5:[function(t,e,n){(function(t){function e(t){return Array.isArray(t)}function r(t){return"boolean"==typeof t}function i(t){return null===t}function o(t){return null==t}function s(t){return"number"==typeof t}function a(t){return"string"==typeof t}function u(t){return"symbol"==typeof t}function c(t){return void 0===t}function l(t){return h(t)&&"[object RegExp]"===y(t)}function h(t){return"object"==typeof t&&null!==t}function f(t){return h(t)&&"[object Date]"===y(t)}function d(t){return h(t)&&("[object Error]"===y(t)||t instanceof Error)}function p(t){return"function"==typeof t}function g(t){return null===t||"boolean"==typeof t||"number"==typeof t||"string"==typeof t||"symbol"==typeof t||"undefined"==typeof t}function m(e){return t.isBuffer(e)}function y(t){return Object.prototype.toString.call(t)}n.isArray=e,n.isBoolean=r,n.isNull=i,n.isNullOrUndefined=o,n.isNumber=s,n.isString=a,n.isSymbol=u,n.isUndefined=c,n.isRegExp=l,n.isObject=h,n.isDate=f,n.isError=d,n.isFunction=p,n.isPrimitive=g,n.isBuffer=m}).call(this,{isBuffer:t("/Users/lucasbebber/Dropbox-Garden/Dropbox/Garden/www/codrops-buttons-github/ElasticProgress/node_modules/is-buffer/index.js")})},{"/Users/lucasbebber/Dropbox-Garden/Dropbox/Garden/www/codrops-buttons-github/ElasticProgress/node_modules/is-buffer/index.js":11}],6:[function(t,e,n){function r(){this._events=this._events||{},this._maxListeners=this._maxListeners||void 0}function i(t){return"function"==typeof t}function o(t){return"number"==typeof t}function s(t){return"object"==typeof t&&null!==t}function a(t){return void 0===t}e.exports=r,r.EventEmitter=r,r.prototype._events=void 0,r.prototype._maxListeners=void 0,r.defaultMaxListeners=10,r.prototype.setMaxListeners=function(t){if(!o(t)||0>t||isNaN(t))throw TypeError("n must be a positive number");return this._maxListeners=t,this},r.prototype.emit=function(t){var e,n,r,o,u,c;if(this._events||(this._events={}),"error"===t&&(!this._events.error||s(this._events.error)&&!this._events.error.length)){if(e=arguments[1],e instanceof Error)throw e;throw TypeError('Uncaught, unspecified "error" event.')}if(n=this._events[t],a(n))return!1;if(i(n))switch(arguments.length){case 1:n.call(this);break;case 2:n.call(this,arguments[1]);break;case 3:n.call(this,arguments[1],arguments[2]);break;default:for(r=arguments.length,o=new Array(r-1),u=1;r>u;u++)o[u-1]=arguments[u];n.apply(this,o)}else if(s(n)){for(r=arguments.length,o=new Array(r-1),u=1;r>u;u++)o[u-1]=arguments[u];for(c=n.slice(),r=c.length,u=0;r>u;u++)c[u].apply(this,o)}return!0},r.prototype.addListener=function(t,e){var n;if(!i(e))throw TypeError("listener must be a function");if(this._events||(this._events={}),this._events.newListener&&this.emit("newListener",t,i(e.listener)?e.listener:e),this._events[t]?s(this._events[t])?this._events[t].push(e):this._events[t]=[this._events[t],e]:this._events[t]=e,s(this._events[t])&&!this._events[t].warned){var n;n=a(this._maxListeners)?r.defaultMaxListeners:this._maxListeners,n&&n>0&&this._events[t].length>n&&(this._events[t].warned=!0,console.error("(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.",this._events[t].length),"function"==typeof console.trace&&console.trace())}return this},r.prototype.on=r.prototype.addListener,r.prototype.once=function(t,e){function n(){this.removeListener(t,n),r||(r=!0,e.apply(this,arguments))}if(!i(e))throw TypeError("listener must be a function");var r=!1;return n.listener=e,this.on(t,n),this},r.prototype.removeListener=function(t,e){var n,r,o,a;if(!i(e))throw TypeError("listener must be a function");if(!this._events||!this._events[t])return this;if(n=this._events[t],o=n.length,r=-1,n===e||i(n.listener)&&n.listener===e)delete this._events[t],this._events.removeListener&&this.emit("removeListener",t,e);else if(s(n)){for(a=o;a-->0;)if(n[a]===e||n[a].listener&&n[a].listener===e){r=a;break}if(0>r)return this;1===n.length?(n.length=0,delete this._events[t]):n.splice(r,1),this._events.removeListener&&this.emit("removeListener",t,e)}return this},r.prototype.removeAllListeners=function(t){var e,n;if(!this._events)return this;if(!this._events.removeListener)return 0===arguments.length?this._events={}:this._events[t]&&delete this._events[t],this;if(0===arguments.length){for(e in this._events)"removeListener"!==e&&this.removeAllListeners(e);return this.removeAllListeners("removeListener"),this._events={},this}if(n=this._events[t],i(n))this.removeListener(t,n);else for(;n.length;)this.removeListener(t,n[n.length-1]);return delete this._events[t],this},r.prototype.listeners=function(t){var e;return e=this._events&&this._events[t]?i(this._events[t])?[this._events[t]]:this._events[t].slice():[]},r.listenerCount=function(t,e){var n;return n=t._events&&t._events[e]?i(t._events[e])?1:t._events[e].length:0}},{}],7:[function(t,e,n){"use strict";var r=Object.prototype.hasOwnProperty,i=Object.prototype.toString,o=function(t){return"function"==typeof Array.isArray?Array.isArray(t):"[object Array]"===i.call(t)},s=function(t){if(!t||"[object Object]"!==i.call(t))return!1;var e=r.call(t,"constructor"),n=t.constructor&&t.constructor.prototype&&r.call(t.constructor.prototype,"isPrototypeOf");if(t.constructor&&!e&&!n)return!1;var o;for(o in t);return"undefined"==typeof o||r.call(t,o)};e.exports=function a(){var t,e,n,r,i,u,c=arguments[0],l=1,h=arguments.length,f=!1;for("boolean"==typeof c?(f=c,c=arguments[1]||{},l=2):("object"!=typeof c&&"function"!=typeof c||null==c)&&(c={});h>l;++l)if(t=arguments[l],null!=t)for(e in t)n=c[e],r=t[e],c!==r&&(f&&r&&(s(r)||(i=o(r)))?(i?(i=!1,u=n&&o(n)?n:[]):u=n&&s(n)?n:{},c[e]=a(f,u,r)):"undefined"!=typeof r&&(c[e]=r));return c}},{}],8:[function(t,e,n){n.read=function(t,e,n,r,i){var o,s,a=8*i-r-1,u=(1<<a)-1,c=u>>1,l=-7,h=n?i-1:0,f=n?-1:1,d=t[e+h];for(h+=f,o=d&(1<<-l)-1,d>>=-l,l+=a;l>0;o=256*o+t[e+h],h+=f,l-=8);for(s=o&(1<<-l)-1,o>>=-l,l+=r;l>0;s=256*s+t[e+h],h+=f,l-=8);if(0===o)o=1-c;else{if(o===u)return s?NaN:(d?-1:1)*(1/0);s+=Math.pow(2,r),o-=c}return(d?-1:1)*s*Math.pow(2,o-r)},n.write=function(t,e,n,r,i,o){var s,a,u,c=8*o-i-1,l=(1<<c)-1,h=l>>1,f=23===i?Math.pow(2,-24)-Math.pow(2,-77):0,d=r?0:o-1,p=r?1:-1,g=0>e||0===e&&0>1/e?1:0;for(e=Math.abs(e),isNaN(e)||e===1/0?(a=isNaN(e)?1:0,s=l):(s=Math.floor(Math.log(e)/Math.LN2),e*(u=Math.pow(2,-s))<1&&(s--,u*=2),e+=s+h>=1?f/u:f*Math.pow(2,1-h),e*u>=2&&(s++,u/=2),s+h>=l?(a=0,s=l):s+h>=1?(a=(e*u-1)*Math.pow(2,i),s+=h):(a=e*Math.pow(2,h-1)*Math.pow(2,i),s=0));i>=8;t[n+d]=255&a,d+=p,a/=256,i-=8);for(s=s<<i|a,c+=i;c>0;t[n+d]=255&s,d+=p,s/=256,c-=8);t[n+d-p]|=128*g}},{}],9:[function(t,e,n){"function"==typeof Object.create?e.exports=function(t,e){t.super_=e,t.prototype=Object.create(e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}})}:e.exports=function(t,e){t.super_=e;var n=function(){};n.prototype=e.prototype,t.prototype=new n,t.prototype.constructor=t}},{}],10:[function(t,e,n){var r=Array.isArray,i=Object.prototype.toString;e.exports=r||function(t){return!!t&&"[object Array]"==i.call(t)}},{}],11:[function(t,e,n){e.exports=function(t){return!(null==t||!(t._isBuffer||t.constructor&&"function"==typeof t.constructor.isBuffer&&t.constructor.isBuffer(t)))}},{}],12:[function(t,e,n){e.exports=Array.isArray||function(t){return"[object Array]"==Object.prototype.toString.call(t)}},{}],13:[function(t,e,n){(function(t){"use strict";function n(e){for(var n=new Array(arguments.length-1),r=0;r<n.length;)n[r++]=arguments[r];t.nextTick(function(){e.apply(null,n)})}e.exports=n}).call(this,t("_process"))},{_process:14}],14:[function(t,e,n){function r(){l=!1,a.length?c=a.concat(c):h=-1,c.length&&i()}function i(){if(!l){var t=setTimeout(r);l=!0;for(var e=c.length;e;){for(a=c,c=[];++h<e;)a&&a[h].run();h=-1,e=c.length}a=null,l=!1,clearTimeout(t)}}function o(t,e){this.fun=t,this.array=e}function s(){}var a,u=e.exports={},c=[],l=!1,h=-1;u.nextTick=function(t){var e=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)e[n-1]=arguments[n];c.push(new o(t,e)),1!==c.length||l||setTimeout(i,0)},o.prototype.run=function(){this.fun.apply(null,this.array)},u.title="browser",u.browser=!0,u.env={},u.argv=[],u.version="",u.versions={},u.on=s,u.addListener=s,u.once=s,u.off=s,u.removeListener=s,u.removeAllListeners=s,u.emit=s,u.binding=function(t){throw new Error("process.binding is not supported")},u.cwd=function(){return"/"},u.chdir=function(t){throw new Error("process.chdir is not supported")},u.umask=function(){return 0}},{}],15:[function(t,e,n){"use strict";function r(t){return this instanceof r?(c.call(this,t),l.call(this,t),t&&t.readable===!1&&(this.readable=!1),t&&t.writable===!1&&(this.writable=!1),this.allowHalfOpen=!0,t&&t.allowHalfOpen===!1&&(this.allowHalfOpen=!1),void this.once("end",i)):new r(t)}function i(){this.allowHalfOpen||this._writableState.ended||a(o,this)}function o(t){t.end()}var s=Object.keys||function(t){var e=[];for(var n in t)e.push(n);return e};e.exports=r;var a=t("process-nextick-args"),u=t("core-util-is");u.inherits=t("inherits");var c=t("./_stream_readable"),l=t("./_stream_writable");u.inherits(r,c);for(var h=s(l.prototype),f=0;f<h.length;f++){var d=h[f];r.prototype[d]||(r.prototype[d]=l.prototype[d])}},{"./_stream_readable":17,"./_stream_writable":19,"core-util-is":5,inherits:9,"process-nextick-args":13}],16:[function(t,e,n){"use strict";function r(t){return this instanceof r?void i.call(this,t):new r(t)}e.exports=r;var i=t("./_stream_transform"),o=t("core-util-is");o.inherits=t("inherits"),o.inherits(r,i),r.prototype._transform=function(t,e,n){n(null,t)}},{"./_stream_transform":18,"core-util-is":5,inherits:9}],17:[function(t,e,n){(function(n){"use strict";function r(e,n){var r=t("./_stream_duplex");e=e||{},this.objectMode=!!e.objectMode,n instanceof r&&(this.objectMode=this.objectMode||!!e.readableObjectMode);var i=e.highWaterMark,o=this.objectMode?16:16384;this.highWaterMark=i||0===i?i:o,this.highWaterMark=~~this.highWaterMark,this.buffer=[],this.length=0,this.pipes=null,this.pipesCount=0,this.flowing=null,this.ended=!1,this.endEmitted=!1,this.reading=!1,this.sync=!0,this.needReadable=!1,this.emittedReadable=!1,this.readableListening=!1,this.defaultEncoding=e.defaultEncoding||"utf8",this.ranOut=!1,this.awaitDrain=0,this.readingMore=!1,this.decoder=null,this.encoding=null,e.encoding&&(N||(N=t("string_decoder/").StringDecoder),this.decoder=new N(e.encoding),this.encoding=e.encoding)}function i(e){t("./_stream_duplex");return this instanceof i?(this._readableState=new r(e,this),this.readable=!0,e&&"function"==typeof e.read&&(this._read=e.read),void R.call(this)):new i(e)}function o(t,e,n,r,i){var o=c(e,n);if(o)t.emit("error",o);else if(null===n)e.reading=!1,l(t,e);else if(e.objectMode||n&&n.length>0)if(e.ended&&!i){var a=new Error("stream.push() after EOF");t.emit("error",a)}else if(e.endEmitted&&i){var a=new Error("stream.unshift() after end event");t.emit("error",a)}else!e.decoder||i||r||(n=e.decoder.write(n)),i||(e.reading=!1),e.flowing&&0===e.length&&!e.sync?(t.emit("data",n),t.read(0)):(e.length+=e.objectMode?1:n.length,
2 | i?e.buffer.unshift(n):e.buffer.push(n),e.needReadable&&h(t)),d(t,e);else i||(e.reading=!1);return s(e)}function s(t){return!t.ended&&(t.needReadable||t.length<t.highWaterMark||0===t.length)}function a(t){if(t>=I)t=I;else{t--;for(var e=1;32>e;e<<=1)t|=t>>e;t++}return t}function u(t,e){return 0===e.length&&e.ended?0:e.objectMode?0===t?0:1:null===t||isNaN(t)?e.flowing&&e.buffer.length?e.buffer[0].length:e.length:0>=t?0:(t>e.highWaterMark&&(e.highWaterMark=a(t)),t>e.length?e.ended?e.length:(e.needReadable=!0,0):t)}function c(t,e){var n=null;return O.isBuffer(e)||"string"==typeof e||null===e||void 0===e||t.objectMode||(n=new TypeError("Invalid non-string/buffer chunk")),n}function l(t,e){if(!e.ended){if(e.decoder){var n=e.decoder.end();n&&n.length&&(e.buffer.push(n),e.length+=e.objectMode?1:n.length)}e.ended=!0,h(t)}}function h(t){var e=t._readableState;e.needReadable=!1,e.emittedReadable||(L("emitReadable",e.flowing),e.emittedReadable=!0,e.sync?A(f,t):f(t))}function f(t){L("emit readable"),t.emit("readable"),v(t)}function d(t,e){e.readingMore||(e.readingMore=!0,A(p,t,e))}function p(t,e){for(var n=e.length;!e.reading&&!e.flowing&&!e.ended&&e.length<e.highWaterMark&&(L("maybeReadMore read 0"),t.read(0),n!==e.length);)n=e.length;e.readingMore=!1}function g(t){return function(){var e=t._readableState;L("pipeOnDrain",e.awaitDrain),e.awaitDrain&&e.awaitDrain--,0===e.awaitDrain&&C.listenerCount(t,"data")&&(e.flowing=!0,v(t))}}function m(t){L("readable nexttick read 0"),t.read(0)}function y(t,e){e.resumeScheduled||(e.resumeScheduled=!0,A(b,t,e))}function b(t,e){e.reading||(L("resume read 0"),t.read(0)),e.resumeScheduled=!1,t.emit("resume"),v(t),e.flowing&&!e.reading&&t.read(0)}function v(t){var e=t._readableState;if(L("flow",e.flowing),e.flowing)do var n=t.read();while(null!==n&&e.flowing)}function E(t,e){var n,r=e.buffer,i=e.length,o=!!e.decoder,s=!!e.objectMode;if(0===r.length)return null;if(0===i)n=null;else if(s)n=r.shift();else if(!t||t>=i)n=o?r.join(""):O.concat(r,i),r.length=0;else if(t<r[0].length){var a=r[0];n=a.slice(0,t),r[0]=a.slice(t)}else if(t===r[0].length)n=r.shift();else{n=o?"":new O(t);for(var u=0,c=0,l=r.length;l>c&&t>u;c++){var a=r[0],h=Math.min(t-u,a.length);o?n+=a.slice(0,h):a.copy(n,u,0,h),h<a.length?r[0]=a.slice(h):r.shift(),u+=h}}return n}function w(t){var e=t._readableState;if(e.length>0)throw new Error("endReadable called on non-empty stream");e.endEmitted||(e.ended=!0,A(T,e,t))}function T(t,e){t.endEmitted||0!==t.length||(t.endEmitted=!0,e.readable=!1,e.emit("end"))}function _(t,e){for(var n=0,r=t.length;r>n;n++)e(t[n],n)}function S(t,e){for(var n=0,r=t.length;r>n;n++)if(t[n]===e)return n;return-1}e.exports=i;var A=t("process-nextick-args"),x=t("isarray"),O=t("buffer").Buffer;i.ReadableState=r;var C=t("events").EventEmitter;C.listenerCount||(C.listenerCount=function(t,e){return t.listeners(e).length});var R;!function(){try{R=t("stream")}catch(e){}finally{R||(R=t("events").EventEmitter)}}();var O=t("buffer").Buffer,M=t("core-util-is");M.inherits=t("inherits");var L=t("util");L=L&&L.debuglog?L.debuglog("stream"):function(){};var N;M.inherits(i,R),i.prototype.push=function(t,e){var n=this._readableState;return n.objectMode||"string"!=typeof t||(e=e||n.defaultEncoding,e!==n.encoding&&(t=new O(t,e),e="")),o(this,n,t,e,!1)},i.prototype.unshift=function(t){var e=this._readableState;return o(this,e,t,"",!0)},i.prototype.isPaused=function(){return this._readableState.flowing===!1},i.prototype.setEncoding=function(e){return N||(N=t("string_decoder/").StringDecoder),this._readableState.decoder=new N(e),this._readableState.encoding=e,this};var I=8388608;i.prototype.read=function(t){L("read",t);var e=this._readableState,n=t;if(("number"!=typeof t||t>0)&&(e.emittedReadable=!1),0===t&&e.needReadable&&(e.length>=e.highWaterMark||e.ended))return L("read: emitReadable",e.length,e.ended),0===e.length&&e.ended?w(this):h(this),null;if(t=u(t,e),0===t&&e.ended)return 0===e.length&&w(this),null;var r=e.needReadable;L("need readable",r),(0===e.length||e.length-t<e.highWaterMark)&&(r=!0,L("length less than watermark",r)),(e.ended||e.reading)&&(r=!1,L("reading or ended",r)),r&&(L("do read"),e.reading=!0,e.sync=!0,0===e.length&&(e.needReadable=!0),this._read(e.highWaterMark),e.sync=!1),r&&!e.reading&&(t=u(n,e));var i;return i=t>0?E(t,e):null,null===i&&(e.needReadable=!0,t=0),e.length-=t,0!==e.length||e.ended||(e.needReadable=!0),n!==t&&e.ended&&0===e.length&&w(this),null!==i&&this.emit("data",i),i},i.prototype._read=function(t){this.emit("error",new Error("not implemented"))},i.prototype.pipe=function(t,e){function r(t){L("onunpipe"),t===h&&o()}function i(){L("onend"),t.end()}function o(){L("cleanup"),t.removeListener("close",u),t.removeListener("finish",c),t.removeListener("drain",m),t.removeListener("error",a),t.removeListener("unpipe",r),h.removeListener("end",i),h.removeListener("end",o),h.removeListener("data",s),!f.awaitDrain||t._writableState&&!t._writableState.needDrain||m()}function s(e){L("ondata");var n=t.write(e);!1===n&&(L("false write response, pause",h._readableState.awaitDrain),h._readableState.awaitDrain++,h.pause())}function a(e){L("onerror",e),l(),t.removeListener("error",a),0===C.listenerCount(t,"error")&&t.emit("error",e)}function u(){t.removeListener("finish",c),l()}function c(){L("onfinish"),t.removeListener("close",u),l()}function l(){L("unpipe"),h.unpipe(t)}var h=this,f=this._readableState;switch(f.pipesCount){case 0:f.pipes=t;break;case 1:f.pipes=[f.pipes,t];break;default:f.pipes.push(t)}f.pipesCount+=1,L("pipe count=%d opts=%j",f.pipesCount,e);var d=(!e||e.end!==!1)&&t!==n.stdout&&t!==n.stderr,p=d?i:o;f.endEmitted?A(p):h.once("end",p),t.on("unpipe",r);var m=g(h);return t.on("drain",m),h.on("data",s),t._events&&t._events.error?x(t._events.error)?t._events.error.unshift(a):t._events.error=[a,t._events.error]:t.on("error",a),t.once("close",u),t.once("finish",c),t.emit("pipe",h),f.flowing||(L("pipe resume"),h.resume()),t},i.prototype.unpipe=function(t){var e=this._readableState;if(0===e.pipesCount)return this;if(1===e.pipesCount)return t&&t!==e.pipes?this:(t||(t=e.pipes),e.pipes=null,e.pipesCount=0,e.flowing=!1,t&&t.emit("unpipe",this),this);if(!t){var n=e.pipes,r=e.pipesCount;e.pipes=null,e.pipesCount=0,e.flowing=!1;for(var i=0;r>i;i++)n[i].emit("unpipe",this);return this}var i=S(e.pipes,t);return-1===i?this:(e.pipes.splice(i,1),e.pipesCount-=1,1===e.pipesCount&&(e.pipes=e.pipes[0]),t.emit("unpipe",this),this)},i.prototype.on=function(t,e){var n=R.prototype.on.call(this,t,e);if("data"===t&&!1!==this._readableState.flowing&&this.resume(),"readable"===t&&this.readable){var r=this._readableState;r.readableListening||(r.readableListening=!0,r.emittedReadable=!1,r.needReadable=!0,r.reading?r.length&&h(this,r):A(m,this))}return n},i.prototype.addListener=i.prototype.on,i.prototype.resume=function(){var t=this._readableState;return t.flowing||(L("resume"),t.flowing=!0,y(this,t)),this},i.prototype.pause=function(){return L("call pause flowing=%j",this._readableState.flowing),!1!==this._readableState.flowing&&(L("pause"),this._readableState.flowing=!1,this.emit("pause")),this},i.prototype.wrap=function(t){var e=this._readableState,n=!1,r=this;t.on("end",function(){if(L("wrapped end"),e.decoder&&!e.ended){var t=e.decoder.end();t&&t.length&&r.push(t)}r.push(null)}),t.on("data",function(i){if(L("wrapped data"),e.decoder&&(i=e.decoder.write(i)),(!e.objectMode||null!==i&&void 0!==i)&&(e.objectMode||i&&i.length)){var o=r.push(i);o||(n=!0,t.pause())}});for(var i in t)void 0===this[i]&&"function"==typeof t[i]&&(this[i]=function(e){return function(){return t[e].apply(t,arguments)}}(i));var o=["error","close","destroy","pause","resume"];return _(o,function(e){t.on(e,r.emit.bind(r,e))}),r._read=function(e){L("wrapped _read",e),n&&(n=!1,t.resume())},r},i._fromList=E}).call(this,t("_process"))},{"./_stream_duplex":15,_process:14,buffer:4,"core-util-is":5,events:6,inherits:9,isarray:12,"process-nextick-args":13,"string_decoder/":21,util:2}],18:[function(t,e,n){"use strict";function r(t){this.afterTransform=function(e,n){return i(t,e,n)},this.needTransform=!1,this.transforming=!1,this.writecb=null,this.writechunk=null}function i(t,e,n){var r=t._transformState;r.transforming=!1;var i=r.writecb;if(!i)return t.emit("error",new Error("no writecb in Transform class"));r.writechunk=null,r.writecb=null,null!==n&&void 0!==n&&t.push(n),i&&i(e);var o=t._readableState;o.reading=!1,(o.needReadable||o.length<o.highWaterMark)&&t._read(o.highWaterMark)}function o(t){if(!(this instanceof o))return new o(t);a.call(this,t),this._transformState=new r(this);var e=this;this._readableState.needReadable=!0,this._readableState.sync=!1,t&&("function"==typeof t.transform&&(this._transform=t.transform),"function"==typeof t.flush&&(this._flush=t.flush)),this.once("prefinish",function(){"function"==typeof this._flush?this._flush(function(t){s(e,t)}):s(e)})}function s(t,e){if(e)return t.emit("error",e);var n=t._writableState,r=t._transformState;if(n.length)throw new Error("calling transform done when ws.length != 0");if(r.transforming)throw new Error("calling transform done when still transforming");return t.push(null)}e.exports=o;var a=t("./_stream_duplex"),u=t("core-util-is");u.inherits=t("inherits"),u.inherits(o,a),o.prototype.push=function(t,e){return this._transformState.needTransform=!1,a.prototype.push.call(this,t,e)},o.prototype._transform=function(t,e,n){throw new Error("not implemented")},o.prototype._write=function(t,e,n){var r=this._transformState;if(r.writecb=n,r.writechunk=t,r.writeencoding=e,!r.transforming){var i=this._readableState;(r.needTransform||i.needReadable||i.length<i.highWaterMark)&&this._read(i.highWaterMark)}},o.prototype._read=function(t){var e=this._transformState;null!==e.writechunk&&e.writecb&&!e.transforming?(e.transforming=!0,this._transform(e.writechunk,e.writeencoding,e.afterTransform)):e.needTransform=!0}},{"./_stream_duplex":15,"core-util-is":5,inherits:9}],19:[function(t,e,n){"use strict";function r(){}function i(t,e,n){this.chunk=t,this.encoding=e,this.callback=n,this.next=null}function o(e,n){var r=t("./_stream_duplex");e=e||{},this.objectMode=!!e.objectMode,n instanceof r&&(this.objectMode=this.objectMode||!!e.writableObjectMode);var i=e.highWaterMark,o=this.objectMode?16:16384;this.highWaterMark=i||0===i?i:o,this.highWaterMark=~~this.highWaterMark,this.needDrain=!1,this.ending=!1,this.ended=!1,this.finished=!1;var s=e.decodeStrings===!1;this.decodeStrings=!s,this.defaultEncoding=e.defaultEncoding||"utf8",this.length=0,this.writing=!1,this.corked=0,this.sync=!0,this.bufferProcessing=!1,this.onwrite=function(t){p(n,t)},this.writecb=null,this.writelen=0,this.bufferedRequest=null,this.lastBufferedRequest=null,this.pendingcb=0,this.prefinished=!1,this.errorEmitted=!1}function s(e){var n=t("./_stream_duplex");return this instanceof s||this instanceof n?(this._writableState=new o(e,this),this.writable=!0,e&&("function"==typeof e.write&&(this._write=e.write),"function"==typeof e.writev&&(this._writev=e.writev)),void A.call(this)):new s(e)}function a(t,e){var n=new Error("write after end");t.emit("error",n),T(e,n)}function u(t,e,n,r){var i=!0;if(!_.isBuffer(n)&&"string"!=typeof n&&null!==n&&void 0!==n&&!e.objectMode){var o=new TypeError("Invalid non-string/buffer chunk");t.emit("error",o),T(r,o),i=!1}return i}function c(t,e,n){return t.objectMode||t.decodeStrings===!1||"string"!=typeof e||(e=new _(e,n)),e}function l(t,e,n,r,o){n=c(e,n,r),_.isBuffer(n)&&(r="buffer");var s=e.objectMode?1:n.length;e.length+=s;var a=e.length<e.highWaterMark;if(a||(e.needDrain=!0),e.writing||e.corked){var u=e.lastBufferedRequest;e.lastBufferedRequest=new i(n,r,o),u?u.next=e.lastBufferedRequest:e.bufferedRequest=e.lastBufferedRequest}else h(t,e,!1,s,n,r,o);return a}function h(t,e,n,r,i,o,s){e.writelen=r,e.writecb=s,e.writing=!0,e.sync=!0,n?t._writev(i,e.onwrite):t._write(i,o,e.onwrite),e.sync=!1}function f(t,e,n,r,i){--e.pendingcb,n?T(i,r):i(r),t._writableState.errorEmitted=!0,t.emit("error",r)}function d(t){t.writing=!1,t.writecb=null,t.length-=t.writelen,t.writelen=0}function p(t,e){var n=t._writableState,r=n.sync,i=n.writecb;if(d(n),e)f(t,n,r,e,i);else{var o=b(n);o||n.corked||n.bufferProcessing||!n.bufferedRequest||y(t,n),r?T(g,t,n,o,i):g(t,n,o,i)}}function g(t,e,n,r){n||m(t,e),e.pendingcb--,r(),E(t,e)}function m(t,e){0===e.length&&e.needDrain&&(e.needDrain=!1,t.emit("drain"))}function y(t,e){e.bufferProcessing=!0;var n=e.bufferedRequest;if(t._writev&&n&&n.next){for(var r=[],i=[];n;)i.push(n.callback),r.push(n),n=n.next;e.pendingcb++,e.lastBufferedRequest=null,h(t,e,!0,e.length,r,"",function(t){for(var n=0;n<i.length;n++)e.pendingcb--,i[n](t)})}else{for(;n;){var o=n.chunk,s=n.encoding,a=n.callback,u=e.objectMode?1:o.length;if(h(t,e,!1,u,o,s,a),n=n.next,e.writing)break}null===n&&(e.lastBufferedRequest=null)}e.bufferedRequest=n,e.bufferProcessing=!1}function b(t){return t.ending&&0===t.length&&null===t.bufferedRequest&&!t.finished&&!t.writing}function v(t,e){e.prefinished||(e.prefinished=!0,t.emit("prefinish"))}function E(t,e){var n=b(e);return n&&(0===e.pendingcb?(v(t,e),e.finished=!0,t.emit("finish")):v(t,e)),n}function w(t,e,n){e.ending=!0,E(t,e),n&&(e.finished?T(n):t.once("finish",n)),e.ended=!0}e.exports=s;var T=t("process-nextick-args"),_=t("buffer").Buffer;s.WritableState=o;var S=t("core-util-is");S.inherits=t("inherits");var A;!function(){try{A=t("stream")}catch(e){}finally{A||(A=t("events").EventEmitter)}}();var _=t("buffer").Buffer;S.inherits(s,A),o.prototype.getBuffer=function(){for(var t=this.bufferedRequest,e=[];t;)e.push(t),t=t.next;return e},function(){try{Object.defineProperty(o.prototype,"buffer",{get:t("util-deprecate")(function(){return this.getBuffer()},"_writableState.buffer is deprecated. Use _writableState.getBuffer() instead.")})}catch(e){}}(),s.prototype.pipe=function(){this.emit("error",new Error("Cannot pipe. Not readable."))},s.prototype.write=function(t,e,n){var i=this._writableState,o=!1;return"function"==typeof e&&(n=e,e=null),_.isBuffer(t)?e="buffer":e||(e=i.defaultEncoding),"function"!=typeof n&&(n=r),i.ended?a(this,n):u(this,i,t,n)&&(i.pendingcb++,o=l(this,i,t,e,n)),o},s.prototype.cork=function(){var t=this._writableState;t.corked++},s.prototype.uncork=function(){var t=this._writableState;t.corked&&(t.corked--,t.writing||t.corked||t.finished||t.bufferProcessing||!t.bufferedRequest||y(this,t))},s.prototype.setDefaultEncoding=function(t){if("string"==typeof t&&(t=t.toLowerCase()),!(["hex","utf8","utf-8","ascii","binary","base64","ucs2","ucs-2","utf16le","utf-16le","raw"].indexOf((t+"").toLowerCase())>-1))throw new TypeError("Unknown encoding: "+t);this._writableState.defaultEncoding=t},s.prototype._write=function(t,e,n){n(new Error("not implemented"))},s.prototype._writev=null,s.prototype.end=function(t,e,n){var r=this._writableState;"function"==typeof t?(n=t,t=null,e=null):"function"==typeof e&&(n=e,e=null),null!==t&&void 0!==t&&this.write(t,e),r.corked&&(r.corked=1,this.uncork()),r.ending||r.finished||w(this,r,n)}},{"./_stream_duplex":15,buffer:4,"core-util-is":5,events:6,inherits:9,"process-nextick-args":13,"util-deprecate":26}],20:[function(t,e,n){var r=function(){try{return t("stream")}catch(e){}}();n=e.exports=t("./lib/_stream_readable.js"),n.Stream=r||n,n.Readable=n,n.Writable=t("./lib/_stream_writable.js"),n.Duplex=t("./lib/_stream_duplex.js"),n.Transform=t("./lib/_stream_transform.js"),n.PassThrough=t("./lib/_stream_passthrough.js")},{"./lib/_stream_duplex.js":15,"./lib/_stream_passthrough.js":16,"./lib/_stream_readable.js":17,"./lib/_stream_transform.js":18,"./lib/_stream_writable.js":19}],21:[function(t,e,n){function r(t){if(t&&!u(t))throw new Error("Unknown encoding: "+t)}function i(t){return t.toString(this.encoding)}function o(t){this.charReceived=t.length%2,this.charLength=this.charReceived?2:0}function s(t){this.charReceived=t.length%3,this.charLength=this.charReceived?3:0}var a=t("buffer").Buffer,u=a.isEncoding||function(t){switch(t&&t.toLowerCase()){case"hex":case"utf8":case"utf-8":case"ascii":case"binary":case"base64":case"ucs2":case"ucs-2":case"utf16le":case"utf-16le":case"raw":return!0;default:return!1}},c=n.StringDecoder=function(t){switch(this.encoding=(t||"utf8").toLowerCase().replace(/[-_]/,""),r(t),this.encoding){case"utf8":this.surrogateSize=3;break;case"ucs2":case"utf16le":this.surrogateSize=2,this.detectIncompleteChar=o;break;case"base64":this.surrogateSize=3,this.detectIncompleteChar=s;break;default:return void(this.write=i)}this.charBuffer=new a(6),this.charReceived=0,this.charLength=0};c.prototype.write=function(t){for(var e="";this.charLength;){var n=t.length>=this.charLength-this.charReceived?this.charLength-this.charReceived:t.length;if(t.copy(this.charBuffer,this.charReceived,0,n),this.charReceived+=n,this.charReceived<this.charLength)return"";t=t.slice(n,t.length),e=this.charBuffer.slice(0,this.charLength).toString(this.encoding);var r=e.charCodeAt(e.length-1);if(!(r>=55296&&56319>=r)){if(this.charReceived=this.charLength=0,0===t.length)return e;break}this.charLength+=this.surrogateSize,e=""}this.detectIncompleteChar(t);var i=t.length;this.charLength&&(t.copy(this.charBuffer,0,t.length-this.charReceived,i),i-=this.charReceived),e+=t.toString(this.encoding,0,i);var i=e.length-1,r=e.charCodeAt(i);if(r>=55296&&56319>=r){var o=this.surrogateSize;return this.charLength+=o,this.charReceived+=o,this.charBuffer.copy(this.charBuffer,o,0,o),t.copy(this.charBuffer,0,0,o),e.substring(0,i)}return e},c.prototype.detectIncompleteChar=function(t){for(var e=t.length>=3?3:t.length;e>0;e--){var n=t[t.length-e];if(1==e&&n>>5==6){this.charLength=2;break}if(2>=e&&n>>4==14){this.charLength=3;break}if(3>=e&&n>>3==30){this.charLength=4;break}}this.charReceived=e},c.prototype.end=function(t){var e="";if(t&&t.length&&(e=this.write(t)),this.charReceived){var n=this.charReceived,r=this.charBuffer,i=this.encoding;e+=r.slice(0,n).toString(i)}return e}},{buffer:4}],22:[function(t,e,n){function r(t){this.commands=r.parse(t)}r.prototype.encode=function(){return r.encode(this.commands)},r.prototype.round=function(){return this.transform.apply(this,[r.Transformer.ROUND].concat([].slice.call(arguments,0)))},r.prototype.toAbs=function(){return this.transform(r.Transformer.TO_ABS)},r.prototype.toRel=function(){return this.transform(r.Transformer.TO_REL)},r.prototype.translate=function(){return this.transform.apply(this,[r.Transformer.TRANSLATE].concat([].slice.call(arguments,0)))},r.prototype.scale=function(){return this.transform.apply(this,[r.Transformer.SCALE].concat([].slice.call(arguments,0)))},r.prototype.rotate=function(){return this.transform.apply(this,[r.Transformer.ROTATE].concat([].slice.call(arguments,0)))},r.prototype.matrix=function(){return this.transform.apply(this,[r.Transformer.MATRIX].concat([].slice.call(arguments,0)))},r.prototype.skewX=function(){return this.transform.apply(this,[r.Transformer.SKEW_X].concat([].slice.call(arguments,0)))},r.prototype.skewY=function(){return this.transform.apply(this,[r.Transformer.SKEW_Y].concat([].slice.call(arguments,0)))},r.prototype.xSymetry=function(){return this.transform.apply(this,[r.Transformer.X_AXIS_SIMETRY].concat([].slice.call(arguments,0)))},r.prototype.ySymetry=function(){return this.transform.apply(this,[r.Transformer.Y_AXIS_SIMETRY].concat([].slice.call(arguments,0)))},r.prototype.aToC=function(){return this.transform.apply(this,[r.Transformer.A_TO_C].concat([].slice.call(arguments,0)))},r.prototype.transform=function(t){for(var e=[],t=t.apply(null,[].slice.call(arguments,1)),n=[],r=this.commands,i=0,o=r.length;o>i;i++)n=t(r[i]),n instanceof Array?e=e.concat(n):e.push(n);return this.commands=e,this},r.encode=function(t){var e="",n=new r.Encoder;return n.on("readable",function(){var t;do t=n.read(),null!==t&&(e+=t);while(null!==t)}),n.write(t),n.end(),e},r.parse=function(t){var e=[],n=new r.Parser;return n.on("readable",function(){var t;do t=n.read(),null!==t&&e.push(t);while(null!==t)}),n.write(t),n.end(),e},r.CLOSE_PATH=1,r.MOVE_TO=2,r.HORIZ_LINE_TO=4,r.VERT_LINE_TO=8,r.LINE_TO=16,r.CURVE_TO=32,r.SMOOTH_CURVE_TO=64,r.QUAD_TO=128,r.SMOOTH_QUAD_TO=256,r.ARC=512,r.DRAWING_COMMANDS=r.HORIZ_LINE_TO|r.VERT_LINE_TO|r.LINE_TO|r.CURVE_TO|r.SMOOTH_CURVE_TO|r.QUAD_TO|r.SMOOTH_QUAD_TO|r.ARC,e.exports=r,r.Parser=t("./SVGPathDataParser.js"),r.Encoder=t("./SVGPathDataEncoder.js"),r.Transformer=t("./SVGPathDataTransformer.js")},{"./SVGPathDataEncoder.js":23,"./SVGPathDataParser.js":24,"./SVGPathDataTransformer.js":25}],23:[function(t,e,n){(function(n){function r(t){return this instanceof r?(o.call(this,{objectMode:!0}),this._writableState.objectMode=!0,void(this._readableState.objectMode=!1)):new r(t)}var i=t("./SVGPathData.js"),o=t("readable-stream").Transform,s=t("util"),a=" ";s.inherits(r,o),r.prototype._transform=function(t,e,r){var o="";t instanceof Array||(t=[t]);for(var s=0,u=t.length;u>s;s++)t[s].type!==i.CLOSE_PATH?t[s].type===i.HORIZ_LINE_TO?o+=(t[s].relative?"h":"H")+t[s].x:t[s].type===i.VERT_LINE_TO?o+=(t[s].relative?"v":"V")+t[s].y:t[s].type===i.MOVE_TO?o+=(t[s].relative?"m":"M")+t[s].x+a+t[s].y:t[s].type===i.LINE_TO?o+=(t[s].relative?"l":"L")+t[s].x+a+t[s].y:t[s].type===i.CURVE_TO?o+=(t[s].relative?"c":"C")+t[s].x2+a+t[s].y2+a+t[s].x1+a+t[s].y1+a+t[s].x+a+t[s].y:t[s].type===i.SMOOTH_CURVE_TO?o+=(t[s].relative?"s":"S")+t[s].x2+a+t[s].y2+a+t[s].x+a+t[s].y:t[s].type===i.QUAD_TO?o+=(t[s].relative?"q":"Q")+t[s].x1+a+t[s].y1+a+t[s].x+a+t[s].y:t[s].type===i.SMOOTH_QUAD_TO?o+=(t[s].relative?"t":"T")+t[s].x+a+t[s].y:t[s].type===i.ARC?o+=(t[s].relative?"a":"A")+t[s].rX+a+t[s].rY+a+t[s].xRot+a+t[s].lArcFlag+a+t[s].sweepFlag+a+t[s].x+a+t[s].y:this.emit("error",new Error('Unexpected command type "'+t[s].type+'" at index '+s+".")):o+="z";this.push(new n(o,"utf8")),r()},e.exports=r}).call(this,t("buffer").Buffer)},{"./SVGPathData.js":22,buffer:4,"readable-stream":20,util:28}],24:[function(t,e,n){(function(n){function r(t){return this instanceof r?(o.call(this,{objectMode:!0}),this._writableState.objectMode=!1,this._readableState.objectMode=!0,this.state=r.STATE_COMMAS_WSPS,this.curNumber="",this.curCommand=null,this._flush=function(t){this._transform(new n(" "),"utf-8",function(){}),null!==this.curCommand&&(this.curCommand.invalid&&this.emit("error",new SyntaxError("Unterminated command at the path end.")),this.push(this.curCommand),this.curCommand=null,this.state^=this.state&r.STATE_COMMANDS_MASK),t()},void(this._transform=function(t,e,n){for(var o=t.toString("buffer"!==e?e:"utf8"),s=0,p=o.length;p>s;s++){if((this.state&r.STATE_WSP||this.state&r.STATE_WSPS)&&-1!==a.indexOf(o[s])){if(this.state^=this.state&r.STATE_WSP,""===this.curNumber)continue;this.state^=this.state&r.STATE_NUMBER_MASK}if((this.state&r.STATE_COMMA||this.state&r.STATE_COMMAS)&&-1!==f.indexOf(o[s])){if(this.state^=this.state&r.STATE_COMMA,""===this.curNumber)continue;this.state^=this.state&r.STATE_NUMBER_MASK}if(this.state&r.STATE_NUMBER){if((this.state&r.STATE_NUMBER_MASK)===r.STATE_NUMBER&&(this.state|=r.STATE_NUMBER_INT|r.STATE_NUMBER_DIGITS,-1!==c.indexOf(o[s]))){this.curNumber+=o[s];continue}if(this.state&r.STATE_NUMBER_EXPSIGN&&(this.state^=r.STATE_NUMBER_EXPSIGN,this.state|=r.STATE_NUMBER_DIGITS,-1!==c.indexOf(o[s]))){this.curNumber+=o[s];continue}if(this.state&r.STATE_NUMBER_DIGITS){if(-1!==u.indexOf(o[s])){this.curNumber+=o[s];continue}this.state^=r.STATE_NUMBER_DIGITS}if(this.state&r.STATE_NUMBER_INT){if(this.state^=r.STATE_NUMBER_INT,-1!==h.indexOf(o[s])){this.curNumber+=o[s],this.state|=r.STATE_NUMBER_FLOAT|r.STATE_NUMBER_DIGITS;continue}if(-1!==l.indexOf(o[s])){this.curNumber+=o[s],this.state|=r.STATE_NUMBER_EXP|r.STATE_NUMBER_EXPSIGN;continue}this.state^=this.state&r.STATE_NUMBER_MASK}if(this.state&r.STATE_NUMBER_FLOAT){if(this.state^=r.STATE_NUMBER_FLOAT,-1!==l.indexOf(o[s])){this.curNumber+=o[s],this.state|=r.STATE_NUMBER_EXP|r.STATE_NUMBER_EXPSIGN;continue}this.state^=this.state&r.STATE_NUMBER_MASK}this.state&r.STATE_NUMBER_EXP&&(this.state^=this.state&r.STATE_NUMBER_MASK)}if(this.curNumber){if(this.state&r.STATE_HORIZ_LINE_TO?(null===this.curCommand?this.push({type:i.HORIZ_LINE_TO,relative:!!(this.state&r.STATE_RELATIVE),x:Number(this.curNumber)}):(this.curCommand.x=Number(this.curNumber),delete this.curCommand.invalid,this.push(this.curCommand),this.curCommand=null),this.state|=r.STATE_NUMBER):this.state&r.STATE_VERT_LINE_TO?(null===this.curCommand?this.push({type:i.VERT_LINE_TO,relative:!!(this.state&r.STATE_RELATIVE),y:Number(this.curNumber)}):(this.curCommand.y=Number(this.curNumber),delete this.curCommand.invalid,this.push(this.curCommand),this.curCommand=null),this.state|=r.STATE_NUMBER):this.state&r.STATE_MOVE_TO||this.state&r.STATE_LINE_TO||this.state&r.STATE_SMOOTH_QUAD_TO?(null===this.curCommand?this.curCommand={type:this.state&r.STATE_MOVE_TO?i.MOVE_TO:this.state&r.STATE_LINE_TO?i.LINE_TO:i.SMOOTH_QUAD_TO,relative:!!(this.state&r.STATE_RELATIVE),x:Number(this.curNumber)}:"undefined"==typeof this.curCommand.x?this.curCommand.x=Number(this.curNumber):(delete this.curCommand.invalid,this.curCommand.y=Number(this.curNumber),this.push(this.curCommand),this.curCommand=null,this.state&r.STATE_MOVE_TO&&(this.state^=r.STATE_MOVE_TO,this.state|=r.STATE_LINE_TO)),this.state|=r.STATE_NUMBER):this.state&r.STATE_CURVE_TO?(null===this.curCommand?this.curCommand={type:i.CURVE_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0,x2:Number(this.curNumber)}:"undefined"==typeof this.curCommand.x2?this.curCommand.x2=Number(this.curNumber):"undefined"==typeof this.curCommand.y2?this.curCommand.y2=Number(this.curNumber):"undefined"==typeof this.curCommand.x1?this.curCommand.x1=Number(this.curNumber):"undefined"==typeof this.curCommand.y1?this.curCommand.y1=Number(this.curNumber):"undefined"==typeof this.curCommand.x?this.curCommand.x=Number(this.curNumber):"undefined"==typeof this.curCommand.y&&(this.curCommand.y=Number(this.curNumber),delete this.curCommand.invalid,this.push(this.curCommand),this.curCommand=null),this.state|=r.STATE_NUMBER):this.state&r.STATE_SMOOTH_CURVE_TO?(null===this.curCommand?this.curCommand={type:i.SMOOTH_CURVE_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0,x2:Number(this.curNumber)}:"undefined"==typeof this.curCommand.x2?this.curCommand.x2=Number(this.curNumber):"undefined"==typeof this.curCommand.y2?this.curCommand.y2=Number(this.curNumber):"undefined"==typeof this.curCommand.x?this.curCommand.x=Number(this.curNumber):"undefined"==typeof this.curCommand.y&&(this.curCommand.y=Number(this.curNumber),delete this.curCommand.invalid,this.push(this.curCommand),this.curCommand=null),this.state|=r.STATE_NUMBER):this.state&r.STATE_QUAD_TO?(null===this.curCommand?this.curCommand={type:i.QUAD_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0,x1:Number(this.curNumber)}:"undefined"==typeof this.curCommand.x1?this.curCommand.x1=Number(this.curNumber):"undefined"==typeof this.curCommand.y1?this.curCommand.y1=Number(this.curNumber):"undefined"==typeof this.curCommand.x?this.curCommand.x=Number(this.curNumber):"undefined"==typeof this.curCommand.y&&(this.curCommand.y=Number(this.curNumber),delete this.curCommand.invalid,this.push(this.curCommand),this.curCommand=null),this.state|=r.STATE_NUMBER):this.state&r.STATE_ARC&&(null===this.curCommand?this.curCommand={type:i.ARC,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0,rX:Number(this.curNumber)}:"undefined"==typeof this.curCommand.rX?(Number(this.curNumber)<0&&this.emit("error",new SyntaxError('Expected positive number, got "'+this.curNumber+'" at index "'+s+'"')),this.curCommand.rX=Number(this.curNumber)):"undefined"==typeof this.curCommand.rY?(Number(this.curNumber)<0&&this.emit("error",new SyntaxError('Expected positive number, got "'+this.curNumber+'" at index "'+s+'"')),this.curCommand.rY=Number(this.curNumber)):"undefined"==typeof this.curCommand.xRot?this.curCommand.xRot=Number(this.curNumber):"undefined"==typeof this.curCommand.lArcFlag?("0"!==this.curNumber&&"1"!==this.curNumber&&this.emit("error",new SyntaxError('Expected a flag, got "'+this.curNumber+'" at index "'+s+'"')),this.curCommand.lArcFlag=Number(this.curNumber)):"undefined"==typeof this.curCommand.sweepFlag?("0"!==this.curNumber&&"1"!==this.curNumber&&this.emit("error",new SyntaxError('Expected a flag, got "'+this.curNumber+'" at index "'+s+'"')),this.curCommand.sweepFlag=Number(this.curNumber)):"undefined"==typeof this.curCommand.x?this.curCommand.x=Number(this.curNumber):"undefined"==typeof this.curCommand.y&&(this.curCommand.y=Number(this.curNumber),delete this.curCommand.invalid,this.push(this.curCommand),this.curCommand=null),this.state|=r.STATE_NUMBER),this.curNumber="",-1!==a.indexOf(o[s])||-1!==f.indexOf(o[s]))continue;if(-1!==c.indexOf(o[s])){this.curNumber=o[s],this.state|=r.STATE_NUMBER_INT|r.STATE_NUMBER_DIGITS;continue}if(-1!==h.indexOf(o[s])){this.curNumber=o[s],this.state|=r.STATE_NUMBER_FLOAT|r.STATE_NUMBER_DIGITS;continue}}-1!==d.indexOf(o[s])&&null!==this.curCommand&&(this.curCommand.invalid&&this.emit("error",new SyntaxError("Unterminated command at index "+s+".")),this.push(this.curCommand),this.curCommand=null,this.state^=this.state&r.STATE_COMMANDS_MASK),this.state^=this.state&r.STATE_COMMANDS_MASK,o[s]===o[s].toLowerCase()?this.state|=r.STATE_RELATIVE:this.state^=this.state&r.STATE_RELATIVE,"z"!==o[s].toLowerCase()?("h"===o[s].toLowerCase()?(this.state|=r.STATE_HORIZ_LINE_TO,this.curCommand={type:i.HORIZ_LINE_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):"v"===o[s].toLowerCase()?(this.state|=r.STATE_VERT_LINE_TO,this.curCommand={type:i.VERT_LINE_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):"m"===o[s].toLowerCase()?(this.state|=r.STATE_MOVE_TO,this.curCommand={type:i.MOVE_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):"l"===o[s].toLowerCase()?(this.state|=r.STATE_LINE_TO,this.curCommand={type:i.LINE_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):"c"===o[s].toLowerCase()?(this.state|=r.STATE_CURVE_TO,this.curCommand={type:i.CURVE_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):"s"===o[s].toLowerCase()?(this.state|=r.STATE_SMOOTH_CURVE_TO,this.curCommand={type:i.SMOOTH_CURVE_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):"q"===o[s].toLowerCase()?(this.state|=r.STATE_QUAD_TO,this.curCommand={type:i.QUAD_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):"t"===o[s].toLowerCase()?(this.state|=r.STATE_SMOOTH_QUAD_TO,this.curCommand={type:i.SMOOTH_QUAD_TO,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):"a"===o[s].toLowerCase()?(this.state|=r.STATE_ARC,this.curCommand={type:i.ARC,relative:!!(this.state&r.STATE_RELATIVE),invalid:!0}):this.emit("error",new SyntaxError('Unexpected character "'+o[s]+'" at index '+s+".")),this.state|=r.STATE_COMMAS_WSPS|r.STATE_NUMBER):(this.push({type:i.CLOSE_PATH}),this.state=r.STATE_COMMAS_WSPS)}n()})):new r(t)}var i=t("./SVGPathData.js"),o=t("readable-stream").Transform,s=t("util"),a=[" ","	","\r","\n"],u=["0","1","2","3","4","5","6","7","8","9"],c=["-","+"],l=["e","E"],h=["."],f=[","],d=["m","M","z","Z","l","L","h","H","v","V","c","C","s","S","q","Q","t","T","a","A"];s.inherits(r,o),r.STATE_WSP=1,r.STATE_WSPS=2,r.STATE_COMMA=4,r.STATE_COMMAS=8,r.STATE_COMMAS_WSPS=r.STATE_WSP|r.STATE_WSPS|r.STATE_COMMA|r.STATE_COMMAS,r.STATE_NUMBER=16,r.STATE_NUMBER_DIGITS=32,r.STATE_NUMBER_INT=64,r.STATE_NUMBER_FLOAT=128,r.STATE_NUMBER_EXP=256,r.STATE_NUMBER_EXPSIGN=512,r.STATE_NUMBER_MASK=r.STATE_NUMBER|r.STATE_NUMBER_DIGITS|r.STATE_NUMBER_INT|r.STATE_NUMBER_EXP|r.STATE_NUMBER_FLOAT,r.STATE_RELATIVE=1024,r.STATE_CLOSE_PATH=2048,r.STATE_MOVE_TO=4096,r.STATE_LINE_TO=8192,r.STATE_HORIZ_LINE_TO=16384,r.STATE_VERT_LINE_TO=32768,r.STATE_CURVE_TO=65536,r.STATE_SMOOTH_CURVE_TO=131072,r.STATE_QUAD_TO=262144,r.STATE_SMOOTH_QUAD_TO=524288,r.STATE_ARC=1048576,r.STATE_COMMANDS_MASK=r.STATE_CLOSE_PATH|r.STATE_MOVE_TO|r.STATE_LINE_TO|r.STATE_HORIZ_LINE_TO|r.STATE_VERT_LINE_TO|r.STATE_CURVE_TO|r.STATE_SMOOTH_CURVE_TO|r.STATE_QUAD_TO|r.STATE_SMOOTH_QUAD_TO|r.STATE_ARC,e.exports=r}).call(this,t("buffer").Buffer)},{"./SVGPathData.js":22,
3 | buffer:4,"readable-stream":20,util:28}],25:[function(t,e,n){function r(t){if(!(this instanceof r))return new(r.bind.apply(r,[r].concat([].slice.call(arguments,0))));if("function"!=typeof t)throw new Error("Please provide a transform callback to receive commands.");if(this._transformer=t.apply(null,[].slice.call(arguments,1)),"function"!=typeof this._transformer)throw new Error("Please provide a valid transform (returning a function).");s.call(this,{objectMode:!0})}function i(t,e,n,r,o,s,a,u,c,l){var h,f=Math.PI,d=120*f/180,p=f/180*(+o||0),g=[],m=function(t,e,n){var r=t*Math.cos(n)-e*Math.sin(n),i=t*Math.sin(n)+e*Math.cos(n);return{x:r,y:i}};if(l)A=l[0],x=l[1],_=l[2],S=l[3];else{h=m(t,e,-p),t=h.x,e=h.y,h=m(u,c,-p),u=h.x,c=h.y;var y=(Math.cos(f/180*o),Math.sin(f/180*o),(t-u)/2),b=(e-c)/2,v=y*y/(n*n)+b*b/(r*r);v>1&&(v=Math.sqrt(v),n=v*n,r=v*r);var E=n*n,w=r*r,T=(s==a?-1:1)*Math.sqrt(Math.abs((E*w-E*b*b-w*y*y)/(E*b*b+w*y*y))),_=T*n*b/r+(t+u)/2,S=T*-r*y/n+(e+c)/2,A=Math.asin(((e-S)/r).toFixed(9)),x=Math.asin(((c-S)/r).toFixed(9));A=_>t?f-A:A,x=_>u?f-x:x,0>A&&(A=2*f+A),0>x&&(x=2*f+x),a&&A>x&&(A-=2*f),!a&&x>A&&(x-=2*f)}var O=x-A;if(Math.abs(O)>d){var C=x,R=u,M=c;x=A+d*(a&&x>A?1:-1),u=_+n*Math.cos(x),c=S+r*Math.sin(x),g=i(u,c,n,r,o,0,a,R,M,[x,C,_,S])}O=x-A;var L=Math.cos(A),N=Math.sin(A),I=Math.cos(x),B=Math.sin(x),U=Math.tan(O/4),P=4/3*n*U,k=4/3*r*U,D=[t,e],j=[t+P*N,e-k*L],V=[u+P*B,c-k*I],H=[u,c];if(j[0]=2*D[0]-j[0],j[1]=2*D[1]-j[1],l)return[j,V,H].concat(g);g=[j,V,H].concat(g).join().split(",");for(var F=[],Y=0,Q=g.length;Q>Y;Y++)F[Y]=Y%2?m(g[Y-1],g[Y],p).y:m(g[Y],g[Y+1],p).x;return F}var o=t("./SVGPathData.js"),s=t("readable-stream").Transform,a=t("util");a.inherits(r,s),r.prototype._transform=function(t,e,n){t instanceof Array||(t=[t]);for(var r=0,i=t.length;i>r;r++)this.push(this._transformer(t[r]));n()},r.ROUND=function(t){return t=t||1e13,function(e){return"undefined"!=typeof e.x1&&(e.x1=Math.round(e.x1*t)/t),"undefined"!=typeof e.y1&&(e.y1=Math.round(e.y1*t)/t),"undefined"!=typeof e.x2&&(e.x2=Math.round(e.x2*t)/t),"undefined"!=typeof e.y2&&(e.y2=Math.round(e.y2*t)/t),"undefined"!=typeof e.x&&(e.x=Math.round(e.x*t,12)/t),"undefined"!=typeof e.y&&(e.y=Math.round(e.y*t,12)/t),e}},r.TO_ABS=function(){var t=0,e=0,n=NaN,r=NaN;return function(i){return isNaN(n)&&i.type&o.DRAWING_COMMANDS&&(n=t,r=e),i.type&o.CLOSE_PATH&&!isNaN(n)&&(t=isNaN(n)?0:n,e=isNaN(r)?0:r,n=NaN,r=NaN),i.relative&&("undefined"!=typeof i.x1&&(i.x1=t+i.x1),"undefined"!=typeof i.y1&&(i.y1=e+i.y1),"undefined"!=typeof i.x2&&(i.x2=t+i.x2),"undefined"!=typeof i.y2&&(i.y2=e+i.y2),"undefined"!=typeof i.x&&(i.x=t+i.x),"undefined"!=typeof i.y&&(i.y=e+i.y),i.relative=!1),t="undefined"!=typeof i.x?i.x:t,e="undefined"!=typeof i.y?i.y:e,i}},r.TO_REL=function(){var t=0,e=0;return function(n){return n.relative||("undefined"!=typeof n.x1&&(n.x1=n.x1-t),"undefined"!=typeof n.y1&&(n.y1=n.y1-e),"undefined"!=typeof n.x2&&(n.x2=n.x2-t),"undefined"!=typeof n.y2&&(n.y2=n.y2-e),"undefined"!=typeof n.x&&(n.x=n.x-t),"undefined"!=typeof n.y&&(n.y=n.y-e),n.relative=!0),t="undefined"!=typeof n.x?t+n.x:t,e="undefined"!=typeof n.y?e+n.y:e,n}},r.MATRIX=function(t,e,n,r,i,o){var s,a;if("number"!=typeof o)throw new Error("A matrix transformation requires parameters [a,b,c,d,e,f] to be set and to be numbers.");return function(u){var c=u.x,l=u.x1,h=u.x2;return"undefined"!=typeof u.x&&(u.x=u.x*t+("undefined"!=typeof u.y?u.y:u.relative?0:a||0)*n+(u.relative&&"undefined"!=typeof s?0:i)),"undefined"!=typeof u.y&&(u.y=("undefined"!=typeof c?c:u.relative?0:s||0)*e+u.y*r+(u.relative&&"undefined"!=typeof a?0:o)),"undefined"!=typeof u.x1&&(u.x1=u.x1*t+u.y1*n+(u.relative&&"undefined"!=typeof s?0:i)),"undefined"!=typeof u.y1&&(u.y1=l*e+u.y1*r+(u.relative&&"undefined"!=typeof a?0:o)),"undefined"!=typeof u.x2&&(u.x2=u.x2*t+u.y2*n+(u.relative&&"undefined"!=typeof s?0:i)),"undefined"!=typeof u.y2&&(u.y2=h*e+u.y2*r+(u.relative&&"undefined"!=typeof a?0:o)),s="undefined"!=typeof u.x?u.relative?(s||0)+u.x:u.x:s||0,a="undefined"!=typeof u.y?u.relative?(a||0)+u.y:u.y:a||0,u}},r.ROTATE=function(t,e,n){if("number"!=typeof t)throw new Error("A rotate transformation requires the parameter a to be set and to be a number.");return function(t,e,n){return function(r){return n(e(t(r)))}}(r.TRANSLATE(-(e||0),-(n||0)),r.MATRIX(Math.cos(t),Math.sin(t),-Math.sin(t),Math.cos(t),0,0),r.TRANSLATE(e||0,n||0))},r.TRANSLATE=function(t,e){if("number"!=typeof t)throw new Error("A translate transformation requires the parameter dX to be set and to be a number.");return r.MATRIX(1,0,0,1,t,e||0)},r.SCALE=function(t,e){if("number"!=typeof t)throw new Error("A scale transformation requires the parameter dX to be set and to be a number.");return r.MATRIX(t,0,0,e||t,0,0)},r.SKEW_X=function(t){if("number"!=typeof t)throw new Error("A skewX transformation requires the parameter x to be set and to be a number.");return r.MATRIX(1,0,Math.atan(t),1,0,0)},r.SKEW_Y=function(t){if("number"!=typeof t)throw new Error("A skewY transformation requires the parameter y to be set and to be a number.");return r.MATRIX(1,Math.atan(t),0,1,0,0)},r.X_AXIS_SIMETRY=function(t){return function(t,e,n){return function(r){return n(e(t(r)))}}(r.TO_ABS(),r.SCALE(-1,1),r.TRANSLATE(t||0,0))},r.Y_AXIS_SIMETRY=function(t){return function(t,e,n){return function(r){return n(e(t(r)))}}(r.TO_ABS(),r.SCALE(1,-1),r.TRANSLATE(0,t||0))},r.A_TO_C=function(){var t,e=0,n=0;return function(r){return function(s){var a=[];if(s=r(s),s.type===o.ARC){t=i(e,n,s.rX,s.rX,s.xRot,s.lArcFlag,s.sweepFlag,s.x,s.y),e=s.x,n=s.y;for(var u=0,c=t.length;c>u;u+=6)a.push({type:o.CURVE_TO,relative:!1,x2:t[u],y2:t[u+1],x1:t[u+2],y1:t[u+3],x:t[u+4],y:t[u+5]});return a}return e=s.x,n=s.y,s}}(r.TO_ABS())},e.exports=r},{"./SVGPathData.js":22,"readable-stream":20,util:28}],26:[function(t,e,n){(function(t){function n(t,e){function n(){if(!i){if(r("throwDeprecation"))throw new Error(e);r("traceDeprecation")?console.trace(e):console.warn(e),i=!0}return t.apply(this,arguments)}if(r("noDeprecation"))return t;var i=!1;return n}function r(e){if(!t.localStorage)return!1;var n=t.localStorage[e];return null==n?!1:"true"===String(n).toLowerCase()}e.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],27:[function(t,e,n){e.exports=function(t){return t&&"object"==typeof t&&"function"==typeof t.copy&&"function"==typeof t.fill&&"function"==typeof t.readUInt8}},{}],28:[function(t,e,n){(function(e,r){function i(t,e){var r={seen:[],stylize:s};return arguments.length>=3&&(r.depth=arguments[2]),arguments.length>=4&&(r.colors=arguments[3]),g(e)?r.showHidden=e:e&&n._extend(r,e),w(r.showHidden)&&(r.showHidden=!1),w(r.depth)&&(r.depth=2),w(r.colors)&&(r.colors=!1),w(r.customInspect)&&(r.customInspect=!0),r.colors&&(r.stylize=o),u(r,t,r.depth)}function o(t,e){var n=i.styles[e];return n?"["+i.colors[n][0]+"m"+t+"["+i.colors[n][1]+"m":t}function s(t,e){return t}function a(t){var e={};return t.forEach(function(t,n){e[t]=!0}),e}function u(t,e,r){if(t.customInspect&&e&&x(e.inspect)&&e.inspect!==n.inspect&&(!e.constructor||e.constructor.prototype!==e)){var i=e.inspect(r,t);return v(i)||(i=u(t,i,r)),i}var o=c(t,e);if(o)return o;var s=Object.keys(e),g=a(s);if(t.showHidden&&(s=Object.getOwnPropertyNames(e)),A(e)&&(s.indexOf("message")>=0||s.indexOf("description")>=0))return l(e);if(0===s.length){if(x(e)){var m=e.name?": "+e.name:"";return t.stylize("[Function"+m+"]","special")}if(T(e))return t.stylize(RegExp.prototype.toString.call(e),"regexp");if(S(e))return t.stylize(Date.prototype.toString.call(e),"date");if(A(e))return l(e)}var y="",b=!1,E=["{","}"];if(p(e)&&(b=!0,E=["[","]"]),x(e)){var w=e.name?": "+e.name:"";y=" [Function"+w+"]"}if(T(e)&&(y=" "+RegExp.prototype.toString.call(e)),S(e)&&(y=" "+Date.prototype.toUTCString.call(e)),A(e)&&(y=" "+l(e)),0===s.length&&(!b||0==e.length))return E[0]+y+E[1];if(0>r)return T(e)?t.stylize(RegExp.prototype.toString.call(e),"regexp"):t.stylize("[Object]","special");t.seen.push(e);var _;return _=b?h(t,e,r,g,s):s.map(function(n){return f(t,e,r,g,n,b)}),t.seen.pop(),d(_,y,E)}function c(t,e){if(w(e))return t.stylize("undefined","undefined");if(v(e)){var n="'"+JSON.stringify(e).replace(/^"|"$/g,"").replace(/'/g,"\\'").replace(/\\"/g,'"')+"'";return t.stylize(n,"string")}return b(e)?t.stylize(""+e,"number"):g(e)?t.stylize(""+e,"boolean"):m(e)?t.stylize("null","null"):void 0}function l(t){return"["+Error.prototype.toString.call(t)+"]"}function h(t,e,n,r,i){for(var o=[],s=0,a=e.length;a>s;++s)L(e,String(s))?o.push(f(t,e,n,r,String(s),!0)):o.push("");return i.forEach(function(i){i.match(/^\d+$/)||o.push(f(t,e,n,r,i,!0))}),o}function f(t,e,n,r,i,o){var s,a,c;if(c=Object.getOwnPropertyDescriptor(e,i)||{value:e[i]},c.get?a=c.set?t.stylize("[Getter/Setter]","special"):t.stylize("[Getter]","special"):c.set&&(a=t.stylize("[Setter]","special")),L(r,i)||(s="["+i+"]"),a||(t.seen.indexOf(c.value)<0?(a=m(n)?u(t,c.value,null):u(t,c.value,n-1),a.indexOf("\n")>-1&&(a=o?a.split("\n").map(function(t){return"  "+t}).join("\n").substr(2):"\n"+a.split("\n").map(function(t){return"   "+t}).join("\n"))):a=t.stylize("[Circular]","special")),w(s)){if(o&&i.match(/^\d+$/))return a;s=JSON.stringify(""+i),s.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)?(s=s.substr(1,s.length-2),s=t.stylize(s,"name")):(s=s.replace(/'/g,"\\'").replace(/\\"/g,'"').replace(/(^"|"$)/g,"'"),s=t.stylize(s,"string"))}return s+": "+a}function d(t,e,n){var r=0,i=t.reduce(function(t,e){return r++,e.indexOf("\n")>=0&&r++,t+e.replace(/\u001b\[\d\d?m/g,"").length+1},0);return i>60?n[0]+(""===e?"":e+"\n ")+" "+t.join(",\n  ")+" "+n[1]:n[0]+e+" "+t.join(", ")+" "+n[1]}function p(t){return Array.isArray(t)}function g(t){return"boolean"==typeof t}function m(t){return null===t}function y(t){return null==t}function b(t){return"number"==typeof t}function v(t){return"string"==typeof t}function E(t){return"symbol"==typeof t}function w(t){return void 0===t}function T(t){return _(t)&&"[object RegExp]"===C(t)}function _(t){return"object"==typeof t&&null!==t}function S(t){return _(t)&&"[object Date]"===C(t)}function A(t){return _(t)&&("[object Error]"===C(t)||t instanceof Error)}function x(t){return"function"==typeof t}function O(t){return null===t||"boolean"==typeof t||"number"==typeof t||"string"==typeof t||"symbol"==typeof t||"undefined"==typeof t}function C(t){return Object.prototype.toString.call(t)}function R(t){return 10>t?"0"+t.toString(10):t.toString(10)}function M(){var t=new Date,e=[R(t.getHours()),R(t.getMinutes()),R(t.getSeconds())].join(":");return[t.getDate(),U[t.getMonth()],e].join(" ")}function L(t,e){return Object.prototype.hasOwnProperty.call(t,e)}var N=/%[sdj%]/g;n.format=function(t){if(!v(t)){for(var e=[],n=0;n<arguments.length;n++)e.push(i(arguments[n]));return e.join(" ")}for(var n=1,r=arguments,o=r.length,s=String(t).replace(N,function(t){if("%%"===t)return"%";if(n>=o)return t;switch(t){case"%s":return String(r[n++]);case"%d":return Number(r[n++]);case"%j":try{return JSON.stringify(r[n++])}catch(e){return"[Circular]"}default:return t}}),a=r[n];o>n;a=r[++n])s+=m(a)||!_(a)?" "+a:" "+i(a);return s},n.deprecate=function(t,i){function o(){if(!s){if(e.throwDeprecation)throw new Error(i);e.traceDeprecation?console.trace(i):console.error(i),s=!0}return t.apply(this,arguments)}if(w(r.process))return function(){return n.deprecate(t,i).apply(this,arguments)};if(e.noDeprecation===!0)return t;var s=!1;return o};var I,B={};n.debuglog=function(t){if(w(I)&&(I=e.env.NODE_DEBUG||""),t=t.toUpperCase(),!B[t])if(new RegExp("\\b"+t+"\\b","i").test(I)){var r=e.pid;B[t]=function(){var e=n.format.apply(n,arguments);console.error("%s %d: %s",t,r,e)}}else B[t]=function(){};return B[t]},n.inspect=i,i.colors={bold:[1,22],italic:[3,23],underline:[4,24],inverse:[7,27],white:[37,39],grey:[90,39],black:[30,39],blue:[34,39],cyan:[36,39],green:[32,39],magenta:[35,39],red:[31,39],yellow:[33,39]},i.styles={special:"cyan",number:"yellow","boolean":"yellow",undefined:"grey","null":"bold",string:"green",date:"magenta",regexp:"red"},n.isArray=p,n.isBoolean=g,n.isNull=m,n.isNullOrUndefined=y,n.isNumber=b,n.isString=v,n.isSymbol=E,n.isUndefined=w,n.isRegExp=T,n.isObject=_,n.isDate=S,n.isError=A,n.isFunction=x,n.isPrimitive=O,n.isBuffer=t("./support/isBuffer");var U=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];n.log=function(){console.log("%s - %s",M(),n.format.apply(n,arguments))},n.inherits=t("inherits"),n._extend=function(t,e){if(!e||!_(e))return t;for(var n=Object.keys(e),r=n.length;r--;)t[n[r]]=e[n[r]];return t}}).call(this,t("_process"),"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./support/isBuffer":27,_process:14,inherits:9}],29:[function(t,e,n){var r=t("extend");e.exports=function(t){return r(!0,{},t)}},{extend:7}],30:[function(t,e,n){function r(t,e){"undefined"==typeof t&&(t=1200),"undefined"==typeof e&&(e=1200);var n=document.createElementNS("http://www.w3.org/2000/svg","svg");return n.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),n.setAttribute("width",t),n.setAttribute("height",e),n}e.exports=r},{}],31:[function(t,e,n){e.exports=function(t,e,n){return Math.max(Math.min(t,n),e)}},{}],32:[function(t,e,n){"use strict";function r(t,e){t.setAttribute("d",e.encode())}function i(t){return t.getAttribute("d")}function o(t){return new h(i(t)).toAbs()}function s(t,e){return m(e)?void E.set(e,{display:t?"inline":"none"}):function(e){s(t,e)}}function a(t,e){return m(e)?void E.set(e,{transformOrigin:t}):function(e){a(t,e)}}function u(t,e){var n=1,r=0;m(e.duration)&&(n=e.duration,delete e.duration),m(e.value)&&(r=e.value,delete e.value),t.forEach(function(t){var i={};m(t.prop)&&(t.props=t.prop),Array.isArray(t.props)||(t.props=[t.props]),t.props.forEach(function(t){i[t]=r}),E.to(t.obj,n,f(i,e))})}function c(t,e){m(e)||(e={}),this.options=f({},A,e),e=this.options,this.target=t,e.align=.5,e.width<=-1?e.width=t.clientWidth:t.style.width=e.width+"px",e.buttonSize<=-1?e.buttonSize=t.clientHeight:t.style.height=e.buttonSize+"px";var n=t.getAttribute("data-progressbar");null!=n&&(e.progressbar=n);var r=t.getAttribute("data-progressbar-label");null!=r&&(e.progressbarLabel=r),this.graphics={},this.state=d(this.state),this.init()}var l=(t("gsap/src/uncompressed/plugins/CSSPlugin"),t("gsap/src/uncompressed/easing/EasePack"),t("gsap/src/uncompressed/TweenLite")),h=t("svg-pathdata"),f=t("extend"),d=t("./clone"),p=t("./create-svg"),g=t("./gfx-of"),m=t("./is-set"),y=t("./cutoff"),b=t("./pointer-events"),v=t("./svg/bt.svg"),E=l;0==Object.keys(E).length&&(m(window.TweenLite)?E=window.TweenLite:m(window.TweenMax)?E=window.TweenMax:this.error("GSAP could not be found."));var w=s(!1),T=s(!0),_=a("50% 50%"),S=a("50% 100%"),A={colorFg:"#fff",colorBg:"#000",background:getComputedStyle(document.body).getPropertyValue("background-color"),highlightColor:"#08F",progressbar:null,progressbarLabel:"",buttonSize:-1,width:-1,align:"center",barStretch:20,barElasticOvershoot:1.8,barElasticPeriod:.15,barHeight:4,barInset:-.5,labelHeight:53,labelWobbliness:40,bleedTop:100,bleedBottom:50,bleedLeft:60,bleedRight:60,fontFamily:"",fontWeight:"bold",jumpHeight:50,arrowDirection:"down",arrowHangOnFail:!0,arrowHangOnCancel:!0,textComplete:"Done",textFail:"Failed",textCancel:"Canceled",onClick:function(t){},onOpen:function(t){},onComplete:function(t){},onClose:function(t){},onFail:function(t){},onCancel:function(t){},onChange:function(t){}},x={logPrefix:"ElasticProgress",eventPrefix:"elasticProgress.",options:null,target:null,progress:null,progressbar:null,progressbarLabel:"",canvas:null,lastValue:0,value:0,visibleValue:0,lastVisibleValue:0,state:{animating:!1,opening:!1,open:!1,closing:!1,completing:!1,complete:!1,pressed:!1,hover:!1,focused:!1,failing:!1,failed:!1,calceling:!1,canceled:!1},graphics:null,buttonRadius:null,buttonScale:null,containerX:null,barOverstretch:0,base:null,arrowRelativeScale:.8,arrowRatio:null,arrowScale:null,arrowPos:null,arrowUp:!1,arrowRotation:null,labelScale:null,labelRegularHeight:53,queue:null},O="'Helvetica Neue','Helvetica','Arial'";c.prototype=f({},x,{init:function(){var t=this.options,e=(this.target,this.state,this.graphics);return this.styleTarget(),this.createProgressElement(),this.createCanvas(),this.setupGraphicsShortcuts(),_([e.circle,e.overlay,e.hitArea,e.bgCircle,e.overlayCircle,e.label]),S(e.arrow),S([e.arrowHead,e.arrowShaft]),w([e.label,e.fillLine,e.overlay]),this.calculateValues(),this.updateColors(),this.updateBarHeight(),this.updateButtonSize(),this.updateAlign(),E.set(e.container,{transformOrigin:"50% 50%",y:t.bleedTop,x:t.bleedLeft}),_(e.circle),e.labelText.setAttribute("text-anchor","middle"),e.labelText.setAttribute("font-family",t.fontFamily+","+O),e.labelText.setAttribute("font-weight",t.fontWeight),e.hitArea.style.pointerEvents="fill",e.hitArea.style.cursor="pointer",e.hitAreaCircle.style.fill="transparent",this.setupEvents(),this},addToQueue:function(t){this.queue=t},processQueue:function(){if(null!=this.queue){var t=this.queue;this.queue=null,t.call(this)}},styleTarget:function(){var t=this.target,e=t.style;e.border="none",e.background="transparent",e.outline="none",e.pointerEvents="none",e.webkitTapHighlightColor="transparent",e.textAlign="left"},createProgressElement:function(){var t=this.options,e=this.target;t.progressbar?this.progress=t.progressbar:(this.progress=document.createElement("progress"),this.progress.style.position="absolute",this.progress.style.left="-99999px",this.progress.setAttribute("aria-label",t.progressbarLabel)),this.progress.setAttribute("value",0),this.progress.setAttribute("max",1),this.progress.setAttribute("aria-hidden",!0),e.parentNode.insertBefore(this.progress,e.nextSibling)},createCanvas:function(){var t=this.options,e=p(t.width+t.bleedLeft+t.bleedRight,t.buttonSize+t.bleedTop+t.bleedBottom);e.appendChild(v()),this.target.appendChild(e),e.style.position="relative",e.style.marginRight=-t.bleedRight+"px",e.style.marginLeft=-t.bleedLeft+"px",e.style.marginTop=-t.bleedTop+"px",e.style.marginBottom=-t.bleedBottom+"px",this.canvas=e},setupGraphicsShortcuts:function(){var t=this.graphics,e=this.canvas;t.container=e.querySelector("#container"),t.hitArea=e.querySelector("#hit-area"),t.hitAreaCircle=t.hitArea.querySelector("path"),t.circle=e.querySelector("#circle"),t.arrow=e.querySelector("#arrow"),t.arrowHead=t.arrow.querySelector("#head"),t.arrowShaft=t.arrow.querySelector("#line"),t.label=t.arrow.querySelector("#label"),t.labelText=t.label.querySelector("text"),t.overlay=e.querySelector("#overlay"),t.overlayCircle=t.overlay.querySelector("path"),t.bg=e.querySelector("#background"),t.bgCircle=t.bg.querySelector("path"),t.line=e.querySelector("#border path"),t.fillLineContainer=e.querySelector("#fill-line"),t.fillLine=t.fillLineContainer.querySelector("path")},calculateValues:function(){var t=this.graphics,e=this.options,n=t.bgCircle.getBBox().height,r=t.arrow.getBBox().height;this.buttonRadius=e.buttonSize/2,this.arrowRatio=(r/n+.05)*this.arrowRelativeScale,this.buttonScale=e.buttonSize/n,this.arrowScale=this.buttonScale*this.arrowRelativeScale,this.arrowUp="up"==e.arrowDirection,this.arrowPos=e.buttonSize*(1-(1-this.arrowRatio)/2);var i=e.buttonSize*this.arrowRatio;this.arrowUp&&(this.arrowPos-=i),this.arrowRotation=this.arrowUp?180:0,this.base=e.buttonSize/2,this.labelScale=e.labelHeight/this.labelRegularHeight},updateColors:function(){var t=this.graphics,e=this.options;E.set(g([t.arrowHead,t.arrowShaft]),{fill:e.colorFg}),E.set(g(t.fillLine),{stroke:e.colorFg}),E.set(g([t.bg,t.labelText]),{fill:e.colorBg}),E.set(g(t.line),{stroke:e.colorBg}),E.set(g(t.overlay),{fill:e.background})},updateBarHeight:function(){var t=this.graphics,e=this.options;t.line.setAttribute("stroke-width",e.barHeight),t.fillLine.setAttribute("stroke-width",e.barHeight-e.barInset)},updateButtonSize:function(){var t=this.graphics,e=this.options,n=this.buttonRadius;e.buttonSize;E.set([t.bgCircle,t.overlayCircle],{x:0,y:n,scale:this.buttonScale}),E.set(t.arrow,{scale:this.arrowScale,rotation:this.arrowRotation,y:this.arrowPos});var i=this.getPathPointsCirclingCircle();r(t.line,i)},getPathPointsCirclingCircle:function(){var t=this.options,e=this.graphics,n=this.buttonRadius,r=2*n,i=o(e.line),s=i.commands,a=t.barHeight/2+1,u=1.318,c=(n-a)*u;return s[0].x=0,s[0].y=a,s[1].x=0,s[1].y=r-a,s[1].x1=-c,s[1].y1=r-a,s[1].x2=-c,s[1].y2=a,s[2].x=s[0].x,s[2].y=s[0].y,s[2].x1=c,s[2].y1=a,s[2].x2=c,s[2].y2=r-a,i},updateAlign:function(){var t=this.graphics,e=this.options;this.containerX=e.width*e.align+e.buttonSize*(1-e.align-.5),E.set([t.circle,t.arrow],{x:this.containerX}),E.set(t.hitArea,{x:e.bleedLeft+this.containerX,y:e.bleedTop+e.buttonSize/2,scale:this.buttonScale})},setupEvents:function(){var t=this,e=this.graphics;b.on("down",e.hitArea,function(e){t.setState("pressed",!0),t.setState("hover",!1)}),b.on("up",document,function(){t.setState("pressed",!1)}),b.on("mouseover",e.hitArea,function(){t.setState("hover",!0)}),b.on("mouseout",e.hitArea,function(){t.setState("hover",!1)}),b.on("click",e.hitArea,function(e){t.triggerClick(e)}),this.addEventListener("keydown",function(t){("13"==t.keyCode||"32"==t.keyCode)&&(t.preventDefault(),this.triggerClick(t))}),this.addEventListener("focus",function(t){this.setState("focused",!0)}),this.addEventListener("blur",function(t){this.setState("focused",!1)}),this.addEventListener(this.eventPrefix+"animatingFinish",this.processQueue),this.setupEventHandlers()},triggerClick:function(t){var e=this.state;e.open||(this.dispatchEvent("click"),this.options.onClick.call(this.target,t))},setupEventHandlers:function(){this.options;this.setupEventHandler("openingFinish","onOpen"),this.setupEventHandler("closingFinish","onClose"),this.setupEventHandler("complete","onComplete"),this.setupEventHandler("fail","onFail"),this.setupEventHandler("cancel","onCancel"),this.setupEventHandler("change","onChange")},setupEventHandler:function(t,e){var n=this.target,r=this.options;n.addEventListener(this.eventPrefix+t,function(t){r[e].call(n,t)})},addEventListener:function(t,e){this.target.addEventListener(t,e.bind(this))},dispatchEvent:function(t){this.target.dispatchEvent(new Event(this.eventPrefix+t))},setState:function(t,e){Array.isArray(t)||(t=[t]);var n=!1;t.forEach(function(t){var r=this.state[t];this.state[t]=e,e!=r&&(this.checkStateEvents(t),n=!0)},this),n&&this.dispatchEvent("stateChange"),this.updateStates()},updateStates:function(){var t=(this.target,this.state),e=this.options,n=this.graphics;!t.focused||t.pressed||t.open||t.hover?E.to(n.hitAreaCircle,.05,{attr:{"stroke-width":0}}):(n.hitAreaCircle.setAttribute("stroke",e.highlightColor),E.to(n.hitAreaCircle,.05,{attr:{"stroke-width":2/Math.max(.01,this.buttonScale)}})),t.pressed&&!t.open?(E.to(n.container,.1,{scale:.82,ease:Quint.easeOut}),E.to(n.circle,.1,{scale:1.06,ease:Quint.easeOut})):E.to([n.container,n.circle],.1,{scale:1,ease:Quint.easeOut}),!t.hover||t.pressed||t.open?t.pressed||E.to([n.circle,n.container],.2,{scale:1,ease:Quint.easeOut}):(E.to(n.container,.2,{scale:1.15,ease:Quint.easeOut}),E.to(n.circle,.2,{scale:.92,ease:Quint.easeOut})),t.open?w(n.hitArea):T(n.hitArea)},checkStateEvents:function(t){function e(e,r,o){t==e&&n.dispatchEvent(i?r:o)}var n=this,r=this.state,i=r[t];e("open","open","close"),e("press","press","release"),e("animating","animatingStart","animatingFinish"),e("opening","openingStart","openingFinish"),e("closing","closingStart","closingFinish"),e("failing","failingStart","failingFinish"),e("canceling","cancelingStart","cancelingFinish")},setText:function(t,e){var n=this.graphics;if(m(e)||(e=!1),n.labelText.textContent=t,e){n.label.getBBox(),n.arrowShaft.getBBox();E.set(n.label,{x:-parseFloat(n.labelText.getAttribute("font-size"))/2,rotation:180})}else E.set(n.label,{x:0,rotation:0})},setPercentage:function(t){this.setText(Math.floor(100*t)+"%")},changeText:function(t,e){var n=this,r=this.graphics,i=.15;E.to(r.label,i,{opacity:0,onComplete:function(){n.setText(t,e);var o=r.label.getBBox(),s=r.arrowShaft.getBBox(),a=o.width+40,u=a/s.width;E.to(r.arrowShaft,i,{scaleX:u,ease:Quad.easeInOut,onComplete:function(){E.to(r.label,i,{opacity:1})}})}})},open:function(){var t=this,e=(this.options,this.graphics),n=this.state;return!n.open||n.closing||n.failed||n.canceled?n.animating?(this.addToQueue(this.open),!1):(this.progress.setAttribute("aria-hidden",!1),E.killTweensOf(this),this.setState(["animating","opening","open"],!0),this.value=this.visibleValue=this.lastValue=this.lastVisibleValue=0,n.open&&(n.failed||n.canceled)?(this.setState(["failed","canceled"],!1),w(e.fillLine),this.animOpenArrowJump(!1),this.changeText("0%"),this.animOpenBar()):(this.animOpenOverlay(),this.animOpenArrowJump(),this.animLabelExpand(),E.delayedCall(.2,function(){t.animOpenBar()})),E.delayedCall(1.3,function(){this.resetFillLine(),this.setState(["animating","opening"],!1),t.setValue(t.value)},null,this),!0):!1},animOpenBar:function(){var t=this.graphics,e=this.options,n=this.containerX,i=this.base,s=e.width,a=s/2,c=s/6,l=o(t.line),h=l.commands,f=h[0],d=h[1],p=h[2],g=e.buttonSize/4*3,m=.25;E.to(f,m,{x:-n,ease:Quad.easeOut}),E.to(d,m,{x:-n+a,x2:-n+c,x1:-n+c+c,ease:Quad.easeOut}),E.to(p,m,{x:-n+s,x2:-n+a+c,x1:-n+a+c+c,ease:Quad.easeOut}),u([{obj:f,prop:"y"},{obj:d,prop:"y2"},{obj:p,props:["y","y1"]}],{duration:m,value:i,ease:Quad.easeInOut}),u([{obj:d,prop:"y1"},{obj:p,prop:"y2"}],{duration:m,value:i+g,ease:Quad.easeInOut}),u([{obj:d,props:["y","y1"]},{obj:p,prop:"y2"}],{duration:1.05,value:i,delay:.05,ease:Elastic.easeOut,easeParams:[e.barElasticOvershoot,e.barElasticPeriod]});var y=function(){r(t.line,l)};E.to({},1.1,{onUpdate:y,onComplete:y})},animOpenOverlay:function(){var t=this.graphics;T(t.overlay),E.fromTo(t.overlay,.2,{transformOrigin:"50% 50%",scale:.2},{scale:1,ease:Sine.easeIn,onComplete:function(){w([t.overlay,t.bg])}})},animOpenArrowJump:function(t){var e=this,n=this.graphics,r=this.options;m(t)||(t=!0);var i=t?.25:0;t&&E.to(n.arrow,.4,{y:"+="+.2*r.buttonSize,ease:Quad.easeInOut}),E.to(n.arrow,.75,{x:0,ease:Quad.easeOut,delay:i}),E.to(n.arrow,.5,{rotation:0,delay:i}),E.to(n.arrow,.25,{y:-r.jumpHeight,ease:Quad.easeOut,delay:i,onComplete:function(){E.to(n.arrow,.5,{y:e.base-r.barHeight/2,ease:Bounce.easeOut})}})},animLabelExpand:function(){var t=this,e=this.graphics;this.options;E.to(e.arrow,.5,{scaleX:t.labelScale,scaleY:t.labelScale}),E.to(e.arrowHead,.5,{scale:.5,ease:Quad.easeInOut}),E.to(e.arrowShaft,.5,{scaleX:3,y:15,ease:Quad.easeInOut}),T(e.label),this.setText("0%"),E.fromTo(e.label,.5,{scale:.01,x:0,y:0},{scale:1,x:0,y:15})},resetFillLine:function(){var t=this.graphics,e=o(t.fillLine),n=e.commands;n[0].x=n[1].x=-this.containerX,n[0].y=n[1].y=this.base,r(t.fillLine,e),T(t.fillLine)},close:function(){var t=(this.options,this.state);this.graphics;return t.closing||!t.open?!1:t.animating?(this.addToQueue(this.close),!1):(this.progress.setAttribute("aria-hidden",!0),E.killTweensOf(this),this.setState(["animating","closing"],!0),this.animCloseArrow(),this.animLabelCollapse(),this.animCloseBar(),E.delayedCall(.31,function(){this.animCloseCircle()},null,this),E.delayedCall(.8,function(){this.setState(["animating","open","closing","failed","canceled","complete"],!1)},null,this),!0)},animCloseBar:function(){var t=this,e=this.graphics,n=this.options,i=o(e.fillLine),s=i.commands;E.to(s[0],.17,{x:s[1].x,y:s[1].y,ease:Quad.easeIn,onUpdate:function(){r(e.fillLine,i)},onComplete:function(){w(e.fillLine),a()}});var a=function(){var i=o(e.line),s=i.commands,a=.17;u([{obj:s[1],props:["y","y1"]},{obj:s[2],props:["y","y2"]}],{duration:a/2,value:t.base,ease:Quad.easeOut}),u([{obj:s[0],props:["x"]},{obj:s[1],props:["x","x1","x2"]},{obj:s[2],props:["x","x1","x2"]}],{duration:a,value:n.width/2-t.containerX,ease:Quad.easeIn}),E.to({},a,{onUpdate:function(){r(e.line,i)},onComplete:c})},c=function(){E.delayedCall(.3,function(){var n=t.getPathPointsCirclingCircle();r(e.line,n)})}},animLabelCollapse:function(){var t=this,e=this.graphics;this.options;E.to(e.arrow,.5,{scale:t.arrowScale}),E.to(e.arrowHead,.5,{scale:1,ease:Quad.easeInOut}),E.to(e.arrowShaft,.5,{scaleX:1,y:0,ease:Quad.easeInOut}),E.to(e.label,.5,{scale:.01,onComplete:function(){w(e.label)}})},animCloseArrow:function(){var t=this,e=this.graphics,n=this.options;E.to(e.arrow,.5,{x:n.width/2,ease:Quad.easeOut,delay:0,rotation:0}),E.to(e.arrow,.25,{y:-n.jumpHeight,ease:Quad.easeOut,onComplete:function(){E.to(e.arrow,.8,{y:t.arrowPos,scaleY:t.arrowScale*(t.arrowUp?-1:1),ease:Elastic.easeOut,easeParams:[1.1,.6],onComplete:function(){E.set(e.arrow,{scaleY:t.arrowScale,rotation:t.arrowRotation})}})}})},animCloseCircle:function(){var t=this,e=this.graphics;T(e.bg),E.fromTo(e.bgCircle,.8,{scale:.1},{scale:t.buttonScale,ease:Elastic.easeOut,easeParams:[1.2,.7]})},setValue:function(t){var e=this,n=this.options,r=this.graphics,i=this.state;if(!i.open)return!1;if(i.failed||i.canceled||i.complete||i.animating)return!1;var o=this.value,s=y(t,0,1);if(o==s)return!1;if(this.lastValue=o,this.value=s,this.progress.setAttribute("value",this.value),i.opening||i.closing)return this.dispatchEvent("change"),!0;var a=this.value-this.lastVisibleValue;if(.01>a&&this.value<1)return!0;var u=.2+1*Math.abs(a);return E.to(r.arrow,.5*u,{rotation:-a*n.labelWobbliness,ease:Quad.easeOut,onComplete:function(){E.to(r.arrow,1.5,{rotation:0,ease:Elastic.easeOut,easeParams:[2,.4]})}}),E.to(this,1*u,{barOverstretch:2*a,ease:Quad.easeInOut,onComplete:function(){E.to(e,1.5,{barOverstretch:0,ease:Elastic.easeOut,easeParams:[2,.2]})}}),E.to(this,u,{visibleValue:this.value,ease:Quad.easeOut,onUpdate:this.updateValue.bind(this),onComplete:this.updateValue.bind(this)}),this.dispatchEvent("change"),!0},getValue:function(){return this.value},updateValue:function(){this.lastVisibleValue=this.visibleValue,this.renderValue(this.visibleValue)},renderValue:function(){var t=this.state,e=(this.options,this.graphics,this.visibleValue);if(e>=1&&!t.complete)E.killTweensOf(this,{visibleValue:!0}),this.complete();else if(e>=1&&t.complete)return!1;E.to(this,1.5,{onUpdate:this.renderBarStretch.bind(this)}),this.dispatchEvent("valueRender"),this.setPercentage(e)},renderBarStretch:function(t){var e=this,n=(this.state,this.options),i=this.graphics,s=this.visibleValue,a=n.barStretch*Math.sin(3.14*s)*(1+this.barOverstretch),u={x:s*n.width,y:e.base+a},c=o(i.line),l=c.commands,h=o(i.fillLine),f=h.commands;l[1].x=l[1].x1=l[2].x2=f[1].x=u.x-this.containerX,l[1].y=l[1].y1=l[2].y2=f[1].y=u.y,l[1].x2=l[0].x,l[1].y2=l[0].y,l[2].x1=l[2].x,l[2].y1=l[2].y,l[1].x+n.barHeight/2>=l[2].x&&(l[1].x=l[2].x-n.barHeight/2),r(i.fillLine,h),r(i.line,c),E.set(i.arrow,{x:u.x,y:u.y-n.barHeight/2})},complete:function(){var t=this,e=this.state,n=this.options;return!e.open||e.failed||e.complete||e.canceled?!1:e.animating?(this.addToQueue(this.complete),!1):(E.killTweensOf(this),this.setState(["animating","completing","complete"],!0),this.dispatchEvent("complete"),this.changeText(n.textComplete),E.delayedCall(2.5,function(){t.setState(["animating","completing"],!1)}),!0)},fail:function(){var t=this,e=this.state,n=this.options;return e.failed||e.canceled||e.complete||!e.open||e.closing?!1:e.animating?(this.addToQueue(this.fail),!1):(E.killTweensOf(this),this.setState(["animating","failed","failing"],!0),this.dispatchEvent("fail"),n.arrowHangOnFail&&this.animArrowHang(),this.changeText(n.textFail,n.arrowHangOnFail),E.delayedCall(2.5,function(){t.setState(["animating","failing"],!1)}),!0)},cancel:function(){var t=this,e=this.state,n=this.options;return e.failed||e.complete||e.canceled||!e.open||e.closing?!1:e.animating?(this.addToQueue(this.cancel),!1):(E.killTweensOf(this),this.setState(["animating","canceled","canceling"],!0),this.dispatchEvent("cancel"),n.arrowHangOnCancel&&this.animArrowHang(),this.changeText(n.textCancel,n.arrowHangOnCancel),E.delayedCall(2.5,function(){t.setState(["canceling","animating"],!1)}),!0)},animArrowHang:function(){
4 | var t=this,e=this.graphics;E.killTweensOf(this),E.killTweensOf(e.arrow),E.to(e.arrow,.25,{rotation:90,ease:Quad.easeIn,onComplete:function(){E.to(e.arrow,2,{rotation:180,ease:Elastic.easeOut,easeParams:[1.6,.4]})}}),E.to(this,.25,{barOverstretch:1.2,onUpdate:this.renderBarStretch.bind(this),onComplete:function(){E.to(t,1.5,{barOverstretch:0,ease:Elastic.easeOut,easeParams:[1.1,.4],onUpdate:t.renderBarStretch.bind(t)})}})},error:function(t){console.error(this.logPrefix+": "+t)},warn:function(t){console.warn(this.logPrefix+": "+t)},log:function(t){console.log(this.logPrefix+": "+t)}}),e.exports=c},{"./clone":29,"./create-svg":30,"./cutoff":31,"./gfx-of":33,"./is-set":34,"./pointer-events":36,"./svg/bt.svg":37,extend:7,"gsap/src/uncompressed/TweenLite":3,"gsap/src/uncompressed/easing/EasePack":3,"gsap/src/uncompressed/plugins/CSSPlugin":3,"svg-pathdata":22}],33:[function(t,e,n){var r=["polygon","polyline","path","circle","rect","text","line","ellipse"];e.exports=function(t){return Array.isArray(t)||(t=[t]),t.map(function(t){return r.indexOf(t.nodeName)>-1?t:t.querySelectorAll(r.join(","))})}},{}],34:[function(t,e,n){e.exports=function(t){return"undefined"!=typeof t}},{}],35:[function(t,e,n){"use strict";var r=t("extend"),i=t("./to-array"),o=t("./is-set"),s=t("./elastic-progress"),a={open:function(){return this.instance.open()},close:function(){return this.instance.close()},setValue:function(t){return this.instance.setValue(t)},getValue:function(){return this.instance.getValue()},fail:function(){return this.instance.fail()},complete:function(){return this.instance.complete()},cancel:function(){return this.instance.cancel()},onClick:function(t){this.instance.options.onClick=t},onOpen:function(t){this.instance.options.onOpen=t},onClose:function(t){this.instance.options.onClose=t},onComplete:function(t){this.instance.options.onComplete=t},onCancel:function(t){this.instance.options.onCancel=t},onFail:function(t){this.instance.options.onFail=t},onChange:function(t){this.instance.options.onChange=t},addEventListener:function(t,e){this.instance.addEventListener(t,e)},removeEventListener:function(t,e){this.instance.removeEventListener(t,e)}},u=function(t,e){o(t)&&(t.jquery&&(t=t.get(0)),this.instance=new s(t,e))};u.prototype=r({instance:null},a),o(jQuery)&&!function(t){t.fn.ElasticProgress=function(e){i(t(this));if("string"!=typeof e){var n=e;return t(this).each(function(){var e=new u(t(this),n);t(this).data("elastic-progress",e)}),t(this)}var r=e,o=a[r],c=arguments;if("function"==typeof o){var l=null;return t(this).each(function(){var e=t(this).data("elastic-progress");null!=e&&(l=e[r].apply(e,i(c).slice(1)))}),l}s.prototype.error("Unknown function '"+r+"'")}}(jQuery),e.exports=u},{"./elastic-progress":32,"./is-set":34,"./to-array":38,extend:7}],36:[function(t,e,n){function r(t,e,n){"number"!=typeof n&&(n=1e3),a.push({el:t,type:e}),setTimeout(function(){a.shift()},n)}function i(t,e){return a.some(function(n){return n.type==e&&n.el==t})}function o(t,e,n,r){e.addEventListener(t,r),u.push({type:t,el:e,callback:n,listener:r})}function s(t,e,n){u.filter(function(r){return r.type==t&&r.el==e&&r.callback==n}).forEach(function(t){console.log(t),t.el.removeEventListener(t.type,t.listener)}),u=u.filter(function(r){return!(r.type==t&&r.el==e&&r.callback==n)})}var a=[],u=[],c={down:function(t,e,n){if(t){var a=function(t){if("undefined"!=typeof t.touches){var i=t.touches;i.length>0&&(t.clientX=i[0].clientX,t.clientY=i[0].clientY,n.call(e,t),r(e,"mousedown"))}};o("touchstart",e,n,a);var u=function(t){i(e,"mousedown")||n.call(e,t)};o("mousedown",e,n,u)}else s("touchstart",e,n),s("mousedown",e,n)},up:function(t,e,n){if(t){var a=function(t){if("undefined"!=typeof t.touches){var i=t.touches;i.length>0&&(t.clientX=i[0].clientX,t.clientY=i[0].clientY),n.call(e,t),r(e,"mouseup")}};o("touchend",e,n,a);var u=function(t){i(e,"mouseup")||n.call(e,t)};o("mouseup",e,n,u)}else s("touchend",e,n),s("mouseup",e,n)},click:function(t,e,n){function r(t){i(e,"click")||n.call(e,t)}t?o("click",e,n,r):s("click",e,n)},mouseover:function(t,e,n){function r(t){n.call(e,t)}t?o("mouseover",e,n,r):s("mouseover",e,n)},mouseout:function(t,e,n){function r(t){n.call(e,t)}t?o("mouseout",e,n,r):s("mouseout",e,n)}},l={on:function(t,e,n){c[t].call(this,!0,e,n)},off:function(t,e,n){c[t].call(this,!1,e,n)}};e.exports=l},{}],37:[function(t,e,n){function r(t){return function(e,n){e=0|+e,n=0|+n;var r=document.createElement("div");return r.innerHTML="<svg><g><g>"+t+"</g></g></svg>",r=r.childNodes[0].childNodes[0],r.childNodes[0].setAttribute("transform","translate("+e+","+n+")"),r}}e.exports=r('\n<g id="container">\n	<g id="circle">\n		<g id="background">\n			<path id="bg" fill="#231F20" d="M0-50c27.614,0,50,22.386,50,50S27.614,50,0,50c-27.615,0-50-22.386-50-50S-27.615-50,0-50z"/>\n		</g>\n		<g id="overlay">\n			<path fill="#47FF03" d="M50,0c0,27.584-22.461,50-50,50c-27.636,0-50-22.416-50-50c0-27.594,22.364-50,50-50\n				C27.539-50,50-27.594,50,0z"/>\n		</g>\n		<g id="border">\n			<path fill="none" stroke="#231F20" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M-23.833,21.445\n				c-80.313,1.374,7.956,104.833,89.191,104.833c81.7,0,191.842-105.833,110.142-105.833"/>\n		</g>\n		<g id="fill-line">\n			<path fill="none" stroke="#FF00FF" stroke-linecap="round" stroke-miterlimit="10" d="M-138.487,110.945l105,2"/>\n		</g>\n	</g>\n	<g id="arrow">\n		<g id="head">\n			<polygon fill="#FF00FF" points="-30.035,-31.56 0,0 30.035,-31.56 			"/>\n		</g>\n		<g id="line">\n			<rect x="-12.374" y="-68.78" fill="#FF00FF" width="24.749" height="41.552"/>\n		</g>\n		<g id="label">\n			<text transform="matrix(1 0 0 1 -0.7007 -41.584)" fill="#231F20" font-family="\'Arial-BoldMT\'" font-size="18">1</text>\n		</g>\n	</g>\n</g>\n<g id="hit-area">\n	<path fill="#00FFDA" d="M50,0c0,27.584-22.461,50-50,50c-27.636,0-50-22.416-50-50c0-27.594,22.364-50,50-50\n		C27.539-50,50-27.594,50,0z"/>\n</g>\n')},{}],38:[function(t,e,n){function r(t){return[].slice.call(t)}e.exports=r},{}]},{},[35])(35)});


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp')
 2 | var browserify = require('browserify')
 3 | var source = require('vinyl-source-stream')
 4 | var streamify = require('gulp-streamify')
 5 | var uglify = require('gulp-uglify')
 6 | var extend = require('extend')
 7 | var connect = require('gulp-connect')
 8 | var opener = require('opener');
 9 | 
10 | function buildJS(options){
11 |   if(typeof options=="undefined") options={};
12 | 
13 |   options=extend({
14 |     minify:false,
15 |     gsap:false,
16 |   },options);
17 | 
18 |   var bundleStream=browserify('./src/main.js',{standalone:'ElasticProgress'});
19 | 
20 |   if(!options.gsap){
21 |     bundleStream=bundleStream.ignore('gsap').ignore('jquery');
22 |   }
23 | 
24 |   bundleStream=bundleStream
25 |     .bundle()
26 |     .on('error',function(e){
27 |       console.log(e.message)
28 |     })
29 | 
30 |   bundleStream
31 |     .pipe(source('elastic-progress.js'))
32 |     .pipe(gulp.dest('./dist/'))
33 | 
34 |   if(options.minify){
35 |     bundleStream
36 |       .pipe(source('elastic-progress.min.js'))
37 |       .pipe(streamify(uglify()))
38 |       .pipe(gulp.dest('./dist/'))
39 |   }
40 | }
41 | 
42 | gulp.task('js',function(){
43 |   buildJS({minify:true});
44 | });
45 | gulp.task('js:dev',function(){
46 |   buildJS({minify:false});
47 | });
48 | 
49 | gulp.task('watch',['js:dev'],function(){
50 |   gulp.watch(['src/*.js','src/*.svg'],['js:dev']);
51 | });
52 | 
53 | gulp.task('build',function(){
54 |   buildJS({minify:true,gsap:false});
55 | });
56 | 
57 | gulp.task('connect', function() {
58 |   connect.server();
59 |   opener('http://localhost:8080/demo');
60 | });
61 | 
62 | gulp.task('default', ['connect','watch']);
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "elastic-progress",
 3 |   "version": "0.0.3",
 4 |   "description": "Creates a button that turns into a progress bar with a elastic effect.",
 5 |   "main": "src/main.js",
 6 |   "repository" : {
 7 |     "type" : "git",
 8 |     "url" : "https://github.com/codrops/ElasticProgress"
 9 |   },
10 |   "directories": {
11 |     "doc": "doc"
12 |   },
13 |   "dependencies": {
14 |     "extend": "^3.0.0",
15 |     "gsap": "^1.18.0",
16 |     "svgify": "0.0.0",
17 |     "svg-pathdata": "^1.0.1"
18 |   },
19 |   "devDependencies": {
20 |     "browserify": "^11.1.0",
21 |     "gulp": "^3.9.0",
22 |     "gulp-connect": "^2.2.0",
23 |     "gulp-streamify": "^1.0.2",
24 |     "gulp-uglify": "^1.4.1",
25 |     "opener": "^1.4.1",
26 |     "vinyl-source-stream": "^1.1.0"
27 |   },
28 |   "scripts": {
29 |     "test": "",
30 |     "start": "gulp connect",
31 |     "build:css": "gulp css",
32 |     "build:js": "gulp js",
33 |     "build": "gulp build",
34 |     "watch": "gulp watch",
35 |     "commit": "git add -A && git commit",
36 |     "push": "npm run commit && git push",
37 |     "patch": "npm run build && npm run commit && npm version patch"
38 |   },
39 |   "author": "Lucas Bebber",
40 |   "license": "SEE LICENSE IN http://tympanus.net/codrops/licensing/",
41 |   "browserify": {
42 |     "transform": [
43 |       "svgify"
44 |     ]
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/clone.js:
--------------------------------------------------------------------------------
1 | var extend=require("extend");
2 | 
3 | module.exports=function(obj){
4 |   return extend(true,{},obj);
5 | }
6 | 


--------------------------------------------------------------------------------
/src/console-graph.js:
--------------------------------------------------------------------------------
 1 | var history=[];
 2 | 
 3 | function logr(){
 4 |     var i = -1, l = arguments.length, args = [], fn = 'console.log(args)';
 5 |     while(++i<l){
 6 |         args.push('args['+i+']');
 7 |     };
 8 |     fn = new Function('args',fn.replace(/args/,args.join(',')));
 9 |     fn(arguments);
10 | };
11 | 
12 | module.exports=function(y){
13 |   var data=history.concat(y);
14 |   console.clear();
15 | 
16 |   logr.apply(null,
17 |     [data.map(function(){
18 |       return "%c#";
19 |     }).join("")].concat(
20 |       data.map(function(cur){
21 |         return "text-shadow:0 "+(200-(cur*200))+"px red"
22 |       })
23 |     )
24 |   )
25 | 
26 |   history=data;
27 | }
28 | 


--------------------------------------------------------------------------------
/src/create-svg.js:
--------------------------------------------------------------------------------
 1 | function createSVG(width,height){
 2 |   if(typeof width=="undefined") width=1200;
 3 |   if(typeof height=="undefined") height=1200;
 4 | 
 5 |   var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 6 |   svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
 7 |   svg.setAttribute('width', width);
 8 |   svg.setAttribute('height', height);
 9 |   return svg;
10 | }
11 | 
12 | module.exports=createSVG;
13 | 


--------------------------------------------------------------------------------
/src/cutoff.js:
--------------------------------------------------------------------------------
1 | module.exports=function(v,min,max){
2 |   return Math.max(Math.min(v,max),min);
3 | }
4 | 


--------------------------------------------------------------------------------
/src/elastic-progress.js:
--------------------------------------------------------------------------------
   1 | 'use strict';
   2 | 
   3 | var CSSPlugin=require('gsap/src/uncompressed/plugins/CSSPlugin');
   4 | var EasePack=require('gsap/src/uncompressed/easing/EasePack');
   5 | var TweenLite=require('gsap/src/uncompressed/TweenLite');
   6 | var SVGPathData=require('svg-pathdata');
   7 | var extend=require('extend');
   8 | var clone=require('./clone');
   9 | var createSVG=require('./create-svg');
  10 | var gfxOf=require('./gfx-of');
  11 | var isSet=require('./is-set');
  12 | var cutoff=require('./cutoff');
  13 | var pointerEvents=require('./pointer-events');
  14 | 
  15 | // Load SVG Graphic
  16 | var generateGraphic=require('./svg/bt.svg');
  17 | 
  18 | // Setup GSAP
  19 | // use either TweenLite or TweenMax, which one is available
  20 | var Tween=TweenLite;
  21 | if(Object.keys(Tween).length==0){ // if TweenLite is not bundled
  22 |   if(isSet(window.TweenLite))
  23 |     Tween=window.TweenLite;
  24 |   else if(isSet(window.TweenMax))
  25 |     Tween=window.TweenMax;
  26 |   else
  27 |     this.error("GSAP could not be found.");
  28 | }
  29 | 
  30 | // Utils
  31 | function updatePath(path,pathData){
  32 |   path.setAttribute("d",pathData.encode());
  33 | }
  34 | 
  35 | function getD(path){
  36 |   return path.getAttribute("d");
  37 | }
  38 | 
  39 | function getPathData(path){
  40 |   return new SVGPathData(getD(path)).toAbs();
  41 | }
  42 | function setVisibility(visible,obj){
  43 |   if(!isSet(obj)){
  44 |     return function(obj){
  45 |       setVisibility(visible,obj);
  46 |     }
  47 |   }
  48 |   Tween.set(obj,{
  49 |     display:visible?"inline":"none"
  50 |   });
  51 | }
  52 | var hide=setVisibility(false);
  53 | var show=setVisibility(true);
  54 | 
  55 | function setTransformOrigin(origin,obj){
  56 |   if(!isSet(obj)){
  57 |     return function(obj){
  58 |       setTransformOrigin(origin,obj);
  59 |     }
  60 |   }
  61 |   Tween.set(obj,{
  62 |     transformOrigin:origin
  63 |   });
  64 | }
  65 | var originCenter=setTransformOrigin("50% 50%");
  66 | var originBottomCenter=setTransformOrigin("50% 100%");
  67 | 
  68 | function tweenTheseTo(groups,options){
  69 |   var dur=1;
  70 |   var value=0;
  71 |   if(isSet(options.duration)){
  72 |     dur=options.duration;
  73 |     delete options.duration;
  74 |   }
  75 |   if(isSet(options.value)){
  76 |     value=options.value;
  77 |     delete options.value;
  78 |   }
  79 | 
  80 |   groups.forEach(function(item){
  81 |     var props={};
  82 |     if(isSet(item.prop)){
  83 |       item.props=item.prop;
  84 |     }
  85 |     if(!Array.isArray(item.props)){
  86 |       item.props=[item.props];
  87 |     }
  88 |     item.props.forEach(function(propName){
  89 |       props[propName]=value;
  90 |     });
  91 | 
  92 |     Tween.to(item.obj,dur,extend(
  93 |       props,
  94 |       options
  95 |     ));
  96 |   });
  97 | }
  98 | 
  99 | var defaultOptions={
 100 |   colorFg:"#fff",
 101 |   colorBg:"#000",
 102 |   background:getComputedStyle(document.body).getPropertyValue("background-color"),
 103 |   highlightColor:"#08F",
 104 | 
 105 |   progressbar:null,
 106 |   progressbarLabel:"",
 107 | 
 108 |   buttonSize:-1,
 109 |   width:-1,
 110 |   align:"center",
 111 | 
 112 |   barStretch:20,
 113 |   barElasticOvershoot:1.8,
 114 |   barElasticPeriod:0.15,
 115 |   barHeight:4,
 116 |   barInset:-0.5,
 117 | 
 118 |   labelHeight:53,
 119 |   labelWobbliness:40,
 120 | 
 121 |   bleedTop:100,
 122 |   bleedBottom:50,
 123 |   bleedLeft:60,
 124 |   bleedRight:60,
 125 | 
 126 |   fontFamily:"",
 127 |   fontWeight:"bold",
 128 | 
 129 |   jumpHeight:50,
 130 |   arrowDirection:"down",
 131 |   arrowHangOnFail:true,
 132 |   arrowHangOnCancel:true,
 133 | 
 134 |   textComplete:"Done",
 135 |   textFail:"Failed",
 136 |   textCancel:"Canceled",
 137 | 
 138 |   onClick:function(event){},
 139 |   onOpen:function(event){},
 140 |   onComplete:function(event){},
 141 |   onClose:function(event){},
 142 |   onFail:function(event){},
 143 |   onCancel:function(event){},
 144 |   onChange:function(event){}
 145 | };
 146 | var vars={
 147 |   logPrefix:"ElasticProgress",
 148 |   eventPrefix:"elasticProgress.",
 149 |   options:null,
 150 |   target:null,
 151 |   progress:null,
 152 |   progressbar:null,
 153 |   progressbarLabel:"",
 154 |   canvas:null,
 155 |   lastValue:0,
 156 |   value:0,
 157 |   visibleValue:0, // used for tweening the displayed value
 158 |   lastVisibleValue:0,
 159 |   state:{ // default states obj / will be cloned for each instance
 160 |     animating:false,
 161 |     opening:false,
 162 |     open:false,
 163 |     closing:false,
 164 |     completing:false,
 165 |     complete:false,
 166 |     pressed:false,
 167 |     hover:false,
 168 |     focused:false,
 169 |     failing:false,
 170 |     failed:false,
 171 |     calceling:false,
 172 |     canceled:false
 173 |   },
 174 |   graphics:null,
 175 |   buttonRadius:null,
 176 |   buttonScale:null,
 177 |   containerX:null,
 178 |   barOverstretch:0,
 179 |   base:null, // y position of the bar
 180 |   arrowRelativeScale:0.8, // rescaling of the arrow relative to the button
 181 |   arrowRatio:null, // scale of the arrow relative to the button size
 182 |   arrowScale:null, // calculated scale of the arrow
 183 |   arrowPos:null, // calculated pos Y of the arrow
 184 |   arrowUp:false,
 185 |   arrowRotation:null, // initial rotation of the arrow, in case it points up
 186 |   labelScale:null, // calculated scale of the arrow when open
 187 |   labelRegularHeight:53, // default size of the label, used for calculation
 188 |   queue:null // next queued function
 189 | }
 190 | 
 191 | var defaultFontFamily="'Helvetica Neue','Helvetica','Arial'";
 192 | 
 193 | function ElasticProgress(target,options){
 194 |   if(!isSet(options)){
 195 |     options={};
 196 |   };
 197 |   this.options=extend(
 198 |     {},
 199 |     defaultOptions,
 200 |     options
 201 |   );
 202 |   // shortcut to options
 203 |   options=this.options;
 204 | 
 205 |   this.target=target;
 206 | 
 207 |   //// setup options
 208 |   // format align in case it's a string
 209 |   // if(typeof options.align=="string"){
 210 |   //   switch(options.align){
 211 |   //     case "left":
 212 |   //       options.align=0;
 213 |   //       break;
 214 |   //     case "right":
 215 |   //       options.align=1;
 216 |   //       break;
 217 |   //     default:
 218 |   //       options.align=0.5;
 219 |   //       break;
 220 |   //   }
 221 |   // }
 222 |   // ... however, align is not supported for now
 223 |   options.align=0.5;
 224 | 
 225 |   // width by default is the element's width...
 226 |   if(options.width <= -1){
 227 |     options.width = target.clientWidth;
 228 |   }else{
 229 |     // otherwise it sets the element's width
 230 |     target.style.width = options.width+"px";
 231 |   }
 232 | 
 233 |   // buttonSize by default is the element's height
 234 |   if(options.buttonSize <= -1){
 235 |     options.buttonSize = target.clientHeight;
 236 |   }else{
 237 |     // otherwise it sets the element's height
 238 |     target.style.height = options.buttonSize+"px";
 239 |   }
 240 | 
 241 |   var progressbar=target.getAttribute("data-progressbar");
 242 |   if(progressbar!=null){
 243 |     options.progressbar=progressbar;
 244 |   }
 245 | 
 246 |   var progressbarLabel=target.getAttribute("data-progressbar-label");
 247 |   if(progressbarLabel!=null){
 248 |     options.progressbarLabel=progressbarLabel;
 249 |   }
 250 | 
 251 |   this.graphics={};
 252 |   this.state=clone(this.state);
 253 | 
 254 |   this.init();
 255 | }
 256 | 
 257 | ElasticProgress.prototype=extend(
 258 |   {},
 259 |   vars,{
 260 |   init:function(){
 261 |     var
 262 |       instance=this,
 263 |       options=this.options,
 264 |       target=this.target,
 265 |       state=this.state,
 266 |       graphics=this.graphics;
 267 | 
 268 |     this.styleTarget();
 269 |     this.createProgressElement();
 270 |     this.createCanvas();
 271 |     this.setupGraphicsShortcuts();
 272 | 
 273 |     // set registration points
 274 |     originCenter([graphics.circle, graphics.overlay, graphics.hitArea, graphics.bgCircle, graphics.overlayCircle,graphics.label]);
 275 |     originBottomCenter(graphics.arrow);
 276 |     originBottomCenter([graphics.arrowHead,graphics.arrowShaft]);
 277 | 
 278 |     // hide elements not visible at the start
 279 |     hide([graphics.label, graphics.fillLine, graphics.overlay]);
 280 | 
 281 |     this.calculateValues();
 282 | 
 283 |     // draw stuff
 284 |     this.updateColors();
 285 |     this.updateBarHeight();
 286 |     this.updateButtonSize();
 287 |     this.updateAlign();
 288 | 
 289 |     // format container after formatting the button, cause we have its correct size
 290 |     Tween.set(graphics.container,{
 291 |       transformOrigin:"50% 50%",
 292 |       y:options.bleedTop,
 293 |       x:options.bleedLeft
 294 |     });
 295 |     originCenter(graphics.circle);
 296 | 
 297 |     graphics.labelText.setAttribute("text-anchor","middle");
 298 |     graphics.labelText.setAttribute("font-family",options.fontFamily+","+defaultFontFamily);
 299 |     graphics.labelText.setAttribute("font-weight",options.fontWeight);
 300 | 
 301 |     graphics.hitArea.style.pointerEvents="fill";
 302 |     graphics.hitArea.style.cursor="pointer";
 303 |     graphics.hitAreaCircle.style.fill="transparent";
 304 | 
 305 |     this.setupEvents();
 306 | 
 307 |     return this;
 308 |   },
 309 |   addToQueue:function(f){
 310 |     this.queue=f;
 311 |   },
 312 |   processQueue:function(){
 313 |     if(this.queue!=null){
 314 |       var q=this.queue;
 315 |       this.queue=null;
 316 |       q.call(this);
 317 |     }
 318 |   },
 319 |   styleTarget:function(){
 320 |     var
 321 |       target=this.target,
 322 |       style=target.style;
 323 | 
 324 |     style.border="none";
 325 |     style.background="transparent";
 326 |     style.outline="none";
 327 |     style.pointerEvents="none";
 328 |     style.webkitTapHighlightColor="transparent";
 329 |     style.textAlign="left";
 330 |   },
 331 |   createProgressElement:function(){
 332 |     var
 333 |       options=this.options,
 334 |       target=this.target;
 335 | 
 336 |     if(options.progressbar){
 337 |       this.progress=options.progressbar;
 338 |     }else{
 339 |       this.progress=document.createElement("progress");
 340 |       this.progress.style.position="absolute";
 341 |       this.progress.style.left="-99999px";
 342 |       this.progress.setAttribute("aria-label",options.progressbarLabel);
 343 |     }
 344 |     this.progress.setAttribute("value",0);
 345 |     this.progress.setAttribute("max",1);
 346 |     this.progress.setAttribute("aria-hidden",true);
 347 | 
 348 |     target.parentNode.insertBefore(this.progress, target.nextSibling);
 349 |   },
 350 |   createCanvas:function(){
 351 |     var options=this.options;
 352 | 
 353 |     var svg = createSVG(
 354 |       options.width + options.bleedLeft + options.bleedRight,
 355 |       options.buttonSize + options.bleedTop + options.bleedBottom
 356 |     );
 357 |     svg.appendChild(generateGraphic());
 358 |     this.target.appendChild(svg);
 359 |     svg.style.position="relative";
 360 |     //svg.style.top=-options.bleedTop;
 361 |     svg.style.marginRight=-options.bleedRight+"px";
 362 |     svg.style.marginLeft=-options.bleedLeft+"px";
 363 |     svg.style.marginTop=-options.bleedTop+"px";
 364 |     svg.style.marginBottom=-options.bleedBottom+"px";
 365 | 
 366 |     this.canvas=svg;
 367 |   },
 368 |   setupGraphicsShortcuts:function(){
 369 |     var
 370 |       graphics=this.graphics,
 371 |       canvas=this.canvas;
 372 | 
 373 |     graphics.container         = canvas.querySelector("#container");
 374 |     graphics.hitArea           = canvas.querySelector("#hit-area");
 375 |     graphics.hitAreaCircle     = graphics.hitArea.querySelector("path");
 376 |     graphics.circle            = canvas.querySelector("#circle");
 377 |     graphics.arrow             = canvas.querySelector("#arrow");
 378 |     graphics.arrowHead         = graphics.arrow.querySelector("#head");
 379 |     graphics.arrowShaft        = graphics.arrow.querySelector("#line");
 380 |     graphics.label             = graphics.arrow.querySelector("#label");
 381 |     graphics.labelText         = graphics.label.querySelector("text");
 382 |     graphics.overlay           = canvas.querySelector("#overlay");
 383 |     graphics.overlayCircle     = graphics.overlay.querySelector("path");
 384 |     graphics.bg                = canvas.querySelector("#background");
 385 |     graphics.bgCircle          = graphics.bg.querySelector("path");
 386 |     graphics.line              = canvas.querySelector("#border path");
 387 |     graphics.fillLineContainer = canvas.querySelector("#fill-line");
 388 |     graphics.fillLine          = graphics.fillLineContainer.querySelector("path");
 389 |   },
 390 |   calculateValues:function(){
 391 |     var
 392 |       graphics=this.graphics,
 393 |       options=this.options;
 394 | 
 395 |     var originalCircleHeight=graphics.bgCircle.getBBox().height;
 396 |     var originalArrowHeight=graphics.arrow.getBBox().height;
 397 | 
 398 |     this.buttonRadius=options.buttonSize/2;
 399 |     this.arrowRatio=((originalArrowHeight/originalCircleHeight)+0.05)*this.arrowRelativeScale;
 400 |     this.buttonScale=options.buttonSize/originalCircleHeight;
 401 |     this.arrowScale=this.buttonScale*this.arrowRelativeScale;
 402 |     this.arrowUp=options.arrowDirection=="up";
 403 |     this.arrowPos=options.buttonSize*(1-((1-this.arrowRatio)/2)); // dang
 404 |     var arrowSize=options.buttonSize*this.arrowRatio;
 405 |     if(this.arrowUp) this.arrowPos-=arrowSize;
 406 |     this.arrowRotation=this.arrowUp?180:0;
 407 |     this.base=options.buttonSize/2;
 408 |     this.labelScale=options.labelHeight/this.labelRegularHeight;
 409 |   },
 410 |   updateColors:function(){
 411 |     var
 412 |       graphics = this.graphics,
 413 |       options = this.options;
 414 | 
 415 |     Tween.set(gfxOf([graphics.arrowHead, graphics.arrowShaft]),{
 416 |       fill: options.colorFg
 417 |     });
 418 |     Tween.set(gfxOf(graphics.fillLine),{
 419 |       stroke: options.colorFg
 420 |     });
 421 |     Tween.set(gfxOf([graphics.bg, graphics.labelText]),{
 422 |       fill: options.colorBg
 423 |     });
 424 |     Tween.set(gfxOf(graphics.line),{
 425 |       stroke: options.colorBg
 426 |     });
 427 |     Tween.set(gfxOf(graphics.overlay),{
 428 |       fill:options.background
 429 |     });
 430 |   },
 431 |   updateBarHeight:function(){
 432 |     var
 433 |       graphics=this.graphics,
 434 |       options=this.options;
 435 | 
 436 |     graphics.line.setAttribute("stroke-width",options.barHeight);
 437 |     graphics.fillLine.setAttribute("stroke-width",options.barHeight-options.barInset);
 438 |   },
 439 |   updateButtonSize:function(){
 440 |     var
 441 |       graphics = this.graphics,
 442 |       options = this.options,
 443 |       r = this.buttonRadius,
 444 |       r2 = options.buttonSize;
 445 | 
 446 |     Tween.set([graphics.bgCircle,graphics.overlayCircle],{
 447 |       x:0,
 448 |       y:r,
 449 |       scale:this.buttonScale
 450 |     });
 451 | 
 452 |     Tween.set(graphics.arrow,{
 453 |       scale: this.arrowScale,
 454 |       rotation:this.arrowRotation,
 455 |       y: this.arrowPos
 456 |     });
 457 | 
 458 |     var linePath=this.getPathPointsCirclingCircle();
 459 |     updatePath(graphics.line,linePath);
 460 |   },
 461 |   getPathPointsCirclingCircle:function(){
 462 |     var
 463 |       options=this.options,
 464 |       graphics=this.graphics,
 465 |       r=this.buttonRadius,
 466 |       r2=r*2;
 467 | 
 468 |     var linePath=getPathData(graphics.line);
 469 |     var points=linePath.commands;
 470 | 
 471 |     //svg strokes are drawn "around" their paths
 472 |     //this offset squishes the line inside the circle a little
 473 |     var offset=(options.barHeight/2)+1;
 474 |     //more or less how far along the x axis the bezier control points have to be from the center of the circle
 475 |     var p=1.318;
 476 |     var rp=(r-offset)*p;
 477 | 
 478 |     points[0].x=0;
 479 |     points[0].y=offset;
 480 | 
 481 |     points[1].x=0;
 482 |     points[1].y=r2-offset;
 483 |     points[1].x1=-rp;
 484 |     points[1].y1=r2-offset;
 485 |     points[1].x2=-rp;
 486 |     points[1].y2=offset;
 487 | 
 488 |     points[2].x=points[0].x;
 489 |     points[2].y=points[0].y;
 490 |     points[2].x1=rp;
 491 |     points[2].y1=offset;
 492 |     points[2].x2=rp;
 493 |     points[2].y2=r2-offset;
 494 | 
 495 |     return linePath;
 496 |   },
 497 |   updateAlign:function(){
 498 |     var
 499 |       graphics = this.graphics,
 500 |       options = this.options;
 501 | 
 502 |     this.containerX=(options.width*options.align)+(options.buttonSize*(((1-options.align))-0.5));
 503 |     Tween.set([graphics.circle,graphics.arrow],{
 504 |       x:this.containerX
 505 |     });
 506 | 
 507 |     Tween.set(graphics.hitArea,{
 508 |       x:options.bleedLeft+this.containerX,
 509 |       y:options.bleedTop+(options.buttonSize/2),
 510 |       scale:this.buttonScale
 511 |     });
 512 | 
 513 |   },
 514 |   setupEvents:function(){
 515 |     var
 516 |       instance=this,
 517 |       graphics=this.graphics;
 518 | 
 519 |     pointerEvents.on("down",graphics.hitArea,function(event){
 520 |       instance.setState("pressed",true);
 521 |       instance.setState("hover",false);
 522 |     });
 523 |     pointerEvents.on("up",document,function(){
 524 |       instance.setState("pressed",false);
 525 |     });
 526 |     pointerEvents.on("mouseover",graphics.hitArea,function(){
 527 |       instance.setState("hover",true);
 528 |     });
 529 |     pointerEvents.on("mouseout",graphics.hitArea,function(){
 530 |       instance.setState("hover",false);
 531 |     });
 532 |     pointerEvents.on("click",graphics.hitArea,function(event){
 533 |       instance.triggerClick(event);
 534 |     });
 535 |     this.addEventListener("keydown",function(event){
 536 |       if(event.keyCode=="13" || event.keyCode=="32"){
 537 |         event.preventDefault();
 538 |         this.triggerClick(event);
 539 |       }
 540 |     });
 541 |     this.addEventListener("focus",function(event){
 542 |       this.setState("focused",true);
 543 |     });
 544 |     this.addEventListener("blur",function(event){
 545 |       this.setState("focused",false);
 546 |     });
 547 | 
 548 |     this.addEventListener(this.eventPrefix+"animatingFinish",this.processQueue);
 549 | 
 550 |     this.setupEventHandlers();
 551 |   },
 552 |   triggerClick:function(event){
 553 |     var state=this.state;
 554 | 
 555 |     if(!state.open){
 556 |       this.dispatchEvent('click');
 557 |       this.options.onClick.call(this.target,event);
 558 |     }
 559 |   },
 560 |   setupEventHandlers:function(){
 561 |     var options=this.options;
 562 | 
 563 |     this.setupEventHandler('openingFinish','onOpen');
 564 |     this.setupEventHandler('closingFinish','onClose');
 565 |     this.setupEventHandler('complete','onComplete');
 566 |     this.setupEventHandler('fail','onFail');
 567 |     this.setupEventHandler('cancel','onCancel');
 568 |     this.setupEventHandler('change','onChange');
 569 |   },
 570 |   setupEventHandler:function(eventType,handler){
 571 |     var
 572 |       instance=this,
 573 |       target=this.target,
 574 |       options=this.options;
 575 | 
 576 |     target.addEventListener(this.eventPrefix+eventType,function(event){
 577 |       options[handler].call(target,event);
 578 |     });
 579 |   },
 580 |   addEventListener:function(event,callback){
 581 |     this.target.addEventListener(event,callback.bind(this));
 582 |   },
 583 |   dispatchEvent:function(event){
 584 |     this.target.dispatchEvent(new Event(this.eventPrefix+event));
 585 |   },
 586 |   setState:function(states,value){
 587 |     if(!Array.isArray(states)){
 588 |       states=[states];
 589 |     }
 590 | 
 591 |     var hasAnyStateChanged=false;
 592 |     states.forEach(function(name){
 593 |       var previousValue=this.state[name];
 594 |       this.state[name] = value;
 595 | 
 596 |       if(value!=previousValue){
 597 |         this.checkStateEvents(name)
 598 |         hasAnyStateChanged=true;
 599 |       }
 600 | 
 601 |     },this);
 602 |     if(hasAnyStateChanged){
 603 |       this.dispatchEvent("stateChange");
 604 |     }
 605 |     this.updateStates();
 606 |   },
 607 |   updateStates:function(){
 608 |     var
 609 |       target=this.target,
 610 |       state=this.state,
 611 |       options=this.options,
 612 |       graphics=this.graphics;
 613 | 
 614 |     if(state.focused && !state.pressed && !state.open && !state.hover){
 615 |       graphics.hitAreaCircle.setAttribute("stroke",options.highlightColor);
 616 |       Tween.to(graphics.hitAreaCircle,0.05,{attr:{
 617 |         "stroke-width":2/Math.max(0.01,this.buttonScale)
 618 |       }})
 619 |     }else{
 620 |       Tween.to(graphics.hitAreaCircle,0.05,{attr:{
 621 |         "stroke-width":0
 622 |       }})
 623 |     }
 624 | 
 625 |     if(state.pressed && !state.open){
 626 |       Tween.to(graphics.container,0.1,{
 627 |         scale:0.82,
 628 |         ease:Quint.easeOut
 629 |       });
 630 |       Tween.to(graphics.circle,0.1,{
 631 |         scale:1.06,
 632 |         ease:Quint.easeOut
 633 |       });
 634 |     }else{
 635 |       Tween.to([graphics.container,graphics.circle],0.1,{
 636 |         scale:1,
 637 |         ease:Quint.easeOut
 638 |       });
 639 |     }
 640 | 
 641 |     if(state.hover && !state.pressed && !state.open){
 642 |       Tween.to(graphics.container,0.2,{
 643 |         scale:1.15,
 644 |         ease:Quint.easeOut
 645 |       });
 646 |       Tween.to(graphics.circle,0.2,{
 647 |         scale:0.92,
 648 |         ease:Quint.easeOut
 649 |       });
 650 |     }else if(!state.pressed){
 651 |       Tween.to([graphics.circle,graphics.container],0.2,{
 652 |         scale:1,
 653 |         ease:Quint.easeOut
 654 |       });
 655 |     }
 656 | 
 657 |     if(!state.open){
 658 |       show(graphics.hitArea);
 659 |     }else{
 660 |       hide(graphics.hitArea);
 661 |     }
 662 |   },
 663 |   checkStateEvents:function(name){
 664 |     var
 665 |       instance=this,
 666 |       state=this.state;
 667 | 
 668 |     var value=state[name];
 669 |     function checkStateEvent(nameCheck,ifTrue,ifFalse){
 670 |       if(name==nameCheck){
 671 |         instance.dispatchEvent(value?ifTrue:ifFalse);
 672 |       }
 673 |     }
 674 | 
 675 |     checkStateEvent("open","open","close");
 676 |     checkStateEvent("press","press","release");
 677 |     checkStateEvent("animating","animatingStart","animatingFinish");
 678 |     checkStateEvent("opening","openingStart","openingFinish");
 679 |     checkStateEvent("closing","closingStart","closingFinish");
 680 |     checkStateEvent("failing","failingStart","failingFinish");
 681 |     checkStateEvent("canceling","cancelingStart","cancelingFinish");
 682 |   },
 683 |   setText:function(text,upsideDown){
 684 |     var graphics=this.graphics;
 685 | 
 686 |     if(!isSet(upsideDown)) upsideDown=false;
 687 |     graphics.labelText.textContent=text;
 688 |     if(upsideDown){
 689 |       var labelBBox=graphics.label.getBBox();
 690 |       var arrowShaftBBox=graphics.arrowShaft.getBBox();
 691 |       Tween.set(graphics.label,{
 692 |         x:-parseFloat(graphics.labelText.getAttribute("font-size"))/2,
 693 |         rotation:180
 694 |       })
 695 |     }else{
 696 |       Tween.set(graphics.label,{
 697 |         x:0,
 698 |         rotation:0
 699 |       })
 700 |     }
 701 |   },
 702 |   setPercentage:function(v){
 703 |     this.setText(Math.floor(v*100)+"%");
 704 |   },
 705 |   changeText:function(text,upsideDown){
 706 |     var
 707 |       instance=this,
 708 |       graphics=this.graphics;
 709 | 
 710 |     var t=0.15;
 711 |     // fade out text
 712 |     Tween.to(graphics.label,t,{
 713 |       opacity:0,
 714 |       onComplete:function(){
 715 |         instance.setText(text,upsideDown);
 716 |         var textBB=graphics.label.getBBox();
 717 |         var boxBB=graphics.arrowShaft.getBBox();
 718 |         var targetSize=textBB.width+40;
 719 |         var targetScale=targetSize/boxBB.width;
 720 |         // resize text box
 721 |         Tween.to(graphics.arrowShaft,t,{
 722 |           scaleX:targetScale,
 723 |           ease:Quad.easeInOut,
 724 |           onComplete:function(){
 725 |             // fade in text
 726 |             Tween.to(graphics.label,t,{
 727 |               opacity:1
 728 |             });
 729 |           }
 730 |         })
 731 |       }
 732 |     })
 733 |   },
 734 |   open:function(){
 735 |     var
 736 |       instance=this,
 737 |       options=this.options,
 738 |       graphics=this.graphics,
 739 |       state=this.state;
 740 | 
 741 |     if(state.open && !state.closing && !state.failed && !state.canceled){
 742 |       return false;
 743 |     }
 744 |     if(state.animating){
 745 |       this.addToQueue(this.open);
 746 |       return false;
 747 |     }
 748 |     this.progress.setAttribute("aria-hidden",false);
 749 | 
 750 |     Tween.killTweensOf(this);
 751 |     this.setState(["animating","opening","open"],true);
 752 |     this.value=this.visibleValue=this.lastValue=this.lastVisibleValue=0;
 753 | 
 754 |     if(state.open && (state.failed || state.canceled)){
 755 |       this.setState(["failed","canceled"],false);
 756 | 
 757 |       hide(graphics.fillLine);
 758 | 
 759 |       this.animOpenArrowJump(false);
 760 |       this.changeText("0%");
 761 |       this.animOpenBar();
 762 | 
 763 |     }else{
 764 |       this.animOpenOverlay();
 765 |       this.animOpenArrowJump();
 766 |       this.animLabelExpand();
 767 | 
 768 |       Tween.delayedCall(0.2,function(){
 769 |         instance.animOpenBar();
 770 |       });
 771 |     }
 772 | 
 773 |     Tween.delayedCall(1.3,function(){
 774 |       this.resetFillLine();
 775 | 
 776 |       this.setState(["animating","opening"],false);
 777 | 
 778 |       instance.setValue(instance.value);
 779 |     },null,this);
 780 | 
 781 |     return true;
 782 |   },
 783 |   animOpenBar:function(){
 784 |     var
 785 |       graphics=this.graphics,
 786 |       options=this.options,
 787 |       containerX=this.containerX,
 788 |       base=this.base,
 789 |       width=options.width;
 790 | 
 791 |     var halfWidth=width/2;
 792 |     var sixthWidth=width/6;
 793 | 
 794 |     var linePath = getPathData(graphics.line);
 795 |     var linePoints = linePath.commands;
 796 | 
 797 |     var lineStart=linePoints[0];
 798 |     var lineMiddle=linePoints[1];
 799 |     var lineEnd=linePoints[2];
 800 | 
 801 |     var baseCurveOffset=(options.buttonSize/4)*3;
 802 | 
 803 |     //// expand
 804 |     // x
 805 |     var openDur=0.25;
 806 |     Tween.to(lineStart,openDur,{
 807 |       x:-containerX,
 808 |       ease:Quad.easeOut
 809 |     });
 810 |     Tween.to(lineMiddle,openDur,{
 811 |       x:-containerX+halfWidth,
 812 |       x2:-containerX+sixthWidth,
 813 |       x1:-containerX+sixthWidth+sixthWidth,
 814 |       ease:Quad.easeOut
 815 |     });
 816 |     Tween.to(lineEnd,openDur,{
 817 |       x:-containerX+width,
 818 |       x2:-containerX+halfWidth+sixthWidth,
 819 |       x1:-containerX+halfWidth+sixthWidth+sixthWidth,
 820 |       ease:Quad.easeOut
 821 |     });
 822 | 
 823 |     // y
 824 |     tweenTheseTo([
 825 |         {obj:lineStart,prop:"y"},
 826 |         {obj:lineMiddle,prop:"y2"},
 827 |         {obj:lineEnd,props:["y","y1"]}
 828 |       ],{
 829 |         duration:openDur,
 830 |         value:base,
 831 |         ease:Quad.easeInOut
 832 |       }
 833 |     );
 834 | 
 835 |     tweenTheseTo([
 836 |         {obj:lineMiddle,prop:"y1"},
 837 |         {obj:lineEnd,prop:"y2"}
 838 |       ],{
 839 |         duration:openDur,
 840 |         value:base+baseCurveOffset,
 841 |         ease:Quad.easeInOut
 842 |       }
 843 |     );
 844 | 
 845 |     //spring up
 846 |     tweenTheseTo([
 847 |         {obj:lineMiddle,props:["y","y1"]},
 848 |         {obj:lineEnd,prop:"y2"}
 849 |       ],{
 850 |         duration:1.05,
 851 |         value:base,
 852 |         delay:0.05,
 853 |         ease:Elastic.easeOut,
 854 |         easeParams:[options.barElasticOvershoot,options.barElasticPeriod]
 855 |       }
 856 |     );
 857 | 
 858 |     var updateLinePath=function(){
 859 |       updatePath(graphics.line,linePath)
 860 |     };
 861 |     Tween.to({},1.1,{
 862 |       onUpdate:updateLinePath,
 863 |       onComplete:updateLinePath
 864 |     });
 865 |   },
 866 |   animOpenOverlay:function(){
 867 |     var graphics=this.graphics;
 868 | 
 869 |     // "overlay" is the the graphic resposible for the "carving out" anim
 870 |     // makes overlay visible before setting any of its other properties
 871 |     show(graphics.overlay);
 872 |     // expand the overlay
 873 |     Tween.fromTo(graphics.overlay,0.2,{
 874 |       transformOrigin:"50% 50%",
 875 |       scale:0.2
 876 |     },{
 877 |       scale:1,
 878 |       ease:Sine.easeIn,
 879 |       onComplete:function(){
 880 |         hide([graphics.overlay,graphics.bg]);
 881 |       }
 882 |     });
 883 |   },
 884 |   animOpenArrowJump:function(anticipation){
 885 |     var
 886 |       instance=this,
 887 |       graphics=this.graphics,
 888 |       options=this.options;
 889 | 
 890 |     if(!isSet(anticipation)) anticipation=true;
 891 |     var delay=anticipation?0.25:0;
 892 | 
 893 |     if(anticipation){
 894 |       Tween.to(graphics.arrow,0.4,{
 895 |         y:"+="+(options.buttonSize*0.2),
 896 |         ease:Quad.easeInOut
 897 |       });
 898 |     }
 899 | 
 900 |     Tween.to(graphics.arrow,0.75,{
 901 |       x:0,
 902 |       ease:Quad.easeOut,
 903 |       delay:delay
 904 |     });
 905 |     Tween.to(graphics.arrow,0.5,{
 906 |       rotation:0,
 907 |       delay:delay
 908 |     });
 909 | 
 910 |     Tween.to(graphics.arrow,0.25,{
 911 |       y:-options.jumpHeight,
 912 |       ease:Quad.easeOut,
 913 |       delay:delay,
 914 |       onComplete:function(){
 915 |         Tween.to(graphics.arrow,0.5,{
 916 |           y:instance.base - (options.barHeight/2),
 917 |           ease:Bounce.easeOut,
 918 |         });
 919 |       }
 920 |     });
 921 |   },
 922 |   animLabelExpand:function(){
 923 |     var
 924 |       instance=this,
 925 |       graphics=this.graphics,
 926 |       options=this.options;
 927 | 
 928 |     Tween.to(graphics.arrow,0.5,{
 929 |       scaleX:instance.labelScale,
 930 |       scaleY:instance.labelScale
 931 |     });
 932 |     Tween.to(graphics.arrowHead,0.5,{
 933 |       scale:0.5,
 934 |       ease:Quad.easeInOut
 935 |     });
 936 |     Tween.to(graphics.arrowShaft,0.5,{
 937 |       scaleX:3,
 938 |       y:15,
 939 |       ease:Quad.easeInOut
 940 |     });
 941 | 
 942 |     show(graphics.label);
 943 |     this.setText("0%");
 944 | 
 945 |     Tween.fromTo(graphics.label,0.5,{
 946 |       scale:0.01,
 947 |       x:0,
 948 |       y:0
 949 |     },{
 950 |       scale:1,
 951 |       x:0,
 952 |       y:15
 953 |     });
 954 |   },
 955 |   resetFillLine:function(){
 956 |     var graphics=this.graphics;
 957 | 
 958 |     var fillPath=getPathData(graphics.fillLine);
 959 |     var fillPoints=fillPath.commands;
 960 | 
 961 |     fillPoints[0].x = fillPoints[1].x = -this.containerX;
 962 |     fillPoints[0].y = fillPoints[1].y = this.base;
 963 |     updatePath(graphics.fillLine,fillPath);
 964 | 
 965 |     show(graphics.fillLine);
 966 |   },
 967 |   close:function(){
 968 |     var
 969 |       options=this.options,
 970 |       state=this.state,
 971 |       graphics=this.graphics;
 972 | 
 973 |     if(state.closing || !state.open){
 974 |       return false;
 975 |     }
 976 |     if(state.animating){
 977 |       this.addToQueue(this.close);
 978 |       return false;
 979 |     }
 980 |     this.progress.setAttribute("aria-hidden",true);
 981 |     Tween.killTweensOf(this);
 982 | 
 983 |     this.setState(["animating","closing"],true);
 984 | 
 985 |     this.animCloseArrow();
 986 |     this.animLabelCollapse();
 987 |     this.animCloseBar();
 988 |     Tween.delayedCall(0.31,function(){
 989 |       this.animCloseCircle();
 990 |     },null,this);
 991 | 
 992 |     Tween.delayedCall(0.8,function(){
 993 |       this.setState(["animating","open","closing","failed","canceled","complete"],false);
 994 |     },null,this);
 995 | 
 996 |     return true
 997 |   },
 998 |   animCloseBar:function(){
 999 |     var
1000 |       instance=this,
1001 |       graphics=this.graphics,
1002 |       options=this.options;
1003 | 
1004 |     var fillPath=getPathData(graphics.fillLine);
1005 |     var fillPoints=fillPath.commands;
1006 |     Tween.to(fillPoints[0],0.17,{
1007 |       x:fillPoints[1].x,
1008 |       y:fillPoints[1].y,
1009 |       ease:Quad.easeIn,
1010 |       onUpdate:function(){
1011 |         updatePath(graphics.fillLine,fillPath);
1012 |       },
1013 |       onComplete:function(){
1014 |         hide(graphics.fillLine);
1015 |         collapseBar();
1016 |       }
1017 |     });
1018 | 
1019 |     var collapseBar=function(){
1020 |       var linePath=getPathData(graphics.line);
1021 |       var linePoints=linePath.commands;
1022 | 
1023 |       var t=0.17;
1024 | 
1025 |       tweenTheseTo([
1026 |         {obj:linePoints[1],props:["y","y1"]},
1027 |         {obj:linePoints[2],props:["y","y2"]}
1028 |       ],{
1029 |         duration:t/2,
1030 |         value:instance.base,
1031 |         ease:Quad.easeOut
1032 |       });
1033 | 
1034 |       tweenTheseTo([
1035 |         {obj:linePoints[0],props:["x"]},
1036 |         {obj:linePoints[1],props:["x","x1","x2"]},
1037 |         {obj:linePoints[2],props:["x","x1","x2"]}
1038 |       ],{
1039 |         duration:t,
1040 |         value:(options.width/2)-instance.containerX,
1041 |         ease:Quad.easeIn,
1042 |       });
1043 |       Tween.to({},t,{
1044 |         onUpdate:function(){
1045 |           updatePath(graphics.line,linePath);
1046 |         },
1047 |         onComplete:collapseBarComplete
1048 |       });
1049 |     }
1050 |     var collapseBarComplete=function(){
1051 |       Tween.delayedCall(0.3,function(){
1052 |         var circlePath=instance.getPathPointsCirclingCircle();
1053 |         updatePath(graphics.line,circlePath);
1054 |       });
1055 |     }
1056 | 
1057 |   },
1058 |   animLabelCollapse:function(){
1059 |     var
1060 |       instance=this,
1061 |       graphics=this.graphics,
1062 |       options=this.options;
1063 | 
1064 |     Tween.to(graphics.arrow,0.5,{
1065 |       scale:instance.arrowScale
1066 |     });
1067 |     Tween.to(graphics.arrowHead,0.5,{
1068 |       scale:1,
1069 |       ease:Quad.easeInOut
1070 |     });
1071 |     Tween.to(graphics.arrowShaft,0.5,{
1072 |       scaleX:1,
1073 |       y:0,
1074 |       ease:Quad.easeInOut
1075 |     });
1076 | 
1077 |     Tween.to(graphics.label,0.5,{
1078 |       scale:0.01,
1079 |       onComplete:function(){
1080 |         hide(graphics.label);
1081 |       }
1082 |     });
1083 |   },
1084 |   animCloseArrow:function(){
1085 |     var
1086 |       instance=this,
1087 |       graphics=this.graphics,
1088 |       options=this.options;
1089 | 
1090 |     Tween.to(graphics.arrow,0.5,{
1091 |       x:options.width/2,
1092 |       ease:Quad.easeOut,
1093 |       delay:0,
1094 |       rotation:0
1095 |     });
1096 | 
1097 |     Tween.to(graphics.arrow,0.25,{
1098 |       y:-options.jumpHeight,
1099 |       ease:Quad.easeOut,
1100 |       onComplete:function(){
1101 |         Tween.to(graphics.arrow,0.8,{
1102 |           y:instance.arrowPos,
1103 |           scaleY:instance.arrowScale*(instance.arrowUp?-1:1),
1104 |           ease:Elastic.easeOut,
1105 |           easeParams:[1.1,0.6],
1106 |           onComplete:function(){
1107 |             Tween.set(graphics.arrow,{
1108 |               scaleY:instance.arrowScale,
1109 |               rotation:instance.arrowRotation
1110 |             })
1111 |           }
1112 |         });
1113 |       }
1114 |     });
1115 |   },
1116 |   animCloseCircle:function(){
1117 |     var
1118 |       instance=this,
1119 |       graphics=this.graphics;
1120 | 
1121 |     show(graphics.bg);
1122 | 
1123 |     Tween.fromTo(graphics.bgCircle,0.8,{
1124 |       scale:0.1,
1125 |     },{
1126 |       scale:instance.buttonScale,
1127 |       ease:Elastic.easeOut,
1128 |       easeParams:[1.2,0.7]
1129 |     })
1130 |   },
1131 |   setValue:function(v){
1132 |     var
1133 |       instance=this,
1134 |       options=this.options,
1135 |       graphics=this.graphics,
1136 |       state=this.state;
1137 | 
1138 |     if(!state.open){
1139 |       //this.warn("The preloader resets the value when it opens. Please call the function 'open' before setting a value.");
1140 |       return false;
1141 |     }
1142 |     if(state.failed || state.canceled || state.complete || state.animating){
1143 |       return false;
1144 |     }
1145 | 
1146 |     // check if the value has changed considering the limits (i.e. do nothing if it goes from 1 to 1.1)
1147 |     var lastValue=this.value;
1148 |     var newValue=cutoff(v,0,1);
1149 |     if(lastValue==newValue){
1150 |       return false;
1151 |     }
1152 |     this.lastValue=lastValue;
1153 |     this.value=newValue;
1154 |     this.progress.setAttribute("value",this.value);
1155 | 
1156 |     if(state.opening || state.closing){
1157 |       this.dispatchEvent("change");
1158 |       return true;
1159 |     }
1160 | 
1161 |     var d=this.value-this.lastVisibleValue;
1162 |     if(d<0.01 && this.value<1){
1163 |       return true;
1164 |     }
1165 | 
1166 |     var t=0.2+(1*Math.abs(d));
1167 | 
1168 |     Tween.to(graphics.arrow,t*0.5,{
1169 |       rotation:-d*options.labelWobbliness,
1170 |       ease:Quad.easeOut,
1171 |       onComplete:function(){
1172 |         Tween.to(graphics.arrow,1.5,{
1173 |           rotation:0,
1174 |           ease:Elastic.easeOut,
1175 |           easeParams:[2,0.4]
1176 |         });
1177 |       }
1178 |     });
1179 | 
1180 |     Tween.to(this,t*1,{
1181 |       barOverstretch:d*2,
1182 |       ease:Quad.easeInOut,
1183 |       onComplete:function(){
1184 |         Tween.to(instance,1.5,{
1185 |           barOverstretch:0,
1186 |           ease:Elastic.easeOut,
1187 |           easeParams:[2,0.2]
1188 |         });
1189 |       }
1190 |     });
1191 | 
1192 |     Tween.to(this,t,{
1193 |       visibleValue:this.value,
1194 |       ease:Quad.easeOut,
1195 |       onUpdate:this.updateValue.bind(this),
1196 |       onComplete:this.updateValue.bind(this)
1197 |     });
1198 | 
1199 |     this.dispatchEvent("change");
1200 |     return true;
1201 |   },
1202 |   getValue:function(){
1203 |     return this.value;
1204 |   },
1205 |   updateValue:function(){
1206 |     this.lastVisibleValue=this.visibleValue;
1207 |     this.renderValue(this.visibleValue);
1208 |   },
1209 |   renderValue:function(){
1210 |     var
1211 |       instance=this,
1212 |       state=this.state,
1213 |       options=this.options,
1214 |       graphics=this.graphics,
1215 |       value=this.visibleValue
1216 | 
1217 |     if(value>=1 && !state.complete){
1218 |       Tween.killTweensOf(this,{visibleValue:true});
1219 |       this.complete();
1220 |     }else if(value>=1 && state.complete){
1221 |       return false;
1222 |     }
1223 | 
1224 |     Tween.to(this,1.5,{
1225 |       onUpdate:this.renderBarStretch.bind(this)
1226 |     })
1227 | 
1228 |     this.dispatchEvent("valueRender");
1229 |     this.setPercentage(value);
1230 |   },
1231 |   renderBarStretch:function(v){
1232 |     var
1233 |       instance=this,
1234 |       state=this.state,
1235 |       options=this.options,
1236 |       graphics=this.graphics,
1237 |       value=this.visibleValue
1238 | 
1239 |     var stretch=options.barStretch * Math.sin(value*3.14)*(1+this.barOverstretch);
1240 | 
1241 |     var middlePoint={
1242 |       x: value * options.width,
1243 |       y: instance.base + stretch
1244 |     };
1245 | 
1246 |     var linePath=getPathData(graphics.line);
1247 |     var linePoints=linePath.commands;
1248 | 
1249 |     var fillPath=getPathData(graphics.fillLine);
1250 |     var fillPoints=fillPath.commands;
1251 | 
1252 |     linePoints[1].x = linePoints[1].x1 = linePoints[2].x2 = fillPoints[1].x = (middlePoint.x - this.containerX);
1253 |     linePoints[1].y = linePoints[1].y1 = linePoints[2].y2 = fillPoints[1].y = middlePoint.y;
1254 | 
1255 |     linePoints[1].x2 = linePoints[0].x;
1256 |     linePoints[1].y2 = linePoints[0].y;
1257 |     linePoints[2].x1 = linePoints[2].x;
1258 |     linePoints[2].y1 = linePoints[2].y;
1259 | 
1260 |     // avoid line cap bug at the end point
1261 |     if(linePoints[1].x+(options.barHeight/2)>=linePoints[2].x){
1262 |       linePoints[1].x=linePoints[2].x-(options.barHeight/2);
1263 |     }
1264 | 
1265 |     updatePath(graphics.fillLine,fillPath);
1266 |     updatePath(graphics.line,linePath);
1267 | 
1268 |     Tween.set(graphics.arrow,{
1269 |       x:middlePoint.x,
1270 |       y:middlePoint.y - (options.barHeight/2)
1271 |     });
1272 |   },
1273 |   complete:function(){
1274 |     var
1275 |       instance=this,
1276 |       state=this.state,
1277 |       options=this.options;
1278 | 
1279 |     if(!state.open || state.failed || state.complete || state.canceled){
1280 |       return false;
1281 |     }
1282 |     if(state.animating){
1283 |       this.addToQueue(this.complete);
1284 |       return false;
1285 |     }
1286 |     Tween.killTweensOf(this);
1287 |     this.setState(["animating","completing","complete"],true);
1288 |     this.dispatchEvent("complete");
1289 | 
1290 |     this.changeText(options.textComplete);
1291 | 
1292 |     Tween.delayedCall(2.5,function(){
1293 |       instance.setState(["animating","completing"],false);
1294 |     });
1295 | 
1296 |     return true;
1297 |   },
1298 |   fail:function(){
1299 |     var
1300 |       instance=this,
1301 |       state=this.state,
1302 |       options=this.options;
1303 | 
1304 | 
1305 |     if(state.failed || state.canceled || state.complete || !state.open || state.closing){
1306 |       return false;
1307 |     }
1308 | 
1309 |     if(state.animating){
1310 |       this.addToQueue(this.fail);
1311 |       return false;
1312 |     }
1313 |     Tween.killTweensOf(this);
1314 |     this.setState(["animating","failed","failing"],true);
1315 |     this.dispatchEvent("fail");
1316 | 
1317 |     if(options.arrowHangOnFail){
1318 |       this.animArrowHang();
1319 |     }
1320 | 
1321 |     this.changeText(options.textFail,options.arrowHangOnFail);
1322 |     Tween.delayedCall(2.5,function(){
1323 |       instance.setState(["animating","failing"],false);
1324 |     });
1325 |     return true;
1326 |   },
1327 |   cancel:function(){
1328 |     var
1329 |       instance=this,
1330 |       state=this.state,
1331 |       options=this.options;
1332 | 
1333 |     if(state.failed || state.complete || state.canceled || !state.open || state.closing){
1334 |       return false;
1335 |     }
1336 |     if(state.animating){
1337 |       this.addToQueue(this.cancel);
1338 |       return false;
1339 |     }
1340 |     Tween.killTweensOf(this);
1341 |     this.setState(["animating","canceled","canceling"],true);
1342 |     this.dispatchEvent("cancel");
1343 | 
1344 |     if(options.arrowHangOnCancel){
1345 |       this.animArrowHang();
1346 |     }
1347 | 
1348 |     this.changeText(options.textCancel,options.arrowHangOnCancel);
1349 |     Tween.delayedCall(2.5,function(){
1350 |       instance.setState(["canceling","animating"],false);
1351 |     });
1352 |     return true;
1353 |   },
1354 |   animArrowHang:function(){
1355 |     var
1356 |       instance=this,
1357 |       graphics=this.graphics;
1358 | 
1359 |     Tween.killTweensOf(this);
1360 |     Tween.killTweensOf(graphics.arrow);
1361 | 
1362 |     Tween.to(graphics.arrow,0.25,{
1363 |       rotation:90,
1364 |       ease:Quad.easeIn,
1365 |       onComplete:function(){
1366 |         Tween.to(graphics.arrow,2,{
1367 |           rotation:180,
1368 |           ease:Elastic.easeOut,
1369 |           easeParams:[1.6,0.4]
1370 |         });
1371 |       }
1372 |     });
1373 | 
1374 |     Tween.to(this,0.25,{
1375 |       barOverstretch:1.2,
1376 |       onUpdate:this.renderBarStretch.bind(this),
1377 |       onComplete:function(){
1378 |         Tween.to(instance,1.5,{
1379 |           barOverstretch:0,
1380 |           ease:Elastic.easeOut,
1381 |           easeParams:[1.1,0.4],
1382 |           onUpdate:instance.renderBarStretch.bind(instance)
1383 |         })
1384 |       }
1385 |     });
1386 |   },
1387 |   error:function(msg){
1388 |     console.error(this.logPrefix+": "+msg);
1389 |   },
1390 |   warn:function(msg){
1391 |     console.warn(this.logPrefix+": "+msg);
1392 |   },
1393 |   log:function(msg){
1394 |     console.log(this.logPrefix+": "+msg);
1395 |   }
1396 | });
1397 | 
1398 | module.exports=ElasticProgress;
1399 | 


--------------------------------------------------------------------------------
/src/gfx-of.js:
--------------------------------------------------------------------------------
 1 | // Returns all graphic elements (paths, shapes, text, etc) from a (group of) SVG element(s)
 2 | var graphicTypes=["polygon","polyline","path","circle","rect","text","line","ellipse"];
 3 | 
 4 | module.exports=function(elements){
 5 |   if(!Array.isArray(elements)){
 6 |     elements=[elements];
 7 |   }
 8 |   return elements.map(function(svgObj){
 9 |     if(graphicTypes.indexOf(svgObj.nodeName)>-1){
10 |       return svgObj;
11 |     }else{
12 |       return svgObj.querySelectorAll(graphicTypes.join(","));
13 |     }
14 |   });
15 | }
16 | 


--------------------------------------------------------------------------------
/src/is-set.js:
--------------------------------------------------------------------------------
1 | module.exports=function(v){
2 |   return typeof v!="undefined";
3 | }
4 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
  1 | // Interface for the actual Elastic Progress
  2 | 
  3 | 'use strict';
  4 | 
  5 | var extend=require('extend');
  6 | var toArray=require('./to-array');
  7 | var isSet=require('./is-set');
  8 | var ElasticProgressGfx=require('./elastic-progress');
  9 | 
 10 | function addInstance(instance){
 11 |   instances.push(instance);
 12 | }
 13 | 
 14 | var api={
 15 |   open:function(){
 16 |     return this.instance.open();
 17 |   },
 18 |   close:function(){
 19 |     return this.instance.close();
 20 |   },
 21 |   setValue:function(value){
 22 |     return this.instance.setValue(value);
 23 |   },
 24 |   getValue:function(){
 25 |     return this.instance.getValue();
 26 |   },
 27 |   fail:function(){
 28 |     return this.instance.fail();
 29 |   },
 30 |   complete:function(){
 31 |     return this.instance.complete();
 32 |   },
 33 |   cancel:function(){
 34 |     return this.instance.cancel();
 35 |   },
 36 |   onClick:function(f){
 37 |     this.instance.options.onClick=f;
 38 |   },
 39 |   onOpen:function(f){
 40 |     this.instance.options.onOpen=f;
 41 |   },
 42 |   onClose:function(f){
 43 |     this.instance.options.onClose=f;
 44 |   },
 45 |   onComplete:function(f){
 46 |     this.instance.options.onComplete=f;
 47 |   },
 48 |   onCancel:function(f){
 49 |     this.instance.options.onCancel=f;
 50 |   },
 51 |   onFail:function(f){
 52 |     this.instance.options.onFail=f;
 53 |   },
 54 |   onChange:function(f){
 55 |     this.instance.options.onChange=f;
 56 |   },
 57 |   addEventListener:function(event,handler){
 58 |     this.instance.addEventListener(event,handler);
 59 |   },
 60 |   removeEventListener:function(event,handler){
 61 |     this.instance.removeEventListener(event,handler);
 62 |   }
 63 | };
 64 | 
 65 | var ElasticProgress=function(target,options){
 66 |   if(!isSet(target)){
 67 |     return;
 68 |   }
 69 |   if(target.jquery){
 70 |     target=target.get(0);
 71 |   }
 72 |   this.instance=new ElasticProgressGfx(target,options);
 73 | }
 74 | 
 75 | ElasticProgress.prototype=extend(
 76 |   {
 77 |     instance:null
 78 |   },
 79 |   api
 80 | );
 81 | 
 82 | // jQuery plugin, in case jQuery is available
 83 | var jQuery = jQuery || undefined;
 84 | if(isSet(jQuery)){
 85 |   (function($){
 86 |     $.fn.ElasticProgress=function(optionsOrMethod){
 87 |       var target=toArray($(this));
 88 | 
 89 |       if(typeof optionsOrMethod=="string"){
 90 |         var method=optionsOrMethod;
 91 | 
 92 |         var f=api[method];
 93 | 
 94 |         var args=arguments;
 95 |         // if function exists, calls it. Else, error
 96 |         if(typeof f=="function"){
 97 |           var returnValue=null;
 98 |           $(this).each(function(){
 99 |             var instance=$(this).data("elastic-progress");
100 | 
101 |             if(instance!=null){
102 |               returnValue=instance[method].apply(instance,toArray(args).slice(1));
103 |             }
104 |           });
105 |           return returnValue;
106 |         }else{
107 |           ElasticProgressGfx.prototype.error("Unknown function '"+method+"'");
108 |         }
109 |       }else{
110 |         var options=optionsOrMethod;
111 | 
112 |         $(this).each(function(){
113 |           var instance=new ElasticProgress($(this),options);
114 |           $(this).data("elastic-progress",instance);
115 | 
116 |         })
117 | 
118 |         return $(this);
119 |       }
120 |     }
121 |   }(jQuery));
122 | }
123 | 
124 | module.exports=ElasticProgress;
125 | 


--------------------------------------------------------------------------------
/src/pointer-events.js:
--------------------------------------------------------------------------------
  1 | var debug=true;
  2 | var blockedEvents=[];
  3 | var listeners=[];
  4 | 
  5 | function blockEvent(el,type,dur){
  6 |   if(typeof dur!="number") dur=1000
  7 | 
  8 |   blockedEvents.push({
  9 |     el:el,
 10 |     type:type
 11 |   });
 12 |   setTimeout(function(){
 13 |     blockedEvents.shift();
 14 |   },dur);
 15 | }
 16 | function isBlocked(el,type){
 17 |   return blockedEvents.some(function(cur){
 18 |     return cur.type==type && cur.el==el;
 19 |   });
 20 | }
 21 | 
 22 | function registerEvent(type,el,callback,listener){
 23 |   el.addEventListener(type,listener);
 24 | 
 25 |   listeners.push({
 26 |     type:type,
 27 |     el:el,
 28 |     callback:callback,
 29 |     listener:listener
 30 |   });
 31 | }
 32 | function unregisterEvent(type,el,callback){
 33 |   listeners.filter(function(listener){
 34 |     return (listener.type==type && listener.el==el && listener.callback==callback);
 35 |   }).forEach(function(listener){
 36 |     console.log(listener);
 37 |     listener.el.removeEventListener(listener.type,listener.listener);
 38 |   });
 39 | 
 40 |   listeners=listeners.filter(function(listener){
 41 |     return !(listener.type==type && listener.el==el && listener.callback==callback);
 42 |   })
 43 | }
 44 | 
 45 | var pointerEvents={
 46 |   down:function(add,el,callback){
 47 |     if(add){
 48 |       var touchstartListener=function(event){
 49 |         if(typeof event.touches != "undefined"){
 50 |           var touches=event.touches;
 51 |           if(touches.length>0){
 52 |             event.clientX=touches[0].clientX;
 53 |             event.clientY=touches[0].clientY;
 54 | 
 55 |             callback.call(el,event);
 56 |             blockEvent(el,"mousedown");
 57 |           }
 58 |         }
 59 |       }
 60 |       registerEvent("touchstart",el,callback,touchstartListener);
 61 | 
 62 |       var mousedownListener=function(event){
 63 |         if(!isBlocked(el,"mousedown")){
 64 |           callback.call(el,event);
 65 |         }
 66 |       }
 67 |       registerEvent("mousedown",el,callback,mousedownListener);
 68 | 
 69 |     }else{
 70 |       unregisterEvent("touchstart",el,callback);
 71 |       unregisterEvent("mousedown",el,callback);
 72 |     }
 73 |   },
 74 | 
 75 |   up:function(add,el,callback){
 76 |     if(add){
 77 |       var touchendListener=function(event){
 78 |         if(typeof event.touches != "undefined"){
 79 |           var touches=event.touches;
 80 |           if(touches.length>0){
 81 |             event.clientX=touches[0].clientX;
 82 |             event.clientY=touches[0].clientY;
 83 | 
 84 |           }
 85 |           callback.call(el,event);
 86 |           blockEvent(el,"mouseup");
 87 |         }
 88 |       };
 89 |       registerEvent("touchend",el,callback,touchendListener);
 90 | 
 91 |       var mouseupListener=function(event){
 92 |         if(!isBlocked(el,"mouseup")){
 93 |           callback.call(el,event);
 94 |         }
 95 |       };
 96 |       registerEvent("mouseup",el,callback,mouseupListener);
 97 |     }else{
 98 |       unregisterEvent("touchend",el,callback);
 99 |       unregisterEvent("mouseup",el,callback);
100 |     }
101 |   },
102 | 
103 |   click:function(add,el,callback){
104 |     if(add){
105 |       function clickListener(event){
106 |         if(!isBlocked(el,"click")){
107 |           callback.call(el,event);
108 |         }
109 |       };
110 |       registerEvent('click',el,callback,clickListener)
111 |     }else{
112 |       unregisterEvent('click',el,callback);
113 |     }
114 |   },
115 | 
116 |   mouseover:function(add,el,callback){
117 |     if(add){
118 |       function mouseoverListener(event){
119 |         callback.call(el,event);
120 |       }
121 |       registerEvent('mouseover',el,callback,mouseoverListener);
122 |     }else{
123 |       unregisterEvent('mouseover',el,callback);
124 |     }
125 |   },
126 |   mouseout:function(add,el,callback){
127 |     if(add){
128 |       function mouseoutListener(event){
129 |         callback.call(el,event);
130 |       }
131 |       registerEvent('mouseout',el,callback,mouseoutListener);
132 |     }else{
133 |       unregisterEvent('mouseout',el,callback);
134 |     }
135 |   }
136 | }
137 | 
138 | var api={
139 |   on:function(eventType,el,callback){
140 |     pointerEvents[eventType].call(this,true,el,callback);
141 |   },
142 |   off:function(eventType,el,callback){
143 |     pointerEvents[eventType].call(this,false,el,callback);
144 |   }
145 | };
146 | 
147 | module.exports=api;
148 | 


--------------------------------------------------------------------------------
/src/svg/bt.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Layer_8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="1200px" height="841.89px" viewBox="0 0 1200 841.89" enable-background="new 0 0 1200 841.89" xml:space="preserve">
 6 | <g id="container">
 7 | 	<g id="circle">
 8 | 		<g id="background">
 9 | 			<path id="bg" fill="#231F20" d="M0-50c27.614,0,50,22.386,50,50S27.614,50,0,50c-27.615,0-50-22.386-50-50S-27.615-50,0-50z"/>
10 | 		</g>
11 | 		<g id="overlay">
12 | 			<path fill="#47FF03" d="M50,0c0,27.584-22.461,50-50,50c-27.636,0-50-22.416-50-50c0-27.594,22.364-50,50-50
13 | 				C27.539-50,50-27.594,50,0z"/>
14 | 		</g>
15 | 		<g id="border">
16 | 			<path fill="none" stroke="#231F20" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M-23.833,21.445
17 | 				c-80.313,1.374,7.956,104.833,89.191,104.833c81.7,0,191.842-105.833,110.142-105.833"/>
18 | 		</g>
19 | 		<g id="fill-line">
20 | 			<path fill="none" stroke="#FF00FF" stroke-linecap="round" stroke-miterlimit="10" d="M-138.487,110.945l105,2"/>
21 | 		</g>
22 | 	</g>
23 | 	<g id="arrow">
24 | 		<g id="head">
25 | 			<polygon fill="#FF00FF" points="-30.035,-31.56 0,0 30.035,-31.56 			"/>
26 | 		</g>
27 | 		<g id="line">
28 | 			<rect x="-12.374" y="-68.78" fill="#FF00FF" width="24.749" height="41.552"/>
29 | 		</g>
30 | 		<g id="label">
31 | 			<text transform="matrix(1 0 0 1 -0.7007 -41.584)" fill="#231F20" font-family="'Arial-BoldMT'" font-size="18">1</text>
32 | 		</g>
33 | 	</g>
34 | </g>
35 | <g id="hit-area">
36 | 	<path fill="#00FFDA" d="M50,0c0,27.584-22.461,50-50,50c-27.636,0-50-22.416-50-50c0-27.594,22.364-50,50-50
37 | 		C27.539-50,50-27.594,50,0z"/>
38 | </g>
39 | </svg>
40 | 


--------------------------------------------------------------------------------
/src/to-array.js:
--------------------------------------------------------------------------------
1 | // Converts NodeList/jQuery collections/etc to array
2 | function toArray(obj){
3 |   return [].slice.call(obj);
4 | }
5 | 
6 | module.exports=toArray;
7 | 


--------------------------------------------------------------------------------
/test/concurrency-visual.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html class="no-js" lang="">
  3 |     <head>
  4 |         <meta charset="utf-8">
  5 |         <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 |         <title></title>
  7 |         <meta name="description" content="">
  8 |         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  9 |         <style>
 10 |           body{
 11 |             text-align:center;
 12 |             margin-top:200px;
 13 |           }
 14 |           .Download{
 15 |             display:inline-block;
 16 |           }
 17 |         </style>
 18 |     </head>
 19 |     <body>
 20 | 
 21 |         <div role="button" tabindex="0" aria-label="Download" class="Download" style="height:100px;width:200px"></div> <br>
 22 |         <div role="button" tabindex="0" aria-label="Download" class="Download" style="height:100px;width:200px"></div> <br>
 23 |         <div role="button" tabindex="0" aria-label="Download" class="Download" style="height:100px;width:200px"></div> <br>
 24 |         <div role="button" tabindex="0" aria-label="Download" class="Download" style="height:100px;width:200px"></div> <br>
 25 |         <div role="button" tabindex="0" aria-label="Download" class="Download" style="height:100px;width:200px"></div> <br>
 26 |         <div role="button" tabindex="0" aria-label="Download" class="Download" style="height:100px;width:200px"></div> <br>
 27 |         <div role="button" tabindex="0" aria-label="Download" class="Download" style="height:100px;width:200px"></div> <br>
 28 | 
 29 |         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 30 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
 31 |         <script src="../dist/elastic-progress.js"></script>
 32 |         <script>
 33 |           $(document).ready(function(){
 34 | 
 35 |             $(".Download").eq(0).ElasticProgress({
 36 |               colorFg:"#ccc",
 37 |               onClick:function(){
 38 |                 $(this).ElasticProgress("open");
 39 |                 initDownload($(this));
 40 |               },
 41 |               onComplete:function(){
 42 |                 console.log("complete");
 43 |                 $(this).ElasticProgress("close");
 44 |               }
 45 |             });
 46 |             $(".Download").eq(1).ElasticProgress({
 47 |               colorFg:"#ccc",
 48 |               onClick:function(){
 49 |                 $(this).ElasticProgress("open");
 50 |                 initDownload($(this));
 51 |                 var button=$(this);
 52 |                 TweenMax.delayedCall(0.1,function(){
 53 |                   button.ElasticProgress("cancel");
 54 |                   button.ElasticProgress("open");
 55 |                   TweenMax.delayedCall(0.1,function(){
 56 |                     button.ElasticProgress("cancel");
 57 |                     button.ElasticProgress("fail");
 58 |                   })
 59 |                 });
 60 |               },
 61 |               onCancel:function(){
 62 |                 $(this).ElasticProgress("close");
 63 |               },
 64 |               onFail:function(){
 65 |                 $(this).ElasticProgress("close");
 66 |                 $(this).ElasticProgress("cancel");
 67 |                 $(this).ElasticProgress("fail");
 68 |               },
 69 |               onClose:function(){
 70 |                 $(this).ElasticProgress("fail");
 71 |                 $(this).ElasticProgress("close");
 72 |               },
 73 |               onComplete:function(){
 74 |                 $(this).ElasticProgress("close");
 75 |               }
 76 |             });
 77 |             $(".Download").eq(2).ElasticProgress({
 78 |               colorFg:"#ccc",
 79 |               onClick:function(){
 80 |                 $(this).ElasticProgress("open");
 81 |                 initDownload($(this));
 82 |               },
 83 |               onChange:function(){
 84 |                 var v=$(this).ElasticProgress("getValue");
 85 |                 if(v>=0.99){
 86 |                   $(this).ElasticProgress("fail");
 87 |                 }
 88 |               },
 89 |               onComplete:function(){
 90 |                 $(this).ElasticProgress("fail");
 91 |               }
 92 |             });
 93 |             $(".Download").eq(3).ElasticProgress({
 94 |               colorFg:"#ccc",
 95 |               onClick:function(){
 96 |                 $(this).ElasticProgress("open");
 97 |                 initDownload($(this));
 98 |               },
 99 |               onChange:function(){
100 |                 var v=$(this).ElasticProgress("getValue");
101 |                 if(v>=1){
102 |                   TweenMax.delayedCall(1,function(){
103 |                     $(this).ElasticProgress("fail");
104 |                   })
105 |                 }
106 |               },
107 |               onComplete:function(){
108 |                 $(this).ElasticProgress("fail");
109 |               }
110 |             });
111 |             $(".Download").eq(4).ElasticProgress({
112 |               colorFg:"#ccc",
113 |               onClick:function(){
114 |                 $(this).ElasticProgress("open");
115 |                 initDownload($(this));
116 |               },
117 |               onChange:function(){
118 |                 var v=$(this).ElasticProgress("getValue");
119 |                 if(v>=0.99){
120 |                   $(this).ElasticProgress("close");
121 |                 }
122 |               },
123 |               onComplete:function(){
124 |                 $(this).ElasticProgress("fail");
125 |               }
126 |             });
127 |             $(".Download").eq(5).ElasticProgress({
128 |               colorFg:"#ccc",
129 |               onClick:function(){
130 |                 $(this).ElasticProgress("open");
131 |                 $(this).ElasticProgress("close");
132 |                 initDownload($(this));
133 |               },
134 |               onChange:function(){
135 |                 var v=$(this).ElasticProgress("getValue");
136 |                 if(v>=0.99){
137 |                   $(this).ElasticProgress("close");
138 |                 }
139 |               },
140 |               onComplete:function(){
141 |                 $(this).ElasticProgress("fail");
142 |               }
143 |             });
144 |             function initDownload($button){
145 |               var v=0;
146 |               setInterval(function(){
147 |                 v+=0.04;
148 |                 $button.ElasticProgress("setValue",v);
149 |               },100)
150 |             }
151 |           })
152 |         </script>
153 | 
154 |     </body>
155 | </html>
156 | 


--------------------------------------------------------------------------------
/watch:
--------------------------------------------------------------------------------
1 | npm run watch
2 | 


--------------------------------------------------------------------------------