Skip to content

Commit 92e2e5d

Browse files
author
Nick Hwang
committed
Transpile helpers from pace and spec for utils
1 parent ef949a0 commit 92e2e5d

10 files changed

Lines changed: 1141 additions & 14 deletions

File tree

dist/js/defaultOptions.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/*
2+
* Default Options
3+
*/
4+
5+
'use strict';
6+
7+
Object.defineProperty(exports, '__esModule', {
8+
value: true
9+
});
10+
exports['default'] = {
11+
// How long should it take for the bar to animate to a new
12+
// point after receiving it
13+
catchupTime: 100,
14+
15+
// How quickly should the bar be moving before it has any progress
16+
// info from a new source in %/ms
17+
initialRate: 0.03,
18+
19+
// What is the minimum amount of time the bar should be on the
20+
// screen. Irrespective of this number, the bar will always be on screen for
21+
// 33 * (100 / maxProgressPerFrame) + ghostTime ms.
22+
minTime: 250,
23+
24+
// What is the minimum amount of time the bar should sit after the last
25+
// update before disappearing
26+
ghostTime: 100,
27+
28+
// Its easy for a bunch of the bar to be eaten in the first few frames
29+
// before we know how much there is to load. This limits how much of
30+
// the bar can be used per frame
31+
maxProgressPerFrame: 20,
32+
33+
// This tweaks the animation easing
34+
easeFactor: 1.25,
35+
36+
// Should pace automatically start when the page is loaded, or should it wait for `start` to
37+
// be called? Always false if pace is loaded with AMD or CommonJS.
38+
startOnPageLoad: true,
39+
40+
// Should we restart the browser when pushState or replaceState is called? (Generally
41+
// means ajax navigation has occured)
42+
restartOnPushState: true,
43+
44+
// Should we show the progress bar for every ajax request (not just regular or ajax-y page
45+
// navigation)? Set to false to disable.
46+
//
47+
// If so, how many ms does the request have to be running for before we show the progress?
48+
restartOnRequestAfter: 500,
49+
50+
// What element should the pace element be appended to on the page?
51+
target: 'body',
52+
53+
elements: {
54+
// How frequently in ms should we check for the elements being tested for
55+
// using the element monitor?
56+
checkInterval: 100,
57+
58+
// What elements should we wait for before deciding the page is fully loaded (not required)
59+
selectors: ['body']
60+
},
61+
62+
eventLag: {
63+
// When we first start measuring event lag, not much is going on in the browser yet, so it's
64+
// not uncommon for the numbers to be abnormally low for the first few samples. This configures
65+
// how many samples we need before we consider a low number to mean completion.
66+
minSamples: 10,
67+
68+
// How many samples should we average to decide what the current lag is?
69+
sampleCount: 3,
70+
71+
// Above how many ms of lag is the CPU considered busy?
72+
lagThreshold: 3
73+
},
74+
75+
ajax: {
76+
// Which HTTP methods should we track?
77+
trackMethods: ['GET'],
78+
79+
// Should we track web socket connections?
80+
trackWebSockets: true,
81+
82+
// A list of regular expressions or substrings of URLS we should ignore (for both tracking and restarting)
83+
ignoreURLs: []
84+
}
85+
};
86+
module.exports = exports['default'];

dist/js/pace.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
"use strict";

dist/js/utils.js

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
/*
2+
* Utils
3+
*
4+
* globals window performance
5+
*/
6+
7+
'use strict';
8+
9+
Object.defineProperty(exports, '__esModule', {
10+
value: true
11+
});
12+
function now() {
13+
if (typeof performance !== 'undefined' && typeof performance.now !== 'undefined') {
14+
return performance.now();
15+
}
16+
return +new Date();
17+
}
18+
19+
var requestAnimationFrame = undefined;
20+
var cancelAnimationFrame = undefined;
21+
if (typeof window !== 'undefined') {
22+
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
23+
cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
24+
}
25+
26+
if (typeof requestAnimationFrame === 'undefined') {
27+
requestAnimationFrame = function (fn) {
28+
return setTimeout(fn, 50);
29+
};
30+
cancelAnimationFrame = function (id) {
31+
return clearTimeout(id);
32+
};
33+
}
34+
35+
var runAnimation = function runAnimation(fn) {
36+
var last = now();
37+
var tick = function tick() {
38+
var diff = now() - last;
39+
if (diff >= 33) {
40+
last = now(); // Don't run faster than 30 fps
41+
return fn(diff, function () {
42+
return requestAnimationFrame(tick);
43+
});
44+
}
45+
return setTimeout(tick, 33 - diff);
46+
};
47+
return tick();
48+
};
49+
50+
function result(obj, key) {
51+
for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
52+
args[_key - 2] = arguments[_key];
53+
}
54+
55+
if (typeof obj[key] === 'function') {
56+
return obj[key].apply(obj, args);
57+
}
58+
return obj[key];
59+
}
60+
61+
function extend(out) {
62+
for (var _len2 = arguments.length, sources = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
63+
sources[_key2 - 1] = arguments[_key2];
64+
}
65+
66+
sources.forEach(function (source) {
67+
if (source) {
68+
for (var key in source) {
69+
if (({}).hasOwnProperty.call(source, key)) {
70+
var val = source[key];
71+
// NOTE: Checking for object may be sufficient...
72+
if (typeof out[key] !== 'undefined' && typeof out[key] === 'object' && typeof val !== 'undefined' && typeof val === 'object') {
73+
extend(out[key], val);
74+
} else {
75+
out[key] = val;
76+
}
77+
}
78+
}
79+
}
80+
});
81+
82+
return out;
83+
}
84+
85+
function average(arr) {
86+
var sum = 0;
87+
var count = 0;
88+
arr.forEach(function (v) {
89+
sum += Math.abs(v);
90+
++count;
91+
});
92+
return sum / count;
93+
}
94+
95+
function getFromDOM() {
96+
var key = arguments[0] === undefined ? 'options' : arguments[0];
97+
var json = arguments[1] === undefined ? true : arguments[1];
98+
99+
var el = document.querySelector('[data-pace-#{ key }]');
100+
101+
if (!el) {
102+
return;
103+
}
104+
105+
var data = el.getAttribute('data-pace-#{ key }');
106+
107+
if (!json) {
108+
return data;
109+
}
110+
111+
try {
112+
return JSON.parse(data);
113+
} catch (e) {
114+
if (typeof console !== 'undefined') {
115+
console.error('Error parsing inline pace options', e);
116+
}
117+
}
118+
}
119+
120+
exports['default'] = {
121+
now: now,
122+
requestAnimationFrame: requestAnimationFrame,
123+
cancelAnimationFrame: cancelAnimationFrame,
124+
runAnimation: runAnimation,
125+
result: result,
126+
extend: extend,
127+
average: average,
128+
getFromDOM: getFromDOM
129+
};
130+
module.exports = exports['default'];

gulpfile.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,18 @@ gulp.task('clean', function() {
2828

2929
// Javascript
3030
gulp.task('js', function() {
31-
gulp.src('./src/js/drop.js')
31+
gulp.src('./src/js/**/*.js')
3232
.pipe(babel())
33-
.pipe(umd(umdOptions))
34-
.pipe(header(banner))
33+
// .pipe(umd(umdOptions))
34+
// .pipe(header(banner))
3535

3636
// Original
3737
.pipe(gulp.dest(distDir + '/js'))
3838

3939
// Minified
40-
.pipe(uglify())
41-
.pipe(rename({suffix: '.min'}))
42-
.pipe(gulp.dest(distDir + '/js'));
40+
// .pipe(uglify())
41+
// .pipe(rename({suffix: '.min'}))
42+
// .pipe(gulp.dest(distDir + '/js'));
4343
});
4444

4545

package.json

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,28 @@
1616
"url": "git://github.com/HubSpot/pace.git"
1717
},
1818
"devDependencies": {
19-
"grunt-contrib-coffee": "~0.7.0",
19+
"chai": "^3.0.0",
2020
"coffee-script": "~1.6.3",
21-
"grunt-contrib-uglify": "~0.2.4",
22-
"grunt-cli": "~0.1.9",
23-
"grunt": "~0.4.1",
24-
"grunt-contrib-watch": "~0.5.3",
2521
"color": "~0.4.4",
26-
27-
"bower": "^1.4.1",
2822
"del": "^1.1.1",
23+
"grunt": "~0.4.1",
24+
"grunt-cli": "~0.1.9",
25+
"grunt-contrib-coffee": "~0.7.0",
26+
"grunt-contrib-uglify": "~0.2.4",
27+
"grunt-contrib-watch": "~0.5.3",
2928
"gulp": "^3.9.0",
3029
"gulp-autoprefixer": "^2.3.1",
3130
"gulp-babel": "^5.1.0",
3231
"gulp-bump": "^0.3.0",
3332
"gulp-header": "^1.2.2",
3433
"gulp-minify-css": "^1.1.6",
34+
"gulp-plumber": "^1.0.1",
3535
"gulp-rename": "^1.2.2",
3636
"gulp-sass": "^2.0.1",
3737
"gulp-uglify": "^1.2.0",
38-
"gulp-wrap-umd": "^0.2.1"
38+
"gulp-wrap-umd": "^0.2.1",
39+
"mocha": "^2.2.5",
40+
"sinon": "^1.15.3",
41+
"sinon-chai": "^2.8.0"
3942
}
4043
}

