Created
September 30, 2019 01:54
-
-
Save deepfriedfilth/9a3373170c4ff0a59870d7069c0115be to your computer and use it in GitHub Desktop.
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
/* Mac Pro webpage reverse video animation thing */ | |
/* */ | |
Object.defineProperties = Object.defineProperties || function() {}; | |
(function() { | |
var b = 0; | |
var c = ["ms", "moz", "webkit", "o"]; | |
for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { | |
window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; | |
window.cancelAnimationFrame = | |
window[c[a] + "CancelAnimationFrame"] || | |
window[c[a] + "CancelRequestAnimationFrame"]; | |
} | |
if (!window.requestAnimationFrame) { | |
window.requestAnimationFrame = function(h, e) { | |
var d = new Date().getTime(); | |
var f = Math.max(0, 16 - (d - b)); | |
var g = window.setTimeout(function() { | |
h(d + f); | |
}, f); | |
b = d + f; | |
return g; | |
}; | |
} | |
if (!window.cancelAnimationFrame) { | |
window.cancelAnimationFrame = function(d) { | |
clearTimeout(d); | |
}; | |
} | |
})(); | |
(function(e, b) { | |
var g = "", | |
f, | |
a, | |
d; | |
if (e.addEventListener) { | |
f = "addEventListener"; | |
} else { | |
f = "attachEvent"; | |
g = "on"; | |
} | |
d = | |
"onwheel" in b.createElement("div") | |
? "wheel" | |
: b.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll"; | |
e.addWheelListener = function(i, j, h) { | |
c(i, d, j, h); | |
if (d == "DOMMouseScroll") { | |
c(i, "MozMousePixelScroll", j, h); | |
} | |
}; | |
function c(j, i, k, h) { | |
j[f]( | |
g + i, | |
d == "wheel" | |
? k | |
: function(l) { | |
!l && (l = e.event); | |
var m = { | |
originalEvent: l, | |
target: l.target || l.srcElement, | |
type: "wheel", | |
deltaMode: l.type == "MozMousePixelScroll" ? 0 : 1, | |
deltaX: 0, | |
delatZ: 0, | |
preventDefault: function() { | |
l.preventDefault | |
? l.preventDefault() | |
: (l.returnValue = false); | |
} | |
}; | |
if (d == "mousewheel") { | |
m.deltaY = -1 / 40 * l.wheelDelta; | |
l.wheelDeltaX && (m.deltaX = -1 / 40 * l.wheelDeltaX); | |
} else { | |
m.deltaY = l.detail; | |
} | |
return k(m); | |
}, | |
h || false | |
); | |
} | |
})(window, document); | |
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ | |
if ( | |
typeof document !== "undefined" && | |
!("classList" in document.createElement("a")) | |
) { | |
(function(j) { | |
if (!("HTMLElement" in j) && !("Element" in j)) { | |
return; | |
} | |
var a = "classList", | |
f = "prototype", | |
m = (j.HTMLElement || j.Element)[f], | |
b = Object, | |
k = | |
String[f].trim || | |
function() { | |
return this.replace(/^\s+|\s+$/g, ""); | |
}, | |
c = | |
Array[f].indexOf || | |
function(q) { | |
var p = 0, | |
o = this.length; | |
for (; p < o; p++) { | |
if (p in this && this[p] === q) { | |
return p; | |
} | |
} | |
return -1; | |
}, | |
n = function(o, p) { | |
this.name = o; | |
this.code = DOMException[o]; | |
this.message = p; | |
}, | |
g = function(p, o) { | |
if (o === "") { | |
throw new n( | |
"SYNTAX_ERR", | |
"An invalid or illegal string was specified" | |
); | |
} | |
if (/\s/.test(o)) { | |
throw new n( | |
"INVALID_CHARACTER_ERR", | |
"String contains an invalid character" | |
); | |
} | |
return c.call(p, o); | |
}, | |
d = function(t) { | |
var r = k.call(t.className), | |
q = r ? r.split(/\s+/) : [], | |
p = 0, | |
o = q.length; | |
for (; p < o; p++) { | |
this.push(q[p]); | |
} | |
this._updateClassName = function() { | |
t.className = this.toString(); | |
}; | |
}, | |
e = (d[f] = []), | |
i = function() { | |
return new d(this); | |
}; | |
n[f] = Error[f]; | |
e.item = function(o) { | |
return this[o] || null; | |
}; | |
e.contains = function(o) { | |
o += ""; | |
return g(this, o) !== -1; | |
}; | |
e.add = function() { | |
var t = arguments, | |
r = 0, | |
p = t.length, | |
q, | |
o = false; | |
do { | |
q = t[r] + ""; | |
if (g(this, q) === -1) { | |
this.push(q); | |
o = true; | |
} | |
} while (++r < p); | |
if (o) { | |
this._updateClassName(); | |
} | |
}; | |
e.remove = function() { | |
var u = arguments, | |
t = 0, | |
p = u.length, | |
r, | |
o = false; | |
do { | |
r = u[t] + ""; | |
var q = g(this, r); | |
if (q !== -1) { | |
this.splice(q, 1); | |
o = true; | |
} | |
} while (++t < p); | |
if (o) { | |
this._updateClassName(); | |
} | |
}; | |
e.toggle = function(p, q) { | |
p += ""; | |
var o = this.contains(p), | |
r = o ? q !== true && "remove" : q !== false && "add"; | |
if (r) { | |
this[r](p); | |
} | |
return !o; | |
}; | |
e.toString = function() { | |
return this.join(" "); | |
}; | |
if (b.defineProperty) { | |
var l = { get: i, enumerable: true, configurable: true }; | |
try { | |
b.defineProperty(m, a, l); | |
} catch (h) { | |
if (h.number === -2146823252) { | |
l.enumerable = false; | |
b.defineProperty(m, a, l); | |
} | |
} | |
} else { | |
if (b[f].__defineGetter__) { | |
m.__defineGetter__(a, i); | |
} | |
} | |
})(self); | |
} | |
var _ = { | |
defaults: function(c, b) { | |
var a = {}; | |
b = b || {}; | |
for (var d in c) { | |
if (c.hasOwnProperty(d)) { | |
a[d] = b[d] != null ? b[d] : c[d]; | |
} | |
} | |
return a; | |
} | |
}; | |
AC.define("overview/shared/lib/utils", function() {}); | |
AC.define("overview/shared/event/Emitter", ["require"], function(a) { | |
function c() { | |
this._events = []; | |
} | |
var b = c.prototype; | |
b.on = function(e, f) { | |
var d = this._events; | |
if (!d[e]) { | |
d[e] = []; | |
} | |
d[e].push(f); | |
}; | |
b.trigger = function(e, f) { | |
var d = this._events; | |
var g = e.split(":")[0]; | |
f = f || {}; | |
f.type = e; | |
f.index = parseInt(e.split(":")[1], 10); | |
if (d[g]) { | |
d[g].forEach( | |
function(h) { | |
h.call(this, f); | |
}.bind(this) | |
); | |
} | |
if (d[e] && e.split(":").length > 1) { | |
d[e].forEach( | |
function(h) { | |
h.call(this, f); | |
}.bind(this) | |
); | |
} | |
}; | |
return c; | |
}); | |
AC.define("overview/shared/lib/analytics", ["require"], function(a) { | |
function c() { | |
this._trackingQueue = []; | |
this._interactionType = null; | |
this._interactionStart = null; | |
} | |
var b = c.prototype; | |
b.flush = function() { | |
var d; | |
while ((d = this._trackingQueue.shift())) { | |
this.trackProps(d); | |
} | |
}; | |
b.initInteraction = function(d) { | |
this._interactionType = d; | |
this._interactionStart = +new Date(); | |
}; | |
b.queueInteraction = function(i, g, d) { | |
var f = +new Date(); | |
var j = ((f - this._interactionStart) / 1000).toFixed(1); | |
var e = this.getTrackingString(g, d); | |
var h = { prop1: i, prop2: e, prop35: j }; | |
this._trackingQueue.push(h); | |
}; | |
b.getTrackingString = function(e, d) { | |
return ( | |
AC.Tracking.pageName() + " - " + e.toLowerCase() + " - section " + d | |
); | |
}; | |
b.trackProps = function(d) { | |
if (typeof d.prop2 !== "string") { | |
return; | |
} | |
var e = this._currentSection; | |
if (e) { | |
d.prop3 = this.getTrackingString(e.name, e.index); | |
} | |
AC.Tracking.trackClick(d, window, "o", d.prop3); | |
}; | |
b.setCurrentSection = function(d) { | |
this._currentSection = d; | |
}; | |
b.trackLink = function(f, e, d) { | |
if (arguments.length < 3) { | |
return; | |
} | |
window.setTimeout(function() { | |
AC.Tracking.trackClick( | |
{ | |
prop1: f, | |
prop3: | |
AC.Tracking.pageName() + | |
" - " + | |
e.toString().toLowerCase() + | |
" - section " + | |
d | |
}, | |
this, | |
"o", | |
AC.Tracking.pageName() + | |
" - " + | |
e.toLowerCase() + | |
" - section " + | |
d | |
); | |
}, 1000); | |
}; | |
return c; | |
}); | |
AC.define( | |
"overview/shared/app/Core", | |
[ | |
"require", | |
"overview/shared/lib/utils", | |
"overview/shared/event/Emitter", | |
"overview/shared/lib/analytics" | |
], | |
function(a) { | |
a("overview/shared/lib/utils"); | |
var c = a("overview/shared/event/Emitter"); | |
var d = a("overview/shared/lib/analytics"); | |
function b() { | |
this.analyzer = new d(); | |
c.call(this); | |
} | |
b.prototype = new c(); | |
(b.prototype.addTimelineEvents = function(e) { | |
e | |
.filter(function(f) { | |
return !isNaN(f.pause); | |
}) | |
.forEach(function(g, f) { | |
if (g.events) { | |
g.events.forEach(function(h) { | |
this.sectionController.on( | |
h.type + ":" + f, | |
h.action | |
); | |
}, this); | |
} | |
}, this); | |
}), | |
(b.prototype.createFadeCurtain = function() { | |
var e = document.createElement("div"); | |
e.id = "curtain"; | |
document.getElementById("wrapper").appendChild(e); | |
}); | |
b.prototype.convertSectionsToClips = function(f) { | |
var e = {}; | |
e.clips = []; | |
e.events = { pauses: [] }; | |
f.forEach(function(g) { | |
if (!isNaN(g.pause)) { | |
e.events.pauses.push(g.pause); | |
} | |
e.events.pauses.sort(function(i, h) { | |
return i > h ? 1 : -1; | |
}); | |
e.clips = e.clips.concat( | |
g.clips.map(function(h) { | |
return { | |
start: g.time + h.start, | |
end: g.time + h.end, | |
media: h.media, | |
pauses: h.pauses | |
}; | |
}) | |
); | |
}); | |
return e; | |
}; | |
b.prototype.resizeFluidAreas = function() { | |
var e = this.resizeContainers(); | |
this.resizePlaceholders(e); | |
}; | |
b.prototype.enterAnalytics = function() { | |
this.analyzer.initInteraction(); | |
this.analyzer.setCurrentSection( | |
app.sectionController.currentSection | |
); | |
clearTimeout(this._analyzerTimeout); | |
this._analyzerTimeout = window.setTimeout( | |
function() { | |
this.analyzer.flush(); | |
}.bind(this), | |
1000 | |
); | |
}; | |
b.prototype.exitAnalytics = function(g) { | |
clearTimeout(this._analyzerTimeout); | |
var e = app.sectionController._pauseTimeline[g.from]; | |
var f = app.sectionController.getSectionFromPausePoint(e).name; | |
var h = app.uiController._lastInteractionType; | |
this.analyzer.queueInteraction(h, f, g.from); | |
}; | |
b.prototype.setupFocusEvents = function() { | |
var e = this.sectionController._pauses[0]; | |
this.sectionController.on( | |
"pauseenter", | |
function(i) { | |
var j = i.section || e; | |
var f = document.querySelector(j.labelSelector); | |
var h = f.querySelector(".title"); | |
var g = f.querySelector(".button"); | |
h.tabIndex = -1; | |
if (g) { | |
g.tabIndex = 0; | |
} | |
h.focus(); | |
}.bind(this) | |
); | |
this.sectionController.on("pauseexit", function(h) { | |
var i = h.section || e; | |
var f = document.querySelector(i.labelSelector); | |
var g = f.querySelector(".button"); | |
if (g) { | |
g.tabIndex = -1; | |
} | |
}); | |
}; | |
b.prototype.addNextCarets = function() { | |
var g = document.querySelector("#hero .caret"); | |
if (!g) { | |
return; | |
} | |
var f = [ | |
document.querySelector("#hero"), | |
document.querySelector("#comingsoon"), | |
document.querySelector("#measurements") | |
]; | |
var e = document.querySelectorAll("section", this.panelcontainer); | |
e = Array.prototype.slice.call(e); | |
e = e.filter(function(h) { | |
return f.indexOf(h) === -1; | |
}); | |
e.forEach( | |
function(k) { | |
var m = g.cloneNode(true); | |
var l = k.querySelector(".copy"); | |
var h = m.querySelector(".cta"); | |
var i = m.querySelector(".button"); | |
var j = function(n) { | |
if ( | |
n.type === "click" || | |
(n.type === "keydown" && n.keyCode === 13) | |
) { | |
this.sectionController.next(); | |
} | |
}.bind(this); | |
i.id = ""; | |
i.tabIndex = -1; | |
i.classList.add("next"); | |
h.innerHTML = h.getAttribute("data-next"); | |
m.addEventListener("click", j); | |
m.addEventListener("keydown", j); | |
if (document.getElementById("globalheader")) { | |
l.appendChild(m); | |
} | |
}.bind(this) | |
); | |
}; | |
return b; | |
} | |
); | |
AC.define( | |
"overview/shared/controller/Clip", | |
["require", "overview/shared/event/Emitter"], | |
function(b) { | |
var d = b("overview/shared/event/Emitter"); | |
function a(f, e) { | |
d.call(this); | |
this._mediaTimer = e; | |
this._clips = [].concat(f); | |
this._update = this._update.bind(this); | |
this._prevTime = this._mediaTimer.currentTime; | |
this._duration = 0; | |
this._clips.forEach(function(g) { | |
g.media.el.classList.add("clip"); | |
if (!g.end) { | |
g.end = g.start + g.media.duration; | |
if (g.pauses) { | |
g.pauses.forEach(function(h) { | |
g.end += h.to - h.from; | |
}); | |
} | |
} | |
this._duration = Math.max(this._duration, g.end); | |
}, this); | |
} | |
var c = (a.prototype = new d()); | |
c.constructor = a; | |
(c._getActiveClips = function(e) { | |
return this._clips.filter(function(f) { | |
return ( | |
f.media !== this._mediaTimer && f.start <= e && e <= f.end | |
); | |
}, this); | |
}), | |
(c._timeToClipTime = function(f) { | |
var e = 0; | |
if (f.pauses) { | |
f.pauses.forEach( | |
function(g) { | |
if ( | |
this._mediaTimer.currentTime >= g.from && | |
this._mediaTimer.currentTime >= g.to | |
) { | |
e += g.to - g.from; | |
} else { | |
if ( | |
this._mediaTimer.currentTime >= g.from && | |
this._mediaTimer.currentTime < g.to | |
) { | |
e += this._mediaTimer.currentTime - g.from; | |
} | |
} | |
}.bind(this) | |
); | |
} | |
return this._mediaTimer.currentTime - f.start - e; | |
}); | |
c._processTransitoryClips = function(e, f) { | |
var g = this._getActiveClips(e), | |
h = this._getActiveClips(f); | |
g = g.filter(function(i) { | |
return h.indexOf(i) === -1; | |
}); | |
g.forEach(function(i) { | |
if (i.media.el) { | |
i.media.el.classList.remove("visible"); | |
} | |
i.media.currentTime = this._timeToClipTime(i); | |
}, this); | |
h.forEach(function(i) { | |
if (i.media.el) { | |
i.media.el.classList.add("visible"); | |
} | |
i.media.currentTime = this._timeToClipTime(i); | |
}, this); | |
}; | |
c._update = function(e, h) { | |
var g, f; | |
if (this.currentTime < 0) { | |
this.trigger("start"); | |
this.pause(); | |
this._mediaTimer.currentTime = 0; | |
} | |
this.trigger("timeupdate"); | |
if (this._mediaTimer.update) { | |
this._mediaTimer.update(); | |
} | |
if (this.currentTime >= this._duration || h) { | |
this.pause(); | |
this.trigger("ended"); | |
this._mediaTimer.currentTime = this._duration; | |
} | |
this._processTransitoryClips(this._prevTime, this.currentTime); | |
if (!this.paused) { | |
this._animationID = window.requestAnimationFrame(this._update); | |
} | |
this._prevTime = this.currentTime; | |
}; | |
c.play = function() { | |
var e = true; | |
if (this.paused) { | |
if (this.currentTime < 0.5 && this.playbackRate < 0) { | |
this.currentTime = 0; | |
this.trigger("play"); | |
return; | |
} else { | |
if ( | |
this.currentTime > this.duration - 0.5 && | |
this.playbackRate > 0 | |
) { | |
this.currentTime = this.duration; | |
this.trigger("play"); | |
return; | |
} | |
} | |
e = this._mediaTimer.play(); | |
this.trigger("play"); | |
this._animationID = window.requestAnimationFrame(this._update); | |
} | |
return e; | |
}; | |
c.pause = function() { | |
if (!this.paused) { | |
this._mediaTimer.pause(); | |
this.trigger("pause"); | |
window.cancelAnimationFrame(this._animationID); | |
} | |
return this; | |
}; | |
Object.defineProperties(a.prototype, { | |
currentTime: { | |
enumerable: true, | |
configurable: false, | |
get: function() { | |
return this._mediaTimer.currentTime; | |
}, | |
set: function(e) { | |
this._mediaTimer.currentTime = e; | |
this._update(); | |
} | |
}, | |
playbackRate: { | |
get: function() { | |
return this._mediaTimer.playbackRate; | |
}, | |
set: function(e) { | |
this._mediaTimer.playbackRate = e; | |
} | |
}, | |
paused: { | |
get: function() { | |
return this._mediaTimer.paused; | |
}, | |
set: function() {} | |
}, | |
duration: { | |
get: function() { | |
return this._duration; | |
}, | |
set: function() {} | |
} | |
}); | |
return a; | |
} | |
); | |
AC.define("flow/diff/Loader", ["require", "assetLoader/AssetLoader"], function( | |
b | |
) { | |
var c, | |
a = b("assetLoader/AssetLoader"); | |
function d(g, e) { | |
var f, | |
j, | |
h = g.match(/#/g).length; | |
this.imagesUrls = []; | |
if (!e) { | |
throw new Error("0 images provided"); | |
} | |
for (f = 1; f <= e; f++) { | |
j = "0000" + f; | |
j = j.substring(j.length - h); | |
this.imagesUrls.push(g.replace(/#{2,}/g, j)); | |
} | |
} | |
c = d.prototype; | |
c.load = function() { | |
return new a(this.imagesUrls).load(); | |
}; | |
return d; | |
}); | |
AC.define( | |
"flow/diff/Render", | |
["require", "flow/diff/Loader", "defer/Deferred"], | |
function(d) { | |
var e, | |
c = d("flow/diff/Loader"), | |
b = d("defer/Deferred"); | |
function a(g, f) { | |
this.flowData = g; | |
this.flowData.imageUrlPattern = f; | |
} | |
e = a.prototype; | |
e._storeImages = function(f) { | |
if (DEBUG) { | |
console.log("loaded images"); | |
} | |
this.images = f; | |
this._blocksPerFullDiff = | |
f[0].width / | |
this.flowData.blockSize * | |
(f[0].height / this.flowData.blockSize); | |
return new b().resolve(); | |
}; | |
e._applyDiffRange = function(h, o) { | |
var m = o.block, | |
i = o.length, | |
g = h.canvas.width / this.flowData.blockSize, | |
k = Math.floor(m / this._blocksPerFullDiff), | |
u = this.images[k].width, | |
f = m % this._blocksPerFullDiff, | |
t = u / this.flowData.blockSize, | |
r = (f % t) * this.flowData.blockSize, | |
q = Math.floor(f / (t || 1)) * this.flowData.blockSize, | |
n = (o.location % g) * this.flowData.blockSize, | |
l = Math.floor(o.location / g) * this.flowData.blockSize, | |
j, | |
p; | |
while (i) { | |
j = Math.min( | |
i * this.flowData.blockSize, | |
h.canvas.width - n, | |
u - r | |
); | |
p = j / this.flowData.blockSize; | |
if (DEBUG) { | |
if ( | |
typeof this.renderDebugger !== "undefined" && | |
this._frameToRender > 0 | |
) { | |
this.renderDebugger.registerComparison( | |
this._frameToRender, | |
{ image: k, block: m, x: r, y: q } | |
); | |
} | |
} | |
h.drawImage( | |
this.images[k], | |
r, | |
q, | |
j, | |
this.flowData.blockSize, | |
n, | |
l, | |
j, | |
this.flowData.blockSize | |
); | |
i -= p; | |
if (i) { | |
if ((r += j) >= u) { | |
r = 0; | |
q += this.flowData.blockSize; | |
} | |
if ((f += p) >= this._blocksPerFullDiff) { | |
f = 0; | |
r = 0; | |
q = 0; | |
k += 1; | |
if (k === this.flowData.imagesRequired - 1) { | |
u = this.images[k].width; | |
} | |
} | |
if ((n += j) >= h.canvas.width) { | |
n = 0; | |
l += this.flowData.blockSize; | |
} | |
m += p; | |
} | |
} | |
}; | |
e.init = function() { | |
if (DEBUG) { | |
console.log("load images"); | |
} | |
return new c( | |
this.flowData.imageUrlPattern, | |
this.flowData.imagesRequired | |
) | |
.load() | |
.then(this._storeImages.bind(this)); | |
}; | |
e.renderDiff = function(f, i) { | |
var g = f.getContext("2d"); | |
i -= 1; | |
if (DEBUG) { | |
this._frameToRender = i; | |
console.log("applying diff frame : " + (i + 1)); | |
} | |
this.frames[i].forEach( | |
function h(j) { | |
this._applyDiffRange(g, j); | |
}.bind(this) | |
); | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(e, { | |
frames: { | |
get: function() { | |
return this.flowData.frames; | |
}, | |
set: function(f) { | |
this.flowData.frames = f; | |
}, | |
enumerable: true | |
} | |
}); | |
return a; | |
} | |
); | |
AC.define( | |
"flow/compositor/Sequence", | |
[ | |
"require", | |
"assetLoader/AssetLoader", | |
"flow/diff/Render", | |
"defer/Deferred" | |
], | |
function(c) { | |
var e, | |
a = c("assetLoader/AssetLoader"), | |
f = c("flow/diff/Render"), | |
b = c("defer/Deferred"); | |
function d(i, h, g) { | |
this._keyframes = i; | |
this._imageUrlPattern = h; | |
this._flowDataProvider = g; | |
} | |
e = d.prototype; | |
e._initDiffRender = function(g) { | |
this._images = g; | |
this.canvas.height = g[0].height; | |
this.canvas.width = g[0].width; | |
this.applyFrame(g[0]); | |
}; | |
e.init = function(g) { | |
this.canvas = g || document.createElement("canvas"); | |
return new a(this._keyframes) | |
.load() | |
.then(this._initDiffRender.bind(this)) | |
.then(this._flowDataProvider.load.bind(this._flowDataProvider)); | |
}; | |
e.createDiffRender = function(g) { | |
this._diffRender = new f(g, this._imageUrlPattern); | |
return this._diffRender.init(); | |
}; | |
e.applyFrame = function(h) { | |
var g = this.canvas.getContext("2d"); | |
g.drawImage(h, 0, 0); | |
}; | |
e.calculateRenderCount = function(g, h) { | |
var i = 0; | |
if (Math.abs(h - g) >= h) { | |
g = 1; | |
i = 1; | |
} else { | |
if (Math.abs(h - g) >= this.frameCount - h && this._images[1]) { | |
g = this.frameCount - 2; | |
i = 1; | |
} | |
} | |
if (h > 0 && h < this.frameCount - 1) { | |
return Math.abs(g - h) + i; | |
} else { | |
return i; | |
} | |
}; | |
e.compositeFrames = function(g, i) { | |
var h = new b(); | |
i = this.frameCount < i ? this.frameCount - 1 : i < 0 ? 0 : i; | |
g = this.frameCount - 2 < g ? this.frameCount - 2 : g < 0 ? 0 : g; | |
var j; | |
if (DEBUG) { | |
console.groupCollapsed( | |
"Rendering diff frames: " + g + "..." + i | |
); | |
} | |
if (Math.abs(i - g) >= i) { | |
g = 1; | |
if (DEBUG) { | |
console.log("applying start keyframe"); | |
} | |
this.applyFrame(this._images[0]); | |
} else { | |
if (Math.abs(i - g) >= this.frameCount - i && this._images[1]) { | |
g = this.frameCount - 2; | |
if (DEBUG) { | |
console.log("applying end keyframe"); | |
} | |
this.applyFrame(this._images[1]); | |
} | |
} | |
j = g > i ? -1 : g < i ? 1 : 0; | |
if (i > 0 && i < this.frameCount - 1) { | |
while (g !== i) { | |
h.progress(g); | |
this._diffRender.renderDiff(this.canvas, g); | |
g += j; | |
h.progress(g); | |
} | |
} | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
h.resolve(g); | |
return h.promise(); | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(e, { | |
frameCount: { | |
get: function() { | |
return this._diffRender.frames.length + 2; | |
}, | |
enumerable: true | |
}, | |
canvas: { | |
get: function() { | |
return this._canvas; | |
}, | |
set: function(g) { | |
return (this._canvas = g); | |
}, | |
enumerable: true | |
}, | |
mainCompositor: { | |
get: function() { | |
var g = this; | |
while (g._compositor) { | |
g = g._compositor; | |
} | |
return g; | |
}, | |
enumerable: true | |
} | |
}); | |
return d; | |
} | |
); | |
AC.define("flow/data/Manifest", [], function() { | |
function a() {} | |
return a; | |
}); | |
AC.define("flow/data/Block", [], function() { | |
function a(b, c) { | |
this.location = b; | |
this.length = c; | |
} | |
return a; | |
}); | |
AC.define( | |
"flow/data/processor", | |
["require", "flow/data/Manifest", "flow/data/Block"], | |
function(b) { | |
var e = b("flow/data/Manifest"), | |
a = b("flow/data/Block"), | |
d; | |
var c = { | |
parseData: function(f) { | |
d = 0; | |
var g = f.frames.map(this._parseFrame, this); | |
return Object.create(e.prototype, { | |
version: { value: f.version }, | |
framecount: { value: f.frameCount }, | |
blockSize: { value: f.blockSize }, | |
imagesRequired: { value: f.imagesRequired }, | |
reversible: { value: f.reversible }, | |
superframeFrequency: { value: f.superframeFrequency }, | |
frames: { value: g } | |
}); | |
}, | |
_valueForCharAt: function(h, f) { | |
var g = h.charCodeAt(f); | |
if (g > 64 && g < 91) { | |
return g - 65; | |
} | |
if (g > 96 && g < 123) { | |
return g - 71; | |
} | |
if (g > 47 && g < 58) { | |
return g + 4; | |
} | |
if (g === 43) { | |
return 62; | |
} | |
if (g === 47) { | |
return 63; | |
} | |
throw "Invalid Bas64 character: " + h.charAt(f); | |
}, | |
_createNumberFromBase64Range: function(j, f, i) { | |
var h = 0, | |
g; | |
while (i--) { | |
g = this._valueForCharAt(j, f++); | |
h += g << (i * 6); | |
} | |
return h; | |
}, | |
_parseFrame: function(g) { | |
var h, | |
k = [], | |
g = g.value || g, | |
j, | |
f; | |
for (h = 0; h < g.length; h += 5) { | |
f = this._createNumberFromBase64Range(g, h, 3); | |
j = this._createNumberFromBase64Range(g, h + 3, 2); | |
k.push( | |
Object.create(a.prototype, { | |
location: { value: f, enumerable: true }, | |
length: { value: j, enumerable: true }, | |
block: { value: (d += j) - j, enumerable: true } | |
}) | |
); | |
} | |
return k; | |
} | |
}; | |
return c; | |
} | |
); | |
AC.define( | |
"flow/data/provider/Async", | |
["require", "ajax/Ajax", "flow/data/processor"], | |
function(b) { | |
var d, | |
a = b("ajax/Ajax"), | |
e = b("flow/data/processor"); | |
function c(f, g) { | |
this._url = f; | |
this._ajaxAdaptor = g || new a(); | |
} | |
d = c.prototype; | |
d.load = function() { | |
var f = this; | |
return this._ajaxAdaptor | |
.get(this._url) | |
.then(function(h) { | |
try { | |
var g = h.response || h.responseText; | |
return JSON.parse(g); | |
} catch (i) { | |
if (DEBUG) { | |
console.log("Failed to parse manifest data"); | |
} | |
} | |
}) | |
.then(function(g) { | |
f._data = g; | |
return e.parseData(g); | |
}); | |
}; | |
return c; | |
} | |
); | |
AC.define( | |
"flow/data/provider/Sync", | |
["require", "defer/Deferred", "flow/data/processor"], | |
function(b) { | |
var d, | |
a = b("defer/Deferred"), | |
e = b("flow/data/processor"); | |
function c(f) { | |
this._data = f; | |
} | |
d = c.prototype; | |
d.load = function() { | |
var f = new a(); | |
f.resolve(e.parseData(this._data)); | |
return f.promise(); | |
}; | |
return c; | |
} | |
); | |
AC.define("flow/Player", ["require", "defer/Deferred"], function(b) { | |
var d, | |
a = b("defer/Deferred"); | |
function c(f, e) { | |
this._flow = e; | |
this._frameRate = 30; | |
this.element = f; | |
this.paused = true; | |
this.loop = false; | |
} | |
d = c.prototype; | |
d._dispatchEvent = function(e) { | |
var f = document.createEvent("Events"); | |
f.initEvent(e, true, false); | |
f.data = this; | |
this.element.dispatchEvent(f); | |
return f; | |
}; | |
d._timeToFrame = function(e) { | |
var f; | |
f = Math.round(e / this.duration * this._flow.frameCount); | |
f = f % (this._flow.frameCount + 1); | |
return f < 0 ? this._flow.frameCount + f : f; | |
}; | |
d._advanceToTimeGlobal = function(e) { | |
this._prevTime = this._prevTime || e; | |
this._currentTime += (e - this._prevTime) / 1000 * this.playbackRate; | |
this._prevTime = e; | |
var f = this._timeToFrame(this._currentTime), | |
g = false; | |
if (!this.loop) { | |
if (this.playbackRate > 0 && this._currentTime > this.duration) { | |
f = this._flow.frameCount; | |
this._currentTime = this.duration; | |
g = true; | |
} else { | |
if (this.playbackRate < 0 && this._currentTime < 0) { | |
f = 0; | |
this._currentTime = 0; | |
g = true; | |
} | |
} | |
} else { | |
this._currentTime = | |
(this.duration + this._currentTime) % this.duration; | |
} | |
if (!this.paused && !this.seeking) { | |
return this._flow.gotoFrame(f).then( | |
function() { | |
this._dispatchEvent("timeupdate"); | |
if (g) { | |
this.paused = true; | |
this._dispatchEvent("ended"); | |
} else { | |
this._requestAnimationFrame = window.requestAnimationFrame( | |
this._advanceToTimeGlobal.bind(this) | |
); | |
} | |
}.bind(this) | |
); | |
} else { | |
return new a().reject(); | |
} | |
}; | |
d._advanceToTimeLocal = function(e) { | |
if (!this.seeking) { | |
this.seeking = true; | |
this._dispatchEvent("seeking"); | |
this._currentTime = 1 * e; | |
this._prevTime = null; | |
window.cancelAnimationFrame(this._requestAnimationFrame); | |
this._flow.gotoFrame(this._timeToFrame(e)).then( | |
function() { | |
this.seeking = false; | |
this._dispatchEvent("timeupdate"); | |
this._dispatchEvent("seeked"); | |
this._requestAnimationFrame = window.requestAnimationFrame( | |
this._advanceToTimeGlobal.bind(this) | |
); | |
}.bind(this) | |
); | |
} | |
if (DEBUG) { | |
console.log("advance to time " + e + " from " + this._currentTime); | |
} | |
}; | |
d.load = function() { | |
this._dispatchEvent("loadstart"); | |
return this._flow | |
.init(this.element) | |
.then(this._dispatchEvent.bind(this, "canplaythrough")); | |
}; | |
d.play = function() { | |
if (this.paused) { | |
this.paused = false; | |
this._dispatchEvent("play"); | |
this._prevTime = null; | |
this._requestAnimationFrame = window.requestAnimationFrame( | |
this._advanceToTimeGlobal.bind(this) | |
); | |
} | |
return this; | |
}; | |
d.pause = function() { | |
if (!this.paused) { | |
this.paused = true; | |
window.cancelAnimationFrame(this._requestAnimationFrame); | |
this._dispatchEvent("pause"); | |
} | |
return this; | |
}; | |
d.on = function() { | |
this.element.addEventListener.apply(this.element, arguments); | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(d, { | |
_currentTime: { value: 0, enumerable: false, writable: true }, | |
_playbackRate: { value: 1, enumerable: false, writable: true }, | |
currentTime: { | |
get: function() { | |
return this._currentTime * 1; | |
}, | |
set: d._advanceToTimeLocal, | |
enumerable: true | |
}, | |
frameRate: { | |
get: function() { | |
return this._frameRate; | |
}, | |
set: function(e) { | |
if (isFinite(e)) { | |
this._frameRate = e; | |
this._dispatchEvent("durationchange"); | |
} | |
}, | |
enumerable: true | |
}, | |
playbackRate: { | |
get: function() { | |
return this._playbackRate * 1; | |
}, | |
set: function(e) { | |
if (isFinite(e)) { | |
this._playbackRate = 1 * e; | |
this._dispatchEvent("ratechange"); | |
} | |
}, | |
enumerable: true | |
}, | |
duration: { | |
get: function() { | |
return this._flow.frameCount / this.frameRate; | |
}, | |
enumerable: true | |
} | |
}); | |
return c; | |
}); | |
AC.define( | |
"flow/keyframe/Loader", | |
["require", "assetLoader/AssetLoader", "defer/Deferred"], | |
function(d) { | |
var e, | |
a = d("assetLoader/AssetLoader"), | |
c = d("defer/Deferred"); | |
function b(f, i) { | |
var h, | |
g = f.match(/#/g).length; | |
this._keyframes = {}; | |
f = f.replace(/([^#]+)(#+)(\..*)/, "$1key_$2$3"); | |
this._imageUrls = []; | |
if (i.frames) { | |
i.frames.forEach( | |
function(k, j) { | |
if (k.type === "keyframe") { | |
h = "0000" + j; | |
h = h.substring(h.length - g); | |
this._imageUrls.push(f.replace(/#+/g, h)); | |
this._keyframes[j] = k; | |
} | |
}.bind(this) | |
); | |
} | |
} | |
e = b.prototype; | |
e.load = function() { | |
if (this._imageUrls.length > 0) { | |
return new a(this._imageUrls).load(); | |
} | |
return new c().resolve(); | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(e, { | |
keyframes: { | |
get: function() { | |
return this._keyframes; | |
}, | |
enumerable: true | |
} | |
}); | |
return b; | |
} | |
); | |
AC.define("flow/keyframe/Render", ["require", "flow/keyframe/Loader"], function( | |
a | |
) { | |
var b, | |
d = a("flow/keyframe/Loader"); | |
function c(f, e) { | |
this.flowData = f; | |
this.flowData.imageUrlPattern = e; | |
} | |
b = c.prototype; | |
b._storeImages = function(e) { | |
var g = 0, | |
h; | |
if (e && e.length > 0) { | |
if (DEBUG) { | |
console.log("loaded keyframe diff images"); | |
} | |
for (var f in this._loader._keyframes) { | |
if (this._loader._keyframes.hasOwnProperty(f)) { | |
h = e[g]; | |
this._loader._keyframes[f].image = h; | |
g += 1; | |
} | |
} | |
} | |
if (DEBUG) { | |
if (!e || e.length === 0) { | |
console.log("no keyframe diff images to load"); | |
} | |
} | |
}; | |
b.init = function() { | |
if (DEBUG) { | |
console.log("loading keyframe diff images"); | |
} | |
this._loader = new d(this.flowData.imageUrlPattern, this.flowData); | |
return this._loader.load().then(this._storeImages.bind(this)); | |
}; | |
b.renderKeyframe = function(g, f, o) { | |
var e = g.getContext("2d"), | |
i = this._loader.keyframes[f], | |
j = i.image, | |
m = i.x, | |
l = i.y, | |
n = i.width, | |
k = i.height; | |
if (DEBUG) { | |
console.log("applying keyframe diff image: " + f); | |
console.log("x:" + m + " y:" + l + " w:" + n + " h:" + k); | |
} | |
if (o === true) { | |
if (DEBUG) { | |
console.log("drawing superKeyframe sub-rectangle"); | |
} | |
e.drawImage(j, m, l, n, k, m, l, n, k); | |
} else { | |
if (this.flowData.reversible) { | |
if (DEBUG) { | |
console.log("drawing superKeyframe full image"); | |
} | |
e.drawImage(j, 0, 0); | |
} else { | |
if (DEBUG) { | |
console.log("drawing keyframe full image"); | |
} | |
e.drawImage(j, m, l, n, k); | |
} | |
} | |
}; | |
return c; | |
}); | |
AC.define( | |
"flow/compositor/decorator/Keyframe", | |
["require", "flow/keyframe/Render", "defer/Deferred"], | |
function(c) { | |
var d, | |
b = c("flow/keyframe/Render"), | |
a = c("defer/Deferred"); | |
function e(f) { | |
this._compositor = f; | |
this._flowDataProvider = this.mainCompositor._flowDataProvider; | |
} | |
d = e.prototype; | |
d.init = function(f) { | |
this._keyframeDiffRender = new b( | |
this._flowDataProvider._data, | |
this.mainCompositor._imageUrlPattern | |
); | |
return this._keyframeDiffRender.init(); | |
}; | |
d.applyFrame = function(f) { | |
return this._compositor.applyFrame.apply( | |
this._compositor, | |
arguments | |
); | |
}; | |
d.applyKeyframe = function(f, g) { | |
this._keyframeDiffRender.renderKeyframe(this.canvas, f, g); | |
}; | |
d.compositeFrames = function(f, h) { | |
if (!this._isKeyframeDiff(h - 1)) { | |
return this._compositor.compositeFrames.apply( | |
this._compositor, | |
arguments | |
); | |
} | |
var g = new a(); | |
if (DEBUG) { | |
console.groupCollapsed( | |
"Rendering keyframe diff image: " + (f - 1) | |
); | |
} | |
this.applyKeyframe(h - 1); | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
g.resolve(f - 1); | |
return g.promise(); | |
}; | |
d._isKeyframeDiff = function(f) { | |
return f in this._keyframeDiffRender._loader._keyframes; | |
}; | |
d.calculateRenderCount = function(f, g) { | |
return this._compositor.calculateRenderCount.apply( | |
this._compositor, | |
arguments | |
); | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(d, { | |
frameCount: { | |
get: function() { | |
return this._compositor.frameCount; | |
}, | |
enumerable: true | |
}, | |
canvas: { | |
get: function() { | |
return this._compositor.canvas; | |
}, | |
set: function(f) { | |
return (this._compositor.canvas = f); | |
}, | |
enumerable: true | |
}, | |
mainCompositor: { | |
get: function() { | |
return this._compositor.mainCompositor; | |
}, | |
enumerable: true | |
} | |
}); | |
return e; | |
} | |
); | |
AC.define("flow/compositor/decorator/Superframe", [], function() { | |
var a; | |
function b(d, c) { | |
this._compositor = d; | |
this._superframeInterval = c || 4; | |
} | |
a = b.prototype; | |
a._getClosestSuperframe = function(c) { | |
return ( | |
Math.round(c / this._superframeInterval) * this._superframeInterval | |
); | |
}; | |
a.init = function(c) { | |
this._screenCanvas = c; | |
}; | |
a.applyFrame = function() { | |
this._compositor.applyFrame.apply(this._compositor, arguments); | |
}; | |
a.calculateRenderCount = function(c, e) { | |
var d = this._getClosestSuperframe(c); | |
if (Math.abs(d - e) > this._superframeInterval / 2) { | |
c = d + (c > e ? -1 : 1) * this._superframeInterval; | |
return this.calculateRenderCount(c, e) + 1; | |
} else { | |
return Math.abs(d - e) + 1; | |
} | |
}; | |
a.compositeFrames = function(c, f) { | |
var g, d; | |
if (f <= 0 || f >= this.frameCount - 2) { | |
this._compositor.compositeFrames(c, f); | |
} | |
if (c > this.frameCount - 2) { | |
c = this.frameCount - 2; | |
} else { | |
if (c <= 0) { | |
c = 1; | |
} | |
} | |
d = this._getClosestSuperframe(c); | |
if (DEBUG) { | |
console.groupCollapsed("Rendering : " + c + "..." + f); | |
} | |
if ( | |
this._compositor.calculateRenderCount(c, f) > | |
this.calculateRenderCount(c, f) | |
) { | |
if (DEBUG) { | |
console.groupCollapsed("Rendering (superframe) : " + d); | |
} | |
g = this._compositor.compositeFrames(d, d).then( | |
function e() { | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
var h = d + (c > f ? -1 : 1) * this._superframeInterval; | |
this._compositor.compositeFrames(d, h).then( | |
function() { | |
return this.compositeFrames(h, f); | |
}.bind(this) | |
); | |
}.bind(this) | |
); | |
} else { | |
if (DEBUG) { | |
console.groupCollapsed( | |
"Rendering (final frames) : " + c + "..." + f | |
); | |
} | |
g = this._compositor.compositeFrames(c, f).then( | |
function e() { | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
}.bind(this) | |
); | |
} | |
g.then( | |
function e() { | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
}.bind(this) | |
); | |
return g; | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(a, { | |
frameCount: { | |
get: function() { | |
return this._compositor.frameCount; | |
}, | |
enumerable: true | |
}, | |
canvas: { | |
get: function() { | |
return this._compositor.canvas; | |
}, | |
set: function(c) { | |
return (this._compositor.canvas = c); | |
}, | |
enumerable: true | |
}, | |
mainCompositor: { | |
get: function() { | |
return this._compositor.mainCompositor; | |
}, | |
enumerable: true | |
} | |
}); | |
return b; | |
}); | |
AC.define( | |
"flow/compositor/decorator/SuperKeyframe", | |
["require", "defer/Deferred"], | |
function(b) { | |
var c, | |
a = b("defer/Deferred"); | |
function d(e) { | |
this._compositor = e; | |
this._frames = this.mainCompositor._flowDataProvider._data.frames; | |
this._superframeInterval = this.mainCompositor._diffRender.flowData.superframeFrequency; | |
} | |
c = d.prototype; | |
c.init = function(e) { | |
return this._compositor.init.apply(this._compositor, arguments); | |
}; | |
c.applyFrame = function(e) { | |
return this._compositor.applyFrame.apply( | |
this._compositor, | |
arguments | |
); | |
}; | |
c.applyKeyframe = function(e, f) { | |
this._compositor.applyKeyframe.apply(this._compositor, arguments); | |
}; | |
c.compositeFrames = function(e, h) { | |
var i, | |
g, | |
f = new a(); | |
if (h < 1 || h > this.frameCount - 2) { | |
return this._compositor.compositeFrames.apply( | |
this._compositor, | |
arguments | |
); | |
} | |
if (this._isKeyframeDiff(h - 1)) { | |
i = Math.abs(e - h) === 1 ? true : false; | |
if (DEBUG) { | |
console.groupCollapsed( | |
"Drawing superKeyframe image: " + (h - 1) | |
); | |
} | |
this.applyKeyframe(h - 1, i); | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
f.resolve(e - 1); | |
return f.promise(); | |
} | |
if (Math.abs(h - e) > this._superframeInterval) { | |
g = this._getShortestRender(e, h); | |
if ( | |
this._isKeyframeDiff(g - 1) || | |
g <= 0 || | |
g >= this.frameCount - 2 | |
) { | |
return this._compositeFromSuperKeyframe(g, h); | |
} | |
} | |
if (DEBUG) { | |
console.log( | |
"SuperKeyframe compositor handing off to slave compositor: fromFrame:" + | |
e + | |
" toFrame:" + | |
h | |
); | |
} | |
return this._compositor.compositeFrames.apply(this._compositor, [ | |
e, | |
h | |
]); | |
}; | |
c._getShortestRender = function(e, g) { | |
var i = this._compositor.calculateRenderCount, | |
h = this._getClosestSuperKeyframe(g - 1), | |
f = i.apply(this._compositor, [h, g]) + 1, | |
j = i.apply(this._compositor, [e, g]); | |
if (f <= j) { | |
return h; | |
} else { | |
return e; | |
} | |
}; | |
c._compositeFromSuperKeyframe = function(i, g) { | |
var e = this.canvas.getContext("2d"), | |
f = | |
i <= 0 | |
? this.mainCompositor._images[0] | |
: i >= this.frameCount - 2 | |
? this.mainCompositor._images[1] | |
: this._frames[i - 1].image, | |
h; | |
if (DEBUG) { | |
console.log( | |
"Drawing superKeyframe for composite base: superKeyframe " + | |
(i - 1) | |
); | |
} | |
e.drawImage(f, 0, 0); | |
return this._compositor.compositeFrames.call( | |
this._compositor, | |
i, | |
g | |
); | |
}; | |
c._getClosestSuperFrame = function(e) { | |
return ( | |
Math.round(e / this._superframeInterval) * | |
this._superframeInterval | |
); | |
}; | |
c._getClosestSuperKeyframe = function(f) { | |
var j, | |
k, | |
h, | |
g, | |
e = this._frames.length; | |
if (f < e + 1 && f > 0) { | |
g = f - 1; | |
while (g >= 0) { | |
if (this._frames[g].type === "keyframe") { | |
j = g + 1; | |
break; | |
} | |
g -= 1; | |
} | |
g = f + 1; | |
while (g <= e - 1) { | |
if (this._frames[g].type === "keyframe") { | |
k = g + 1; | |
break; | |
} | |
g += 1; | |
} | |
} | |
j = j ? j : 0; | |
k = k ? k : this.frameCount; | |
h = f - j < k - f ? j : k; | |
return h; | |
}; | |
c._isKeyframeDiff = function(e) { | |
return this._compositor._isKeyframeDiff.apply( | |
this._compositor, | |
arguments | |
); | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(c, { | |
frameCount: { | |
get: function() { | |
return this._compositor.frameCount; | |
}, | |
enumerable: true | |
}, | |
canvas: { | |
get: function() { | |
return this._compositor.canvas; | |
}, | |
set: function(e) { | |
return (this._compositor.canvas = e); | |
}, | |
enumerable: true | |
}, | |
mainCompositor: { | |
get: function() { | |
return this._compositor.mainCompositor; | |
}, | |
enumerable: true | |
} | |
}); | |
return d; | |
} | |
); | |
AC.define("flow/compositor/decorator/Cache", [], function() { | |
var b; | |
function a(d, c) { | |
this._compositor = d; | |
this._keyframeInterval = c || 8; | |
this._keyframes = []; | |
} | |
b = a.prototype; | |
b._getClosestKeyframe = function(c) { | |
var d = c % this._keyframeInterval, | |
e = | |
Math.floor(c / this._keyframeInterval) + | |
(d > this._keyframeInterval / 2 ? 1 : 0); | |
return e; | |
}; | |
b._getFrameFromKeyframe = function(c) { | |
return c * this._keyframeInterval; | |
}; | |
b._saveKeyframe = function(e) { | |
var c, | |
d = Math.floor(e / this._keyframeInterval); | |
if (e % this._keyframeInterval === 0 && !this._keyframes[d]) { | |
if (DEBUG) { | |
console.log("saving keyframe " + e); | |
} | |
c = document.createElement("canvas"); | |
c.width = this._compositor.canvas.width; | |
c.height = this._compositor.canvas.height; | |
c.getContext("2d").drawImage(this._compositor.canvas, 0, 0); | |
this._keyframes[d] = c; | |
} | |
}; | |
b.init = function(c) { | |
return this._compositor.init.apply(this._compositor, arguments); | |
}; | |
b.applyFrame = function() { | |
this._compositor.applyFrame.apply(this._compositor, arguments); | |
}; | |
b.calculateRenderCount = function(c, d) { | |
c = this._getFrameFromKeyframe(this._getClosestKeyframe(d)); | |
return this._compositor.calculateRenderCount(c, d) + 1; | |
}; | |
b.compositeFrames = function(c, e) { | |
var f = this._getClosestKeyframe(e); | |
if (DEBUG) { | |
console.groupCollapsed("Rendering frames: " + c + "..." + e); | |
} | |
if ( | |
this._keyframes[f] && | |
this._compositor.calculateRenderCount(c, e) > | |
this.calculateRenderCount(c, e) | |
) { | |
c = this._getFrameFromKeyframe(f); | |
if (DEBUG) { | |
console.log("applying prerendered keyframe: " + c); | |
} | |
this.applyFrame(this._keyframes[f]); | |
return this._compositor.compositeFrames(c, e).then(function d() { | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
}); | |
} else { | |
return this._compositor.compositeFrames(c, e).then( | |
function d() { | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
}, | |
null, | |
this._saveKeyframe.bind(this) | |
); | |
} | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(b, { | |
frameCount: { | |
get: function() { | |
return this._compositor.frameCount; | |
}, | |
enumerable: true | |
}, | |
canvas: { | |
get: function() { | |
return this._compositor.canvas; | |
}, | |
set: function(c) { | |
return (this._compositor.canvas = c); | |
}, | |
enumerable: true | |
} | |
}); | |
return a; | |
}); | |
AC.define("stats/Benchmark", [], function() { | |
function a(b) { | |
this.name = b; | |
} | |
a.prototype.start = function() { | |
if (DEBUG) { | |
console.log("▼▼▼ start " + this.name + " benchmark"); | |
this.startTime = new Date().getTime(); | |
console.time(this.name); | |
} | |
}; | |
a.prototype.end = function() { | |
if (DEBUG) { | |
this.endTime = new Date().getTime(); | |
console.log( | |
"▲▲▲ end " + | |
this.name + | |
" benchmark " + | |
(this.endTime - this.startTime) / 1000 + | |
" sec" | |
); | |
console.time(this.timeEnd); | |
} | |
}; | |
return a; | |
}); | |
AC.define( | |
"flow/compositor/decorator/Benchmark", | |
["require", "stats/Benchmark"], | |
function(a) { | |
var b, | |
d = a("stats/Benchmark"); | |
function c(e) { | |
this._compositor = e; | |
} | |
b = c.prototype; | |
b.init = function(e) { | |
var f = new d("init"); | |
f.start(); | |
return this._compositor.init | |
.apply(this._compositor, arguments) | |
.then(f.end.bind(f)); | |
}; | |
b.applyFrame = function() { | |
var e = new d("applyFrame"); | |
e.start(); | |
this._compositor.applyFrame.apply(this._compositor, arguments); | |
e.end.bind(e); | |
}; | |
b.calculateRenderCount = function() { | |
return this._compositor.calculateRenderCount.apply( | |
this._compositor, | |
arguments | |
); | |
}; | |
b.compositeFrames = function() { | |
var e = new d("renderFrames"); | |
e.start(); | |
return this._compositor.compositeFrames | |
.apply(this._compositor, arguments) | |
.then(e.end.bind(e)); | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(b, { | |
frameCount: { | |
get: function() { | |
return this._compositor.frameCount; | |
}, | |
enumerable: true | |
}, | |
canvas: { | |
get: function() { | |
return this._compositor.canvas; | |
}, | |
set: function(e) { | |
return (this._compositor.canvas = e); | |
}, | |
enumerable: true | |
} | |
}); | |
c.prototype = b; | |
return c; | |
} | |
); | |
AC.define( | |
"flow/Flow", | |
[ | |
"require", | |
"defer/Deferred", | |
"flow/compositor/decorator/Keyframe", | |
"flow/compositor/decorator/Superframe", | |
"flow/compositor/decorator/SuperKeyframe", | |
"flow/compositor/decorator/Cache", | |
"flow/compositor/decorator/Benchmark" | |
], | |
function(a) { | |
var c, | |
f = a("defer/Deferred"), | |
g = a("flow/compositor/decorator/Keyframe"), | |
e = a("flow/compositor/decorator/Superframe"), | |
d = a("flow/compositor/decorator/SuperKeyframe"), | |
i = a("flow/compositor/decorator/Cache"), | |
h = a("flow/compositor/decorator/Benchmark"); | |
function b(j, k) { | |
this._compositor = j; | |
this.options = k || {}; | |
} | |
c = b.prototype; | |
c.gotoFrame = function(j) { | |
if (this._rendering) { | |
return new f().resolve(); | |
} else { | |
if (this._currentFrame === j) { | |
return new f().resolve(); | |
} | |
} | |
this._rendering = true; | |
if (DEBUG) { | |
console.groupCollapsed( | |
"gotoFrame:" + j + " currentFrame:" + this._currentFrame | |
); | |
} | |
return this._compositor.compositeFrames(this._currentFrame, j).then( | |
function() { | |
this._rendering = false; | |
this._currentFrame = j; | |
if (DEBUG) { | |
console.groupEnd(); | |
} | |
}.bind(this) | |
); | |
}; | |
c.init = function(k) { | |
var j; | |
if (k.nodeName === "CANVAS") { | |
j = k; | |
} else { | |
j = document.createElement("canvas"); | |
k.appendChild(j); | |
} | |
return this._compositor.init(j).then( | |
function(l) { | |
return f.all([ | |
this._compositor | |
.createDiffRender(l) | |
.then(this._decorateCompositor.bind(this)) | |
]); | |
}.bind(this) | |
); | |
}; | |
c._decorateCompositor = function() { | |
var j = this._compositor, | |
l = this._compositor._diffRender.flowData, | |
k = this._compositor.canvas; | |
if (l.superframeFrequency) { | |
j = new e(j, l.superframeFrequency); | |
} | |
if (l.version === 3) { | |
j = new g(j); | |
} | |
if (l.version === 3 && l.superframeFrequency) { | |
j = new d(j); | |
} | |
if (this.options.keyframeCache) { | |
j = new i(j, this.options.keyframeCache); | |
} | |
if (this.options.benchmark) { | |
j = new h(j); | |
} | |
if (j === this._compositor) { | |
return new f().resolve(); | |
} else { | |
this._compositor = j; | |
return this._compositor.init(k); | |
} | |
}; | |
if (typeof Object.defineProperties !== "function") { | |
return function() {}; | |
} | |
Object.defineProperties(c, { | |
_currentFrame: { value: 0, enumerable: false, writable: true }, | |
frameCount: { | |
get: function() { | |
return this._compositor.frameCount; | |
}, | |
enumerable: true | |
} | |
}); | |
return b; | |
} | |
); | |
AC.define( | |
"flow/playerFactory", | |
[ | |
"require", | |
"flow/compositor/Sequence", | |
"flow/data/provider/Async", | |
"flow/data/provider/Sync", | |
"flow/Player", | |
"flow/Flow" | |
], | |
function(c) { | |
var b = c("flow/compositor/Sequence"), | |
g = c("flow/data/provider/Async"), | |
f = c("flow/data/provider/Sync"), | |
a = c("flow/Player"), | |
d = c("flow/Flow"); | |
function e(l, n, k, m, j) { | |
var i, o, h; | |
j = j || {}; | |
j = { | |
keyframeCache: | |
typeof j.keyframeCache === "undefined" | |
? 8 | |
: j.keyframeCache, | |
benchmark: | |
typeof j.benchmark === "undefined" ? false : j.benchmark, | |
preload: typeof j.preload === "undefined" ? true : j.preload | |
}; | |
n = n || [l.getAttribute("data-start-frame")]; | |
if (l.getAttribute("data-end-frame")) { | |
n.push(l.getAttribute("data-end-frame")); | |
} | |
k = k || l.getAttribute("data-image-url-pattern"); | |
h = typeof m === "string" ? new g(m) : new f(m); | |
i = new b(n, k, h); | |
o = new a(l, new d(i, j)); | |
if (j.preload) { | |
o.load(); | |
} | |
return o; | |
} | |
return e; | |
} | |
); | |
AC.define("overview/shared/MediaTimer", [], function() { | |
function b() { | |
this._currentTimeMS = 0; | |
this._playbackRate = 1; | |
this.playing = false; | |
this._paused = true; | |
this._resetStartTime(); | |
} | |
var a = b.prototype; | |
a._updateCurrentTime = function() { | |
var d, | |
c = +new Date(); | |
if (this.paused) { | |
d = 0; | |
} else { | |
d = c - this._startTime; | |
} | |
this._currentTimeMS += d * this._playbackRate; | |
this._startTime = c; | |
}; | |
(a._resetStartTime = function() { | |
this._startTime = +new Date(); | |
}), | |
(a.play = function() { | |
this._resetStartTime(); | |
this.playing = true; | |
this._paused = false; | |
return this; | |
}); | |
a.pause = function() { | |
this._updateCurrentTime(); | |
this.playing = false; | |
this._paused = true; | |
return this; | |
}; | |
Object.defineProperties(a, { | |
currentTime: { | |
get: function() { | |
this._updateCurrentTime(); | |
return this._currentTimeMS / 1000; | |
}, | |
set: function(c) { | |
this._resetStartTime(); | |
this._currentTimeMS = c * 1000; | |
} | |
}, | |
playbackRate: { | |
get: function() { | |
return this._playbackRate; | |
}, | |
set: function(c) { | |
this._resetStartTime(); | |
this._playbackRate = c; | |
} | |
}, | |
paused: { | |
get: function() { | |
return this._paused; | |
}, | |
set: function() {} | |
} | |
}); | |
return b; | |
}); | |
AC.define( | |
"overview/shared/media/TimedVideo", | |
["require", "overview/shared/MediaTimer", "defer/Deferred"], | |
function(c) { | |
var e = c("overview/shared/MediaTimer"), | |
b = c("defer/Deferred"); | |
function a(i, f, h) { | |
this._deferred = new b(); | |
this._paused = true; | |
this._playbackRate = 1; | |
this._backwardsTimer = new e(); | |
this._video = document.createElement("video"); | |
if (h) { | |
this._video.poster = h; | |
} | |
var g = function(j) { | |
this._video.removeEventListener("error", g); | |
this._video.parentNode.removeChild(this._video); | |
this._deferred.reject(j); | |
}.bind(this); | |
this._video.addEventListener("error", g); | |
this._video.addEventListener( | |
"canplay", | |
function(j) { | |
this._video.removeEventListener("error", g); | |
this.canplay = true; | |
this._deferred.resolve(j); | |
}.bind(this) | |
); | |
this._video.src = f; | |
i.appendChild(this._video); | |
} | |
var d = a.prototype; | |
d.promise = function() { | |
return this._deferred.promise(); | |
}; | |
d.update = function() { | |
if (this.playbackRate < 0) { | |
this._video.currentTime = this._backwardsTimer.currentTime; | |
} | |
}; | |
d.play = function() { | |
if (this.paused) { | |
if (this.playbackRate >= 0) { | |
this._video.playbackRate = this.playbackRate; | |
this._video.play(); | |
} else { | |
this._backwardsTimer.playbackRate = this.playbackRate; | |
this._backwardsTimer.play(); | |
} | |
this._paused = false; | |
} | |
return true; | |
}; | |
d.pause = function() { | |
if (!this.paused) { | |
this._video.pause(); | |
this._backwardsTimer.pause(); | |
this.currentTime = this.currentTime; | |
this._paused = true; | |
} | |
}; | |
Object.defineProperties(d, { | |
currentTime: { | |
get: function() { | |
if (!this.paused && this.playbackRate >= 0) { | |
return this._video.currentTime; | |
} else { | |
return this._backwardsTimer.currentTime; | |
} | |
}, | |
set: function(f) { | |
this._video.currentTime = f; | |
this._backwardsTimer.currentTime = f; | |
} | |
}, | |
playbackRate: { | |
get: function() { | |
return this._playbackRate; | |
}, | |
set: function(f) { | |
this._playbackRate = f; | |
} | |
}, | |
paused: { | |
get: function() { | |
return this._paused; | |
}, | |
set: function() {} | |
} | |
}); | |
return a; | |
} | |
); | |
AC.define( | |
"overview/shared/media/BiVideo", | |
["require", "defer/Deferred", "overview/shared/MediaTimer"], | |
function(b) { | |
var a = b("defer/Deferred"), | |
e = b("overview/shared/MediaTimer"); | |
function d(v, k, l, p, i) { | |
var g = new a(), | |
h = new a(), | |
t, | |
j, | |
u = 0, | |
o, | |
f; | |
i = i || 0; | |
this._paused = true; | |
this._playbackRate = 1; | |
this._mediaTimer = new e(); | |
this._forwardsVideo = document.createElement("video"); | |
if (p) { | |
this._forwardsVideo.poster = p; | |
} | |
if (l) { | |
this._backwardsVideo = document.createElement("video"); | |
} | |
this._canPlayBackwards = false; | |
this._canPlayForwards = false; | |
var r = function(w) { | |
f = +new Date(); | |
document.removeEventListener("touchstart", r); | |
this._forwardsVideo.addEventListener( | |
"canplaythrough", | |
function() { | |
document.addEventListener("touchstart", n); | |
} | |
); | |
this._forwardsVideo.load(); | |
window.app.uiController.next(); | |
w.preventDefault(); | |
}.bind(this); | |
var n = function(w) { | |
document.removeEventListener("touchstart", n); | |
var x = setInterval( | |
function() { | |
var y; | |
try { | |
y = this._forwardsVideo.seekable.end(0); | |
} catch (z) {} | |
if (y === this._forwardsVideo.duration && this.paused) { | |
clearInterval(x); | |
this._forwardsVideo.addEventListener( | |
"seeked", | |
function(A) { | |
this._forwardsVideo.style.opacity = 1; | |
}.bind(this) | |
); | |
this._forwardsVideo.currentTime = | |
i || this.currentTime; | |
this._canPlayForwards = true; | |
app.uiController.enableInput(); | |
} | |
}.bind(this), | |
100 | |
); | |
w.preventDefault(); | |
}.bind(this); | |
var m = function(w) { | |
this._forwardsVideo.removeEventListener("progress", m); | |
g.resolve(w); | |
}.bind(this); | |
var q = function(w) { | |
this._backwardsVideo.removeEventListener("progress", q); | |
h.resolve(w); | |
}.bind(this); | |
this._forwardsVideo.style.height = "100%"; | |
this._forwardsVideo.style.width = "100%"; | |
this._forwardsVideo.style.opacity = 0; | |
this._forwardsVideo.controls = false; | |
if (l) { | |
this._backwardsVideo.style.height = "100%"; | |
this._backwardsVideo.style.width = "100%"; | |
this._backwardsVideo.style.opacity = 0; | |
this._backwardsVideo.controls = false; | |
this._backwardsVideo.addEventListener("progress", q); | |
this._backwardsVideo.src = l; | |
v.appendChild(this._backwardsVideo); | |
} else { | |
h = true; | |
} | |
this._forwardsVideo.addEventListener("progress", m); | |
this._forwardsVideo.src = k; | |
v.appendChild(this._forwardsVideo); | |
this._promise = a.join(g, h).then( | |
function() { | |
document.addEventListener("touchstart", r); | |
}.bind(this) | |
); | |
} | |
var c = d.prototype; | |
c.promise = function() { | |
return this._promise; | |
}; | |
c.play = function() { | |
var f = false; | |
if (this.paused) { | |
if (this.playbackRate >= 0) { | |
if (this._canPlayForwards) { | |
this._forwardsVideo.play(); | |
this._forwardsVideo.style.opacity = "1"; | |
if (this._backwardsVideo) { | |
this._backwardsVideo.style.opacity = "0"; | |
} | |
this._paused = false; | |
f = true; | |
} else { | |
this._mediaTimer.play(); | |
this._paused = false; | |
f = true; | |
} | |
} else { | |
if (this._canPlayBackwards) { | |
this._backwardsVideo.currentTime = | |
this._backwardsVideo.duration - | |
this._mediaTimer.currentTime; | |
this._backwardsVideo.play(); | |
setTimeout( | |
function() { | |
this._forwardsVideo.style.opacity = "0"; | |
this._backwardsVideo.style.opacity = "1"; | |
}.bind(this), | |
300 | |
); | |
this._paused = false; | |
f = true; | |
} else { | |
if (this._backwardsVideo) { | |
this._backwardsVideo.play(); | |
this._backwardsVideo.pause(); | |
if ( | |
this._backwardsVideo.buffered.end(0) === | |
this._backwardsVideo.duration | |
) { | |
this._canPlayBackwards = true; | |
this._backwardsVideo.currentTime = | |
this._backwardsVideo.duration - | |
this._mediaTimer.currentTime; | |
} | |
} | |
} | |
} | |
} | |
return f; | |
}; | |
c.pause = function() { | |
if (this._playbackRate >= 0) { | |
if (this._canPlayForwards) { | |
this._forwardsVideo.pause(); | |
this._mediaTimer.currentTime = this._forwardsVideo.currentTime; | |
if (this._canPlayBackwards) { | |
this._backwardsVideo.currentTime = | |
this._backwardsVideo.duration - | |
this._mediaTimer.currentTime; | |
} | |
} | |
} else { | |
if (this._canPlayBackwards) { | |
this._backwardsVideo.pause(); | |
this._mediaTimer.currentTime = | |
this._backwardsVideo.duration - | |
this._backwardsVideo.currentTime; | |
this._forwardsVideo.currentTime = this._mediaTimer.currentTime; | |
} | |
} | |
this._mediaTimer.pause(); | |
this._paused = true; | |
}; | |
Object.defineProperties(c, { | |
currentTime: { | |
get: function() { | |
if (this._playbackRate >= 0 && this._canPlayForwards) { | |
return this._forwardsVideo.currentTime; | |
} else { | |
if (this._playbackRate < 0 && this._canPlayBackwards) { | |
return ( | |
this._backwardsVideo.duration - | |
this._backwardsVideo.currentTime | |
); | |
} else { | |
return this._mediaTimer.currentTime; | |
} | |
} | |
}, | |
set: function(g) { | |
if (this._paused) { | |
this._mediaTimer.currentTime = g; | |
try { | |
this._forwardsVideo.currentTime = g; | |
this._forwardsVideo.play(); | |
this._forwardsVideo.pause(); | |
} catch (f) {} | |
if (this._backwardsVideo) { | |
try { | |
this._backwardsVideo.currentTime = | |
this._backwardsVideo.duration - g; | |
} catch (f) {} | |
} | |
} | |
} | |
}, | |
playbackRate: { | |
get: function() { | |
return this._playbackRate; | |
}, | |
set: function(g) { | |
if (this._paused) { | |
var f = this.currentTime; | |
this._playbackRate = g; | |
this.currentTime = f; | |
} | |
} | |
}, | |
paused: { | |
get: function() { | |
return this._paused; | |
}, | |
set: function() {} | |
} | |
}); | |
return d; | |
} | |
); | |
AC.define( | |
"overview/shared/ClipContainer", | |
[ | |
"require", | |
"overview/shared/controller/Clip", | |
"flow/playerFactory", | |
"overview/shared/media/TimedVideo", | |
"overview/shared/media/BiVideo", | |
"overview/shared/MediaTimer", | |
"defer/Deferred", | |
"assetLoader/AssetLoader" | |
], | |
function(b) { | |
var a = b("overview/shared/controller/Clip"), | |
e = b("flow/playerFactory"), | |
d = b("overview/shared/media/TimedVideo"), | |
g = b("overview/shared/media/BiVideo"), | |
h = b("overview/shared/MediaTimer"), | |
c = b("defer/Deferred"), | |
f = b("assetLoader/AssetLoader"); | |
function j(m) { | |
var k = document.getElementById("stillcontainer"); | |
var l; | |
for (var n in m) { | |
if (!k.querySelector(".still_" + n)) { | |
l = document.createElement("img"); | |
l.src = m[n]; | |
l.alt = ""; | |
l.className = "still still_" + n; | |
k.appendChild(l); | |
} | |
} | |
} | |
function i(m, l, k) { | |
this.containerElement = m; | |
this.config = l; | |
this.clips = k; | |
} | |
i.prototype.constructor = i; | |
i.prototype.initFlow = function(l) { | |
var w = new c(); | |
var k; | |
var v = "json"; | |
var q = "jpg"; | |
var o = [l.flowKeyFrame, l.flowEndFrame]; | |
var m = l.diffDir; | |
var r = l.flowPattern || "flow_###."; | |
var u = m + r + q; | |
var n = l.manifestFileName || "flow_manifest."; | |
var p = /^https?:\/\/[^\/]+\//i; | |
var t = l.manifest.replace(p, "/") + n + v; | |
if (l.stills) { | |
j(l.stills, l.stillsDir); | |
} | |
k = e(this.containerElement, o, u, t, { | |
superframes: false, | |
keyframeCache: false, | |
benchmark: false | |
}); | |
k.frameRate = l.fps; | |
k.loop = false; | |
k.on("canplaythrough", function(x) { | |
w.resolve(x); | |
}); | |
this.mediaElement = k; | |
return w.promise(); | |
}; | |
i.prototype.initVideo = function(k) { | |
if (k.stills) { | |
j(k.stills); | |
} | |
this.mediaElement = new d(this.containerElement, k.file, k.poster); | |
return this.mediaElement.promise(); | |
}; | |
i.prototype.initBiVideo = function(k) { | |
if (k.stills) { | |
j(k.stills); | |
} | |
this.mediaElement = new g( | |
this.containerElement, | |
k.file, | |
k.backwards, | |
k.poster, | |
k.startTime | |
); | |
return this.mediaElement.promise(); | |
}; | |
i.prototype.loadExperience = function(k) { | |
switch (k.type) { | |
case "bivideo": | |
return this.initBiVideo(k); | |
case "video": | |
return this.initVideo(k); | |
case "flow": | |
return this.initFlow(k); | |
return new c().reject(); | |
} | |
}; | |
i.prototype.load = function() { | |
var k = new c(), | |
l = this.config; | |
this.loadExperience(l[0]).then( | |
function() { | |
k.resolve(); | |
}, | |
function() { | |
this.loadExperience(l[1]).then(function() { | |
k.resolve(); | |
}); | |
}.bind(this) | |
); | |
return k.promise().then( | |
function() { | |
this.clipController = new a(this.clips, this.mediaElement); | |
}.bind(this) | |
); | |
}; | |
i.prototype.play = function() { | |
this.clipController.play(); | |
}; | |
return i; | |
} | |
); | |
/*! MIT License | |
* | |
* KeySpline - use bezier curve for transition easing function | |
* Copyright (c) 2012 Gaetan Renaudeau <renaudeau.gaetan@gmail.com> | |
* | |
* Permission is hereby granted, free of charge, to any person obtaining a | |
* copy of this software and associated documentation files (the "Software"), | |
* to deal in the Software without restriction, including without limitation | |
* the rights to use, copy, modify, merge, publish, distribute, sublicense, | |
* and/or sell copies of the Software, and to permit persons to whom the | |
* Software is furnished to do so, subject to the following conditions: | |
* | |
* The above copyright notice and this permission notice shall be included in | |
* all copies or substantial portions of the Software. | |
* | |
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL | |
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | |
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER | |
* DEALINGS IN THE SOFTWARE. | |
*/ | |
AC.define("overview/shared/vendor/KeySpline", ["require"], function(a) { | |
function b(l, i, k, g) { | |
this.get = function(m) { | |
if (l == i && k == g) { | |
return m; | |
} | |
return d(h(m), i, g); | |
}; | |
function f(m, n) { | |
return 1 - 3 * n + 3 * m; | |
} | |
function e(m, n) { | |
return 3 * n - 6 * m; | |
} | |
function c(m) { | |
return 3 * m; | |
} | |
function d(o, m, n) { | |
return ((f(m, n) * o + e(m, n)) * o + c(m)) * o; | |
} | |
function j(o, m, n) { | |
return 3 * f(m, n) * o * o + 2 * e(m, n) * o + c(m); | |
} | |
function h(p) { | |
var n = p; | |
for (var o = 0; o < 4; ++o) { | |
var q = j(n, l, k); | |
if (q === 0) { | |
return n; | |
} | |
var m = d(n, l, k) - p; | |
n -= m / q; | |
} | |
return n; | |
} | |
} | |
return b; | |
}); | |
AC.define( | |
"overview/shared/clip/Tween", | |
["require", "overview/shared/vendor/KeySpline"], | |
function(f) { | |
var h = f("overview/shared/vendor/KeySpline"); | |
var e = [ | |
"transform", | |
"webkitTransform", | |
"MozTransform", | |
"msTransform", | |
"oTransform" | |
]; | |
var g = AC.EasingFunctions; | |
var c = ["#measurements .width .line"]; | |
var b; | |
(function d() { | |
var i = document.createElement("div"); | |
e.some(function(j) { | |
if (j in i.style) { | |
b = j; | |
return true; | |
} | |
}); | |
})(); | |
function a(i, l, k) { | |
var j = document.querySelector(i); | |
if (j && j.nodeType && j.nodeType === 1) { | |
this._el = j; | |
} else { | |
this._el = i; | |
} | |
this.duration = l; | |
this.props = k || []; | |
this.props.forEach(function(n) { | |
var m; | |
if (n.easing === "keyspline") { | |
m = n.keyspline; | |
n.keyspline = new h(m[0], m[1], m[2], m[3]); | |
} | |
}); | |
this.beginning = 0; | |
} | |
a.prototype = { | |
tween: function(l) { | |
var k = this.duration, | |
j = this.el, | |
i = b; | |
if (this.props.length < 1) { | |
return; | |
} | |
this.props.forEach(function(u) { | |
var r, | |
m = u.units, | |
p = u.axis, | |
o = u.property, | |
t, | |
q, | |
n; | |
if (u.keyspline) { | |
r = u.keyspline.get(l / k) * (u.to - u.from); | |
} else { | |
r = g[u.easing || "linear"]( | |
l, | |
u.from, | |
u.to - u.from, | |
k | |
); | |
} | |
if (o === "translate") { | |
q = i; | |
if (p === "x") { | |
n = "translate3d(" + r + m + ", 0, 0)"; | |
} else { | |
if (p === "y") { | |
n = "translate3d(0, " + r + m + ", 0)"; | |
} else { | |
if (p === "z") { | |
n = "translate3d(0, 0, " + r + m + ")"; | |
} | |
} | |
} | |
} else { | |
if (o === "translate2d") { | |
q = i; | |
n = | |
"translate" + | |
p.toUpperCase() + | |
"(" + | |
r + | |
m + | |
")"; | |
} else { | |
if (o === "scale") { | |
q = i; | |
if (p === "x") { | |
n = "scaleX(" + r + ")"; | |
} else { | |
if (p === "y") { | |
n = "scaleY(" + r + ")"; | |
} else { | |
if (p === "z") { | |
n = "scaleZ(" + r + ")"; | |
} else { | |
n = "scale(" + r + ")"; | |
} | |
} | |
} | |
} else { | |
q = o; | |
n = r + (u.units || ""); | |
} | |
} | |
} | |
j.style[q] = n; | |
}); | |
} | |
}; | |
Object.defineProperties(a.prototype, { | |
currentTime: { | |
enumerable: true, | |
configurable: false, | |
get: function() { | |
return this._currentTime; | |
}, | |
set: function(i) { | |
this._currentTime = Math.max(0, Math.min(i, this.duration)); | |
this.tween(this._currentTime); | |
} | |
}, | |
el: { | |
enumerable: true, | |
configurable: false, | |
get: function() { | |
if ( | |
this._el && | |
this._el.nodeType && | |
this._el.nodeType === 1 | |
) { | |
return this._el; | |
} else { | |
if (!document.querySelector(this._el)) { | |
} | |
return (this._el = document.querySelector(this._el)); | |
} | |
} | |
} | |
}); | |
return a; | |
} | |
); | |
AC.define( | |
"overview/shared/controller/Section", | |
[ | |
"require", | |
"overview/shared/MediaTimer", | |
"overview/shared/event/Emitter", | |
"overview/shared/clip/Tween" | |
], | |
function(c) { | |
var g = c("overview/shared/MediaTimer"), | |
i = c("overview/shared/event/Emitter"), | |
h = c("overview/shared/clip/Tween"); | |
var e = 500; | |
var b = AC.Environment.Browser.name === "IE"; | |
var f = AC.Environment.Feature.cssPropertyAvailable("transition"); | |
function a(j, k, l) { | |
i.call(this); | |
if (!k || !k) { | |
throw new Error( | |
"SectionController: timeline is missing or incomplete." | |
); | |
} | |
this._clipController = j; | |
this._pauseTimeline = k; | |
this._sections = l; | |
this._currentSectionIndex = 0; | |
this._currentPauseIndex = 0; | |
this._seekable = false; | |
this._update = this._update.bind(this); | |
this._pauses = this._sections.filter(function(m) { | |
return "pause" in m; | |
}); | |
this.fadeOutAnim = new h("#curtain", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]); | |
this.fadeInAnim = new h("#curtain", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]); | |
this._curtain = document.getElementById("curtain"); | |
this.on( | |
"pauseenter:0", | |
function() { | |
this._seekable = true; | |
}.bind(this) | |
); | |
this._clipController.on("timeupdate", this._update); | |
this._clipController.on( | |
"ended", | |
function() { | |
this._currentPauseIndex = this._pauseTimeline.length - 1; | |
this._enableSections(null, true); | |
}.bind(this) | |
); | |
this._clipController.on("play", this._derivePauseIndex.bind(this)); | |
} | |
var d = (a.prototype = new i()); | |
d.constructor = a; | |
d._update = function(m) { | |
var p = this.currentTime; | |
var l = this._clipController.playbackRate > 0; | |
var q = !l; | |
var o = !this.paused || p === 0 || p === this.duration; | |
var j = l && p >= this._pauseTimeline[this._currentPauseIndex + 1]; | |
var k = q && p <= this._pauseTimeline[this._currentPauseIndex - 1]; | |
var n = o && (j || k); | |
if (n) { | |
this._clipController.pause(); | |
this._currentPauseIndex += l ? 1 : -1; | |
p = this._pauseTimeline[this._currentPauseIndex]; | |
this._clipController.currentTime = p; | |
} | |
this._enableSections(p); | |
if (n) { | |
this.trigger("pauseenter:" + this._currentPauseIndex, { | |
from: this._currentPauseIndex + (l ? -1 : 1), | |
to: this._currentPauseIndex, | |
section: this._pauses[this._currentPauseIndex] | |
}); | |
this._frontCurrentPauseSection(); | |
} | |
}; | |
d._derivePauseIndex = function(k) { | |
var j = 0; | |
while (this._pauseTimeline[j] < k) { | |
this._currentPauseIndex = j++; | |
} | |
return this._currentPauseIndex; | |
}; | |
d._deriveSectionIndex = function(l) { | |
var j, k; | |
if (l === this.duration) { | |
return this._sections.length - 1; | |
} | |
if (l === 0) { | |
return 0; | |
} | |
if (this._clipController.playbackRate > 0) { | |
j = 0; | |
while ( | |
j < this._sections.length && | |
this._sections[j].time < l | |
) { | |
k = ++j; | |
} | |
} else { | |
j = this._sections.length - 1; | |
while (j > -1 && this._sections[j].time > l) { | |
k = --j; | |
} | |
} | |
return k; | |
}; | |
d._enableSections = function(j, m) { | |
var j = j || this.currentTime; | |
var k = m ? this._sections.length - 1 : this._deriveSectionIndex(j); | |
var l = document.querySelectorAll("#panelcontainer > section"); | |
if (this._prevSectionIndex === k) { | |
return; | |
} | |
this._currentSectionIndex = k; | |
[].forEach.call(l, function(q, n) { | |
var p = k === n; | |
var o = k >= n - 1 && k <= n + 1; | |
q.classList[o ? "add" : "remove"]("show"); | |
}); | |
this._prevSectionIndex = k; | |
}; | |
d._frontCurrentPauseSection = function() { | |
var l = document.querySelectorAll("#panelcontainer > section"); | |
var k = this._pauses[this._currentPauseIndex]; | |
var j = document.querySelector(k.labelSelector); | |
[].forEach.call(l, function(m) { | |
m.classList.remove("front"); | |
}); | |
j.classList.add("front"); | |
}; | |
d._fadeOut = function() { | |
if (f) { | |
this._curtain.classList.add("fadeOut"); | |
} else { | |
this._runTimeFade(true); | |
} | |
}; | |
d._fadeIn = function() { | |
if (f) { | |
this._curtain.classList.remove("fadeOut"); | |
} else { | |
this._runTimeFade(false); | |
} | |
}; | |
d._runTimeFade = function(l) { | |
var q, k, p; | |
var n = l ? this.fadeOutAnim : this.fadeInAnim; | |
var j = this._curtain; | |
var o = n.duration; | |
j.style.zIndex = 10000; | |
function m(r) { | |
if (!q) { | |
q = r; | |
} | |
k = (r - q) / 1000; | |
p = k / o * o; | |
n.tween(p); | |
if (k < o) { | |
window.requestAnimationFrame(m); | |
} else { | |
if (!l) { | |
j.style.zIndex = 30; | |
} | |
} | |
} | |
window.requestAnimationFrame(m); | |
}; | |
d._makeJump = function(k, l, j) { | |
return function() { | |
var m = this._pauseTimeline.indexOf(k); | |
this._clipController.pause(); | |
this.trigger("seek", j); | |
setTimeout( | |
function() { | |
this._fadeIn(); | |
this._currentPauseIndex = m; | |
this.currentTime = k; | |
this._enableSections(k); | |
this.trigger("pauseenter:" + m, { | |
from: this._currentPauseIndex, | |
to: m, | |
section: this._pauses[m] | |
}); | |
this._frontCurrentPauseSection(); | |
this._seekable = true; | |
if (typeof l === "function") { | |
cb.call(); | |
} | |
}.bind(this), | |
e | |
); | |
}.bind(this); | |
}; | |
d._makeEndJump = function(k, m, j, l) { | |
return function() { | |
var n = this._pauseTimeline.indexOf(k); | |
var o = this._clipController._mediaTimer._video; | |
l = document.getElementById("wrapper"); | |
l.style.position = "absolute"; | |
l.style.top = "0px"; | |
this._clipController.pause(); | |
if (b) { | |
o.play(); | |
o.pause(); | |
o.play(); | |
o.pause(); | |
} | |
setTimeout( | |
function() { | |
l.style.position = "relative"; | |
this.trigger("seek", j); | |
this._currentPauseIndex = n; | |
this.currentTime = k; | |
this._enableSections(); | |
if (n !== -1) { | |
this.trigger("pauseenter:" + n, { | |
from: this._currentPauseIndex, | |
to: n, | |
section: this._pauses[n] | |
}); | |
} | |
this._seekable = true; | |
document.documentElement.classList.add("overflow"); | |
this._fadeIn(); | |
this._frontCurrentPauseSection(); | |
}.bind(this), | |
e | |
); | |
}.bind(this); | |
}; | |
d.seek = function(l, u) { | |
var r = this._pauseTimeline.indexOf(l); | |
var j = l > this.currentTime ? 1 : -1; | |
var v = Math.abs(this._currentPauseIndex - r) == 1; | |
var p = this._currentPauseIndex == this._pauseTimeline.length - 1; | |
var q = this.currentTime === this.duration; | |
var k = p || q; | |
var t = k | |
? this._pauseTimeline.length - 1 | |
: this._currentPauseIndex; | |
var n = { from: t, to: r }; | |
var m = this[k ? "_makeEndJump" : "_makeJump"].call(this, l, u, n); | |
var o; | |
if (this._currentPauseIndex == r) { | |
return; | |
} | |
if (!this._seekable) { | |
return; | |
} | |
document.getElementById("curtain").style.display = "block"; | |
if (document.body.scrollTop > 0) { | |
document.body.scrollTop = 0; | |
} | |
this.trigger("pauseexit:" + t, { from: t, to: r }); | |
if (!k && this._clipController.paused) { | |
this._clipController.playbackRate = j; | |
o = this._clipController.play(); | |
} | |
if (k || !v || !o) { | |
this._fadeOut(); | |
this._seekable = false; | |
window.setTimeout(m, e); | |
} | |
}; | |
d._triggerPauseExit = function() { | |
var k = this._currentPauseIndex; | |
var j = this._clipController.playbackRate > 0 ? k + 1 : k - 1; | |
if ( | |
this._currentPauseIndex > 0 || | |
this._clipController.playbackRate > 0 | |
) { | |
this.trigger("pauseexit:" + k, { from: k, to: j }); | |
} | |
}; | |
d.next = function() { | |
var j = this._pauseTimeline[this._currentPauseIndex + 1]; | |
if (this._currentPauseIndex < this._pauseTimeline.length - 1) { | |
this.seek(j); | |
} | |
}; | |
d.previous = function() { | |
var j = this._pauseTimeline[this._currentPauseIndex - 1]; | |
if (this._currentPauseIndex > 0) { | |
this.seek(j); | |
} | |
}; | |
d.getSectionFromPausePoint = function(j) { | |
var l = app.sectionController._sections; | |
for (var k in l) { | |
if (l[k].pause === j) { | |
return l[k]; | |
} | |
} | |
}; | |
Object.defineProperties(a.prototype, { | |
currentSection: { | |
enumerable: true, | |
configurable: false, | |
get: function() { | |
return this._sections[this._currentSectionIndex]; | |
} | |
}, | |
currentTime: { | |
enumerable: true, | |
configurable: false, | |
get: function() { | |
return this._clipController.currentTime; | |
}, | |
set: function(j) { | |
this._clipController.currentTime = j; | |
} | |
}, | |
paused: { | |
get: function() { | |
return this._clipController.paused; | |
}, | |
set: function() {} | |
}, | |
duration: { | |
get: function() { | |
return this._clipController.duration; | |
}, | |
set: function() {} | |
} | |
}); | |
return a; | |
} | |
); | |
AC.define("overview/shared/controller/Ui", [], function() { | |
var d = false; | |
var c = 0.2; | |
var a = 250; | |
function b(e) { | |
if (!e) { | |
throw new Error( | |
"UIController: sectionController required for instantiation." | |
); | |
} | |
this._sectionController = e; | |
this._pauseTimeline = e._pauseTimeline; | |
this._takeoverThreshold = c; | |
this._bufferDistance = 0; | |
this._inputControllers = []; | |
this._lastInteractionType = null; | |
this._acceptingInput = true; | |
this._sectionController.on( | |
"pauseenter", | |
function() { | |
window.setTimeout( | |
function() { | |
this._acceptingInput = true; | |
}.bind(this), | |
a | |
); | |
}.bind(this) | |
); | |
this.update = this.update.bind(this); | |
} | |
b.prototype = { | |
getPauseDiff: function() { | |
var e = Infinity, | |
f = this._sectionController.currentTime; | |
this._pauseTimeline.forEach(function(g) { | |
e = Math.min(e, Math.abs(f - g)); | |
}); | |
return e; | |
}, | |
update: function(f) { | |
var e = f > 0 ? 1 : -1; | |
if (!this._sectionController.paused) { | |
return; | |
} | |
this._bufferDistance += f; | |
if (this.getPauseDiff() > this._takeoverThreshold) { | |
if (f > 0) { | |
this._sectionController.next(); | |
} else { | |
this._sectionController.previous(); | |
} | |
} else { | |
if (this._sectionController.currentTime + f > 0) { | |
this._sectionController.currentTime += f; | |
} else { | |
this._sectionController.currentTime = 0; | |
} | |
} | |
}, | |
next: function() { | |
if (this._sectionController.paused && this._acceptingInput) { | |
this._sectionController.next(); | |
this._acceptingInput = false; | |
} | |
}, | |
previous: function() { | |
if (this._sectionController.paused && this._acceptingInput) { | |
this._sectionController.previous(); | |
this._acceptingInput = false; | |
} | |
}, | |
add: function(e) { | |
if (this._inputControllers.indexOf(e) === -1) { | |
this._inputControllers.push(e); | |
} | |
}, | |
disableInput: function() { | |
this._inputControllers.forEach(function(e) { | |
e.disable(); | |
}); | |
}, | |
enableInput: function() { | |
this._inputControllers.forEach(function(e) { | |
e.enable(); | |
}); | |
} | |
}; | |
return b; | |
}); | |
AC.define("overview/shared/controller/Nav", ["require"], function(a) { | |
function b(d, e) { | |
var c = this._getNavigatableSections(e); | |
this._sectionNav = document.getElementById("sectionNav"); | |
this._navContainer = this._sectionNav.querySelector(".list"); | |
this._navRange = this._sectionNav.querySelector(".range"); | |
this._sectionController = d; | |
this._handleClick = this._handleClick.bind(this); | |
this._handlePauseEnter = this._handlePauseEnter.bind(this); | |
this._handlePauseExit = this._handlePauseExit.bind(this); | |
this._handleTouchMove = this._handleTouchMove.bind(this); | |
this._handleTouchEnd = this._handleTouchEnd.bind(this); | |
this._handleTouchStart = this._handleTouchStart.bind(this); | |
this._handleMouseOver = this._handleMouseOver.bind(this); | |
this._handleMouseOut = this._handleMouseOut.bind(this); | |
this._handleChange = this._handleChange.bind(this); | |
this._handleKeyDown = this._handleKeyDown.bind(this); | |
this._buildNavigation(c); | |
this._sectionController.on("pauseexit", this._handlePauseExit); | |
this._sectionController.on("pauseenter", this._handlePauseEnter); | |
this._sectionNav.addEventListener( | |
"touchstart", | |
this._handleTouchStart, | |
true | |
); | |
this._sectionNav.addEventListener("keydown", this._handleKeyDown); | |
if (this._navRange) { | |
if (AC.Environment.Browser.name === "IE") { | |
this._navRange.style.display = "none"; | |
} | |
this._navRange.addEventListener("change", this._handleChange); | |
this._navRange.addEventListener( | |
"focus", | |
function() { | |
var f = this._sectionNav.querySelector(".active"); | |
if (f) { | |
this._highlightNavItem(f); | |
} | |
}.bind(this) | |
); | |
this._navRange.addEventListener( | |
"blur", | |
function() { | |
var f = this._sectionNav.querySelector(".hover"); | |
if (f) { | |
this._unhighlightNavItem(f); | |
} | |
}.bind(this) | |
); | |
} | |
} | |
b.prototype = { | |
constructor: b, | |
_getNavigatableSections: function(c) { | |
if (!this._navigatableSections) { | |
this._navigatableSections = c | |
.filter(function(d) { | |
return !isNaN(d.pause) && d.labelSelector; | |
}) | |
.map(function(e, d) { | |
e.index = d; | |
return e; | |
}); | |
} | |
return this._navigatableSections; | |
}, | |
_handleKeyDown: function(d) { | |
d.stopPropagation(); | |
var c, f; | |
if (d.keyCode !== 13) { | |
return; | |
} | |
c = this._navContainer.querySelector(".hover"); | |
if (c) { | |
f = parseFloat(c.getAttribute("data-seek-time")); | |
} | |
if (!isNaN(f)) { | |
this._sectionController.seek(f); | |
} | |
}, | |
_handlePauseEnter: function(c) {}, | |
_handleClick: function(d) { | |
var c = d.target || d.srcElement; | |
var f; | |
while (!c.getAttribute("data-seek-time")) { | |
c = c.parentNode; | |
} | |
f = parseFloat(c.getAttribute("data-seek-time")); | |
if (!isNaN(f)) { | |
this._sectionController.seek(f); | |
} | |
window.app.uiController._lastInteractionType = "bubble-click"; | |
}, | |
_handleChange: function(f) { | |
var c = this._navContainer.querySelector(".hover"); | |
var d = | |
this._getNavigatableSections().length - | |
1 - | |
this._navRange.value; | |
var h = this._navContainer.querySelector( | |
'[data-seek-index="' + d + '"]' | |
); | |
var g = parseFloat(h.getAttribute("data-seek-time")); | |
if (c) { | |
this._unhighlightNavItem(c); | |
} | |
this._highlightNavItem(h); | |
if (this._navRangeTimeout) { | |
clearTimeout(this._navRangeTimeout); | |
} | |
this._navRangeTimeout = setTimeout( | |
function() { | |
window.app.uiController._lastInteractionType = | |
"bubble-click"; | |
this._sectionController.seek(g); | |
}.bind(this), | |
2000 | |
); | |
}, | |
_updateRange: function(c) { | |
if (!this._navRange) { | |
return; | |
} | |
this._navRange.value = | |
this._getNavigatableSections().length - 1 - c; | |
}, | |
_handlePauseExit: function(d) { | |
var f = d.to; | |
var e = this._navContainer.querySelectorAll(".active"); | |
var c = this._navContainer.querySelector( | |
'[data-seek-index="' + f + '"]' | |
); | |
this._updateRange(f); | |
[].forEach.call(e, function(g) { | |
g.classList.remove("active"); | |
g.classList.remove("hover"); | |
}); | |
if (c) { | |
window.setTimeout( | |
function() { | |
c.classList.add("active"); | |
}.bind(this), | |
250 | |
); | |
} | |
}, | |
_buildNavigation: function(c) { | |
var f = document.createDocumentFragment(); | |
var d = document.getElementById("panelcontainer"); | |
var e = "touchstart" in window; | |
c.forEach( | |
function(k) { | |
var i; | |
var g = document.createElement("li"); | |
var h = d.querySelector(k.labelSelector); | |
var j = h.getAttribute("data-section-label"); | |
if (h) { | |
g.setAttribute("data-seek-index", k.index); | |
g.setAttribute("data-seek-time", k.pause); | |
g.setAttribute("title", j); | |
g.innerHTML += '<span class="label">' + j + "</span>"; | |
g.innerHTML += | |
'<span class="dot" data-nav-item="true"><span class="inner" data-nav-item="true"></span></span>'; | |
g.addEventListener( | |
e ? "touchstart" : "click", | |
this._handleClick | |
); | |
i = g.querySelector(".dot"); | |
i.addEventListener("mouseenter", this._handleMouseOver); | |
i.addEventListener("mouseleave", this._handleMouseOut); | |
f.appendChild(g); | |
} | |
}.bind(this) | |
); | |
this._navContainer.appendChild(f); | |
}, | |
_handleMouseOver: function(f) { | |
var d = f.target || f.srcElement; | |
if (!d.classList.contains("dot")) { | |
return; | |
} | |
var c = d.parentNode; | |
this._highlightNavItem(c); | |
}, | |
_highlightNavItem: function(c) { | |
c.classList.add("hover"); | |
}, | |
_unhighlightNavItem: function(c) { | |
c.classList.remove("hover"); | |
}, | |
_handleMouseOut: function(f) { | |
var d = f.target || f.srcElement; | |
if (!d.classList.contains("dot")) { | |
return; | |
} | |
var c = d.parentNode; | |
this._unhighlightNavItem(c); | |
}, | |
_calcSection: function(c) { | |
this._lastSectionCalc = Math.round( | |
(c - this._navRect.top) / this._navRect.height * this._navCount | |
); | |
return this._lastSectionCalc; | |
}, | |
_handleTouchStart: function(f) { | |
var c, | |
d = f.target || f.srcElement; | |
this._navRect = document | |
.getElementById("sectionNav") | |
.getBoundingClientRect(); | |
this._navCount = document.querySelectorAll("#sectionNav li").length; | |
this._updateHover(this._calcSection(f.pageY)); | |
document.body.addEventListener("touchend", this._handleTouchEnd); | |
document.body.addEventListener("touchmove", this._handleTouchMove); | |
f.preventDefault(); | |
return false; | |
}, | |
_updateHover: function(c) { | |
var d = document.getElementById("sectionNav"); | |
[].slice.call(d.querySelectorAll("li.hover")).forEach(function(f) { | |
f.querySelector(".label").style.display = "none"; | |
f.classList.remove("hover"); | |
}); | |
var e = d.querySelector('li[data-seek-index="' + c + '"]'); | |
if (e) { | |
e.querySelector(".label").style.display = "block"; | |
e.classList.add("hover"); | |
} | |
}, | |
_handleTouchMove: function(d) { | |
var c; | |
if (!this._throttled) { | |
this._throttled = true; | |
c = this._calcSection(d.pageY); | |
this._updateHover(c); | |
window.clearTimeout(this._throttledTimeout); | |
this._throttledTimeout = window.setTimeout( | |
function() { | |
this._throttled = false; | |
}.bind(this), | |
50 | |
); | |
} | |
d.preventDefault(); | |
d.stopPropagation(); | |
return false; | |
}, | |
_handleTouchEnd: function(d) { | |
var c; | |
document.body.removeEventListener("touchend", this._handleTouchEnd); | |
document.body.removeEventListener( | |
"touchmove", | |
this._handleTouchMove | |
); | |
c = document | |
.getElementById("sectionNav") | |
.querySelector( | |
'li[data-seek-index="' + this._lastSectionCalc + '"]' | |
); | |
app.uiController._lastInteractionType = "bubble-click"; | |
if (c) { | |
this._sectionController.seek( | |
parseFloat(c.getAttribute("data-seek-time")) | |
); | |
c.classList.remove("hover"); | |
} | |
d.preventDefault(); | |
d.stopPropagation(); | |
return false; | |
} | |
}; | |
return b; | |
}); | |
AC.define("overview/desktop/input/Touch", [], function() { | |
function a(c, b) { | |
this._uiController = c; | |
this._uiController.add(this); | |
this._pixelToMediaSpeedRatio = 0.003; | |
this._swipeThreshold = 30; | |
this._onEnd = this._onEnd.bind(this); | |
this._onMove = this._onMove.bind(this); | |
this._moveBuffer = 0; | |
this._touchStartOnPlaceholder = false; | |
this._controlCenterBuffer = 50; | |
this._controlCenterTouch = false; | |
this.enabled = false; | |
document.addEventListener("touchend", this._onEnd); | |
document.addEventListener("touchmove", this._onMove); | |
} | |
a.prototype = { | |
_onEnd: function(c) { | |
var b; | |
if (this._controlCenterTouch) { | |
this._controlCenterTouch = false; | |
return; | |
} | |
if (!this.enabled) { | |
return; | |
} | |
this._active = false; | |
window.clearTimeout(this._timeout); | |
this._uiController._lastInteractionType = | |
Math.abs(this._moveBuffer) > this._swipeThreshold | |
? "swipe" | |
: "image-click"; | |
if (this._uiController._sectionController.paused) { | |
b = this._moveBuffer >= 0 ? "next" : "previous"; | |
if (this._moveBuffer === 0) { | |
this._uiController.update(0.01); | |
} | |
this._uiController[b].call(this._uiController); | |
} | |
this._moveBuffer = 0; | |
}, | |
_onMove: function(c) { | |
var b = c.target; | |
if (c.pageY > window.innerHeight - this._controlCenterBuffer) { | |
this._controlCenterTouch = true; | |
} | |
if (!this.enabled || this._controlCenterTouch) { | |
return; | |
} | |
if (this._uiController._sectionController.paused) { | |
if (!this._active) { | |
this._uiController.takeoverThreshold = 0.4; | |
this._active = true; | |
this._prev = c.pageY; | |
return; | |
} | |
this._delta = this._prev - c.pageY; | |
this._moveBuffer += this._delta; | |
this._touchStartOnPlaceholder = | |
b && !!b.getAttribute("data-placeholder"); | |
window.clearTimeout(this._timeout); | |
this._timeout = window.setTimeout(this._onEnd.bind(this), 500); | |
if (this._delta) { | |
this._uiController.update( | |
this._delta * this._pixelToMediaSpeedRatio | |
); | |
} | |
this._prev = c.pageY; | |
} | |
c.preventDefault(); | |
}, | |
disable: function() { | |
this.enabled = false; | |
}, | |
enable: function() { | |
this.enabled = true; | |
} | |
}; | |
return a; | |
}); | |
AC.define("overview/shared/ComparisonChart", ["require"], function(b) { | |
function a(f) { | |
var d; | |
var g; | |
var h; | |
var k; | |
var c; | |
var j; | |
var e; | |
this._element = AC.Element.getElementById(f); | |
if (!this._element) { | |
return false; | |
} | |
Element.cleanWhitespace( | |
AC.Element.selectAll(".bars", this._element)[0] | |
); | |
if (AC.Detector.isCSSAvailable("transition")) { | |
AC.Element.addClassName(this._element, "can-animate"); | |
} | |
j = AC.Element.selectAll(".bars-container")[0]; | |
d = AC.Element.selectAll(".bars li", this._element); | |
g = d.length; | |
for (e = 0; e < d.length; e += 1) { | |
h = d[e].getAttribute("data-chart-value"); | |
k = d[e].getAttribute("data-chart-label"); | |
c = d[e].getAttribute("data-chart-data"); | |
if (!h || isNaN(parseFloat(h))) { | |
throw "Could not find a valid data-chart-value attribute on one of the bar elements."; | |
} | |
d[e].innerHTML = | |
'<span class="text-value">' + | |
k + | |
'<span class="data-value">' + | |
c + | |
'</span></span><span class="visual-value" role="presentation"></span>'; | |
h = parseFloat(d[e].getAttribute("data-chart-value")); | |
d[e].setAttribute("data-animate-height", h); | |
} | |
} | |
a.prototype = { | |
visitorEngaged: function() { | |
var c = AC.Element.selectAll(".bars li", this._element); | |
var d; | |
AC.Element.addClassName(this._element, "animate"); | |
for (d = 0; d < c.length; d += 1) { | |
c[d].style.height = | |
c[d].getAttribute("data-animate-height") + "%"; | |
} | |
}, | |
resetChart: function() { | |
if (AC.Detector.isCSSAvailable("transition")) { | |
var c = AC.Element.selectAll(".bars li", this._element); | |
var d; | |
AC.Element.removeClassName(this._element, "animate"); | |
for (d = 0; d < c.length; d += 1) { | |
c[d].style.height = 0 + "%"; | |
} | |
} else { | |
return; | |
} | |
} | |
}; | |
return a; | |
}); | |
AC.define("overview/shared/clip/Basic", [], function() { | |
function a(b, e, d) { | |
var c = document.querySelector(b); | |
if (c && c.nodeType && c.nodeType === 1) { | |
this._el = c; | |
} else { | |
this._el = b; | |
} | |
this.duration = e; | |
this.beginning = 0; | |
this._currentTime = 0; | |
} | |
a.prototype = {}; | |
Object.defineProperties(a.prototype, { | |
currentTime: { | |
enumerable: true, | |
configurable: false, | |
get: function() { | |
return this._currentTime; | |
}, | |
set: function(b) { | |
this._currentTime = Math.max(0, Math.min(b, this.duration)); | |
} | |
}, | |
el: { | |
enumerable: true, | |
configurable: false, | |
get: function() { | |
if (this._el && this._el.nodeType && this._el.nodeType === 1) { | |
return this._el; | |
} else { | |
return (this._el = document.querySelector(this._el)); | |
} | |
} | |
} | |
}); | |
return a; | |
}); | |
AC.define( | |
"overview/desktop/timeline/timeline-ipad", | |
[ | |
"require", | |
"overview/shared/clip/Tween", | |
"overview/shared/ComparisonChart", | |
"overview/shared/clip/Basic" | |
], | |
function(d) { | |
var b = d("overview/shared/clip/Tween"), | |
a = d("overview/shared/ComparisonChart"); | |
var c = d("overview/shared/clip/Basic"); | |
return function() { | |
var f, p, r, e, g; | |
var t = new a("processor-chart"), | |
n = new a("memory-chart"), | |
q = new a("graphics-chart"), | |
j = new a("storage-chart"), | |
m = new a("fan-chart"); | |
var i = document.getElementById("hero"), | |
h = document.getElementById("measurements"), | |
l = document.getElementById("comingsoon"), | |
o = document.getElementById("navcontainer"), | |
u = document.querySelector(".productnav-wrapper"); | |
var k = false; | |
return [ | |
{ | |
name: "home", | |
pause: 0, | |
time: 0, | |
labelSelector: "#hero", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
i.querySelector(".caret").classList.add("show"); | |
i.classList.remove("slide-out"); | |
o.classList.remove("slide-out"); | |
u.classList.remove("slide-out"); | |
setTimeout(function() { | |
o.style.zIndex = 40000; | |
}, 1000); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
i.classList.add("slide-out"); | |
o.classList.add("slide-out"); | |
u.classList.add("slide-out"); | |
o.style.zIndex = 10000; | |
app.uiController._lastInteractionType = | |
"image-click"; | |
t.resetChart(); | |
n.resetChart(); | |
q.resetChart(); | |
j.resetChart(); | |
} | |
} | |
], | |
clips: [] | |
}, | |
{ | |
name: "intro", | |
pause: 1.13, | |
time: 1.13, | |
labelSelector: "#change", | |
clips: [ | |
{ start: -1.95, media: new c("#change .hero", 2.55) }, | |
{ | |
start: -2, | |
media: new b("#change .copy", 2.5, [ | |
{ property: "opacity", from: 1, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px", | |
easing: "linear" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 53.5, | |
media: new b("#sectionNav", 0.5, [ | |
{ | |
property: "display", | |
from: "none", | |
to: "block" | |
}, | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#change .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px", | |
easing: "linear" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "computing", | |
pause: 4.2, | |
time: 4.2, | |
labelSelector: "#power", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_3") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_3") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ start: -0.1, media: new c(".still_3", 0.7) }, | |
{ | |
start: -0.6, | |
end: 0.5, | |
media: new b("#power .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#power .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "processor", | |
pause: 8.4, | |
time: 8.4, | |
labelSelector: "#processor", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_4") | |
.classList.add("crossFade"); | |
window.clearTimeout(f); | |
setTimeout(function() { | |
t.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_4") | |
.classList.remove("crossFade"); | |
f = window.setTimeout(function() { | |
t.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.6, | |
media: new c(".still_4", 0.7) | |
}, | |
{ | |
start: -0.8, | |
end: 0.5, | |
media: new b("#processor .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#processor .cores", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#processor .pcie", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#processor #processor-chart", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#processor .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#processor .cores", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#processor .pcie", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#processor #processor-chart", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "memory", | |
pause: 11.3, | |
time: 11.3, | |
labelSelector: "#memory", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_5") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function() { | |
window.clearTimeout(p); | |
setTimeout(function() { | |
n.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_5") | |
.classList.remove("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
p = window.setTimeout(function() { | |
n.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.6, | |
media: new c(".still_5", 0.7) | |
}, | |
{ | |
start: -0.8, | |
end: 0.5, | |
media: new b("#memory .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#memory .bandwidth", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#memory .improvement", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#memory #memory-chart", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#memory .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#memory .bandwidth", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#memory .improvement", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#memory #memory-chart", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "graphics", | |
pause: 15.7, | |
time: 15.7, | |
labelSelector: "#graphics", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_6") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function() { | |
window.clearTimeout(r); | |
setTimeout(function() { | |
q.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_6") | |
.classList.remove("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
r = window.setTimeout(function() { | |
q.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.6, | |
media: new c(".still_6", 0.7) | |
}, | |
{ | |
start: -0.8, | |
end: 0.5, | |
media: new b("#graphics .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#graphics .vram", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#graphics .teraflops", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#graphics #graphics-chart", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#graphics .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#graphics .vram", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#graphics .teraflops", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#graphics #graphics-chart", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "storage", | |
pause: 17.75, | |
time: 17.75, | |
labelSelector: "#storage", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_7") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function() { | |
window.clearTimeout(e); | |
setTimeout(function() { | |
j.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_7") | |
.classList.remove("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
e = window.setTimeout(function() { | |
j.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.6, | |
media: new c(".still_7", 0.7) | |
}, | |
{ | |
start: -0.8, | |
end: 0.5, | |
media: new b("#storage .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#storage .flash", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#storage .improvement", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#storage .capacity", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#storage #storage-chart", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#storage .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#storage .flash", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#storage .improvement", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#storage .capacity", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#storage #storage-chart", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "thermal core", | |
pause: 21.8, | |
time: 21.8, | |
labelSelector: "#thermal", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_8") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_8") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.6, | |
media: new c(".still_8", 0.7) | |
}, | |
{ | |
start: -0.6, | |
end: 0.5, | |
media: new b("#thermal .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#thermal .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "fan", | |
pause: 29, | |
time: 29, | |
labelSelector: "#fan", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_9") | |
.classList.add("crossFade"); | |
window.clearTimeout(g); | |
setTimeout(function() { | |
m.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_9") | |
.classList.remove("crossFade"); | |
g = window.setTimeout(function() { | |
m.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.6, | |
media: new c(".still_9", 0.7) | |
}, | |
{ | |
start: -0.6, | |
end: 0.5, | |
media: new b("#fan .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#fan .acoustic", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#fan .dba", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#fan .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
end: 1, | |
media: new b("#fan .acoustic", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
end: 1, | |
media: new b("#fan .dba", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "expansion", | |
pause: 34.9, | |
time: 34.9, | |
labelSelector: "#expansion", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_10") | |
.classList.add("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ start: -0.1, media: new c(".still_10", 4.5) }, | |
{ | |
start: -1.5, | |
end: 0.5, | |
media: new b("#expansion .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#expansion .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "thunderbolt", | |
pause: 36, | |
time: 36, | |
labelSelector: "#thunderbolt", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_10") | |
.classList.add("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.8, | |
end: 0.5, | |
media: new b("#thunderbolt .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#thunderbolt .speeds", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#thunderbolt .improvement", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#thunderbolt .daisychain", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#thunderbolt .displays", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#thunderbolt .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#thunderbolt .speeds", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#thunderbolt .improvement", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#thunderbolt .daisychain", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#thunderbolt .displays", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "io", | |
pause: 38.2, | |
time: 38.2, | |
labelSelector: "#io", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_10") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_10") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -1.4, | |
end: 0.5, | |
media: new b("#io .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -1.2, | |
end: 0.7, | |
media: new b("#io .hdmi", 1, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -1.2, | |
end: 0.7, | |
media: new b("#io .gigabit", 1, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -1, | |
end: 0.9, | |
media: new b("#io .thunderbolt", 1, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -1, | |
end: 0.9, | |
media: new b("#io .usb", 1, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
end: 1.5, | |
media: new b("#io .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.9, | |
end: 1.5, | |
media: new b("#io .thunderbolt", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.9, | |
end: 1.5, | |
media: new b("#io .usb", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.7, | |
end: 1.5, | |
media: new b("#io .hdmi", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.7, | |
end: 1.5, | |
media: new b("#io .gigabit", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "wireless", | |
pause: 40.46, | |
time: 40.46, | |
labelSelector: "#wireless", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_13") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_13") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 3.3, | |
media: new c(".still_13", 3.4) | |
}, | |
{ | |
start: -0.7, | |
end: 0.5, | |
media: new b("#wireless .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.2, | |
end: 0.5, | |
media: new b("#wireless .copy", 0.2, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#wireless .ac", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#wireless .bluetooth", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#wireless .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#wireless .ac", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#wireless .bluetooth", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "design", | |
pause: 42.43, | |
time: 42.43, | |
labelSelector: "#design", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_14") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function() { | |
h.classList.remove("show"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function(v) { | |
if (v.to === 13) { | |
h.classList.add("show"); | |
} | |
} | |
} | |
], | |
clips: [ | |
{ start: -0.1, end: 1.9, media: new c(".still_14", 2) }, | |
{ | |
start: -0.6, | |
end: 0.5, | |
media: new b("#design .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#design .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "assembly", | |
pause: 45.8, | |
time: 45.8, | |
labelSelector: "#assembly", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_14") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_14") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.8, | |
end: 0.5, | |
media: new b("#assembly .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#assembly .first", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0.5, | |
media: new b("#assembly .second", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#assembly .third", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#assembly .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#assembly .first", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0.5, | |
media: new b("#assembly .second", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#assembly .third", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "learn more", | |
pause: 48.3, | |
time: 48.3, | |
labelSelector: "#comingsoon", | |
events: [ | |
{ type: "pauseenter", action: function() {} }, | |
{ type: "pauseexit", action: function() {} }, | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_15") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_15") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.5, | |
media: new c(".still_15", 0.6) | |
}, | |
{ | |
start: -1.3, | |
end: 0.5, | |
media: new b("#comingsoon .copy", 1.3, [ | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
} | |
]) | |
} | |
] | |
} | |
]; | |
}; | |
} | |
); | |
AC.define( | |
"overview/desktop/app/iPad", | |
[ | |
"require", | |
"overview/shared/app/Core", | |
"overview/shared/ClipContainer", | |
"overview/shared/controller/Section", | |
"overview/shared/controller/Ui", | |
"overview/shared/controller/Nav", | |
"overview/desktop/input/Touch", | |
"defer/Deferred", | |
"assetLoader/AssetLoader", | |
"overview/desktop/timeline/timeline-ipad" | |
], | |
function(b) { | |
var g = b("overview/shared/app/Core"), | |
l = b("overview/shared/ClipContainer"), | |
a = b("overview/shared/controller/Section"), | |
f = b("overview/shared/controller/Ui"), | |
i = b("overview/shared/controller/Nav"), | |
j = b("overview/desktop/input/Touch"), | |
h = b("defer/Deferred"), | |
k = b("assetLoader/AssetLoader"); | |
var e = b("overview/desktop/timeline/timeline-ipad"); | |
var d = null; | |
function c(m) { | |
g.call(this); | |
e = e(); | |
this.introcontainer = document.getElementById("introcontainer"); | |
this.videocontainer = document.getElementById("videocontainer"); | |
this.stillcontainer = document.getElementById("stillcontainer"); | |
this.panelcontainer = document.getElementById("panelcontainer"); | |
this.touch = "ontouchstart" in window; | |
this.timeline = this.convertSectionsToClips(e); | |
this.mainContainer = new l( | |
this.videocontainer, | |
m.main, | |
this.timeline.clips | |
); | |
this.curtain = this.createFadeCurtain(); | |
this._lastTime = 0; | |
this.preventTouchDefault = this.preventTouchDefault.bind(this); | |
document.addEventListener("touchstart", this.preventTouchDefault); | |
var o = document.querySelector("#globalheader, #ac-globalnav"); | |
var n = AC.Element.select(".productnav-wrapper"); | |
o.addEventListener("touchstart", function(p) { | |
p.stopPropagation(); | |
}); | |
o.addEventListener("touchend", function(p) { | |
p.stopPropagation(); | |
}); | |
n.addEventListener("touchstart", function(p) { | |
p.stopPropagation(); | |
}); | |
n.addEventListener("touchend", function(p) { | |
p.stopPropagation(); | |
}); | |
document.getElementById("navcontainer").style.zIndex = 40000; | |
this.loadIntro(m.intro[0]).then( | |
function() { | |
this.mainContainer.load().then(this.initMain.bind(this)); | |
}.bind(this) | |
); | |
window.app = this; | |
} | |
c.prototype = new g(); | |
c.prototype.constructor = c; | |
c.prototype.initAssetLoader = function(n) { | |
var m = n.assets.map(function(p) { | |
return p.url; | |
}); | |
var o; | |
if (n.assets) { | |
o = new k(m); | |
return o.load().then(function(p) { | |
p.forEach(function(r, q) { | |
var t = n.assets[q].container; | |
var u = document.querySelector(t); | |
r.setAttribute("class", n.assets[q].className); | |
u.appendChild(r); | |
}); | |
}); | |
} else { | |
return new h().resolve(); | |
} | |
}; | |
c.prototype.loadIntro = function(n) { | |
var m = new h(); | |
var p = document.getElementById("hero").querySelector(".caret"); | |
var o = function() { | |
p.removeEventListener("webkitTransitionEnd", o); | |
m.resolve(); | |
p.classList.add("no-delay"); | |
}; | |
p.addEventListener("webkitTransitionEnd", o); | |
var q = this.initAssetLoader(n); | |
q.then( | |
function() { | |
this.resizeFluidAreas(); | |
p.classList.add("show"); | |
document.body.classList.remove("intro-hidden"); | |
}.bind(this) | |
); | |
return m.promise(); | |
}; | |
c.prototype.resizeContainers = function() { | |
var m = window.innerHeight; | |
var p = window.innerWidth; | |
var u, w, x, y; | |
var t = this.videocontainer; | |
var n = this.introcontainer; | |
var r = this.stillcontainer; | |
var q = this.panelcontainer; | |
var v = | |
768 === screen.width && | |
1024 === screen.height && | |
"number" === typeof window.orientation; | |
var o = | |
v && (0 === window.orientation || 180 === window.orientation); | |
u = m * (o ? 0.9 : 1); | |
if (!v) { | |
q.style.height = u + "px"; | |
} | |
r.style.height = u + "px"; | |
t.style.height = u + "px"; | |
q.style.height = u + "px"; | |
window.scrollTo(0, 0); | |
return u; | |
}; | |
c.prototype.resizePlaceholders = function(m) { | |
var o = document.querySelectorAll(".placeholder-container"); | |
var n = | |
768 === screen.width && | |
1024 === screen.height && | |
"number" === typeof window.orientation; | |
[].forEach.call(o, function(p) { | |
var v = p.querySelector(".placeholder-inner"); | |
var G = p.querySelectorAll(".callout"); | |
var y = parseFloat(p.getAttribute("data-min-top")); | |
var E = 496; | |
var q = y / E; | |
var x = parseFloat(p.getAttribute("data-height-ratio")); | |
var z = parseFloat(p.getAttribute("data-width-ratio")); | |
var A = p.getAttribute("data-width-ratio-narrow"); | |
var u = 0.0013; | |
var D; | |
var B; | |
var w; | |
var C = 0; | |
var r; | |
var t; | |
var H; | |
var I; | |
var F = 185; | |
if (A) { | |
A = parseFloat(A); | |
} | |
if (isNaN(q) || isNaN(x) || isNaN(z)) { | |
return; | |
} | |
if (m < E) { | |
w = y; | |
} else { | |
w = m * q; | |
} | |
D = m * x; | |
B = m * (n && A ? A : z); | |
if (p.classList.contains("hero")) { | |
q = y / (m + F); | |
w = m * q; | |
p.style.top = w + "px"; | |
} | |
if (p.classList.contains("static-top")) { | |
p.style.top = y + "px"; | |
} else { | |
p.style.top = w + "px"; | |
} | |
v.style.width = B + "px"; | |
v.style.height = D + "px"; | |
[].forEach.call(G, function(J) { | |
if (!p.classList.contains("true-center")) { | |
if (m < E) { | |
r = 0; | |
} else { | |
r = m * q * (m * u); | |
} | |
t = m * x - (r + r * 0.3); | |
J.style.top = r + "px"; | |
J.style.height = t + "px"; | |
} else { | |
J.style.top = "0px"; | |
J.style.height = D + "px"; | |
} | |
}); | |
}); | |
}; | |
c.prototype.setupEnd = function() { | |
var q = app.sectionController._pauseTimeline.length - 1; | |
var p = function() { | |
app.uiController._lastInteractionType = "image-click"; | |
this.sectionController.seek(0); | |
}; | |
var o = document.querySelector(".footer-wrapper, #ac-globalfooter"); | |
var n = document.querySelector(".sosumi"); | |
var m = function() { | |
this.uiController.disableInput(); | |
document.documentElement.classList.remove("overflow"); | |
document.removeEventListener( | |
"touchstart", | |
this.preventTouchDefault | |
); | |
o.classList.add("show"); | |
n.classList.add("show"); | |
setTimeout(function() { | |
document.getElementById("curtain").style.display = "none"; | |
}, 1000); | |
}.bind(this); | |
this.sectionController.on("pauseenter:" + q, m); | |
this.mainContainer.clipController.on("ended", m); | |
this.sectionController.on("pauseexit:" + q, function() { | |
o.classList.remove("show"); | |
n.classList.remove("show"); | |
}); | |
this.sectionController.on( | |
"seek", | |
function(r) { | |
if (r.from === q) { | |
this.uiController.enableInput(); | |
document.addEventListener( | |
"touchstart", | |
this.preventTouchDefault | |
); | |
this.videocontainer.classList.remove("transition"); | |
this.stillcontainer.classList.remove("transition"); | |
} | |
}.bind(this) | |
); | |
}; | |
c.prototype.setupResizeEvents = function() { | |
var o = this.resizeFluidAreas.bind(this); | |
var n = "onorientationchange" in window; | |
var m = n ? "orientationchange" : "resize"; | |
var p = n ? 1000 : 0; | |
window.addEventListener("orientationchange", o); | |
}; | |
c.prototype.setupVideoCrossover = function() { | |
var m; | |
var n = function() { | |
clearTimeout(m); | |
this.videocontainer.style.display = "block"; | |
this.introcontainer.style.display = "none"; | |
}; | |
app.sectionController.on("pauseexit:0", n.bind(this)); | |
m = setTimeout(n.bind(this), 1300); | |
}; | |
c.prototype.setupCaret = function() { | |
var m = document | |
.getElementById("hero") | |
.querySelector(".caret .button"); | |
m.addEventListener( | |
"click", | |
this.sectionController.seek.bind(this.sectionController, 2) | |
); | |
}; | |
c.prototype.preventTouchDefault = function(m) { | |
m.preventDefault(); | |
}; | |
c.prototype.pollForAwakeFromSleep = function() { | |
var n = new Date().getTime(); | |
var m = function() { | |
var o = new Date().getTime(); | |
if (o - n > 1000) { | |
this.trigger("awakeFromSleep"); | |
} | |
n = o; | |
setTimeout(m, 500); | |
}.bind(this); | |
m(); | |
}; | |
c.prototype.resyncVideo = function() { | |
var m = this.mainContainer; | |
if ( | |
m && | |
m.clipController && | |
!m.clipController.paused && | |
m.clipController._mediaTimer._forwardsVideo.paused | |
) { | |
m.clipController.pause(); | |
m.clipController.play(); | |
} | |
}; | |
c.prototype.addDuplicateProductNav = function() { | |
var p = document.querySelector(".productnav-wrapper"); | |
var m = p.cloneNode(true); | |
var o = AC.Element.select(".productnav", m); | |
var n = document.querySelector("#panelcontainer #hero"); | |
m.id = "productnav-wrapper-clone"; | |
o.id = "productnav-clone"; | |
n.appendChild(m); | |
}; | |
c.prototype.pushThrough = function() { | |
var n = this.mainContainer.clipController; | |
var m = n.currentTime; | |
var o = n._mediaTimer._forwardsVideo; | |
if (m === this._lastTime && !n.paused && !o.paused) { | |
n.pause(); | |
n.play(); | |
} | |
this._lastTime = m; | |
}; | |
c.prototype.initMain = function(m, p) { | |
var n = true; | |
if (this.initialized) { | |
return; | |
} | |
this.sectionController = new a( | |
this.mainContainer.clipController, | |
this.timeline.events.pauses, | |
e | |
); | |
this.uiController = new f(this.sectionController); | |
this.navController = new i(this.sectionController, e); | |
this.touchInputController = new j(this.uiController); | |
this.setupEnd(); | |
this.addTimelineEvents(e); | |
this.setupResizeEvents(); | |
this.setupCaret(); | |
this.setupVideoCrossover(); | |
this.resizeFluidAreas(); | |
this.pollForAwakeFromSleep(); | |
this.setupFocusEvents(); | |
this.sectionController.on( | |
"pauseenter", | |
this.enterAnalytics.bind(this) | |
); | |
this.sectionController.on( | |
"pauseexit", | |
this.exitAnalytics.bind(this) | |
); | |
window.addEventListener( | |
"beforeunload", | |
function() { | |
this.analyzer.flush(); | |
}.bind(this) | |
); | |
this.sectionController.trigger("pauseenter:0"); | |
this.sectionController.on( | |
"pauseenter", | |
function(q) { | |
app.mainContainer.clipController.currentTime = | |
this.sectionController._pauseTimeline[q.index] + 0.2; | |
}.bind(this) | |
); | |
this.sectionController.on("pauseexit", function() { | |
var q = document.getElementById("sp-searchtext"); | |
if (q) { | |
q.blur(); | |
} | |
}); | |
var o = document.querySelector("#assembly .video"); | |
if (o) { | |
o.addEventListener("touchstart", function(r) { | |
var q = r.target.href || r.target.parentNode.href; | |
if (q) { | |
window.location = q; | |
} | |
}); | |
} | |
this.mainContainer.clipController.on( | |
"timeupdate", | |
this.pushThrough.bind(this) | |
); | |
this.on("awakeFromSleep", this.resyncVideo.bind(this)); | |
this.sectionController._update(); | |
if (n) { | |
window.app = this; | |
} | |
this.initialized = true; | |
}; | |
return c; | |
} | |
); | |
AC.define("overview/desktop/settings-ipad", [], function() { | |
var a = "mp4"; | |
return { | |
intro: [ | |
{ | |
type: "loadassets", | |
assets: [ | |
{ | |
url: "/v/mac-pro/home/b/images/stills/ipad/hero.jpg", | |
container: "#hero .hero-container", | |
className: "hero" | |
}, | |
{ | |
url: | |
"/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_0404.jpg", | |
container: "#change .hero-container", | |
className: "hero" | |
} | |
] | |
} | |
], | |
main: [ | |
{ | |
type: "bivideo", | |
file: window.assetPath + "videos/macpro_main_ipad." + a, | |
startTime: 2, | |
stills: { | |
3: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_0708.jpg", | |
4: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_1112.jpg", | |
5: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_1416.jpg", | |
6: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_1820.jpg", | |
7: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_2024.jpg", | |
8: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_2428.jpg", | |
9: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_3202.jpg", | |
10: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_3806.jpg", | |
13: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_4314.jpg", | |
14: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_4518.jpg", | |
15: "/v/mac-pro/home/b/images/stills/ipad/macpro_ipad_5125.jpg" | |
} | |
} | |
] | |
}; | |
}); | |
AC.define( | |
"overview/desktop/timeline/intro", | |
["require", "overview/shared/clip/Tween", "overview/shared/clip/Basic"], | |
function(d) { | |
var a = d("overview/shared/clip/Tween"), | |
c = d("overview/shared/clip/Basic"); | |
var b = "#globalheader"; | |
if (document.getElementById("ac-globalnav")) { | |
b = "#ac-globalnav"; | |
} | |
return function() { | |
var e = [ | |
{ start: 0, end: 3, media: new c("#hero", 1) }, | |
{ | |
start: 1.7, | |
end: 3, | |
media: new a("#hero .title", 0.6, [ | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 2, | |
end: 3, | |
media: new a("#hero .subtitle", 0.6, [ | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 2.7, | |
end: 3, | |
media: new a(b, 0.3, [ | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 2.7, | |
end: 3, | |
media: new a(".productnav", 0.3, [ | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ start: 2.9, end: 3, media: new c("#hero .caret", 0.5) }, | |
{ | |
start: 2.9, | |
end: 3, | |
media: new a(".still_1", 0.1, [ | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "linear" | |
} | |
]) | |
} | |
]; | |
var f = { | |
start: 2.7, | |
end: 3, | |
media: new a("#ac-gn-segmentbar", 0.3, [ | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}; | |
return document.getElementById("ac-gn-segmentbar") | |
? e.concat([f]) | |
: e; | |
}; | |
} | |
); | |
AC.define( | |
"overview/desktop/timeline/timeline", | |
[ | |
"require", | |
"overview/shared/clip/Tween", | |
"overview/shared/ComparisonChart", | |
"overview/shared/clip/Basic" | |
], | |
function(f) { | |
var b = f("overview/shared/clip/Tween"), | |
a = f("overview/shared/ComparisonChart"); | |
var e = f("overview/shared/clip/Basic"); | |
var d = "#globalheader"; | |
if (document.getElementById("ac-globalnav")) { | |
d = "#ac-globalnav"; | |
} | |
var c = -68; | |
var g = -72; | |
if ( | |
document.documentElement.className.match("ac-gn-segmentbar-visible") | |
) { | |
c = -88; | |
g = -92; | |
} | |
return function() { | |
var i, t, v, h, j; | |
var w = new a("processor-chart"), | |
r = new a("memory-chart"), | |
u = new a("graphics-chart"), | |
n = new a("storage-chart"), | |
q = new a("fan-chart"); | |
var l = document.getElementById("hero"), | |
k = document.getElementById("measurements"), | |
p = document.getElementById("comingsoon"); | |
var o = false; | |
var m = [ | |
{ | |
start: 0, | |
end: 0.2, | |
media: new b(".still_1", 0.2, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.35, | |
media: new b("#hero .title", 0.35, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0.35, | |
end: 0.65, | |
media: new b("#hero .title", 0.3, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeOutQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.09, | |
media: new b("#hero .title", 0.09, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.09, | |
end: 0.75, | |
media: new b("#hero .title", 0.66, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.25, | |
media: new b("#hero .subtitle", 0.25, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.25, | |
media: new b("#hero .subtitle", 0.25, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "linear" | |
} | |
]) | |
}, | |
{ | |
start: 0.15, | |
end: 0.45, | |
media: new b("#hero .subtitle", 0.3, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.09, | |
media: new b("#hero .subtitle", 0.09, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.09, | |
end: 0.75, | |
media: new b("#hero .subtitle", 0.66, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ start: 0, end: 0.5, media: new e("#hero .caret", 0.5, []) }, | |
{ | |
start: 0, | |
end: 0.25, | |
media: new b(d, 0.25, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.25, | |
media: new b(".productnav", 0.25, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "linear" | |
}, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
easing: "linear" | |
} | |
]) | |
}, | |
{ | |
start: 0.25, | |
end: 0.75, | |
media: new b(d, 0.5, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.09, | |
media: new b(d, 0.09, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "linear" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.1, | |
media: new b(d, 0.09, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.1, | |
end: 0.75, | |
media: new b(d, 0.66, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: c, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.1, | |
media: new b(".productnav", 0.09, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.1, | |
end: 0.75, | |
media: new b(".productnav", 0.66, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: g, | |
units: "px" | |
}, | |
{ property: "opacity", from: 1, to: 1, units: "px" } | |
]) | |
}, | |
{ | |
start: 0.75, | |
end: 47.73, | |
media: new b(".productnav", 46.98, [ | |
{ property: "opacity", from: 1, to: 1, units: "px" } | |
]) | |
} | |
]; | |
var x = [ | |
{ | |
start: 0, | |
end: 0.25, | |
media: new b("#ac-gn-segmentbar", 0.25, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0.25, | |
end: 0.75, | |
media: new b("#ac-gn-segmentbar", 0.5, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.09, | |
media: new b("#ac-gn-segmentbar", 0.09, [ | |
{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "linear" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.1, | |
media: new b("#ac-gn-segmentbar", 0.09, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.1, | |
end: 0.75, | |
media: new b("#ac-gn-segmentbar", 0.66, [ | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: c, | |
units: "px" | |
} | |
]) | |
} | |
]; | |
if (document.getElementById("ac-gn-segmentbar")) { | |
m = m.concat(x); | |
} | |
return [ | |
{ | |
name: "home", | |
pause: 0, | |
time: 0, | |
labelSelector: "#hero", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_1") | |
.classList.add("crossFade"); | |
l.querySelector(".caret").classList.add("show"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
window.setTimeout(function() { | |
l | |
.querySelector(".caret") | |
.classList.remove("show"); | |
}, 500); | |
w.resetChart(); | |
r.resetChart(); | |
u.resetChart(); | |
n.resetChart(); | |
} | |
} | |
], | |
clips: m | |
}, | |
{ | |
name: "intro", | |
pause: 1, | |
time: 1, | |
labelSelector: "#change", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_2") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_2") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.1, | |
media: new e(".still_2", 0.2) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#change .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px", | |
easing: "linear" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 47.03, | |
media: new b("#sectionNav", 0.5, [ | |
{ | |
property: "display", | |
from: "none", | |
to: "block" | |
}, | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#change .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px", | |
easing: "linear" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "computing", | |
pause: 4, | |
time: 4, | |
labelSelector: "#power", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_3") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_3") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.1, | |
media: new e(".still_3", 0.2) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#power .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#power .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "processor", | |
pause: 9, | |
time: 9, | |
labelSelector: "#processor", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_4") | |
.classList.add("crossFade"); | |
window.clearTimeout(i); | |
setTimeout(function() { | |
w.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_4") | |
.classList.remove("crossFade"); | |
i = window.setTimeout(function() { | |
w.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.1, | |
media: new e(".still_4", 0.2) | |
}, | |
{ | |
start: -0.8, | |
end: -0.3, | |
media: new b("#processor .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.3, | |
end: 0, | |
media: new b("#processor .copy", 0.3, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#processor .cores", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#processor .pcie", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#processor #processor-chart", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#processor .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#processor .cores", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#processor .pcie", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#processor #processor-chart", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "memory", | |
pause: 11, | |
time: 11, | |
labelSelector: "#memory", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_5") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function() { | |
window.clearTimeout(t); | |
setTimeout(function() { | |
r.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_5") | |
.classList.remove("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
t = window.setTimeout(function() { | |
r.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.1, | |
media: new e(".still_5", 0.2) | |
}, | |
{ | |
start: -0.8, | |
end: -0.3, | |
media: new b("#memory .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.3, | |
end: 0, | |
media: new b("#memory .copy", 0.3, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#memory .bandwidth", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#memory .improvement", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#memory #memory-chart", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#memory .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#memory .bandwidth", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#memory .improvement", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#memory #memory-chart", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "graphics", | |
pause: 15, | |
time: 15, | |
labelSelector: "#graphics", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_6") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function() { | |
window.clearTimeout(v); | |
setTimeout(function() { | |
u.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_6") | |
.classList.remove("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
v = window.setTimeout(function() { | |
u.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.1, | |
media: new e(".still_6", 0.2) | |
}, | |
{ | |
start: -0.8, | |
end: -0.3, | |
media: new b("#graphics .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.3, | |
end: 0, | |
media: new b("#graphics .copy", 0.3, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#graphics .vram", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#graphics .teraflops", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#graphics #graphics-chart", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#graphics .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#graphics .vram", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#graphics .teraflops", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#graphics #graphics-chart", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "storage", | |
pause: 17, | |
time: 17, | |
labelSelector: "#storage", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_7") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function() { | |
window.clearTimeout(h); | |
setTimeout(function() { | |
n.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_7") | |
.classList.remove("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
h = window.setTimeout(function() { | |
n.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.1, | |
media: new e(".still_7", 0.2) | |
}, | |
{ | |
start: -0.8, | |
end: -0.3, | |
media: new b("#storage .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.3, | |
end: 0, | |
media: new b("#storage .copy", 0.3, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#storage .flash", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#storage .improvement", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#storage .capacity", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#storage #storage-chart", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#storage .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#storage .flash", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#storage .improvement", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#storage .capacity", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#storage #storage-chart", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "thermal core", | |
pause: 21, | |
time: 21, | |
labelSelector: "#thermal", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_8") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_8") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.1, | |
media: new e(".still_8", 0.2) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#thermal .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#thermal .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "fan", | |
pause: 28, | |
time: 28, | |
labelSelector: "#fan", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_9") | |
.classList.add("crossFade"); | |
window.clearTimeout(j); | |
setTimeout(function() { | |
q.visitorEngaged(); | |
}, 0); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_9") | |
.classList.remove("crossFade"); | |
j = window.setTimeout(function() { | |
q.resetChart(); | |
}, 600); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0.1, | |
media: new e(".still_9", 0.2) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#fan .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#fan .acoustic", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#fan .dba", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#fan .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#fan .acoustic", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#fan .dba", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "expansion", | |
pause: 34, | |
time: 34, | |
labelSelector: "#expansion", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_10") | |
.classList.add("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 3.2, | |
media: new e(".still_10", 3.3) | |
}, | |
{ | |
start: -1.5, | |
end: -1, | |
media: new b("#expansion .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -1, | |
end: 0, | |
media: new b("#expansion .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#expansion .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "thunderbolt", | |
pause: 35, | |
time: 35, | |
labelSelector: "#thunderbolt", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_10") | |
.classList.add("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.9, | |
end: -0.4, | |
media: new b("#thunderbolt .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.4, | |
end: 0, | |
media: new b("#thunderbolt .copy", 0.4, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#thunderbolt .speeds", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#thunderbolt .improvement", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#thunderbolt .daisychain", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#thunderbolt .displays", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.4, | |
media: new b("#thunderbolt .copy", 0.4, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.4, | |
media: new b("#thunderbolt .speeds", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.4, | |
media: new b("#thunderbolt .improvement", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.4, | |
media: new b("#thunderbolt .daisychain", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.4, | |
media: new b("#thunderbolt .displays", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "io", | |
pause: 36, | |
time: 36, | |
labelSelector: "#io", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_10") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_10") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.9, | |
end: -0.4, | |
media: new b("#io .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.4, | |
end: 0, | |
media: new b("#io .copy", 0.4, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.6, | |
end: -0.2, | |
media: new b("#io .hdmi", 0.4, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.2, | |
end: 0, | |
media: new b("#io .hdmi", 0.2, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.6, | |
end: -0.2, | |
media: new b("#io .gigabit", 0.4, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.2, | |
end: 0, | |
media: new b("#io .gigabit", 0.2, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.3, | |
end: 0, | |
media: new b("#io .thunderbolt", 0.3, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.3, | |
end: 0, | |
media: new b("#io .usb", 0.3, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#io .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0.5, | |
end: 0.9, | |
media: new e("#io .copy", 0.4) | |
}, | |
{ | |
start: 0, | |
end: 0.4, | |
media: new b("#io .thunderbolt", 0.4, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.4, | |
end: 0.9, | |
media: new b("#io .thunderbolt", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.4, | |
media: new b("#io .usb", 0.4, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.4, | |
end: 0.9, | |
media: new b("#io .usb", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.2, | |
media: new b("#io .hdmi", 0.2, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.2, | |
end: 0.7, | |
media: new b("#io .hdmi", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.2, | |
media: new b("#io .gigabit", 0.2, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: 0.2, | |
end: 0.7, | |
media: new b("#io .gigabit", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "wireless", | |
pause: 39, | |
time: 39, | |
labelSelector: "#wireless", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_13") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function(y) { | |
document | |
.getElementById("design") | |
.classList.add("show"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_13") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 3.3, | |
media: new e(".still_13", 3.4) | |
}, | |
{ | |
start: -0.7, | |
end: -0.2, | |
media: new b("#wireless .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.2, | |
end: 0, | |
media: new b("#wireless .copy", 0.2, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#wireless .ac", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#wireless .bluetooth", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#wireless .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#wireless .ac", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#wireless .bluetooth", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
time: 40, | |
events: [{ type: "pauseenter", action: function(y) {} }], | |
clips: [] | |
}, | |
{ | |
name: "design", | |
pause: 42, | |
time: 42, | |
labelSelector: "#design", | |
events: [ | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_14") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseenter", | |
action: function() { | |
k.classList.remove("show"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function(y) { | |
if (y.to === 13) { | |
k.classList.add("show"); | |
} | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 1.4, | |
media: new e(".still_14", 1.5) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#design .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#design .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
} | |
] | |
}, | |
{ | |
name: "assembly", | |
pause: 44, | |
time: 44, | |
labelSelector: "#assembly", | |
events: [ | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_14") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.8, | |
end: -0.3, | |
media: new b("#assembly .copy", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: -0.3, | |
end: 0, | |
media: new b("#assembly .copy", 0.3, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#assembly .first", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#assembly .second", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: -0.5, | |
end: 0, | |
media: new b("#assembly .third", 0.5, [ | |
{ property: "opacity", from: 0, to: 1 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#assembly .copy", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 }, | |
{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
} | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#assembly .first", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#assembly .second", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
}, | |
{ | |
start: 0, | |
end: 0.5, | |
media: new b("#assembly .third", 0.5, [ | |
{ property: "opacity", from: 1, to: 0 } | |
]) | |
} | |
] | |
}, | |
{ | |
name: "learn more", | |
pause: 46, | |
time: 46, | |
labelSelector: "#comingsoon", | |
events: [ | |
{ type: "pauseenter", action: function() {} }, | |
{ type: "pauseexit", action: function() {} }, | |
{ | |
type: "pauseenter", | |
action: function() { | |
document | |
.querySelector(".still_15") | |
.classList.add("crossFade"); | |
} | |
}, | |
{ | |
type: "pauseexit", | |
action: function() { | |
document | |
.querySelector(".still_15") | |
.classList.remove("crossFade"); | |
} | |
} | |
], | |
clips: [ | |
{ | |
start: -0.1, | |
end: 0, | |
media: new b(".still_15", 0.1, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
}, | |
{ | |
start: -1.3, | |
end: 0, | |
media: new b("#comingsoon .copy", 1.3, [ | |
{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
} | |
]) | |
}, | |
{ | |
start: -0.3, | |
end: 0, | |
media: new b("#comingsoon .copy", 0.3, [ | |
{ property: "opacity", from: 1, to: 1 } | |
]) | |
} | |
] | |
} | |
]; | |
}; | |
} | |
); | |
AC.define("overview/desktop/input/Wheel", [], function() { | |
var b = AC.Environment.Browser.name === "Firefox"; | |
var c = b ? 0.02 : 0.01; | |
function a(e, d) { | |
this.uiController = e; | |
this.uiController.add(this); | |
this.enabled = true; | |
this.max = 0; | |
this.pixelToMediaSpeedRatio = c; | |
this.onWheel = this.onWheel.bind(this); | |
if (!("addWheelListener" in window)) { | |
throw new Error( | |
"WheelInputController: window.addWheelListener polyfill missing." | |
); | |
} | |
window.addWheelListener(document, this.onWheel); | |
} | |
a.prototype = { | |
onWheel: function(d) { | |
var f; | |
if (this.enabled) { | |
d.preventDefault(); | |
f = d.deltaY; | |
if (b) { | |
f = this._normalize(f); | |
} | |
f *= this.pixelToMediaSpeedRatio; | |
this.uiController.update(f); | |
this.uiController._lastInteractionType = "scroll"; | |
} | |
}, | |
enable: function() { | |
this.enabled = true; | |
}, | |
disable: function() { | |
this.enabled = false; | |
}, | |
_normalize: function(e) { | |
var d = this._max || 0.2; | |
if (e > d) { | |
d = e; | |
} else { | |
if (e < -d) { | |
d = -e; | |
} | |
} | |
this._max = d; | |
clearTimeout(this._normalizeTimeout); | |
this._normalizeTimeout = setTimeout( | |
function() { | |
this._max = null; | |
}.bind(this), | |
100 | |
); | |
return e / d; | |
} | |
}; | |
return a; | |
}); | |
AC.define("overview/desktop/input/Keyboard", ["require"], function(a) { | |
var b = true; | |
function c(d) { | |
this.uiController = d; | |
this.uiController.add(this); | |
this.enabled = true; | |
this.onKeyDown = this.onKeyDown.bind(this); | |
document.addEventListener("keydown", this.onKeyDown); | |
} | |
c.prototype = { | |
keyMapping: { | |
"37": "previous", | |
"38": "previous", | |
"39": "next", | |
"40": "next", | |
"32": "next" | |
}, | |
onKeyDown: function(g) { | |
var f, | |
d = g.keyCode; | |
if (!this.enabled) { | |
return; | |
} | |
if (d in this.keyMapping) { | |
f = this.keyMapping[g.keyCode]; | |
this.uiController._lastInteractionType = "scroll"; | |
this.uiController[f].call(this.uiController); | |
} | |
}, | |
enable: function() { | |
this.enabled = true; | |
}, | |
disable: function() { | |
this.enabled = false; | |
} | |
}; | |
return c; | |
}); | |
AC.define("overview/desktop/input/Click", ["require"], function(b) { | |
function a(c) { | |
this.uiController = c; | |
this.uiController.add(this); | |
this.enabled = true; | |
this.onClick = this.onClick.bind(this); | |
document.addEventListener("click", this.onClick, true); | |
} | |
a.prototype = { | |
onClick: function(f) { | |
var d = (f && f.target) || (f && f.srcElement); | |
var c = d && d.getAttribute && d.getAttribute("data-nav-item"); | |
var g = d && d.getAttribute("data-placeholder"); | |
window.clearTimeout(this._timeout); | |
if (g && !c) { | |
this.uiController._lastInteractionType = "image-click"; | |
this.uiController.next(); | |
} | |
}, | |
disable: function() { | |
this.enabled = false; | |
}, | |
enable: function() { | |
this.enabled = true; | |
} | |
}; | |
return a; | |
}); | |
AC.define("performance/desktop/HeightMargin", ["require"], function(a) { | |
function c(f, e, d) { | |
this._target = f; | |
this._sample = e; | |
this._margins = d.map(this._parseMargin); | |
AC.Element.addEventListener( | |
window, | |
"resize", | |
this._handleResize.bind(this) | |
); | |
this.resize(); | |
} | |
var b = c.prototype; | |
b.resize = function() { | |
var e = this._sample.getBoundingClientRect(); | |
var d = e.bottom - e.top; | |
var f = this._margins.map( | |
function(g) { | |
return this._marginFromHeight(g, d); | |
}.bind(this) | |
); | |
AC.Element.setStyle(this._target, { margin: f.join(" ") }); | |
}; | |
b._parseMargin = function(d) { | |
return parseInt(d, 10); | |
}; | |
b._handleResize = function(d) { | |
this.resize(); | |
}; | |
b._marginFromHeight = function(f, d) { | |
var e = f / 100 * d; | |
return e + "px"; | |
}; | |
return c; | |
}); | |
AC.define( | |
"overview/desktop/app/Desktop", | |
[ | |
"require", | |
"overview/shared/app/Core", | |
"overview/desktop/timeline/intro", | |
"overview/desktop/timeline/timeline", | |
"overview/shared/ClipContainer", | |
"overview/shared/controller/Section", | |
"overview/shared/controller/Ui", | |
"overview/shared/controller/Nav", | |
"overview/desktop/input/Wheel", | |
"overview/desktop/input/Keyboard", | |
"overview/desktop/input/Click", | |
"overview/shared/clip/Tween", | |
"overview/shared/ComparisonChart", | |
"performance/desktop/HeightMargin" | |
], | |
function(h) { | |
function q(v, x) { | |
var w = v.parentNode; | |
var u = null; | |
while (w.parentNode) { | |
if (w.classList && w.classList.contains(x)) { | |
u = w; | |
break; | |
} | |
w = w.parentNode; | |
} | |
return u; | |
} | |
var l = AC.Environment.Browser.name === "IE"; | |
var b = h("overview/shared/app/Core"); | |
var o = h("overview/desktop/timeline/intro"); | |
var i = h("overview/desktop/timeline/timeline"); | |
var k = h("overview/shared/ClipContainer"), | |
f = h("overview/shared/controller/Section"), | |
c = h("overview/shared/controller/Ui"), | |
m = h("overview/shared/controller/Nav"), | |
r = h("overview/desktop/input/Wheel"), | |
g = h("overview/desktop/input/Keyboard"), | |
t = h("overview/desktop/input/Click"), | |
d = h("overview/shared/clip/Tween"), | |
e = h("overview/shared/ComparisonChart"); | |
var j = h("performance/desktop/HeightMargin"); | |
var p = [ | |
{ selector: "processor-chart", pausePoint: 10 }, | |
{ selector: "memory-chart", pausePoint: 13 }, | |
{ selector: "graphics-chart", pausePoint: 17 }, | |
{ selector: "storage-chart", pausePoint: 19 } | |
]; | |
var a = null; | |
function n(u) { | |
b.call(this); | |
this.introcontainer = document.getElementById("introcontainer"); | |
this.videocontainer = document.getElementById("videocontainer"); | |
this.stillcontainer = document.getElementById("stillcontainer"); | |
this.panelcontainer = document.getElementById("panelcontainer"); | |
i = i(); | |
o = o(); | |
this.touch = "ontouchstart" in window; | |
this.timeline = this.convertSectionsToClips(i); | |
this.introContainer = new k(this.introcontainer, u.intro, o); | |
this.mainContainer = new k( | |
this.videocontainer, | |
u.main, | |
this.timeline.clips | |
); | |
this.curtain = this.createFadeCurtain(); | |
this.preventTouchDefault = this.preventTouchDefault.bind(this); | |
document.addEventListener("touchstart", this.preventTouchDefault); | |
this.revertToStaticDelay = 10000; | |
this.revertToStatic = this.revertToStatic.bind(this); | |
this.revertToStaticTimeout = window.setTimeout( | |
this.revertToStatic, | |
this.revertToStaticDelay | |
); | |
this.dynamic = true; | |
this.introContainer.load().then( | |
function() { | |
window.clearTimeout(this.revertToStaticTimeout); | |
this.initializeInitialStill(); | |
this.resizeFluidAreas(); | |
var v = document.querySelector( | |
"#hero .placeholder-container.heading" | |
); | |
this.heightMargin = new j(v, v, ["9.5%", 0, 0, 0]); | |
if ( | |
this.introContainer.clipController && | |
this.introContainer.clipController._mediaTimer && | |
this.introContainer.clipController._mediaTimer._video | |
) { | |
this.introContainer.clipController._mediaTimer._video.addEventListener( | |
"ended", | |
function() { | |
if ( | |
this.introContainer.clipController | |
.currentTime < | |
this.introContainer.clipController.duration | |
) { | |
this.introContainer.clipController._update( | |
null, | |
true | |
); | |
} | |
}.bind(this) | |
); | |
} | |
this.introContainer.clipController.on( | |
"ended", | |
function() { | |
this.cleanUpInitialStill(); | |
this.mainContainer | |
.load() | |
.then(this.initMain.bind(this)); | |
}.bind(this) | |
); | |
this.introContainer.play(); | |
}.bind(this) | |
); | |
window.app = this; | |
} | |
n.prototype = new b(); | |
n.prototype.constructor = n; | |
n.prototype.revertToStatic = function() { | |
var v = document.documentElement; | |
var u = document.body; | |
var w = document.getElementById("wrapper"); | |
this.dynamic = false; | |
if (this.uiController) { | |
this.uiController.disableInput(); | |
} | |
v.classList.remove("enabled"); | |
v.classList.remove("overflow"); | |
u.id = "static"; | |
this.setupStaticCharts(); | |
}; | |
n.prototype.resizeFluidAreas = function(w, v) { | |
var u; | |
this.resizeContainers(); | |
this.resizeCanvas(); | |
u = this.getVideoHeight(); | |
this.resizePlaceholders(u); | |
this.resizeCallouts(u); | |
this.resizeBottomContainers(); | |
if (this.heightMargin) { | |
this.heightMargin.resize(); | |
} | |
if (this.resizeDebounceTimeout) { | |
clearTimeout(this.resizeDebounceTimeout); | |
} | |
if (!v) { | |
this.resizeDebounceTimeout = setTimeout( | |
this.resizeFluidAreas.bind(this, null, true), | |
250 | |
); | |
} | |
}; | |
n.prototype.getVideoHeight = function() { | |
var w = | |
videocontainer.querySelector("*") || | |
introcontainer.querySelector("*"); | |
var v = w.getBoundingClientRect(); | |
var u = v.height; | |
return u; | |
}; | |
n.prototype.resizeContainers = function() { | |
var u = window.innerHeight; | |
var x = window.innerWidth; | |
var A = this.videocontainer; | |
var v = this.introcontainer; | |
var z = this.stillcontainer; | |
var y = this.panelcontainer; | |
var w = A.querySelector("*") || v.querySelector("*"); | |
var B, D, E; | |
if (!w) { | |
return false; | |
} | |
if (u < 583) { | |
E = "495px"; | |
} else { | |
if (u < 750) { | |
var C = 750 - Math.abs(u - 750) * 1.52; | |
E = C + "px"; | |
} else { | |
E = "100%"; | |
} | |
} | |
z.style.height = E; | |
v.style.height = E; | |
A.style.height = E; | |
}; | |
n.prototype.resizeCanvas = function() { | |
var v; | |
var u = | |
this.videocontainer.querySelector("canvas") || | |
this.introcontainer.querySelector("canvas"); | |
if (u) { | |
v = videocontainer.getBoundingClientRect().height; | |
u.style.width = v * (u.width / u.height) + "px"; | |
} | |
}; | |
n.prototype.resizeBottomContainers = function() { | |
var u = this.panelcontainer.querySelectorAll(".bottom-container"); | |
[].forEach.call(u, function(v) { | |
var x = v.querySelector(".copy"); | |
var w; | |
if (x !== null) { | |
w = Math.round(x.getBoundingClientRect().height); | |
v.style.minHeight = w + "px"; | |
} | |
}); | |
}; | |
n.prototype.resizeCallouts = function(u) { | |
var v = this.panelcontainer.querySelectorAll(".callout"); | |
[].forEach.call(v, function(D) { | |
var G = 0; | |
var L = 496; | |
var A = 0.0013; | |
var H = D.querySelector(".bars-container"); | |
var M = D.querySelector(".mid"); | |
var w = q(D, "placeholder-container"); | |
var K = D.querySelector(".label"); | |
var N = Math.round(M.getBoundingClientRect().height); | |
var B = parseFloat(w.getAttribute("data-height-ratio")); | |
var C = parseFloat(w.getAttribute("data-min-top")); | |
var E = parseFloat(w.getAttribute("data-top")); | |
var x = C / L; | |
var J = u * B; | |
var y, z, I; | |
if (H !== null) { | |
I = K.height; | |
H.style.height = N - I + "px"; | |
} | |
if (!w.classList.contains("true-center")) { | |
if (window.innerHeight < 750) { | |
var F = 50 - Math.abs(window.innerHeight - 750) * 0.29; | |
if (F < 0) { | |
F = 0; | |
} | |
y = F; | |
} else { | |
y = u * x * (u * A); | |
} | |
if (y < E) { | |
y = E; | |
} | |
z = u * B - (y + y * 0.3); | |
D.style.top = y + "px"; | |
D.style.height = z + "px"; | |
} else { | |
D.style.top = "0px"; | |
D.style.height = J + "px"; | |
} | |
}); | |
}; | |
n.prototype.resizePlaceholders = function(u) { | |
var v = this.panelcontainer.querySelectorAll( | |
".placeholder-container" | |
); | |
[].forEach.call(v, function(w) { | |
var K = 496; | |
var A = 0.0013; | |
var L = 185; | |
var B = w.querySelector(".placeholder-inner"); | |
var E = parseFloat(w.getAttribute("data-min-top")); | |
var J = parseFloat(w.getAttribute("data-top")); | |
var x = E / K; | |
var D = parseFloat(w.getAttribute("data-height-ratio")); | |
var F = parseFloat(w.getAttribute("data-width-ratio")); | |
var G = w.getAttribute("data-width-ratio-narrow"); | |
var I, H, C, y, z, M, N; | |
if (G) { | |
G = parseFloat(G); | |
} | |
if (isNaN(x) || isNaN(D) || isNaN(F)) { | |
return; | |
} | |
if (u < K) { | |
C = E; | |
} else { | |
C = u * x; | |
} | |
I = u * D; | |
H = u * F; | |
if (w.classList.contains("hero")) { | |
x = E / (u + L); | |
C = u * x; | |
w.style.top = C + "px"; | |
} | |
if (C < J) { | |
C = J; | |
} | |
if (w.classList.contains("static-top")) { | |
w.style.top = E + "px"; | |
} else { | |
w.style.top = C + "px"; | |
} | |
B.style.width = H + "px"; | |
B.style.height = I + "px"; | |
}); | |
}; | |
n.prototype.getMidVideoY = function() { | |
var u, w; | |
var v = Math.round( | |
document | |
.getElementById("change") | |
.querySelector(".copy") | |
.getBoundingClientRect().height | |
); | |
return (document.documentElement.clientHeight - v) * 0.07; | |
}; | |
n.prototype.applyDynamicTranslation = function(u) { | |
var w = this.getMidVideoY(); | |
var v = AC.Environment.Feature.cssPropertyAvailable("transition"); | |
if (v || u) { | |
AC.Element.setVendorPrefixStyle( | |
this.videocontainer, | |
"transform", | |
"translate3d(0," + w + "px,0)" | |
); | |
AC.Element.setVendorPrefixStyle( | |
this.stillcontainer, | |
"transform", | |
"translate3d(0," + w + "px,0)" | |
); | |
} else { | |
this.applyRuntimeTween(w); | |
} | |
}; | |
n.prototype.getTranslateValues = function(A, w) { | |
var y = this.mainContainer.clipController.playbackRate; | |
var v = 185; | |
var z, x, u; | |
if (A === 0 && w === 1) { | |
u = { from: v, to: this.getMidVideoY() }; | |
} else { | |
if (A === 1 && w === 0) { | |
u = { from: this.getMidVideoY(), to: v }; | |
} else { | |
if (A === 1 && w === 2) { | |
u = { from: this.getMidVideoY(), to: 0 }; | |
} else { | |
if (A === 2 && w === 1) { | |
u = { from: 0, to: this.getMidVideoY() }; | |
} | |
} | |
} | |
} | |
return u; | |
}; | |
n.prototype.applyRuntimeTween = function(w) { | |
var z = new d("#videocontainer", 1.5, [ | |
{ | |
property: "translate2d", | |
axis: "y", | |
from: w.from, | |
to: w.to, | |
units: "px" | |
} | |
]); | |
var u = new d("#stillcontainer", 1.5, [ | |
{ | |
property: "translate2d", | |
axis: "y", | |
from: w.from, | |
to: w.to, | |
units: "px" | |
} | |
]); | |
var y = z.duration; | |
var A = null; | |
var A, v, y; | |
function x(B) { | |
var C = v / y * y; | |
if (!A) { | |
A = B; | |
} | |
v = (B - A) / 1000; | |
z.tween(C); | |
u.tween(C); | |
if (v < y) { | |
requestAnimationFrame(x); | |
} | |
} | |
window.requestAnimationFrame(x); | |
}; | |
n.prototype.setupMoveableSeekable = function() { | |
function C(E) { | |
E.classList.add("transition"); | |
} | |
function D(E) { | |
E.classList.remove("transition"); | |
} | |
function w(E) { | |
E.classList.add("lowered"); | |
} | |
function A(E) { | |
E.classList.remove("lowered"); | |
} | |
function u(E) { | |
AC.Element.setVendorPrefixStyle(E, "transform", ""); | |
} | |
var z = this.videocontainer; | |
var y = this.stillcontainer; | |
var v = this.introcontainer; | |
var x = [z, y, v]; | |
var B = AC.Environment.Feature.cssPropertyAvailable("transition"); | |
this.sectionController.on( | |
"seek", | |
function(E) { | |
if (E.to === 0) { | |
if (E.from !== 1 || E.from !== 2) { | |
x.forEach(u); | |
} | |
x.forEach(D); | |
x.forEach(w); | |
} else { | |
if (E.to === 1 && E.from !== 2) { | |
x.forEach(w); | |
setTimeout(function() { | |
x.forEach(C); | |
}, 10); | |
this.applyDynamicTranslation(true); | |
} else { | |
x.forEach(D); | |
x.forEach(A); | |
x.forEach(u); | |
} | |
} | |
}.bind(this) | |
); | |
this.sectionController.on( | |
"pauseexit:0", | |
function() { | |
var F = | |
app.mainContainer.clipController._mediaTimer | |
._forwardsVideo; | |
var G = this.touch; | |
var E = function() { | |
this.applyDynamicTranslation(); | |
x.forEach(C); | |
}.bind(this); | |
if (B) { | |
E(); | |
} else { | |
this.applyRuntimeTween(this.getTranslateValues(0, 1)); | |
} | |
}.bind(this) | |
); | |
this.sectionController.on( | |
"pauseexit:1", | |
function(E) { | |
if (E.to === 2) { | |
if (B) { | |
x.forEach(A); | |
x.forEach(u); | |
} else { | |
this.applyRuntimeTween( | |
this.getTranslateValues(1, 2) | |
); | |
} | |
} else { | |
if (E.to === 0) { | |
if (B) { | |
x.forEach(u); | |
} else { | |
this.applyRuntimeTween( | |
this.getTranslateValues(1, 0) | |
); | |
} | |
} | |
} | |
}.bind(this) | |
); | |
this.sectionController.on("pauseenter:1", function(E) { | |
z.classList.remove("delayed-transition"); | |
z.classList.add("transition"); | |
}); | |
this.sectionController.on( | |
"pauseexit:2", | |
function(E) { | |
if (E.to === 1) { | |
if (B) { | |
x.forEach(w); | |
z.classList.add("delayed-transition"); | |
this.applyDynamicTranslation(); | |
} else { | |
window.setTimeout( | |
function() { | |
this.applyRuntimeTween( | |
this.getTranslateValues(2, 1) | |
); | |
}.bind(this), | |
1000 | |
); | |
} | |
} else { | |
x.forEach(D); | |
} | |
}.bind(this) | |
); | |
}; | |
n.prototype.setupEnd = function() { | |
var z = app.sectionController._pauseTimeline.length - 1; | |
var y = this.sectionController.seek.bind(this.sectionController, 0); | |
var x = document.querySelector(".footer-wrapper, #ac-globalfooter"); | |
var w = document.querySelector(".sosumi, .ac-gf-sosumi"); | |
var v = document.querySelector(".productnav"); | |
var u = function() { | |
this.uiController.disableInput(); | |
document.documentElement.classList.remove("overflow"); | |
x.classList.add("show"); | |
w.classList.add("show"); | |
}.bind(this); | |
this.sectionController.on("pauseenter:" + z, u); | |
this.mainContainer.clipController.on("ended", u); | |
this.sectionController.on("pauseexit:" + z, function() { | |
x.classList.remove("show"); | |
w.classList.remove("show"); | |
}); | |
this.sectionController.on( | |
"seek", | |
function(A) { | |
if (A.to > 0) { | |
v.classList.add("enabled"); | |
} | |
if (A.from === z) { | |
this.uiController.enableInput(); | |
this.videocontainer.classList.remove("transition"); | |
this.stillcontainer.classList.remove("transition"); | |
} | |
}.bind(this) | |
); | |
}; | |
n.prototype.setupResizeEvents = function() { | |
var u = this.applyDynamicTranslation.bind(this); | |
var v = this.resizeFluidAreas.bind(this); | |
this.sectionController.on( | |
"pauseenter:1", | |
function() { | |
window.addEventListener("resize", u); | |
}.bind(this) | |
); | |
this.sectionController.on( | |
"pauseexit:1", | |
function() { | |
window.removeEventListener("resize", u); | |
}.bind(this) | |
); | |
window.addEventListener("resize", v); | |
}; | |
n.prototype.setupVideoCrossover = function() { | |
var u; | |
var v = function() { | |
clearTimeout(u); | |
this.videocontainer.style.display = "block"; | |
this.introcontainer.style.display = "none"; | |
}; | |
app.sectionController.on("pauseexit:0", v.bind(this)); | |
u = setTimeout(v.bind(this), 1200); | |
}; | |
n.prototype.setupCaret = function() { | |
var u = document | |
.getElementById("hero") | |
.querySelector(".caret .button"); | |
u.addEventListener( | |
"click", | |
this.sectionController.seek.bind(this.sectionController, 2) | |
); | |
u.addEventListener( | |
"keydown", | |
function(v) { | |
if (v.keyCode === 13) { | |
this.sectionController.seek(2); | |
} | |
}.bind(this) | |
); | |
}; | |
n.prototype.preventTouchDefault = function(u) { | |
u.preventDefault(); | |
}; | |
n.prototype.setupStaticCharts = function() { | |
var u = "can-animate"; | |
p.forEach(function(w) { | |
var v = new e(w.selector); | |
v.visitorEngaged(); | |
}); | |
}; | |
n.prototype.setupForceCurrentTime = function() { | |
this.sectionController.on( | |
"pauseenter", | |
function(v) { | |
var u = v.index != null ? v.index : v.to; | |
var w = this._pauseTimeline[u]; | |
setTimeout(function() { | |
var x = app.mainContainer.clipController; | |
app.mainContainer.clipController.currentTime = w; | |
}, 200); | |
}.bind(this.sectionController) | |
); | |
}; | |
n.prototype.initializeInitialStill = function() { | |
this.stillcontainer | |
.querySelector(".still_1") | |
.classList.add("initial"); | |
}; | |
n.prototype.cleanUpInitialStill = function() { | |
this.stillcontainer | |
.querySelector(".still_1") | |
.classList.remove("initial"); | |
}; | |
n.prototype.initMain = function(u, w) { | |
if (this.initialized) { | |
return; | |
} | |
this.sectionController = new f( | |
this.mainContainer.clipController, | |
this.timeline.events.pauses, | |
i | |
); | |
this.uiController = new c(this.sectionController); | |
if (this.dynamic) { | |
this.navController = new m(this.sectionController, i); | |
this.wheelInputController = new r(this.uiController); | |
this.keyboardInputController = new g(this.uiController); | |
this.clickInputController = new t(this.uiController); | |
} | |
this.setupEnd(); | |
this.addTimelineEvents(i); | |
this.setupMoveableSeekable(); | |
this.setupResizeEvents(); | |
this.setupCaret(); | |
this.setupVideoCrossover(); | |
this.addNextCarets(); | |
this.setupFocusEvents(); | |
this.sectionController.on( | |
"pauseenter", | |
this.enterAnalytics.bind(this) | |
); | |
this.sectionController.on( | |
"pauseexit", | |
this.exitAnalytics.bind(this) | |
); | |
window.addEventListener( | |
"beforeunload", | |
function() { | |
this.analyzer.flush(); | |
}.bind(this) | |
); | |
this.mainContainer.clipController.currentTime = 0; | |
this.sectionController.trigger("pauseenter:0"); | |
this.sectionController._update(); | |
if (l) { | |
this.setupForceCurrentTime(); | |
this.setupStaticCharts(); | |
} | |
this.sectionController.on("pauseexit", function(x) { | |
if (x.from === 0) { | |
document | |
.querySelector(".productnav") | |
.classList.add("enabled"); | |
} else { | |
if (x.to === 0) { | |
document | |
.querySelector(".productnav") | |
.classList.remove("enabled"); | |
} | |
} | |
}); | |
var v = document.getElementById("sp-searchtext"); | |
if (v) { | |
v.addEventListener("focus", function(x) { | |
app.uiController.disableInput(); | |
}); | |
v.addEventListener("blur", function(x) { | |
app.uiController.enableInput(); | |
}); | |
} | |
this.sectionController.on( | |
"pauseexit", | |
this.resizeFluidAreas.bind(this) | |
); | |
this.sectionController.on( | |
"pauseenter", | |
this.resizeFluidAreas.bind(this) | |
); | |
this.sectionController.on("seek", this.resizeFluidAreas.bind(this)); | |
this.initialized = true; | |
}; | |
return n; | |
} | |
); | |
AC.define("overview/desktop/settings-desktop", [], function() { | |
var b = "mp4"; | |
var a = "jpg"; | |
return { | |
intro: [ | |
{ | |
type: "video", | |
file: window.assetPath + "videos/macpro_intro_desktop." + b, | |
stills: { | |
1: "/v/mac-pro/home/b/images/stills/desktop/macpro_00090.jpg" | |
} | |
}, | |
{ | |
type: "flow", | |
manifestFileName: "macpro_intro_flow_manifest.", | |
flowPattern: "macpro_intro_flow_###.", | |
manifest: window.assetPath + "flow/desktop/intro2/", | |
diffDir: window.assetPath + "flow/desktop/intro2/", | |
flowKeyFrame: | |
window.assetPath + | |
"flow/desktop/intro/macpro_intro_flow_keyframe." + | |
a, | |
flowEndFrame: | |
window.assetPath + | |
"flow/desktop/intro/macpro_intro_flow_endframe." + | |
a, | |
fps: 30 | |
} | |
], | |
main: [ | |
{ | |
type: "video", | |
file: window.assetPath + "videos/macpro_main_desktop." + b, | |
stills: { | |
1: "/v/mac-pro/home/b/images/stills/desktop/macpro_00090.jpg", | |
2: "/v/mac-pro/home/b/images/stills/desktop/macpro_00120.jpg", | |
3: "/v/mac-pro/home/b/images/stills/desktop/macpro_00210.jpg", | |
4: "/v/mac-pro/home/b/images/stills/desktop/macpro_00330.jpg", | |
5: "/v/mac-pro/home/b/images/stills/desktop/macpro_00420.jpg", | |
6: "/v/mac-pro/home/b/images/stills/desktop/macpro_00540.jpg", | |
7: "/v/mac-pro/home/b/images/stills/desktop/macpro_00600.jpg", | |
8: "/v/mac-pro/home/b/images/stills/desktop/macpro_00720.jpg", | |
9: "/v/mac-pro/home/b/images/stills/desktop/macpro_00930.jpg", | |
10: "/v/mac-pro/home/b/images/stills/desktop/macpro_01110.jpg", | |
13: "/v/mac-pro/home/b/images/stills/desktop/macpro_01260.jpg", | |
14: "/v/mac-pro/home/b/images/stills/desktop/macpro_01320.jpg", | |
15: "/v/mac-pro/home/b/images/stills/desktop/macpro_01500.jpg" | |
} | |
}, | |
{ | |
type: "flow", | |
manifestFileName: "macpro_main_flow_manifest.", | |
flowPattern: "macpro_main_flow_###.", | |
manifest: window.assetPath + "flow/desktop/main2/", | |
diffDir: window.assetPath + "flow/desktop/main2/", | |
fps: 30, | |
flowKeyFrame: | |
window.assetPath + | |
"flow/desktop/main/macpro_main_flow_keyframe." + | |
a, | |
flowEndFrame: | |
window.assetPath + | |
"flow/desktop/main/macpro_main_flow_endframe." + | |
a, | |
stills: { | |
1: "/v/mac-pro/home/b/images/stills/desktop/macpro_00090.jpg", | |
2: "/v/mac-pro/home/b/images/stills/desktop/macpro_00120.jpg", | |
3: "/v/mac-pro/home/b/images/stills/desktop/macpro_00210.jpg", | |
4: "/v/mac-pro/home/b/images/stills/desktop/macpro_00330.jpg", | |
5: "/v/mac-pro/home/b/images/stills/desktop/macpro_00420.jpg", | |
6: "/v/mac-pro/home/b/images/stills/desktop/macpro_00540.jpg", | |
7: "/v/mac-pro/home/b/images/stills/desktop/macpro_00600.jpg", | |
8: "/v/mac-pro/home/b/images/stills/desktop/macpro_00720.jpg", | |
9: "/v/mac-pro/home/b/images/stills/desktop/macpro_00930.jpg", | |
10: "/v/mac-pro/home/b/images/stills/desktop/macpro_01110.jpg", | |
13: "/v/mac-pro/home/b/images/stills/desktop/macpro_01260.jpg", | |
14: "/v/mac-pro/home/b/images/stills/desktop/macpro_01320.jpg", | |
15: "/v/mac-pro/home/b/images/stills/desktop/macpro_01500.jpg" | |
} | |
} | |
] | |
}; | |
}); | |
AC.define( | |
"overview/desktop/app/Loader", | |
[ | |
"require", | |
"overview/desktop/app/iPad", | |
"overview/desktop/settings-ipad", | |
"overview/desktop/app/Desktop", | |
"overview/desktop/settings-desktop", | |
"overview/shared/ComparisonChart" | |
], | |
function(g) { | |
function h(l) { | |
return l.match(/AppleWebKit/i); | |
} | |
function b(l) { | |
return h(l) && l.match(/iPad/i); | |
} | |
function d(l) { | |
return l.match(/iPhone/i); | |
} | |
function f(l) { | |
return l.match(/iPod/i); | |
} | |
function k(l) { | |
return h(l) && l.match(/Mobile/i) && !b(l); | |
} | |
function j(l) { | |
return k(l) || b(l) | |
? parseFloat(l.match(/os ([\d_]*)/i)[1].replace("_", ".")) | |
: 0; | |
} | |
var a = navigator.userAgent; | |
var i = AC.Environment.Feature.canvasAvailable(); | |
var e = i && !a.match(/Android/i); | |
var c = { | |
dynamic: function() { | |
var o = navigator.userAgent; | |
var p = o.match(/AppleWebKit/i); | |
var l = p && o.match(/iPad/i) && j(o) > 5.9; | |
var n = document.documentElement; | |
if (l) { | |
var r = g("overview/desktop/app/iPad"); | |
var m = g("overview/desktop/settings-ipad"); | |
document.body.id = "ipad"; | |
document.body.classList.add("intro-hidden"); | |
document.querySelector("#wrapper").classList.add("enabled"); | |
window.app = new r(m); | |
} else { | |
var q = g("overview/desktop/app/Desktop"); | |
var m = g("overview/desktop/settings-desktop"); | |
document.body.id = "desktop"; | |
document.body.style.display = "block"; | |
window.app = new q(m); | |
} | |
n.classList.add("enabled"); | |
n.classList.add("overflow"); | |
}, | |
fallback: function() { | |
var l = g("overview/shared/ComparisonChart"); | |
var m = new l("processor-chart"); | |
var n = new l("memory-chart"); | |
var p = new l("graphics-chart"); | |
var o = new l("storage-chart"); | |
document.body.style.display = "block"; | |
m.visitorEngaged(); | |
n.visitorEngaged(); | |
p.visitorEngaged(); | |
o.visitorEngaged(); | |
} | |
}; | |
return { | |
load: function() { | |
c[e ? "dynamic" : "fallback"].call(this); | |
} | |
}; | |
} | |
); | |
AC.define("overview/shared/EndLinkTracker", ["require"], function(a) { | |
var b = "ontouchstart" in window ? "touchstart" : "mousedown"; | |
var f = AC.Element.select(".cta.performance"); | |
var e = AC.Element.select(".cta.tech-specs"); | |
var d = AC.Element.addEventListener; | |
function c(g) { | |
return function(j) { | |
var h = {}; | |
var i = AC.Event.target(j); | |
h.prop3 = (g + "@" + AC.Tracking.pageName()).toLowerCase(); | |
AC.Tracking.trackClick(h, this, "o", h.prop3); | |
}; | |
} | |
return { | |
track: function() { | |
s.useForcedLinkTracking = true; | |
d(f, b, c("performance")); | |
d(e, b, c("tech specs")); | |
} | |
}; | |
}); | |
AC.define( | |
"overview/desktop/main", | |
[ | |
"require", | |
"overview/desktop/app/Loader", | |
"overview/shared/EndLinkTracker" | |
], | |
function(a) { | |
window.DEBUG = false; | |
var c = a("overview/desktop/app/Loader"); | |
var b = a("overview/shared/EndLinkTracker"); | |
b.track(); | |
c.load(); | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment