nprogress-rails 0.1.2.3 → 0.1.3.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: ae6045eecffda679b9025fa592965f34b83e06af
4
- data.tar.gz: 4e639af6a98e4ea9fc35b5c119a8c6b71b3a224f
3
+ metadata.gz: 261db801b935edcfac7746e803dab06b69127599
4
+ data.tar.gz: 3d6c2634d465e766d1de036d54ec22b6899d5fe1
5
5
  SHA512:
6
- metadata.gz: 15493bad019fbf4061cbcc525d4e9f80b2dfcc963875da7e5e6a434a59b4c3af1c137de75909fec3160a9aca2bd802618e8b65c05c9504b9378377a865a7e56a
7
- data.tar.gz: e2c2c0a2814786d2cacf1ab80224e531c409c5badbf907a2553140441948a7ebd83fae9c1842b59ad4ef6e92e730c78887d0edf5f35116917dfd5715c3e06127
6
+ metadata.gz: 9f535bce837e0f27a93cb9db21324fc2f7603e1fc4a665edee1708794f1fa8024bd074dde5f02686d014d94c46be5ccc250c0737c415326e2892095045d092b6
7
+ data.tar.gz: 32e7de0350ca750f49e13d989b4c100a0d1cafe8faf220ac6829272a530ebdce909a21f3b303684fbe51f0f488528ed1125a035567fe2705b698a14814140133
data/README.md CHANGED
@@ -44,9 +44,8 @@ you will have to deal with show/hide the progress by your own.
44
44
  Also, into your `application.css.scss` file:
45
45
 
46
46
  ```scss
47
- $nprogress-color: #f1f1f1; // if you want to change the color
48
- @import 'nprogress';
49
- @import 'nprogress-bootstrap';
47
+ *= require nprogress
48
+ *= require nprogress-bootstrap
50
49
  ```
51
50
 
52
51
  The `nprogress-bootstrap` is required if you use bootstrap and have a fixed
@@ -74,6 +73,14 @@ NProgress.configure
74
73
  speed: 500