src/js/defaultOptions.js

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
* Default Options
3+
*/
4+
5+
export default {
6+
// How long should it take for the bar to animate to a new
7+
// point after receiving it
8+
catchupTime: 100,
9+
10+
// How quickly should the bar be moving before it has any progress
11+
// info from a new source in %/ms
12+
initialRate: 0.03,
13+
14+
// What is the minimum amount of time the bar should be on the
15+
// screen. Irrespective of this number, the bar will always be on screen for
16+
// 33 * (100 / maxProgressPerFrame) + ghostTime ms.
17+
minTime: 250,
18+
19+
// What is the minimum amount of time the bar should sit after the last
20+
// update before disappearing
21+
ghostTime: 100,
22+
23+
// Its easy for a bunch of the bar to be eaten in the first few frames
24+
// before we know how much there is to load. This limits how much of
25+
// the bar can be used per frame
26+
maxProgressPerFrame: 20,
27+
28+
// This tweaks the animation easing
29+
easeFactor: 1.25,
30+
31+
// Should pace automatically start when the page is loaded, or should it wait for `start` to
32+
// be called? Always false if pace is loaded with AMD or CommonJS.
33+
startOnPageLoad: true,
34+
35+
// Should we restart the browser when pushState or replaceState is called? (Generally
36+
// means ajax navigation has occured)
37+
restartOnPushState: true,
38+
39+
// Should we show the progress bar for every ajax request (not just regular or ajax-y page
40+
// navigation)? Set to false to disable.
41+
//
42+
// If so, how many ms does the request have to be running for before we show the progress?
43+
restartOnRequestAfter: 500,
44+
45+
// What element should the pace element be appended to on the page?
46+
target: 'body',
47+
48+
elements: {
49+
// How frequently in ms should we check for the elements being tested for
50+
// using the element monitor?
51+
checkInterval: 100,
52+
53+
// What elements should we wait for before deciding the page is fully loaded (not required)
54+
selectors: ['body']
55+
},
56+
57+
eventLag: {
58+
// When we first start measuring event lag, not much is going on in the browser yet, so it's
59+
// not uncommon for the numbers to be abnormally low for the first few samples. This configures
60+
// how many samples we need before we consider a low number to mean completion.
61+
minSamples: 10,
62+
63+
// How many samples should we average to decide what the current lag is?
64+
sampleCount: 3,
65+
66+
// Above how many ms of lag is the CPU considered busy?
67+
lagThreshold: 3
68+
},
69+
70+
ajax: {
71+
// Which HTTP methods should we track?
72+
trackMethods: ['GET'],
73+
74+
// Should we track web socket connections?
75+
trackWebSockets: true,
76+
77+
// A list of regular expressions or substrings of URLS we should ignore (for both tracking and restarting)
78+
ignoreURLs: []
79+
}
80+
};

0 commit comments

Comments
 (0)