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 +4 -4
- data/README.md +10 -3
- data/{vendor → app}/assets/javascripts/nprogress-ajax.js +0 -0
- data/{vendor → app}/assets/javascripts/nprogress-pjax.js +0 -0
- data/{vendor → app}/assets/javascripts/nprogress-turbolinks.js +0 -0
- data/app/assets/javascripts/nprogress.js +468 -0
- data/{vendor → app}/assets/stylesheets/nprogress-bootstrap.css +0 -0
- data/app/assets/stylesheets/nprogress.css.scss +65 -0
- data/nprogress-rails.gemspec +1 -1
- metadata +20 -20
- data/vendor/assets/javascripts/nprogress.js +0 -274
- data/vendor/assets/stylesheets/nprogress.css.scss +0 -82
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 261db801b935edcfac7746e803dab06b69127599
|
4
|
+
data.tar.gz: 3d6c2634d465e766d1de036d54ec22b6899d5fe1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
-
|
48
|
-
|
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
|
|
File without changes
|
File without changes
|
File without changes
|
@@ -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
|
+
});
|
File without changes
|
@@ -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
|
+
}
|
data/nprogress-rails.gemspec
CHANGED
@@ -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.
|
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.
|
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:
|
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.
|
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
|
-
}
|