75
74
  ```
76
75
 
76
+ Since the [v0.1.2.3 release](https://github.com/caarlos0/nprogress-rails/releases/tag/v0.1.2.3),
77
+ you can also change the color of the progressbar using SASS:
78
+
79
+ ```scss
80
+ $nprogress-color: #f1f1f1;
81
+ @import 'nprogress';
82
+ @import 'nprogress-bootstrap';
83
+ ```
77
84
 
78
85
  ## Contributing
79
86
 
@@ -0,0 +1,468 @@
1
+ /*! NProgress (c) 2013, Rico Sta. Cruz
2
+ * http://ricostacruz.com/nprogress */
3
+
4
+ ;(function(factory) {
5
+
6
+ if (typeof module === 'function') {
7
+ module.exports = factory();
8
+ } else if (typeof define === 'function' && define.amd) {
9
+ define(factory);
10
+ } else {
11
+ this.NProgress = factory();
12
+ }
13
+
14
+ })(function() {
15
+ var NProgress = {};
16
+
17
+ NProgress.version = '0.1.3';
18
+
19
+ var Settings = NProgress.settings = {
20
+ minimum: 0.08,
21
+ easing: 'ease',
22
+ positionUsing: '',
23
+ speed: 200,
24
+ trickle: true,
25
+ trickleRate: 0.02,
26
+ trickleSpeed: 800,
27
+ showSpinner: true,
28
+ barSelector: '[role="bar"]',
29
+ spinnerSelector: '[role="spinner"]',
30
+ template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
31
+ };
32
+
33
+ /**
34
+ * Updates configuration.
35
+ *
36
+ * NProgress.configure({
37
+ * minimum: 0.1
38
+ * });
39
+ */
40
+ NProgress.configure = function(options) {
41
+ var key, value;
42
+ for (key in options) {
43
+ value = options[key];
44
+ if (value !== undefined && options.hasOwnProperty(key)) Settings[key] = value;
45
+ }
46
+
47
+ return this;
48
+ };
49
+
50
+ /**
51
+ * Last number.
52
+ */
53
+
54
+ NProgress.status = null;
55
+
56
+ /**
57
+ * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.
58
+ *
59
+ * NProgress.set(0.4);
60
+ * NProgress.set(1.0);
61
+ */
62
+
63
+ NProgress.set = function(n) {
64
+ var started = NProgress.isStarted();
65
+
66
+ n = clamp(n, Settings.minimum, 1);
67
+ NProgress.status = (n === 1 ? null : n);
68
+
69
+ var progress = NProgress.render(!started),
70
+ bar = progress.querySelector(Settings.barSelector),
71
+ speed = Settings.speed,
72
+ ease = Settings.easing;
73
+
74
+ progress.offsetWidth; /* Repaint */
75
+
76
+ queue(function(next) {
77
+ // Set positionUsing if it hasn't already been set
78
+ if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS();
79
+
80
+ // Add transition
81
+ css(bar, barPositionCSS(n, speed, ease));
82
+
83
+ if (n === 1) {
84
+ // Fade out
85
+ css(progress, {
86
+ transition: 'none',
87
+ opacity: 1
88
+ });
89
+ progress.offsetWidth; /* Repaint */
90
+
91
+ setTimeout(function() {
92
+ css(progress, {
93
+ transition: 'all ' + speed + 'ms linear',
94
+ opacity: 0
95
+ });
96
+ setTimeout(function() {
97
+ NProgress.remove();
98
+ next();
99
+ }, speed);
100
+ }, speed);
101
+ } else {
102
+ setTimeout(next, speed);
103
+ }
104
+ });
105
+
106
+ return this;
107
+ };
108
+
109
+ NProgress.isStarted = function() {
110
+ return typeof NProgress.status === 'number';
111
+ };
112
+
113
+ /**
114
+ * Shows the progress bar.
115
+ * This is the same as setting the status to 0%, except that it doesn't go backwards.
116
+ *
117
+ * NProgress.start();
118
+ *
119
+ */
120
+ NProgress.start = function() {
121
+ if (!NProgress.status) NProgress.set(0);
122
+
123
+ var work = function() {
124
+ setTimeout(function() {
125
+ if (!NProgress.status) return;
126
+ NProgress.trickle();
127
+ work();
128
+ }, Settings.trickleSpeed);
129
+ };
130
+
131
+ if (Settings.trickle) work();
132
+
133
+ return this;
134
+ };
135
+
136
+ /**
137
+ * Hides the progress bar.
138
+ * This is the *sort of* the same as setting the status to 100%, with the
139
+ * difference being `done()` makes some placebo effect of some realistic motion.
140
+ *
141
+ * NProgress.done();
142
+ *
143
+ * If `true` is passed, it will show the progress bar even if its hidden.
144
+ *
145
+ * NProgress.done(true);
146
+ */
147
+
148
+ NProgress.done = function(force) {
149
+ if (!force && !NProgress.status) return this;
150
+
151
+ return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
152
+ };
153
+
154
+ /**
155
+ * Increments by a random amount.
156
+ */
157
+
158
+ NProgress.inc = function(amount) {
159
+ var n = NProgress.status;
160
+
161
+ if (!n) {
162
+ return NProgress.start();
163
+ } else {
164
+ if (typeof amount !== 'number') {
165
+ amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
166
+ }
167
+
168
+ n = clamp(n + amount, 0, 0.994);
169
+ return NProgress.set(n);
170
+ }
171
+ };
172
+
173
+ NProgress.trickle = function() {
174
+ return NProgress.inc(Math.random() * Settings.trickleRate);
175
+ };
176
+
177
+ /**
178
+ * Waits for all supplied jQuery promises and
179
+ * increases the progress as the promises resolve.
180
+ *
181
+ * @param $promise jQUery Promise
182
+ */
183
+ (function() {
184
+ var initial = 0, current = 0;
185
+
186
+ NProgress.promise = function($promise) {
187
+ if (!$promise || $promise.state() == "resolved") {
188
+ return this;
189
+ }
190
+
191
+ if (current == 0) {
192
+ NProgress.start();
193
+ }
194
+
195
+ initial++;
196
+ current++;
197
+
198
+ $promise.always(function() {
199
+ current--;
200
+ if (current == 0) {
201
+ initial = 0;
202
+ NProgress.done();
203
+ } else {
204
+ NProgress.set((initial - current) / initial);
205
+ }
206
+ });
207
+
208
+ return this;
209
+ };
210
+
211
+ })();
212
+
213
+ /**
214
+ * (Internal) renders the progress bar markup based on the `template`
215
+ * setting.
216
+ */
217
+
218
+ NProgress.render = function(fromStart) {
219
+ if (NProgress.isRendered()) return document.getElementById('nprogress');
220
+
221
+ addClass(document.documentElement, 'nprogress-busy');
222
+
223
+ var progress = document.createElement('div');
224
+ progress.id = 'nprogress';
225
+ progress.innerHTML = Settings.template;
226
+
227
+ var bar = progress.querySelector(Settings.barSelector),
228
+ perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0),
229
+ spinner;
230
+
231
+ css(bar, {
232
+ transition: 'all 0 linear',
233
+ transform: 'translate3d(' + perc + '%,0,0)'
234
+ });
235
+
236
+ if (!Settings.showSpinner) {
237
+ spinner = progress.querySelector(Settings.spinnerSelector);
238
+ spinner && removeElement(spinner);
239
+ }
240
+
241
+ document.body.appendChild(progress);
242
+ return progress;
243
+ };
244
+
245
+ /**
246
+ * Removes the element. Opposite of render().
247
+ */
248
+
249
+ NProgress.remove = function() {
250
+ removeClass(document.documentElement, 'nprogress-busy');
251
+ var progress = document.getElementById('nprogress');
252
+ progress && removeElement(progress);
253
+ };
254
+
255
+ /**
256
+ * Checks if the progress bar is rendered.
257
+ */
258
+
259
+ NProgress.isRendered = function() {
260
+ return !!document.getElementById('nprogress');
261
+ };
262
+
263
+ /**
264
+ * Determine which positioning CSS rule to use.
265
+ */
266
+
267
+ NProgress.getPositioningCSS = function() {
268
+ // Sniff on document.body.style
269
+ var bodyStyle = document.body.style;
270
+
271
+ // Sniff prefixes
272
+ var vendorPrefix = ('WebkitTransform' in bodyStyle) ? 'Webkit' :
273
+ ('MozTransform' in bodyStyle) ? 'Moz' :
274
+ ('msTransform' in bodyStyle) ? 'ms' :
275
+ ('OTransform' in bodyStyle) ? 'O' : '';
276
+
277
+ if (vendorPrefix + 'Perspective' in bodyStyle) {
278
+ // Modern browsers with 3D support, e.g. Webkit, IE10
279
+ return 'translate3d';
280
+ } else if (vendorPrefix + 'Transform' in bodyStyle) {
281
+ // Browsers without 3D support, e.g. IE9
282
+ return 'translate';
283
+ } else {
284
+ // Browsers without translate() support, e.g. IE7-8
285
+ return 'margin';
286
+ }
287
+ };
288
+
289
+ /**
290
+ * Helpers
291
+ */
292
+
293
+ function clamp(n, min, max) {
294
+ if (n < min) return min;
295
+ if (n > max) return max;
296
+ return n;
297
+ }
298
+
299
+ /**
300
+ * (Internal) converts a percentage (`0..1`) to a bar translateX
301
+ * percentage (`-100%..0%`).
302
+ */
303
+
304
+ function toBarPerc(n) {
305
+ return (-1 + n) * 100;
306
+ }
307
+
308
+
309
+ /**
310
+ * (Internal) returns the correct CSS for changing the bar's
311
+ * position given an n percentage, and speed and ease from Settings
312
+ */
313
+
314
+ function barPositionCSS(n, speed, ease) {
315
+ var barCSS;
316
+
317
+ if (Settings.positionUsing === 'translate3d') {
318
+ barCSS = { transform: 'translate3d('+toBarPerc(n)+'%,0,0)' };
319
+ } else if (Settings.positionUsing === 'translate') {
320
+ barCSS = { transform: 'translate('+toBarPerc(n)+'%,0)' };
321
+ } else {
322
+ barCSS = { 'margin-left': toBarPerc(n)+'%' };
323
+ }
324
+
325
+ barCSS.transition = 'all '+speed+'ms '+ease;
326
+
327
+ return barCSS;
328
+ }
329
+
330
+ /**
331
+ * (Internal) Queues a function to be executed.
332
+ */
333
+
334
+ var queue = (function() {
335
+ var pending = [];
336
+
337
+ function next() {
338
+ var fn = pending.shift();
339
+ if (fn) {
340
+ fn(next);
341
+ }
342
+ }
343
+
344
+ return function(fn) {
345
+ pending.push(fn);
346
+ if (pending.length == 1) next();
347
+ };
348
+ })();
349
+
350
+ /**
351
+ * (Internal) Applies css properties to an element, similar to the jQuery
352
+ * css method.
353
+ *
354
+ * While this helper does assist with vendor prefixed property names, it
355
+ * does not perform any manipulation of values prior to setting styles.
356
+ */
357
+
358
+ var css = (function() {
359
+ var cssPrefixes = [ 'Webkit', 'O', 'Moz', 'ms' ],
360
+ cssProps = {};
361
+
362
+ function camelCase(string) {
363
+ return string.replace(/^-ms-/, 'ms-').replace(/-([\da-z])/gi, function(match, letter) {
364
+ return letter.toUpperCase();
365
+ });
366
+ }
367
+
368
+ function getVendorProp(name) {
369
+ var style = document.body.style;
370
+ if (name in style) return name;
371
+
372
+ var i = cssPrefixes.length,
373
+ capName = name.charAt(0).toUpperCase() + name.slice(1),
374
+ vendorName;
375
+ while (i--) {
376
+ vendorName = cssPrefixes[i] + capName;
377
+ if (vendorName in style) return vendorName;
378
+ }
379
+
380
+ return name;
381
+ }
382
+
383
+ function getStyleProp(name) {
384
+ name = camelCase(name);
385
+ return cssProps[name] || (cssProps[name] = getVendorProp(name));
386
+ }
387
+
388
+ function applyCss(element, prop, value) {
389
+ prop = getStyleProp(prop);
390
+ element.style[prop] = value;
391
+ }
392
+
393
+ return function(element, properties) {
394
+ var args = arguments,
395
+ prop,
396
+ value;
397
+
398
+ if (args.length == 2) {
399
+ for (prop in properties) {
400
+ value = properties[prop];
401
+ if (value !== undefined && properties.hasOwnProperty(prop)) applyCss(element, prop, value);
402
+ }
403
+ } else {
404
+ applyCss(element, args[1], args[2]);
405
+ }
406
+ }
407
+ })();
408
+
409
+ /**
410
+ * (Internal) Determines if an element or space separated list of class names contains a class name.
411
+ */
412
+
413
+ function hasClass(element, name) {
414
+ var list = typeof element == 'string' ? element : classList(element);
415
+ return list.indexOf(' ' + name + ' ') >= 0;
416
+ }
417
+
418
+ /**
419
+ * (Internal) Adds a class to an element.
420
+ */
421
+
422
+ function addClass(element, name) {
423
+ var oldList = classList(element),
424
+ newList = oldList + name;
425
+
426
+ if (hasClass(oldList, name)) return;
427
+
428
+ // Trim the opening space.
429
+ element.className = newList.substring(1);
430
+ }
431
+
432
+ /**
433
+ * (Internal) Removes a class from an element.
434
+ */
435
+
436
+ function removeClass(element, name) {
437
+ var oldList = classList(element),
438
+ newList;
439
+
440
+ if (!hasClass(element, name)) return;
441
+
442
+ // Replace the class name.
443
+ newList = oldList.replace(' ' + name + ' ', ' ');
444
+
445
+ // Trim the opening and closing spaces.
446
+ element.className = newList.substring(1, newList.length - 1);
447
+ }
448
+
449
+ /**
450
+ * (Internal) Gets a space separated list of the class names on the element.
451
+ * The list is wrapped with a single space on each end to facilitate finding
452
+ * matches within the list.
453
+ */
454
+
455
+ function classList(element) {
456
+ return (' ' + (element.className || '') + ' ').replace(/\s+/gi, ' ');
457
+ }
458
+
459
+ /**
460
+ * (Internal) Removes an element from the DOM.
461
+ */
462
+
463
+ function removeElement(element) {
464
+ element && element.parentNode && element.parentNode.removeChild(element);
465
+ }
466
+
467
+ return NProgress;
468
+ });
@@ -0,0 +1,65 @@
1
+ $nprogress-color: #29d !default;
2
+
3
+ /* Make clicks pass-through */
4
+ #nprogress {
5
+ pointer-events: none;
6
+ }
7
+
8
+ #nprogress .bar {
9
+ background: $nprogress-color;
10
+
11
+ position: fixed;
12
+ z-index: 100;
13
+ top: 0;
14
+ left: 0;
15
+
16
+ width: 100%;
17
+ height: 2px;
18
+ }
19
+
20
+ /* Fancy blur effect */
21
+ #nprogress .peg {
22
+ display: block;
23
+ position: absolute;
24
+ right: 0px;
25
+ width: 100px;
26
+ height: 100%;
27
+ box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
28
+ opacity: 1.0;
29
+
30
+ -webkit-transform: rotate(3deg) translate(0px, -4px);
31
+ -ms-transform: rotate(3deg) translate(0px, -4px);
32
+ transform: rotate(3deg) translate(0px, -4px);
33
+ }
34
+
35
+ /* Remove these to get rid of the spinner */
36
+ #nprogress .spinner {
37
+ display: block;
38
+ position: fixed;
39
+ z-index: 100;
40
+ top: 15px;
41
+ right: 15px;
42
+ }
43
+
44
+ #nprogress .spinner-icon {
45
+ width: 18px;
46
+ height: 18px;
47
+ box-sizing: border-box;
48
+
49
+ border: solid 2px transparent;
50
+ border-top-color: $nprogress-color;
51
+ border-left-color: $nprogress-color;
52
+ border-radius: 50%;
53
+
54
+ -webkit-animation: nprogress-spinner 400ms linear infinite;
55
+ animation: nprogress-spinner 400ms linear infinite;
56
+ }
57
+
58
+ @-webkit-keyframes nprogress-spinner {
59
+ 0% { -webkit-transform: rotate(0deg); }
60
+ 100% { -webkit-transform: rotate(360deg); }
61
+ }
62
+ @keyframes nprogress-spinner {
63
+ 0% { transform: rotate(0deg); }
64
+ 100% { transform: rotate(360deg); }
65
+ }
@@ -4,7 +4,7 @@ $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
4
4
 
5
5
  Gem::Specification.new do |spec|
6
6
  spec.name = 'nprogress-rails'
7
- spec.version = '0.1.2.3'
7
+ spec.version = '0.1.3.0'
8
8
  spec.authors = ['Carlos Alexandro Becker']
9
9
  spec.email = ['caarlos0@gmail.com']
10
10
  spec.description = %q{This is a gem for the rstacruz' nprogress implementation. It's based on version nprogress 0.1.2.}
metadata CHANGED
@@ -1,69 +1,69 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: nprogress-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.2.3
4
+ version: 0.1.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Carlos Alexandro Becker
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2013-09-10 00:00:00.000000000 Z
11
+ date: 2014-05-11 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
15
15
  requirement: !ruby/object:Gem::Requirement
16
16
  requirements:
17
- - - ~>
17
+ - - "~>"
18
18
  - !ruby/object:Gem::Version
19
19
  version: '1.3'
20
20
  type: :development
21
21
  prerelease: false
22
22
  version_requirements: !ruby/object:Gem::Requirement
23
23
  requirements:
24
- - - ~>
24
+ - - "~>"
25
25
  - !ruby/object:Gem::Version
26
26
  version: '1.3'
27
27
  - !ruby/object:Gem::Dependency
28
28
  name: rake
29
29
  requirement: !ruby/object:Gem::Requirement
30
30
  requirements:
31
- - - '>='
31
+ - - ">="
32
32
  - !ruby/object:Gem::Version
33
33
  version: '0'
34
34
  type: :development
35
35
  prerelease: false
36
36
  version_requirements: !ruby/object:Gem::Requirement
37
37
  requirements:
38
- - - '>='
38
+ - - ">="
39
39
  - !ruby/object:Gem::Version
40
40
  version: '0'
41
41
  - !ruby/object:Gem::Dependency
42
42
  name: sass-rails
43
43
  requirement: !ruby/object:Gem::Requirement
44
44
  requirements:
45
- - - '>='
45
+ - - ">="
46
46
  - !ruby/object:Gem::Version
47
47
  version: '0'
48
48
  type: :development
49
49
  prerelease: false
50
50
  version_requirements: !ruby/object:Gem::Requirement
51
51
  requirements:
52
- - - '>='
52
+ - - ">="
53
53
  - !ruby/object:Gem::Version
54
54
  version: '0'
55
55
  - !ruby/object:Gem::Dependency
56
56
  name: sass
57
57
  requirement: !ruby/object:Gem::Requirement
58
58
  requirements:
59
- - - '>='
59
+ - - ">="
60
60
  - !ruby/object:Gem::Version
61
61
  version: '0'
62
62
  type: :development
63
63
  prerelease: false
64
64
  version_requirements: !ruby/object:Gem::Requirement
65
65
  requirements:
66
- - - '>='
66
+ - - ">="
67
67
  - !ruby/object:Gem::Version
68
68
  version: '0'
69
69
  description: This is a gem for the rstacruz' nprogress implementation. It's based
@@ -74,19 +74,19 @@ executables: []
74
74
  extensions: []
75
75
  extra_rdoc_files: []
76
76
  files:
77
- - .gitignore
77
+ - ".gitignore"
78
78
  - Gemfile
79
79
  - LICENSE.txt
80
80
  - README.md
81
81
  - Rakefile
82
+ - app/assets/javascripts/nprogress-ajax.js
83
+ - app/assets/javascripts/nprogress-pjax.js
84
+ - app/assets/javascripts/nprogress-turbolinks.js
85
+ - app/assets/javascripts/nprogress.js
86
+ - app/assets/stylesheets/nprogress-bootstrap.css
87
+ - app/assets/stylesheets/nprogress.css.scss
82
88
  - lib/nprogress-rails.rb
83
89
  - nprogress-rails.gemspec
84
- - vendor/assets/javascripts/nprogress-ajax.js
85
- - vendor/assets/javascripts/nprogress-pjax.js
86
- - vendor/assets/javascripts/nprogress-turbolinks.js
87
- - vendor/assets/javascripts/nprogress.js
88
- - vendor/assets/stylesheets/nprogress-bootstrap.css
89
- - vendor/assets/stylesheets/nprogress.css.scss
90
90
  homepage: https://github.com/caarlos0/nprogress-rails
91
91
  licenses:
92
92
  - MIT
@@ -97,17 +97,17 @@ require_paths:
97
97
  - lib
98
98
  required_ruby_version: !ruby/object:Gem::Requirement
99
99
  requirements:
100
- - - '>='
100
+ - - ">="
101
101
  - !ruby/object:Gem::Version
102
102
  version: '0'
103
103
  required_rubygems_version: !ruby/object:Gem::Requirement
104
104
  requirements:
105
- - - '>='
105
+ - - ">="
106
106
  - !ruby/object:Gem::Version
107
107
  version: '0'
108
108
  requirements: []
109
109
  rubyforge_project:
110
- rubygems_version: 2.0.2
110
+ rubygems_version: 2.2.2
111
111
  signing_key:
112
112
  specification_version: 4
113
113
  summary: Slim progress bars for Ajax'y applications. Inspired by Google, YouTube,
@@ -1,274 +0,0 @@
1
- /*! NProgress (c) 2013, Rico Sta. Cruz
2
- * http://ricostacruz.com/nprogress */
3
-
4
- ;(function(factory) {
5
-
6
- if (typeof module === 'function') {
7
- module.exports = factory(this.jQuery || require('jquery'));
8
- } else {
9
- this.NProgress = factory(this.jQuery);
10
- }
11
-
12
- })(function($) {
13
- var NProgress = {};
14
-
15
- NProgress.version = '0.1.2';
16
-
17
- var Settings = NProgress.settings = {
18
- minimum: 0.08,
19
- easing: 'ease',
20
- positionUsing: '',
21
- speed: 200,
22
- trickle: true,
23
- trickleRate: 0.02,
24
- trickleSpeed: 800,
25
- showSpinner: true,
26
- template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
27
- };
28
-
29
- /**
30
- * Updates configuration.
31
- *
32
- * NProgress.configure({
33
- * minimum: 0.1
34
- * });
35
- */
36
- NProgress.configure = function(options) {
37
- $.extend(Settings, options);
38
- return this;
39
- };
40
-
41
- /**
42
- * Last number.
43
- */
44
-
45
- NProgress.status = null;
46
-
47
- /**
48
- * Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.
49
- *
50
- * NProgress.set(0.4);
51
- * NProgress.set(1.0);
52
- */
53
-
54
- NProgress.set = function(n) {
55
- var started = NProgress.isStarted();
56
-
57
- n = clamp(n, Settings.minimum, 1);
58
- NProgress.status = (n === 1 ? null : n);
59
-
60
- var $progress = NProgress.render(!started),
61
- $bar = $progress.find('[role="bar"]'),
62
- speed = Settings.speed,
63
- ease = Settings.easing;
64
-
65
- $progress[0].offsetWidth; /* Repaint */
66
-
67
- $progress.queue(function(next) {
68
- // Set positionUsing if it hasn't already been set
69
- if (Settings.positionUsing === '') Settings.positionUsing = NProgress.getPositioningCSS();
70
-
71
- // Add transition
72
- $bar.css(barPositionCSS(n, speed, ease));
73
-
74
- if (n === 1) {
75
- // Fade out
76
- $progress.css({ transition: 'none', opacity: 1 });
77
- $progress[0].offsetWidth; /* Repaint */
78
-
79
- setTimeout(function() {
80
- $progress.css({ transition: 'all '+speed+'ms linear', opacity: 0 });
81
- setTimeout(function() {
82
- NProgress.remove();
83
- next();
84
- }, speed);
85
- }, speed);
86
- } else {
87
- setTimeout(next, speed);
88
- }
89
- });
90
-
91
- return this;
92
- };
93
-
94
- NProgress.isStarted = function() {
95
- return typeof NProgress.status === 'number';
96
- };
97
-
98
- /**
99
- * Shows the progress bar.
100
- * This is the same as setting the status to 0%, except that it doesn't go backwards.
101
- *
102
- * NProgress.start();
103
- *
104
- */
105
- NProgress.start = function() {
106
- if (!NProgress.status) NProgress.set(0);
107
-
108
- var work = function() {
109
- setTimeout(function() {
110
- if (!NProgress.status) return;
111
- NProgress.trickle();
112
- work();
113
- }, Settings.trickleSpeed);
114
- };
115
-
116
- if (Settings.trickle) work();
117
-
118
- return this;
119
- };
120
-
121
- /**
122
- * Hides the progress bar.
123
- * This is the *sort of* the same as setting the status to 100%, with the
124
- * difference being `done()` makes some placebo effect of some realistic motion.
125
- *
126
- * NProgress.done();
127
- *
128
- * If `true` is passed, it will show the progress bar even if its hidden.
129
- *
130
- * NProgress.done(true);
131
- */
132
-
133
- NProgress.done = function(force) {
134
- if (!force && !NProgress.status) return this;
135
-
136
- return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
137
- };
138
-
139
- /**
140
- * Increments by a random amount.
141
- */
142
-
143
- NProgress.inc = function(amount) {
144
- var n = NProgress.status;
145
-
146
- if (!n) {
147
- return NProgress.start();
148
- } else {
149
- if (typeof amount !== 'number') {
150
- amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
151
- }
152
-
153
- n = clamp(n + amount, 0, 0.994);
154
- return NProgress.set(n);
155
- }
156
- };
157
-
158
- NProgress.trickle = function() {
159
- return NProgress.inc(Math.random() * Settings.trickleRate);
160
- };
161
-
162
- /**
163
- * (Internal) renders the progress bar markup based on the `template`
164
- * setting.
165
- */
166
-
167
- NProgress.render = function(fromStart) {
168
- if (NProgress.isRendered()) return $("#nprogress");
169
- $('html').addClass('nprogress-busy');
170
-
171
- var $el = $("<div id='nprogress'>")
172
- .html(Settings.template);
173
-
174
- var perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0);
175
-
176
- $el.find('[role="bar"]').css({
177
- transition: 'all 0 linear',
178
- transform: 'translate3d('+perc+'%,0,0)'
179
- });
180
-
181
- if (!Settings.showSpinner)
182
- $el.find('[role="spinner"]').remove();
183
-
184
- $el.appendTo(document.body);
185
-
186
- return $el;
187
- };
188
-
189
- /**
190
- * Removes the element. Opposite of render().
191
- */
192
-
193
- NProgress.remove = function() {
194
- $('html').removeClass('nprogress-busy');
195
- $('#nprogress').remove();
196
- };
197
-
198
- /**
199
- * Checks if the progress bar is rendered.
200
- */
201
-
202
- NProgress.isRendered = function() {
203
- return ($("#nprogress").length > 0);
204
- };
205
-
206
- /**
207
- * Determine which positioning CSS rule to use.
208
- */
209
-
210
- NProgress.getPositioningCSS = function() {
211
- // Sniff on document.body.style
212
- var bodyStyle = document.body.style;
213
-
214
- // Sniff prefixes
215
- var vendorPrefix = ('WebkitTransform' in bodyStyle) ? 'Webkit' :
216
- ('MozTransform' in bodyStyle) ? 'Moz' :
217
- ('msTransform' in bodyStyle) ? 'ms' :
218
- ('OTransform' in bodyStyle) ? 'O' : '';
219
-
220
- if (vendorPrefix + 'Perspective' in bodyStyle) {
221
- // Modern browsers with 3D support, e.g. Webkit, IE10
222
- return 'translate3d';
223
- } else if (vendorPrefix + 'Transform' in bodyStyle) {
224
- // Browsers without 3D support, e.g. IE9
225
- return 'translate';
226
- } else {
227
- // Browsers without translate() support, e.g. IE7-8
228
- return 'margin';
229
- }
230
- };
231
-
232
- /**
233
- * Helpers
234
- */
235
-
236
- function clamp(n, min, max) {
237
- if (n < min) return min;
238
- if (n > max) return max;
239
- return n;
240
- }
241
-
242
- /**
243
- * (Internal) converts a percentage (`0..1`) to a bar translateX
244
- * percentage (`-100%..0%`).
245
- */
246
-
247
- function toBarPerc(n) {
248
- return (-1 + n) * 100;
249
- }
250
-
251
-
252
- /**
253
- * (Internal) returns the correct CSS for changing the bar's
254
- * position given an n percentage, and speed and ease from Settings
255
- */
256
-
257
- function barPositionCSS(n, speed, ease) {
258
- var barCSS;
259
-
260
- if (Settings.positionUsing === 'translate3d') {
261
- barCSS = { transform: 'translate3d('+toBarPerc(n)+'%,0,0)' };
262
- } else if (Settings.positionUsing === 'translate') {
263
- barCSS = { transform: 'translate('+toBarPerc(n)+'%,0)' };
264
- } else {
265
- barCSS = { 'margin-left': toBarPerc(n)+'%' };
266
- }
267
-
268
- barCSS.transition = 'all '+speed+'ms '+ease;
269
-
270
- return barCSS;
271
- }
272
-
273
- return NProgress;
274
- });
@@ -1,82 +0,0 @@
1
- $nprogress-color: #29d !default;
2
-
3
- /* Make clicks pass-through */
4
- #nprogress {
5
- pointer-events: none;
6
- -webkit-pointer-events: none;
7
- }
8
-
9
- #nprogress .bar {
10
- background: $nprogress-color;
11
-
12
- position: fixed;
13
- z-index: 100;
14
- top: 0;
15
- left: 0;
16
-
17
- width: 100%;
18
- height: 2px;
19
- }
20
-
21
- /* Fancy blur effect */
22
- #nprogress .peg {
23
- display: block;
24
- position: absolute;
25
- right: 0px;
26
- width: 100px;
27
- height: 100%;
28
- box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
29
- opacity: 1.0;
30
-
31
- -webkit-transform: rotate(3deg) translate(0px, -4px);
32
- -moz-transform: rotate(3deg) translate(0px, -4px);
33
- -ms-transform: rotate(3deg) translate(0px, -4px);
34
- -o-transform: rotate(3deg) translate(0px, -4px);
35
- transform: rotate(3deg) translate(0px, -4px);
36
- }
37
-
38
- /* Remove these to get rid of the spinner */
39
- #nprogress .spinner {
40
- display: block;
41
- position: fixed;
42
- z-index: 100;
43
- top: 15px;
44
- right: 15px;
45
- }
46
-
47
- #nprogress .spinner-icon {
48
- width: 14px;
49
- height: 14px;
50
-
51
- border: solid 2px transparent;
52
- border-top-color: $nprogress-color;
53
- border-left-color: $nprogress-color;
54
- border-radius: 10px;
55
-
56
- -webkit-animation: nprogress-spinner 400ms linear infinite;
57
- -moz-animation: nprogress-spinner 400ms linear infinite;
58
- -ms-animation: nprogress-spinner 400ms linear infinite;
59
- -o-animation: nprogress-spinner 400ms linear infinite;
60
- animation: nprogress-spinner 400ms linear infinite;
61
- }
62
-
63
- @-webkit-keyframes nprogress-spinner {
64
- 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
65
- 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
66
- }
67
- @-moz-keyframes nprogress-spinner {
68
- 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
69
- 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
70
- }
71
- @-o-keyframes nprogress-spinner {
72
- 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
73
- 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
74
- }
75
- @-ms-keyframes nprogress-spinner {
76
- 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
77
- 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
78
- }
79
- @keyframes nprogress-spinner {
80
- 0% { transform: rotate(0deg); transform: rotate(0deg); }
81
- 100% { transform: rotate(360deg); transform: rotate(360deg); }
82
- }