Created
March 8, 2018 22:24
-
-
Save nolanlawson/ccc5e52a16c02374b8ae92a042a24bcd to your computer and use it in GitHub Desktop.
Pace.js test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE HTML> | |
<html lang=en> | |
<head> | |
<title>Pace.js demo</title> | |
<link rel="stylesheet" href="pace-theme-loading-bar.css" /> | |
</head> | |
<body> | |
<h1>Pace.js demo</h1> | |
<script src="pace.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* This is a compiled file, you should be editing the file in the templates directory */ | |
.pace { | |
-webkit-pointer-events: none; | |
pointer-events: none; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
user-select: none; | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
-o-box-sizing: border-box; | |
box-sizing: border-box; | |
-webkit-border-radius: 10px; | |
-moz-border-radius: 10px; | |
border-radius: 10px; | |
-webkit-background-clip: padding-box; | |
-moz-background-clip: padding; | |
background-clip: padding-box; | |
z-index: 2000; | |
position: fixed; | |
margin: auto; | |
top: 12px; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
width: 200px; | |
height: 50px; | |
overflow: hidden; | |
} | |
.pace .pace-progress { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-ms-box-sizing: border-box; | |
-o-box-sizing: border-box; | |
box-sizing: border-box; | |
-webkit-border-radius: 2px; | |
-moz-border-radius: 2px; | |
border-radius: 2px; | |
-webkit-background-clip: padding-box; | |
-moz-background-clip: padding; | |
background-clip: padding-box; | |
-webkit-transform: translate3d(0, 0, 0); | |
transform: translate3d(0, 0, 0); | |
display: block; | |
position: absolute; | |
right: 100%; | |
margin-right: -7px; | |
width: 93%; | |
top: 7px; | |
height: 14px; | |
font-size: 12px; | |
background: #000000; | |
color: #000000; | |
line-height: 60px; | |
font-weight: bold; | |
font-family: Helvetica, Arial, "Lucida Grande", sans-serif; | |
-webkit-box-shadow: 120px 0 #fff, 240px 0 #fff; | |
-ms-box-shadow: 120px 0 #fff, 240px 0 #fff; | |
box-shadow: 120px 0 #fff, 240px 0 #fff; | |
} | |
.pace .pace-progress:after { | |
content: attr(data-progress-text); | |
display: inline-block; | |
position: fixed; | |
width: 45px; | |
text-align: right; | |
right: 0; | |
padding-right: 16px; | |
top: 4px; | |
} | |
.pace .pace-progress[data-progress-text="0%"]:after { right: -200px } | |
.pace .pace-progress[data-progress-text="1%"]:after { right: -198.14px } | |
.pace .pace-progress[data-progress-text="2%"]:after { right: -196.28px } | |
.pace .pace-progress[data-progress-text="3%"]:after { right: -194.42px } | |
.pace .pace-progress[data-progress-text="4%"]:after { right: -192.56px } | |
.pace .pace-progress[data-progress-text="5%"]:after { right: -190.7px } | |
.pace .pace-progress[data-progress-text="6%"]:after { right: -188.84px } | |
.pace .pace-progress[data-progress-text="7%"]:after { right: -186.98px } | |
.pace .pace-progress[data-progress-text="8%"]:after { right: -185.12px } | |
.pace .pace-progress[data-progress-text="9%"]:after { right: -183.26px } | |
.pace .pace-progress[data-progress-text="10%"]:after { right: -181.4px } | |
.pace .pace-progress[data-progress-text="11%"]:after { right: -179.54px } | |
.pace .pace-progress[data-progress-text="12%"]:after { right: -177.68px } | |
.pace .pace-progress[data-progress-text="13%"]:after { right: -175.82px } | |
.pace .pace-progress[data-progress-text="14%"]:after { right: -173.96px } | |
.pace .pace-progress[data-progress-text="15%"]:after { right: -172.1px } | |
.pace .pace-progress[data-progress-text="16%"]:after { right: -170.24px } | |
.pace .pace-progress[data-progress-text="17%"]:after { right: -168.38px } | |
.pace .pace-progress[data-progress-text="18%"]:after { right: -166.52px } | |
.pace .pace-progress[data-progress-text="19%"]:after { right: -164.66px } | |
.pace .pace-progress[data-progress-text="20%"]:after { right: -162.8px } | |
.pace .pace-progress[data-progress-text="21%"]:after { right: -160.94px } | |
.pace .pace-progress[data-progress-text="22%"]:after { right: -159.08px } | |
.pace .pace-progress[data-progress-text="23%"]:after { right: -157.22px } | |
.pace .pace-progress[data-progress-text="24%"]:after { right: -155.36px } | |
.pace .pace-progress[data-progress-text="25%"]:after { right: -153.5px } | |
.pace .pace-progress[data-progress-text="26%"]:after { right: -151.64px } | |
.pace .pace-progress[data-progress-text="27%"]:after { right: -149.78px } | |
.pace .pace-progress[data-progress-text="28%"]:after { right: -147.92px } | |
.pace .pace-progress[data-progress-text="29%"]:after { right: -146.06px } | |
.pace .pace-progress[data-progress-text="30%"]:after { right: -144.2px } | |
.pace .pace-progress[data-progress-text="31%"]:after { right: -142.34px } | |
.pace .pace-progress[data-progress-text="32%"]:after { right: -140.48px } | |
.pace .pace-progress[data-progress-text="33%"]:after { right: -138.62px } | |
.pace .pace-progress[data-progress-text="34%"]:after { right: -136.76px } | |
.pace .pace-progress[data-progress-text="35%"]:after { right: -134.9px } | |
.pace .pace-progress[data-progress-text="36%"]:after { right: -133.04px } | |
.pace .pace-progress[data-progress-text="37%"]:after { right: -131.18px } | |
.pace .pace-progress[data-progress-text="38%"]:after { right: -129.32px } | |
.pace .pace-progress[data-progress-text="39%"]:after { right: -127.46px } | |
.pace .pace-progress[data-progress-text="40%"]:after { right: -125.6px } | |
.pace .pace-progress[data-progress-text="41%"]:after { right: -123.74px } | |
.pace .pace-progress[data-progress-text="42%"]:after { right: -121.88px } | |
.pace .pace-progress[data-progress-text="43%"]:after { right: -120.02px } | |
.pace .pace-progress[data-progress-text="44%"]:after { right: -118.16px } | |
.pace .pace-progress[data-progress-text="45%"]:after { right: -116.3px } | |
.pace .pace-progress[data-progress-text="46%"]:after { right: -114.44px } | |
.pace .pace-progress[data-progress-text="47%"]:after { right: -112.58px } | |
.pace .pace-progress[data-progress-text="48%"]:after { right: -110.72px } | |
.pace .pace-progress[data-progress-text="49%"]:after { right: -108.86px } | |
.pace .pace-progress[data-progress-text="50%"]:after { right: -107px } | |
.pace .pace-progress[data-progress-text="51%"]:after { right: -105.14px } | |
.pace .pace-progress[data-progress-text="52%"]:after { right: -103.28px } | |
.pace .pace-progress[data-progress-text="53%"]:after { right: -101.42px } | |
.pace .pace-progress[data-progress-text="54%"]:after { right: -99.56px } | |
.pace .pace-progress[data-progress-text="55%"]:after { right: -97.7px } | |
.pace .pace-progress[data-progress-text="56%"]:after { right: -95.84px } | |
.pace .pace-progress[data-progress-text="57%"]:after { right: -93.98px } | |
.pace .pace-progress[data-progress-text="58%"]:after { right: -92.12px } | |
.pace .pace-progress[data-progress-text="59%"]:after { right: -90.26px } | |
.pace .pace-progress[data-progress-text="60%"]:after { right: -88.4px } | |
.pace .pace-progress[data-progress-text="61%"]:after { right: -86.53999999999999px } | |
.pace .pace-progress[data-progress-text="62%"]:after { right: -84.68px } | |
.pace .pace-progress[data-progress-text="63%"]:after { right: -82.82px } | |
.pace .pace-progress[data-progress-text="64%"]:after { right: -80.96000000000001px } | |
.pace .pace-progress[data-progress-text="65%"]:after { right: -79.1px } | |
.pace .pace-progress[data-progress-text="66%"]:after { right: -77.24px } | |
.pace .pace-progress[data-progress-text="67%"]:after { right: -75.38px } | |
.pace .pace-progress[data-progress-text="68%"]:after { right: -73.52px } | |
.pace .pace-progress[data-progress-text="69%"]:after { right: -71.66px } | |
.pace .pace-progress[data-progress-text="70%"]:after { right: -69.8px } | |
.pace .pace-progress[data-progress-text="71%"]:after { right: -67.94px } | |
.pace .pace-progress[data-progress-text="72%"]:after { right: -66.08px } | |
.pace .pace-progress[data-progress-text="73%"]:after { right: -64.22px } | |
.pace .pace-progress[data-progress-text="74%"]:after { right: -62.36px } | |
.pace .pace-progress[data-progress-text="75%"]:after { right: -60.5px } | |
.pace .pace-progress[data-progress-text="76%"]:after { right: -58.64px } | |
.pace .pace-progress[data-progress-text="77%"]:after { right: -56.78px } | |
.pace .pace-progress[data-progress-text="78%"]:after { right: -54.92px } | |
.pace .pace-progress[data-progress-text="79%"]:after { right: -53.06px } | |
.pace .pace-progress[data-progress-text="80%"]:after { right: -51.2px } | |
.pace .pace-progress[data-progress-text="81%"]:after { right: -49.34px } | |
.pace .pace-progress[data-progress-text="82%"]:after { right: -47.480000000000004px } | |
.pace .pace-progress[data-progress-text="83%"]:after { right: -45.62px } | |
.pace .pace-progress[data-progress-text="84%"]:after { right: -43.76px } | |
.pace .pace-progress[data-progress-text="85%"]:after { right: -41.9px } | |
.pace .pace-progress[data-progress-text="86%"]:after { right: -40.04px } | |
.pace .pace-progress[data-progress-text="87%"]:after { right: -38.18px } | |
.pace .pace-progress[data-progress-text="88%"]:after { right: -36.32px } | |
.pace .pace-progress[data-progress-text="89%"]:after { right: -34.46px } | |
.pace .pace-progress[data-progress-text="90%"]:after { right: -32.6px } | |
.pace .pace-progress[data-progress-text="91%"]:after { right: -30.740000000000002px } | |
.pace .pace-progress[data-progress-text="92%"]:after { right: -28.880000000000003px } | |
.pace .pace-progress[data-progress-text="93%"]:after { right: -27.02px } | |
.pace .pace-progress[data-progress-text="94%"]:after { right: -25.16px } | |
.pace .pace-progress[data-progress-text="95%"]:after { right: -23.3px } | |
.pace .pace-progress[data-progress-text="96%"]:after { right: -21.439999999999998px } | |
.pace .pace-progress[data-progress-text="97%"]:after { right: -19.58px } | |
.pace .pace-progress[data-progress-text="98%"]:after { right: -17.72px } | |
.pace .pace-progress[data-progress-text="99%"]:after { right: -15.86px } | |
.pace .pace-progress[data-progress-text="100%"]:after { right: -14px } | |
.pace .pace-activity { | |
position: absolute; | |
width: 100%; | |
height: 28px; | |
z-index: 2001; | |
box-shadow: inset 0 0 0 2px #000000, inset 0 0 0 7px #FFF; | |
border-radius: 10px; | |
} | |
.pace.pace-inactive { | |
display: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function() { | |
var AjaxMonitor, Bar, DocumentMonitor, ElementMonitor, ElementTracker, EventLagMonitor, Evented, Events, NoTargetError, Pace, RequestIntercept, SOURCE_KEYS, Scaler, SocketRequestTracker, XHRRequestTracker, animation, avgAmplitude, bar, cancelAnimation, defaultOptions, extend, extendNative, getFromDOM, getIntercept, handlePushState, ignoreStack, init, now, options, result, runAnimation, scalers, shouldIgnoreURL, shouldTrack, source, sources, uniScaler, _WebSocket, _XDomainRequest, _XMLHttpRequest, _i, _intercept, _len, _pushState, _ref, _ref1, _replaceState, | |
__slice = [].slice, | |
__hasProp = {}.hasOwnProperty, | |
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }, | |
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; | |
defaultOptions = { | |
catchupTime: 100, | |
initialRate: .03, | |
minTime: 250, | |
ghostTime: 100, | |
maxProgressPerFrame: 20, | |
easeFactor: 1.25, | |
startOnPageLoad: true, | |
restartOnPushState: true, | |
restartOnRequestAfter: 500, | |
target: 'body', | |
elements: { | |
checkInterval: 100, | |
selectors: ['body'] | |
}, | |
eventLag: { | |
minSamples: 10, | |
sampleCount: 3, | |
lagThreshold: 3 | |
} | |
}; | |
now = function() { | |
var _ref; | |
return (_ref = typeof performance !== "undefined" && performance !== null ? typeof performance.now === "function" ? performance.now() : void 0 : void 0) != null ? _ref : +(new Date); | |
}; | |
runAnimation = function(fn) { | |
var last, tick; | |
last = now(); | |
tick = function() { | |
var diff; | |
diff = now() - last; | |
if (diff >= 33) { | |
last = now(); | |
return fn(diff, function() { | |
return requestAnimationFrame(tick); | |
}); | |
} else { | |
return setTimeout(tick, 33 - diff); | |
} | |
}; | |
return tick(); | |
}; | |
result = function() { | |
var args, key, obj; | |
obj = arguments[0], key = arguments[1], args = 3 <= arguments.length ? __slice.call(arguments, 2) : []; | |
if (typeof obj[key] === 'function') { | |
return obj[key].apply(obj, args); | |
} else { | |
return obj[key]; | |
} | |
}; | |
extend = function() { | |
var key, out, source, sources, val, _i, _len; | |
out = arguments[0], sources = 2 <= arguments.length ? __slice.call(arguments, 1) : []; | |
for (_i = 0, _len = sources.length; _i < _len; _i++) { | |
source = sources[_i]; | |
if (source) { | |
for (key in source) { | |
if (!__hasProp.call(source, key)) continue; | |
val = source[key]; | |
if ((out[key] != null) && typeof out[key] === 'object' && (val != null) && typeof val === 'object') { | |
extend(out[key], val); | |
} else { | |
out[key] = val; | |
} | |
} | |
} | |
} | |
return out; | |
}; | |
avgAmplitude = function(arr) { | |
var count, sum, v, _i, _len; | |
sum = count = 0; | |
for (_i = 0, _len = arr.length; _i < _len; _i++) { | |
v = arr[_i]; | |
sum += Math.abs(v); | |
count++; | |
} | |
return sum / count; | |
}; | |
getFromDOM = function(key, json) { | |
var data, e, el; | |
if (key == null) { | |
key = 'options'; | |
} | |
if (json == null) { | |
json = true; | |
} | |
el = document.querySelector("[data-pace-" + key + "]"); | |
if (!el) { | |
return; | |
} | |
data = el.getAttribute("data-pace-" + key); | |
if (!json) { | |
return data; | |
} | |
try { | |
return JSON.parse(data); | |
} catch (_error) { | |
e = _error; | |
return typeof console !== "undefined" && console !== null ? console.error("Error parsing inline pace options", e) : void 0; | |
} | |
}; | |
Evented = (function() { | |
function Evented() {} | |
Evented.prototype.on = function(event, handler, ctx, once) { | |
var _base; | |
if (once == null) { | |
once = false; | |
} | |
if (this.bindings == null) { | |
this.bindings = {}; | |
} | |
if ((_base = this.bindings)[event] == null) { | |
_base[event] = []; | |
} | |
return this.bindings[event].push({ | |
handler: handler, | |
ctx: ctx, | |
once: once | |
}); | |
}; | |
Evented.prototype.once = function(event, handler, ctx) { | |
return this.on(event, handler, ctx, true); | |
}; | |
Evented.prototype.off = function(event, handler) { | |
var i, _ref, _results; | |
if (((_ref = this.bindings) != null ? _ref[event] : void 0) == null) { | |
return; | |
} | |
if (handler == null) { | |
return delete this.bindings[event]; | |
} else { | |
i = 0; | |
_results = []; | |
while (i < this.bindings[event].length) { | |
if (this.bindings[event][i].handler === handler) { | |
_results.push(this.bindings[event].splice(i, 1)); | |
} else { | |
_results.push(i++); | |
} | |
} | |
return _results; | |
} | |
}; | |
Evented.prototype.trigger = function() { | |
var args, ctx, event, handler, i, once, _ref, _ref1, _results; | |
event = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; | |
if ((_ref = this.bindings) != null ? _ref[event] : void 0) { | |
i = 0; | |
_results = []; | |
while (i < this.bindings[event].length) { | |
_ref1 = this.bindings[event][i], handler = _ref1.handler, ctx = _ref1.ctx, once = _ref1.once; | |
handler.apply(ctx != null ? ctx : this, args); | |
if (once) { | |
_results.push(this.bindings[event].splice(i, 1)); | |
} else { | |
_results.push(i++); | |
} | |
} | |
return _results; | |
} | |
}; | |
return Evented; | |
})(); | |
Pace = window.Pace || {}; | |
window.Pace = Pace; | |
extend(Pace, Evented.prototype); | |
options = Pace.options = extend({}, defaultOptions, window.paceOptions, getFromDOM()); | |
_ref = ['ajax', 'document', 'eventLag', 'elements']; | |
for (_i = 0, _len = _ref.length; _i < _len; _i++) { | |
source = _ref[_i]; | |
if (options[source] === true) { | |
options[source] = defaultOptions[source]; | |
} | |
} | |
NoTargetError = (function(_super) { | |
__extends(NoTargetError, _super); | |
function NoTargetError() { | |
_ref1 = NoTargetError.__super__.constructor.apply(this, arguments); | |
return _ref1; | |
} | |
return NoTargetError; | |
})(Error); | |
Bar = (function() { | |
function Bar() { | |
this.progress = 0; | |
} | |
Bar.prototype.getElement = function() { | |
var targetElement; | |
if (this.el == null) { | |
targetElement = document.querySelector(options.target); | |
if (!targetElement) { | |
throw new NoTargetError; | |
} | |
this.el = document.createElement('div'); | |
this.el.className = "pace pace-active"; | |
document.body.className = document.body.className.replace(/pace-done/g, ''); | |
document.body.className += ' pace-running'; | |
this.el.innerHTML = '<div class="pace-progress">\n <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>'; | |
if (targetElement.firstChild != null) { | |
targetElement.insertBefore(this.el, targetElement.firstChild); | |
} else { | |
targetElement.appendChild(this.el); | |
} | |
} | |
return this.el; | |
}; | |
Bar.prototype.finish = function() { | |
var el; | |
el = this.getElement(); | |
el.className = el.className.replace('pace-active', ''); | |
el.className += ' pace-inactive'; | |
document.body.className = document.body.className.replace('pace-running', ''); | |
return document.body.className += ' pace-done'; | |
}; | |
Bar.prototype.update = function(prog) { | |
this.progress = prog; | |
return this.render(); | |
}; | |
Bar.prototype.destroy = function() { | |
try { | |
this.getElement().parentNode.removeChild(this.getElement()); | |
} catch (_error) { | |
NoTargetError = _error; | |
} | |
return this.el = void 0; | |
}; | |
Bar.prototype.render = function() { | |
var el, key, progressStr, transform, _j, _len1, _ref2; | |
if (document.querySelector(options.target) == null) { | |
return false; | |
} | |
el = this.getElement(); | |
transform = "translate3d(" + this.progress + "%, 0, 0)"; | |
_ref2 = ['webkitTransform', 'msTransform', 'transform']; | |
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) { | |
key = _ref2[_j]; | |
el.children[0].style[key] = transform; | |
} | |
if (!this.lastRenderedProgress || this.lastRenderedProgress | 0 !== this.progress | 0) { | |
el.children[0].setAttribute('data-progress-text', "" + (this.progress | 0) + "%"); | |
if (this.progress >= 100) { | |
progressStr = '99'; | |
} else { | |
progressStr = this.progress < 10 ? "0" : ""; | |
progressStr += this.progress | 0; | |
} | |
el.children[0].setAttribute('data-progress', "" + progressStr); | |
} | |
return this.lastRenderedProgress = this.progress; | |
}; | |
Bar.prototype.done = function() { | |
return this.progress >= 100; | |
}; | |
return Bar; | |
})(); | |
Events = (function() { | |
function Events() { | |
this.bindings = {}; | |
} | |
Events.prototype.trigger = function(name, val) { | |
var binding, _j, _len1, _ref2, _results; | |
if (this.bindings[name] != null) { | |
_ref2 = this.bindings[name]; | |
_results = []; | |
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) { | |
binding = _ref2[_j]; | |
_results.push(binding.call(this, val)); | |
} | |
return _results; | |
} | |
}; | |
Events.prototype.on = function(name, fn) { | |
var _base; | |
if ((_base = this.bindings)[name] == null) { | |
_base[name] = []; | |
} | |
return this.bindings[name].push(fn); | |
}; | |
return Events; | |
})(); | |
_XMLHttpRequest = window.XMLHttpRequest; | |
_XDomainRequest = window.XDomainRequest; | |
_WebSocket = window.WebSocket; | |
extendNative = function(to, from) { | |
var e, key, _results; | |
_results = []; | |
for (key in from.prototype) { | |
try { | |
if ((to[key] == null) && typeof from[key] !== 'function') { | |
if (typeof Object.defineProperty === 'function') { | |
_results.push(Object.defineProperty(to, key, { | |
get: function() { | |
return from.prototype[key]; | |
}, | |
configurable: true, | |
enumerable: true | |
})); | |
} else { | |
_results.push(to[key] = from.prototype[key]); | |
} | |
} else { | |
_results.push(void 0); | |
} | |
} catch (_error) { | |
e = _error; | |
} | |
} | |
return _results; | |
}; | |
ignoreStack = []; | |
Pace.ignore = function() { | |
var args, fn, ret; | |
fn = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; | |
ignoreStack.unshift('ignore'); | |
ret = fn.apply(null, args); | |
ignoreStack.shift(); | |
return ret; | |
}; | |
Pace.track = function() { | |
var args, fn, ret; | |
fn = arguments[0], args = 2 <= arguments.length ? __slice.call(arguments, 1) : []; | |
ignoreStack.unshift('track'); | |
ret = fn.apply(null, args); | |
ignoreStack.shift(); | |
return ret; | |
}; | |
EventLagMonitor = (function() { | |
function EventLagMonitor() { | |
var avg, interval, last, points, samples, | |
_this = this; | |
this.progress = 0; | |
avg = 0; | |
samples = []; | |
points = 0; | |
last = now(); | |
interval = setInterval(function() { | |
var diff; | |
diff = now() - last - 50; | |
last = now(); | |
samples.push(diff); | |
if (samples.length > options.eventLag.sampleCount) { | |
samples.shift(); | |
} | |
avg = avgAmplitude(samples); | |
if (++points >= options.eventLag.minSamples && avg < options.eventLag.lagThreshold) { | |
_this.progress = 100; | |
return clearInterval(interval); | |
} else { | |
return _this.progress = 100 * (3 / (avg + 3)); | |
} | |
}, 50); | |
} | |
return EventLagMonitor; | |
})(); | |
Scaler = (function() { | |
function Scaler(source) { | |
this.source = source; | |
this.last = this.sinceLastUpdate = 0; | |
this.rate = options.initialRate; | |
this.catchup = 0; | |
this.progress = this.lastProgress = 0; | |
if (this.source != null) { | |
this.progress = result(this.source, 'progress'); | |
} | |
} | |
Scaler.prototype.tick = function(frameTime, val) { | |
var scaling; | |
if (val == null) { | |
val = result(this.source, 'progress'); | |
} | |
if (val >= 100) { | |
this.done = true; | |
} | |
if (val === this.last) { | |
this.sinceLastUpdate += frameTime; | |
} else { | |
if (this.sinceLastUpdate) { | |
this.rate = (val - this.last) / this.sinceLastUpdate; | |
} | |
this.catchup = (val - this.progress) / options.catchupTime; | |
this.sinceLastUpdate = 0; | |
this.last = val; | |
} | |
if (val > this.progress) { | |
this.progress += this.catchup * frameTime; | |
} | |
scaling = 1 - Math.pow(this.progress / 100, options.easeFactor); | |
this.progress += scaling * this.rate * frameTime; | |
this.progress = Math.min(this.lastProgress + options.maxProgressPerFrame, this.progress); | |
this.progress = Math.max(0, this.progress); | |
this.progress = Math.min(100, this.progress); | |
this.lastProgress = this.progress; | |
return this.progress; | |
}; | |
return Scaler; | |
})(); | |
sources = null; | |
scalers = null; | |
bar = null; | |
uniScaler = null; | |
animation = null; | |
cancelAnimation = null; | |
Pace.running = false; | |
handlePushState = function() { | |
if (options.restartOnPushState) { | |
return Pace.restart(); | |
} | |
}; | |
if (window.history.pushState != null) { | |
_pushState = window.history.pushState; | |
window.history.pushState = function() { | |
handlePushState(); | |
return _pushState.apply(window.history, arguments); | |
}; | |
} | |
if (window.history.replaceState != null) { | |
_replaceState = window.history.replaceState; | |
window.history.replaceState = function() { | |
handlePushState(); | |
return _replaceState.apply(window.history, arguments); | |
}; | |
} | |
SOURCE_KEYS = { | |
eventLag: EventLagMonitor | |
}; | |
(init = function() { | |
var type, _j, _k, _len1, _len2, _ref2, _ref3, _ref4; | |
Pace.sources = sources = []; | |
_ref2 = ['eventLag']; | |
for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) { | |
type = _ref2[_j]; | |
if (options[type] !== false) { | |
sources.push(new SOURCE_KEYS[type](options[type])); | |
} | |
} | |
_ref4 = (_ref3 = options.extraSources) != null ? _ref3 : []; | |
for (_k = 0, _len2 = _ref4.length; _k < _len2; _k++) { | |
source = _ref4[_k]; | |
sources.push(new source(options)); | |
} | |
Pace.bar = bar = new Bar; | |
scalers = []; | |
return uniScaler = new Scaler; | |
})(); | |
Pace.stop = function() { | |
Pace.trigger('stop'); | |
Pace.running = false; | |
bar.destroy(); | |
cancelAnimation = true; | |
if (animation != null) { | |
if (typeof cancelAnimationFrame === "function") { | |
cancelAnimationFrame(animation); | |
} | |
animation = null; | |
} | |
return init(); | |
}; | |
Pace.restart = function() { | |
Pace.trigger('restart'); | |
Pace.stop(); | |
return Pace.start(); | |
}; | |
Pace.go = function() { | |
var start; | |
Pace.running = true; | |
bar.render(); | |
start = now(); | |
cancelAnimation = false; | |
return animation = runAnimation(function(frameTime, enqueueNextFrame) { | |
console.log('frameTime', frameTime) | |
var avg, count, done, element, elements, i, j, remaining, scaler, scalerList, sum, _j, _k, _len1, _len2, _ref2; | |
remaining = 100 - bar.progress; | |
count = sum = 0; | |
done = true; | |
for (i = _j = 0, _len1 = sources.length; _j < _len1; i = ++_j) { | |
source = sources[i]; | |
scalerList = scalers[i] != null ? scalers[i] : scalers[i] = []; | |
elements = (_ref2 = source.elements) != null ? _ref2 : [source]; | |
for (j = _k = 0, _len2 = elements.length; _k < _len2; j = ++_k) { | |
element = elements[j]; | |
scaler = scalerList[j] != null ? scalerList[j] : scalerList[j] = new Scaler(element); | |
done &= scaler.done; | |
if (scaler.done) { | |
continue; | |
} | |
count++; | |
sum += scaler.tick(frameTime); | |
} | |
} | |
avg = sum / count; | |
bar.update(uniScaler.tick(frameTime, avg)); | |
if (bar.done() || done || cancelAnimation) { | |
bar.update(100); | |
Pace.trigger('done'); | |
return setTimeout(function() { | |
bar.finish(); | |
Pace.running = false; | |
return Pace.trigger('hide'); | |
}, Math.max(options.ghostTime, Math.max(options.minTime - (now() - start), 0))); | |
} else { | |
return enqueueNextFrame(); | |
} | |
}); | |
}; | |
Pace.start = function(_options) { | |
extend(options, _options); | |
Pace.running = true; | |
try { | |
bar.render(); | |
} catch (_error) { | |
NoTargetError = _error; | |
} | |
if (!document.querySelector('.pace')) { | |
return setTimeout(Pace.start, 50); | |
} else { | |
Pace.trigger('start'); | |
return Pace.go(); | |
} | |
}; | |
if (typeof define === 'function' && define.amd) { | |
define(['pace'], function() { | |
return Pace; | |
}); | |
} else if (typeof exports === 'object') { | |
module.exports = Pace; | |
} else { | |
if (options.startOnPageLoad) { | |
Pace.start(); | |
} | |
} | |
}).call(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment