Created
June 11, 2013 00:46
-
-
Save shankarcabus/5753709 to your computer and use it in GitHub Desktop.
Animations of http://www.apple.com/mac-pro/
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
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/ | |
/** MIT License | |
* | |
* KeySpline - use bezier curve for transition easing function | |
* Copyright (c) 2012 Gaetan Renaudeau <[email protected]> | |
* | |
* 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. | |
*/ | |
Object.defineProperties = Object.defineProperties || function () {}, | |
function () { | |
for (var e = 0, t = ["ms", "moz", "webkit", "o"], i = 0; i < t.length && !window.requestAnimationFrame; ++i) window.requestAnimationFrame = window[t[i] + "RequestAnimationFrame"], window.cancelAnimationFrame = window[t[i] + "CancelAnimationFrame"] || window[t[i] + "CancelRequestAnimationFrame"]; | |
window.requestAnimationFrame || (window.requestAnimationFrame = function (t) { | |
var i = (new Date).getTime(), | |
r = Math.max(0, 16 - (i - e)), | |
o = window.setTimeout(function () { | |
t(i + r) | |
}, r); | |
return e = i + r, o | |
}), window.cancelAnimationFrame || (window.cancelAnimationFrame = function (e) { | |
clearTimeout(e) | |
}) | |
}(), | |
function (e, t) { | |
function i(t, i, a, s) { | |
t[r](n + i, "wheel" == o ? a : function (t) { | |
!t && (t = e.event); | |
var i = { | |
originalEvent: t, | |
target: t.target || t.srcElement, | |
type: "wheel", | |
deltaMode: "MozMousePixelScroll" == t.type ? 0 : 1, | |
deltaX: 0, | |
delatZ: 0, | |
preventDefault: function () { | |
t.preventDefault ? t.preventDefault() : t.returnValue = !1 | |
} | |
}; | |
return "mousewheel" == o ? (i.deltaY = -1 / 40 * t.wheelDelta, t.wheelDeltaX && (i.deltaX = -1 / 40 * t.wheelDeltaX)) : i.deltaY = t.detail, a(i) | |
}, s || !1) | |
} | |
var r, o, n = ""; | |
e.addEventListener ? r = "addEventListener" : (r = "attachEvent", n = "on"), o = "onwheel" in t.createElement("div") ? "wheel" : void 0 !== t.onmousewheel ? "mousewheel" : "DOMMouseScroll", e.addWheelListener = function (e, t, r) { | |
i(e, o, t, r), "DOMMouseScroll" == o && i(e, "MozMousePixelScroll", t, r) | |
} | |
}(window, document), "undefined" == typeof document || "classList" in document.createElement("a") || function (e) { | |
if ("HTMLElement" in e || "Element" in e) { | |
var t = "classList", | |
i = "prototype", | |
r = (e.HTMLElement || e.Element)[i], | |
o = Object, | |
n = String[i].trim || function () { | |
return this.replace(/^\s+|\s+$/g, "") | |
}, a = Array[i].indexOf || function (e) { | |
for (var t = 0, i = this.length; i > t; t++) | |
if (t in this && this[t] === e) return t; | |
return -1 | |
}, s = function (e, t) { | |
this.name = e, this.code = DOMException[e], this.message = t | |
}, c = function (e, t) { | |
if ("" === t) throw new s("SYNTAX_ERR", "An invalid or illegal string was specified"); | |
if (/\s/.test(t)) throw new s("INVALID_CHARACTER_ERR", "String contains an invalid character"); | |
return a.call(e, t) | |
}, p = function (e) { | |
for (var t = n.call(e.className), i = t ? t.split(/\s+/) : [], r = 0, o = i.length; o > r; r++) this.push(i[r]); | |
this._updateClassName = function () { | |
e.className = this.toString() | |
} | |
}, l = p[i] = [], | |
d = function () { | |
return new p(this) | |
}; | |
if (s[i] = Error[i], l.item = function (e) { | |
return this[e] || null | |
}, l.contains = function (e) { | |
return e += "", -1 !== c(this, e) | |
}, l.add = function () { | |
var e, t = arguments, | |
i = 0, | |
r = t.length, | |
o = !1; | |
do e = t[i] + "", -1 === c(this, e) && (this.push(e), o = !0); while (++i < r); | |
o && this._updateClassName() | |
}, l.remove = function () { | |
var e, t = arguments, | |
i = 0, | |
r = t.length, | |
o = !1; | |
do { | |
e = t[i] + ""; | |
var n = c(this, e); - 1 !== n && (this.splice(n, 1), o = !0) | |
} while (++i < r); | |
o && this._updateClassName() | |
}, l.toggle = function (e, t) { | |
e += ""; | |
var i = this.contains(e), | |
r = i ? t !== !0 && "remove" : t !== !1 && "add"; | |
return r && this[r](e), !i | |
}, l.toString = function () { | |
return this.join(" ") | |
}, o.defineProperty) { | |
var m = { | |
get: d, | |
enumerable: !0, | |
configurable: !0 | |
}; | |
try { | |
o.defineProperty(r, t, m) | |
} catch (u) { | |
-2146823252 === u.number && (m.enumerable = !1, o.defineProperty(r, t, m)) | |
} | |
} else o[i].__defineGetter__ && r.__defineGetter__(t, d) | |
} | |
}(self); | |
var _ = { | |
defaults: function (e, t) { | |
var i = {}; | |
t = t || {}; | |
for (var r in e) e.hasOwnProperty(r) && (i[r] = null != t[r] ? t[r] : e[r]); | |
return i | |
} | |
}; | |
AC.define("macpro/shared/lib/utils", function () {}), AC.define("macpro/shared/lib/analytics", ["require"], function () { | |
return function (e, t, i) { | |
arguments.length < 3 || AC.Tracking.trackClick({ | |
prop1: e, | |
prop3: AC.Tracking.pageName() + " - " + t.toString().toLowerCase() + " - section " + i | |
}, this, "o", AC.Tracking.pageName() + " - " + t.toLowerCase() + " - section " + i) | |
} | |
}), AC.define("macpro/shared/app/Core", ["require", "macpro/shared/lib/utils", "macpro/shared/lib/analytics"], function (e) { | |
function t() {} | |
e("macpro/shared/lib/utils"); | |
var i = e("macpro/shared/lib/analytics"); | |
return t.prototype.addTimelineEvents = function (e) { | |
e.filter(function (e) { | |
return !isNaN(e.pause) | |
}).forEach(function (e, t) { | |
e.events && e.events.forEach(function (e) { | |
this.sectionController.on(e.type + ":" + t, e.action) | |
}, this) | |
}, this) | |
}, t.prototype.createFadeCurtain = function () { | |
var e = document.createElement("div"); | |
e.id = "curtain", document.getElementById("wrapper").appendChild(e) | |
}, t.prototype.convertSectionsToClips = function (e) { | |
var t = {}; | |
return t.clips = [], t.events = { | |
pauses: [] | |
}, e.forEach(function (e) { | |
isNaN(e.pause) || t.events.pauses.push(e.pause), t.events.pauses.sort(function (e, t) { | |
return e > t ? 1 : -1 | |
}), t.clips = t.clips.concat(e.clips.map(function (t) { | |
return { | |
start: e.time + t.start, | |
end: e.time + t.end, | |
media: t.media, | |
pauses: t.pauses | |
} | |
})) | |
}), t | |
}, t.prototype.resizeFluidAreas = function () { | |
var e = this.resizeContainers(); | |
this.resizePlaceholders(e) | |
}, t.prototype.callAnalytics = function (e) { | |
var t = app.sectionController._pauseTimeline[e.to], | |
r = app.sectionController.getSectionFromPausePoint(t).name; | |
i(app.uiController._lastInteractionType, r, e.to) | |
}, t | |
}), AC.define("macpro/shared/vendor/KeySpline", ["require"], function () { | |
function e(e, t, i, r) { | |
function o(e, t) { | |
return 1 - 3 * t + 3 * e | |
} | |
function n(e, t) { | |
return 3 * t - 6 * e | |
} | |
function a(e) { | |
return 3 * e | |
} | |
function s(e, t, i) { | |
return ((o(t, i) * e + n(t, i)) * e + a(t)) * e | |
} | |
function c(e, t, i) { | |
return 3 * o(t, i) * e * e + 2 * n(t, i) * e + a(t) | |
} | |
function p(t) { | |
for (var r = t, o = 0; 4 > o; ++o) { | |
var n = c(r, e, i); | |
if (0 === n) return r; | |
var a = s(r, e, i) - t; | |
r -= a / n | |
} | |
return r | |
} | |
this.get = function (o) { | |
return e == t && i == r ? o : s(p(o), t, r) | |
} | |
} | |
return e | |
}), AC.define("macpro/shared/clip/Tween", ["require", "macpro/shared/vendor/KeySpline"], function (e) { | |
function t(e, t, i) { | |
var o = document.querySelector(e); | |
this._el = o && o.nodeType && 1 === o.nodeType ? o : e, this.duration = t, this.props = i || [], this.props.forEach(function (e) { | |
var t; | |
"keyspline" === e.easing && (t = e.keyspline, e.keyspline = new r(t[0], t[1], t[2], t[3])) | |
}), this.beginning = 0 | |
} | |
var i, r = e("macpro/shared/vendor/KeySpline"), | |
o = ["transform", "webkitTransform", "MozTransform", "msTransform", "oTransform"], | |
n = AC.EasingFunctions; | |
return function () { | |
var e = document.createElement("div"); | |
o.some(function (t) { | |
return t in e.style ? (i = t, !0) : void 0 | |
}) | |
}(), t.prototype = { | |
tween: function (e) { | |
var t = this.duration, | |
r = this.el, | |
o = i; | |
this.props.length < 1 || this.props.forEach(function (i) { | |
var a, s, c, p = i.units, | |
l = i.axis, | |
d = i.property; | |
a = i.keyspline ? i.keyspline.get(e / t) * (i.to - i.from) : n[i.easing || "linear"](e, i.from, i.to - i.from, t), "translate" === d ? (s = o, "x" === l ? c = "translate3d(" + a + p + ", 0, 0)" : "y" === l ? c = "translate3d(0, " + a + p + ", 0)" : "z" === l && (c = "translate3d(0, 0, " + a + p + ")")) : "translate2d" === d ? (s = o, c = "translate" + l.toUpperCase() + "(" + a + p + ")") : "scale" === d ? (s = o, c = "x" === l ? "scaleX(" + a + ")" : "y" === l ? "scaleY(" + a + ")" : "z" === l ? "scaleZ(" + a + ")" : "scale(" + a + ")") : (s = d, c = a + (i.units || "")), r.style[s] = c | |
}) | |
} | |
}, Object.defineProperties(t.prototype, { | |
currentTime: { | |
enumerable: !0, | |
configurable: !1, | |
get: function () { | |
return this._currentTime | |
}, | |
set: function (e) { | |
this._currentTime = Math.max(0, Math.min(e, this.duration)), this.tween(this._currentTime) | |
} | |
}, | |
el: { | |
enumerable: !0, | |
configurable: !1, | |
get: function () { | |
return this._el && this._el.nodeType && 1 === this._el.nodeType ? this._el : (!document.querySelector(this._el), this._el = document.querySelector(this._el)) | |
} | |
} | |
}), t | |
}), AC.define("macpro/shared/clip/Basic", [], function () { | |
function e(e, t) { | |
var i = document.querySelector(e); | |
this._el = i && i.nodeType && 1 === i.nodeType ? i : e, this.duration = t, this.beginning = 0, this._currentTime = 0 | |
} | |
return e.prototype = {}, Object.defineProperties(e.prototype, { | |
currentTime: { | |
enumerable: !0, | |
configurable: !1, | |
get: function () { | |
return this._currentTime | |
}, | |
set: function (e) { | |
this._currentTime = Math.max(0, Math.min(e, this.duration)) | |
} | |
}, | |
el: { | |
enumerable: !0, | |
configurable: !1, | |
get: function () { | |
return this._el && this._el.nodeType && 1 === this._el.nodeType ? this._el : this._el = document.querySelector(this._el) | |
} | |
} | |
}), e | |
}), AC.define("macpro/desktop/timeline/intro", ["require", "macpro/shared/clip/Tween", "macpro/shared/clip/Basic"], function (e) { | |
var t = e("macpro/shared/clip/Tween"), | |
i = e("macpro/shared/clip/Basic"); | |
return function () { | |
return [{ | |
start: 0, | |
end: 4, | |
media: new i("#hero", 1) | |
}, { | |
start: 2.4, | |
end: 4, | |
media: new t("#hero .title", 1.1, [{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 2.9, | |
end: 4, | |
media: new t("#hero .subtitle", .6, [{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 2.9, | |
end: 4, | |
media: new t("#globalheader", .6, [{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 3, | |
end: 4, | |
media: new i("#hero .caret", .5) | |
}, { | |
start: 3, | |
end: 4, | |
media: new t("#globalheader", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 3.5, | |
end: 4, | |
media: new t(".still_1", .25, [{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}]) | |
}] | |
} | |
}), AC.define("macpro/shared/ComparisonChart", ["require"], function () { | |
function e(e) { | |
var t, i, r, o, n, a, s; | |
if (this._element = AC.Element.getElementById(e), !this._element) return !1; | |
for (Element.cleanWhitespace(AC.Element.selectAll(".bars", this._element)[0]), AC.Detector.isCSSAvailable("transition") && AC.Element.addClassName(this._element, "can-animate"), a = AC.Element.selectAll(".bars-container")[0], t = AC.Element.selectAll(".bars li", this._element), i = t.length, s = 0; s < t.length; s += 1) { | |
if (r = t[s].getAttribute("data-chart-value"), o = t[s].getAttribute("data-chart-label"), n = t[s].getAttribute("data-chart-data"), !r || isNaN(parseFloat(r))) throw "Could not find a valid data-chart-value attribute on one of the bar elements."; | |
t[s].innerHTML = '<span class="text-value">' + o + '<span class="data-value">' + n + '</span></span><span class="visual-value" role="presentation"></span>', r = parseFloat(t[s].getAttribute("data-chart-value")), t[s].setAttribute("data-animate-height", r) | |
} | |
} | |
return e.prototype = { | |
visitorEngaged: function () { | |
var e, t = AC.Element.selectAll(".bars li", this._element); | |
for (AC.Element.addClassName(this._element, "animate"), e = 0; e < t.length; e += 1) t[e].style.height = t[e].getAttribute("data-animate-height") + "%" | |
}, | |
resetChart: function () { | |
if (AC.Detector.isCSSAvailable("transition")) { | |
var e, t = AC.Element.selectAll(".bars li", this._element); | |
for (AC.Element.removeClassName(this._element, "animate"), e = 0; e < t.length; e += 1) t[e].style.height = "0%" | |
} | |
} | |
}, e | |
}), AC.define("macpro/desktop/timeline/timeline", ["require", "macpro/shared/clip/Tween", "macpro/shared/ComparisonChart", "macpro/shared/clip/Basic"], function (e) { | |
var t = e("macpro/shared/clip/Tween"), | |
i = e("macpro/shared/ComparisonChart"), | |
r = e("macpro/shared/clip/Basic"); | |
return function () { | |
var e, o, n, a, s = new i("processor-chart"), | |
c = new i("memory-chart"), | |
p = new i("graphics-chart"), | |
l = new i("storage-chart"), | |
d = document.getElementById("hero"), | |
m = document.getElementById("measurements"), | |
u = document.getElementById("comingsoon"); | |
return [{ | |
name: "home", | |
pause: 0, | |
time: 0, | |
labelSelector: "#hero", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_1").classList.add("crossFade"), d.querySelector(".caret").classList.add("show") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
window.setTimeout(function () { | |
d.querySelector(".caret").classList.remove("show") | |
}, 500), s.resetChart(), c.resetChart(), p.resetChart(), l.resetChart() | |
} | |
}], | |
clips: [{ | |
start: 0, | |
end: .2, | |
media: new t(".still_1", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: 0, | |
end: .25, | |
media: new t("#hero .title", .25, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: .25, | |
end: .75, | |
media: new t("#hero .title", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: 0, | |
end: .09, | |
media: new t("#hero .title", .09, [{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: .09, | |
end: .75, | |
media: new t("#hero .title", .66, [{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .25, | |
media: new t("#hero .subtitle", .25, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: 0, | |
end: .25, | |
media: new t("#hero .subtitle", .25, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "linear" | |
}]) | |
}, { | |
start: .25, | |
end: .75, | |
media: new t("#hero .subtitle", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: 0, | |
end: .09, | |
media: new t("#hero .subtitle", .09, [{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: .09, | |
end: .75, | |
media: new t("#hero .subtitle", .66, [{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new r("#hero .caret", .5, []) | |
}, { | |
start: 0, | |
end: .25, | |
media: new t("#globalheader", .25, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: 0, | |
end: .25, | |
media: new t("#globalheader", .25, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "linear" | |
}]) | |
}, { | |
start: .25, | |
end: .75, | |
media: new t("#globalheader", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: 0, | |
end: .09, | |
media: new t("#globalheader", .09, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
easing: "linear" | |
}]) | |
}, { | |
start: 0, | |
end: .1, | |
media: new t("#globalheader", .09, [{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: .1, | |
end: .75, | |
media: new t("#globalheader", .66, [{ | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "intro", | |
pause: 2, | |
time: 2, | |
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: -.1, | |
end: .1, | |
media: new r(".still_2", .2) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#change .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px", | |
easing: "linear" | |
}]) | |
}, { | |
start: -.5, | |
end: 47.03, | |
media: new t("#sectionNav", .5, [{ | |
property: "display", | |
from: "none", | |
to: "block" | |
}, { | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#change .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px", | |
easing: "linear" | |
}]) | |
}] | |
}, { | |
name: "computing", | |
pause: 6, | |
time: 6, | |
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: -.1, | |
end: .1, | |
media: new r(".still_3", .2) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#power .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#power .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "processor", | |
pause: 10, | |
time: 10, | |
labelSelector: "#processor", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_4").classList.add("crossFade"), window.clearTimeout(e), setTimeout(function () { | |
s.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_4").classList.remove("crossFade"), e = window.setTimeout(function () { | |
s.resetChart() | |
}, 600) | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_4", .2) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#processor .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#processor .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#processor .cores", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#processor .pcie", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#processor #processor-chart", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#processor .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#processor .cores", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#processor .pcie", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#processor #processor-chart", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "memory", | |
pause: 13, | |
time: 13, | |
labelSelector: "#memory", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_5").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
window.clearTimeout(o), setTimeout(function () { | |
c.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_5").classList.remove("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
o = window.setTimeout(function () { | |
c.resetChart() | |
}, 600) | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_5", .2) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#memory .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#memory .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#memory .bandwidth", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#memory .improvement", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#memory #memory-chart", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#memory .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#memory .bandwidth", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#memory .improvement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#memory #memory-chart", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "graphics", | |
pause: 17, | |
time: 17, | |
labelSelector: "#graphics", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_6").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
window.clearTimeout(o), setTimeout(function () { | |
c.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
window.clearTimeout(n), setTimeout(function () { | |
p.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_6").classList.remove("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
n = window.setTimeout(function () { | |
p.resetChart() | |
}, 600) | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_6", .2) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#graphics .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#graphics .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#graphics .dual-gpus", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#graphics .teraflops", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#graphics #graphics-chart", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#graphics .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#graphics .dual-gpus", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#graphics .teraflops", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#graphics #graphics-chart", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "storage", | |
pause: 19, | |
time: 19, | |
labelSelector: "#storage", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_7").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
window.clearTimeout(a), setTimeout(function () { | |
l.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_7").classList.remove("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
a = window.setTimeout(function () { | |
l.resetChart() | |
}, 600) | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_7", .2) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#storage .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#storage .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#storage .flash", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#storage .improvement", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#storage #storage-chart", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#storage .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#storage .flash", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#storage .improvement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#storage #storage-chart", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "thermal core", | |
pause: 23, | |
time: 23, | |
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: -.1, | |
end: .1, | |
media: new r(".still_8", .2) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thermal .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#thermal .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "fan", | |
pause: 30, | |
time: 30, | |
labelSelector: "#fan", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_9").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_9").classList.remove("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_9", .2) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#fan .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#fan .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "expansion", | |
pause: 36, | |
time: 36, | |
labelSelector: "#expansion", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_10").classList.add("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: 3.2, | |
media: new r(".still_10", 3.3) | |
}, { | |
start: -1.5, | |
end: -1, | |
media: new t("#expansion .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -1, | |
end: 0, | |
media: new t("#expansion .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#expansion .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "thunderbolt", | |
pause: 37.3, | |
time: 37.3, | |
labelSelector: "#thunderbolt", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_10").classList.add("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.5, | |
end: -.3, | |
media: new t("#thunderbolt .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#thunderbolt .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thunderbolt .speeds", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thunderbolt .improvement", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thunderbolt .daisychain", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thunderbolt .displays", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#thunderbolt .copy", .4, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#thunderbolt .speeds", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#thunderbolt .improvement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#thunderbolt .daisychain", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#thunderbolt .displays", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "io", | |
pause: 38.8, | |
time: 38.8, | |
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: -.9, | |
end: -.4, | |
media: new t("#io .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.4, | |
end: 0, | |
media: new t("#io .copy", .4, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.6, | |
end: -.2, | |
media: new t("#io .hdmi", .4, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.2, | |
end: 0, | |
media: new t("#io .hdmi", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.6, | |
end: -.2, | |
media: new t("#io .gigabit", .4, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.2, | |
end: 0, | |
media: new t("#io .gigabit", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#io .thunderbolt", .3, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#io .usb", .3, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#io .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: .5, | |
end: .9, | |
media: new r("#io .copy", .4) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#io .thunderbolt", .4, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: .4, | |
end: .9, | |
media: new t("#io .thunderbolt", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#io .usb", .4, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: .4, | |
end: .9, | |
media: new t("#io .usb", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .2, | |
media: new t("#io .hdmi", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: .2, | |
end: .7, | |
media: new t("#io .hdmi", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .2, | |
media: new t("#io .gigabit", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: .2, | |
end: .7, | |
media: new t("#io .gigabit", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "wireless", | |
pause: 41, | |
time: 41, | |
labelSelector: "#wireless", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_13").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
document.getElementById("design").classList.add("show") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_13").classList.remove("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: 3.3, | |
media: new r(".still_13", 3.4) | |
}, { | |
start: -.7, | |
end: -.2, | |
media: new t("#wireless .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.2, | |
end: 0, | |
media: new t("#wireless .copy", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#wireless .ac", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#wireless .bluetooth", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#wireless .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#wireless .ac", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#wireless .bluetooth", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
time: 43, | |
events: [{ | |
type: "pauseenter", | |
action: function (e) { | |
callAnalytics(e) | |
} | |
}], | |
clips: [{ | |
start: -.7, | |
end: .2, | |
media: new t("#measurements .height .line", .9, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.7, | |
end: .2, | |
media: new t("#measurements .height .line .line-head", .9, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.7, | |
end: .2, | |
media: new t("#measurements .height .line .line-tail", .9, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.45, | |
end: .2, | |
media: new t("#measurements .height .line", .65, [{ | |
property: "height", | |
from: 0, | |
to: 100, | |
units: "%", | |
easing: "keyspline", | |
keyspline: [.29, .01, .3, 1] | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#measurements .height .measurement-container", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.7, | |
end: .2, | |
media: new t("#measurements .width .line", .9, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.7, | |
end: .2, | |
media: new t("#measurements .width .line-head", .9, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.7, | |
end: .2, | |
media: new t("#measurements .width .line-tail", .9, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.45, | |
end: .2, | |
media: new t("#measurements .width .line", .65, [{ | |
property: "width", | |
from: 0, | |
to: 100, | |
units: "%", | |
easing: "keyspline", | |
keyspline: [.29, .01, .3, 1] | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#measurements .width .measurement-container", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .height .line", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
units: "%" | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .height .line-head", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
units: "%" | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .height .line-tail", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
units: "%" | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .height .measurement-container", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .width .line", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
units: "%" | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .width .line-head", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
units: "%" | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .width .line-tail", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
units: "%" | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .width .measurement-container", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .height .measurement-container", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .height .line", .5, [{ | |
property: "height", | |
from: 100, | |
to: 0, | |
units: "%" | |
}, { | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .height .line-head", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .height .line-tail", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .width .measurement-container", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .width .line", .5, [{ | |
property: "width", | |
from: 100, | |
to: 0, | |
units: "%" | |
}, { | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .width .line-head", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .width .line-tail", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "design", | |
pause: 45, | |
time: 45, | |
labelSelector: "#design", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_14").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
m.classList.remove("show") | |
} | |
}, { | |
type: "pauseexit", | |
action: function (e) { | |
13 === e.to && m.classList.add("show") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: 1.4, | |
media: new r(".still_14", 1.5) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#design .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#design .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "assembly", | |
pause: 46.3, | |
time: 46.3, | |
labelSelector: "#assembly", | |
events: [{ | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_14").classList.remove("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.8, | |
end: -.3, | |
media: new t("#assembly .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#assembly .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#assembly .thermalcore", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#assembly .enclosure", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#assembly .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#assembly .thermalcore", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#assembly .enclosure", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "later this year", | |
pause: 49.03, | |
time: 49.03, | |
labelSelector: "#comingsoon", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
u.querySelector(".caret").classList.add("show") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
window.setTimeout(function () { | |
u.querySelector(".caret").classList.remove("show") | |
}, 500) | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_15").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_15").classList.remove("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: 0, | |
media: new t(".still_15", .1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -1.3, | |
end: 0, | |
media: new t("#globalheader", 1.3, [{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}, { | |
property: "translate", | |
axis: "y", | |
units: "px", | |
from: 0, | |
to: 0 | |
}]) | |
}, { | |
start: -1.3, | |
end: 0, | |
media: new t("#comingsoon .copy", 1.3, [{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#comingsoon .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -1.3, | |
end: 0, | |
media: new r("#comingsoon .caret", 1.3) | |
}] | |
}] | |
} | |
}), AC.define("macpro/shared/event/Emitter", ["require"], function () { | |
function e() { | |
this._events = [] | |
} | |
var t = e.prototype; | |
return t.on = function (e, t) { | |
var i = this._events; | |
i[e] || (i[e] = []), i[e].push(t) | |
}, t.trigger = function (e, t) { | |
var i = this._events, | |
r = e.split(":")[0]; | |
t = t || {}, t.type = e, t.index = parseInt(e.split(":")[1], 10), i[r] && i[r].forEach(function (e) { | |
e.call(this, t) | |
}.bind(this)), i[e] && e.split(":").length > 1 && i[e].forEach(function (e) { | |
e.call(this, t) | |
}.bind(this)) | |
}, e | |
}), AC.define("macpro/shared/controller/Clip", ["require", "macpro/shared/event/Emitter"], function (e) { | |
function t(e, t) { | |
i.call(this), this._mediaTimer = t, this._clips = [].concat(e), this._update = this._update.bind(this), this._prevTime = this._mediaTimer.currentTime, this._duration = 0, this._clips.forEach(function (e) { | |
e.media.el.classList.add("clip"), e.end || (e.end = e.start + e.media.duration, e.pauses && e.pauses.forEach(function (t) { | |
e.end += t.to - t.from | |
})), this._duration = Math.max(this._duration, e.end) | |
}, this) | |
} | |
var i = e("macpro/shared/event/Emitter"), | |
r = t.prototype = new i; | |
return r.constructor = t, r._getActiveClips = function (e) { | |
return this._clips.filter(function (t) { | |
return t.media !== this._mediaTimer && t.start <= e && e <= t.end | |
}, this) | |
}, r._timeToClipTime = function (e) { | |
var t = 0; | |
return e.pauses && e.pauses.forEach(function (e) { | |
this._mediaTimer.currentTime >= e.from && this._mediaTimer.currentTime >= e.to ? t += e.to - e.from : this._mediaTimer.currentTime >= e.from && this._mediaTimer.currentTime < e.to && (t += this._mediaTimer.currentTime - e.from) | |
}.bind(this)), this._mediaTimer.currentTime - e.start - t | |
}, r._processTransitoryClips = function (e, t) { | |
var i = this._getActiveClips(e), | |
r = this._getActiveClips(t); | |
i = i.filter(function (e) { | |
return -1 === r.indexOf(e) | |
}), i.forEach(function (e) { | |
e.media.el && e.media.el.classList.remove("visible"), e.media.currentTime = this._timeToClipTime(e) | |
}, this), r.forEach(function (e) { | |
e.media.el && e.media.el.classList.add("visible"), e.media.currentTime = this._timeToClipTime(e) | |
}, this) | |
}, r._update = function () { | |
this.currentTime < 0 && (this.trigger("start"), this.pause(), this._mediaTimer.currentTime = 0), this.trigger("timeupdate"), this._mediaTimer.update && this._mediaTimer.update(), this.currentTime >= this._duration && (this.pause(), this.trigger("ended"), this.currentTime >= this.duration && (this._mediaTimer.currentTime = this._duration)), this._processTransitoryClips(this._prevTime, this.currentTime), this.paused || (this._animationID = window.requestAnimationFrame(this._update)), this._prevTime = this.currentTime | |
}, r.play = function () { | |
var e = !0; | |
if (this.paused) { | |
if (this.currentTime < .5 && this.playbackRate < 0) return this.currentTime = 0, this.trigger("play"), void 0; | |
if (this.currentTime > this.duration - .5 && this.playbackRate > 0) return this.currentTime = this.duration, this.trigger("play"), void 0; | |
e = this._mediaTimer.play(), this.trigger("play"), this._animationID = window.requestAnimationFrame(this._update) | |
} | |
return e | |
}, r.pause = function () { | |
return this.paused || (this._mediaTimer.pause(), this.trigger("pause"), window.cancelAnimationFrame(this._animationID)), this | |
}, Object.defineProperties(t.prototype, { | |
currentTime: { | |
enumerable: !0, | |
configurable: !1, | |
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 () {} | |
} | |
}), t | |
}), AC.define("flow/diff/Loader", ["require", "assetLoader/AssetLoader"], function (e) { | |
function t(e, t) { | |
var i, r, o = e.match(/#/g).length; | |
if (this.imagesUrls = [], !t) throw new Error("0 images provided"); | |
for (i = 1; t >= i; i++) r = "0000" + i, r = r.substring(r.length - o), this.imagesUrls.push(e.replace(/#{2,}/g, r)) | |
} | |
var i, r = e("assetLoader/AssetLoader"); | |
return i = t.prototype, i.load = function () { | |
return new r(this.imagesUrls).load() | |
}, t | |
}), AC.define("flow/diff/Render", ["require", "flow/diff/Loader", "defer/Deferred"], function (e) { | |
function t(e, t) { | |
this.flowData = e, this.flowData.imageUrlPattern = t | |
} | |
var i, r = e("flow/diff/Loader"), | |
o = e("defer/Deferred"); | |
return i = t.prototype, i._storeImages = function (e) { | |
return this.images = e, this._blocksPerFullDiff = e[0].width / this.flowData.blockSize * (e[0].height / this.flowData.blockSize), (new o).resolve() | |
}, i._applyDiffRange = function (e, t) { | |
for (var i, r, o = t.block, n = t.length, a = e.canvas.width / this.flowData.blockSize, s = Math.floor(o / this._blocksPerFullDiff), c = this.images[s].width, p = o % this._blocksPerFullDiff, l = c / this.flowData.blockSize, d = p % l * this.flowData.blockSize, m = Math.floor(p / (l || 1)) * this.flowData.blockSize, u = t.location % a * this.flowData.blockSize, h = Math.floor(t.location / a) * this.flowData.blockSize; n;) i = Math.min(n * this.flowData.blockSize, e.canvas.width - u, c - d), r = i / this.flowData.blockSize, e.drawImage(this.images[s], d, m, i, this.flowData.blockSize, u, h, i, this.flowData.blockSize), n -= r, n && ((d += i) >= c && (d = 0, m += this.flowData.blockSize), (p += r) >= this._blocksPerFullDiff && (p = 0, d = 0, m = 0, s += 1, s === this.flowData.imagesRequired - 1 && (c = this.images[s].width)), (u += i) >= e.canvas.width && (u = 0, h += this.flowData.blockSize), o += r) | |
}, i.init = function () { | |
return new r(this.flowData.imageUrlPattern, this.flowData.imagesRequired).load().then(this._storeImages.bind(this)) | |
}, i.renderDiff = function (e, t) { | |
var i = e.getContext("2d"); | |
t -= 1, this.frames[t].forEach(function (e) { | |
this._applyDiffRange(i, e) | |
}.bind(this)) | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(i, { | |
frames: { | |
get: function () { | |
return this.flowData.frames | |
}, | |
set: function (e) { | |
this.flowData.frames = e | |
}, | |
enumerable: !0 | |
} | |
}), t) | |
}), AC.define("flow/compositor/Sequence", ["require", "assetLoader/AssetLoader", "flow/diff/Render", "defer/Deferred"], function (e) { | |
function t(e, t, i) { | |
this._keyframes = e, this._imageUrlPattern = t, this._flowDataProvider = i | |
} | |
var i, r = e("assetLoader/AssetLoader"), | |
o = e("flow/diff/Render"), | |
n = e("defer/Deferred"); | |
return i = t.prototype, i._initDiffRender = function (e) { | |
this._images = e, this.canvas.height = e[0].height, this.canvas.width = e[0].width, this.applyFrame(e[0]) | |
}, i.init = function (e) { | |
return this.canvas = e || document.createElement("canvas"), new r(this._keyframes).load().then(this._initDiffRender.bind(this)).then(this._flowDataProvider.load.bind(this._flowDataProvider)) | |
}, i.createDiffRender = function (e) { | |
return this._diffRender = new o(e, this._imageUrlPattern), this._diffRender.init() | |
}, i.applyFrame = function (e) { | |
var t = this.canvas.getContext("2d"); | |
t.drawImage(e, 0, 0) | |
}, i.calculateRenderCount = function (e, t) { | |
var i = 0; | |
return Math.abs(t - e) >= t ? (e = 1, i = 1) : Math.abs(t - e) >= this.frameCount - t && this._images[1] && (e = this.frameCount - 2, i = 1), t > 0 && t < this.frameCount - 1 ? Math.abs(e - t) + i : i | |
}, i.compositeFrames = function (e, t) { | |
var i = new n; | |
t = this.frameCount < t ? this.frameCount - 1 : 0 > t ? 0 : t, e = this.frameCount - 2 < e ? this.frameCount - 2 : 0 > e ? 0 : e; | |
var r; | |
if (Math.abs(t - e) >= t ? (e = 1, this.applyFrame(this._images[0])) : Math.abs(t - e) >= this.frameCount - t && this._images[1] && (e = this.frameCount - 2, this.applyFrame(this._images[1])), r = e > t ? -1 : t > e ? 1 : 0, t > 0 && t < this.frameCount - 1) | |
for (; e !== t;) i.progress(e), this._diffRender.renderDiff(this.canvas, e), e += r, i.progress(e); | |
return i.resolve(e), i.promise() | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(i, { | |
frameCount: { | |
get: function () { | |
return this._diffRender.frames.length + 2 | |
}, | |
enumerable: !0 | |
}, | |
canvas: { | |
get: function () { | |
return this._canvas | |
}, | |
set: function (e) { | |
return this._canvas = e | |
}, | |
enumerable: !0 | |
}, | |
mainCompositor: { | |
get: function () { | |
for (var e = this; e._compositor;) e = e._compositor; | |
return e | |
}, | |
enumerable: !0 | |
} | |
}), t) | |
}), AC.define("flow/data/Manifest", [], function () { | |
function e() {} | |
return e | |
}), AC.define("flow/data/Block", [], function () { | |
function e(e, t) { | |
this.location = e, this.length = t | |
} | |
return e | |
}), AC.define("flow/data/processor", ["require", "flow/data/Manifest", "flow/data/Block"], function (e) { | |
var t, i = e("flow/data/Manifest"), | |
r = e("flow/data/Block"), | |
o = { | |
parseData: function (e) { | |
t = 0; | |
var r = e.frames.map(this._parseFrame, this); | |
return Object.create(i.prototype, { | |
version: { | |
value: e.version | |
}, | |
framecount: { | |
value: e.frameCount | |
}, | |
blockSize: { | |
value: e.blockSize | |
}, | |
imagesRequired: { | |
value: e.imagesRequired | |
}, | |
reversible: { | |
value: e.reversible | |
}, | |
superframeFrequency: { | |
value: e.superframeFrequency | |
}, | |
frames: { | |
value: r | |
} | |
}) | |
}, | |
_valueForCharAt: function (e, t) { | |
var i = e.charCodeAt(t); | |
if (i > 64 && 91 > i) return i - 65; | |
if (i > 96 && 123 > i) return i - 71; | |
if (i > 47 && 58 > i) return i + 4; | |
if (43 === i) return 62; | |
if (47 === i) return 63; | |
throw "Invalid Bas64 character: " + e.charAt(t) | |
}, | |
_createNumberFromBase64Range: function (e, t, i) { | |
for (var r, o = 0; i--;) r = this._valueForCharAt(e, t++), o += r << 6 * i; | |
return o | |
}, | |
_parseFrame: function (e) { | |
var i, o, n, a = [], | |
e = e.value || e; | |
for (i = 0; i < e.length; i += 5) n = this._createNumberFromBase64Range(e, i, 3), o = this._createNumberFromBase64Range(e, i + 3, 2), a.push(Object.create(r.prototype, { | |
location: { | |
value: n, | |
enumerable: !0 | |
}, | |
length: { | |
value: o, | |
enumerable: !0 | |
}, | |
block: { | |
value: (t += o) - o, | |
enumerable: !0 | |
} | |
})); | |
return a | |
} | |
}; | |
return o | |
}), AC.define("flow/data/provider/Async", ["require", "ajax/Ajax", "flow/data/processor"], function (e) { | |
function t(e, t) { | |
this._url = e, this._ajaxAdaptor = t || new r | |
} | |
var i, r = e("ajax/Ajax"), | |
o = e("flow/data/processor"); | |
return i = t.prototype, i.load = function () { | |
var e = this; | |
return this._ajaxAdaptor.get(this._url).then(function (e) { | |
try { | |
var t = e.response || e.responseText; | |
return JSON.parse(t) | |
} catch (i) {} | |
}).then(function (t) { | |
return e._data = t, o.parseData(t) | |
}) | |
}, t | |
}), AC.define("flow/data/provider/Sync", ["require", "defer/Deferred", "flow/data/processor"], function (e) { | |
function t(e) { | |
this._data = e | |
} | |
var i, r = e("defer/Deferred"), | |
o = e("flow/data/processor"); | |
return i = t.prototype, i.load = function () { | |
var e = new r; | |
return e.resolve(o.parseData(this._data)), e.promise() | |
}, t | |
}), AC.define("flow/Player", ["require", "defer/Deferred"], function (e) { | |
function t(e, t) { | |
this._flow = t, this._frameRate = 30, this.element = e, this.paused = !0, this.loop = !1 | |
} | |
var i, r = e("defer/Deferred"); | |
return i = t.prototype, i._dispatchEvent = function (e) { | |
var t = document.createEvent("Events"); | |
return t.initEvent(e, !0, !1), t.data = this, this.element.dispatchEvent(t), t | |
}, i._timeToFrame = function (e) { | |
var t; | |
return t = Math.round(e / this.duration * this._flow.frameCount), t %= this._flow.frameCount + 1, 0 > t ? this._flow.frameCount + t : t | |
}, i._advanceToTimeGlobal = function (e) { | |
this._prevTime = this._prevTime || e, this._currentTime += (e - this._prevTime) / 1e3 * this.playbackRate, this._prevTime = e; | |
var t = this._timeToFrame(this._currentTime), | |
i = !1; | |
return this.loop ? this._currentTime = (this.duration + this._currentTime) % this.duration : this.playbackRate > 0 && this._currentTime > this.duration ? (t = this._flow.frameCount, this._currentTime = this.duration, i = !0) : this.playbackRate < 0 && this._currentTime < 0 && (t = 0, this._currentTime = 0, i = !0), this.paused || this.seeking ? (new r).reject() : this._flow.gotoFrame(t).then(function () { | |
this._dispatchEvent("timeupdate"), i ? (this.paused = !0, this._dispatchEvent("ended")) : this._requestAnimationFrame = window.requestAnimationFrame(this._advanceToTimeGlobal.bind(this)) | |
}.bind(this)) | |
}, i._advanceToTimeLocal = function (e) { | |
this.seeking || (this.seeking = !0, this._dispatchEvent("seeking"), this._currentTime = 1 * e, this._prevTime = null, window.cancelAnimationFrame(this._requestAnimationFrame), this._flow.gotoFrame(this._timeToFrame(e)).then(function () { | |
this.seeking = !1, this._dispatchEvent("timeupdate"), this._dispatchEvent("seeked"), this._requestAnimationFrame = window.requestAnimationFrame(this._advanceToTimeGlobal.bind(this)) | |
}.bind(this))) | |
}, i.load = function () { | |
return this._dispatchEvent("loadstart"), this._flow.init(this.element).then(this._dispatchEvent.bind(this, "canplaythrough")) | |
}, i.play = function () { | |
return this.paused && (this.paused = !1, this._dispatchEvent("play"), this._prevTime = null, this._requestAnimationFrame = window.requestAnimationFrame(this._advanceToTimeGlobal.bind(this))), this | |
}, i.pause = function () { | |
return this.paused || (this.paused = !0, window.cancelAnimationFrame(this._requestAnimationFrame), this._dispatchEvent("pause")), this | |
}, i.on = function () { | |
this.element.addEventListener.apply(this.element, arguments) | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(i, { | |
_currentTime: { | |
value: 0, | |
enumerable: !1, | |
writable: !0 | |
}, | |
_playbackRate: { | |
value: 1, | |
enumerable: !1, | |
writable: !0 | |
}, | |
currentTime: { | |
get: function () { | |
return 1 * this._currentTime | |
}, | |
set: i._advanceToTimeLocal, | |
enumerable: !0 | |
}, | |
frameRate: { | |
get: function () { | |
return this._frameRate | |
}, | |
set: function (e) { | |
isFinite(e) && (this._frameRate = e, this._dispatchEvent("durationchange")) | |
}, | |
enumerable: !0 | |
}, | |
playbackRate: { | |
get: function () { | |
return 1 * this._playbackRate | |
}, | |
set: function (e) { | |
isFinite(e) && (this._playbackRate = 1 * e, this._dispatchEvent("ratechange")) | |
}, | |
enumerable: !0 | |
}, | |
duration: { | |
get: function () { | |
return this._flow.frameCount / this.frameRate | |
}, | |
enumerable: !0 | |
} | |
}), t) | |
}), AC.define("flow/keyframe/Loader", ["require", "assetLoader/AssetLoader", "defer/Deferred"], function (e) { | |
function t(e, t) { | |
var i, r = e.match(/#/g).length; | |
this._keyframes = {}, e = e.replace(/([^#]+)(#+)(\..*)/, "$1key_$2$3"), this._imageUrls = [], t.frames && t.frames.forEach(function (t, o) { | |
"keyframe" === t.type && (i = "0000" + o, i = i.substring(i.length - r), this._imageUrls.push(e.replace(/#+/g, i)), this._keyframes[o] = t) | |
}.bind(this)) | |
} | |
var i, r = e("assetLoader/AssetLoader"), | |
o = e("defer/Deferred"); | |
return i = t.prototype, i.load = function () { | |
return this._imageUrls.length > 0 ? new r(this._imageUrls).load() : (new o).resolve() | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(i, { | |
keyframes: { | |
get: function () { | |
return this._keyframes | |
}, | |
enumerable: !0 | |
} | |
}), t) | |
}), AC.define("flow/keyframe/Render", ["require", "flow/keyframe/Loader"], function (e) { | |
function t(e, t) { | |
this.flowData = e, this.flowData.imageUrlPattern = t | |
} | |
var i, r = e("flow/keyframe/Loader"); | |
return i = t.prototype, i._storeImages = function (e) { | |
var t, i = 0; | |
if (e && e.length > 0) | |
for (var r in this._loader._keyframes) this._loader._keyframes.hasOwnProperty(r) && (t = e[i], this._loader._keyframes[r].image = t, i += 1) | |
}, i.init = function () { | |
return this._loader = new r(this.flowData.imageUrlPattern, this.flowData), this._loader.load().then(this._storeImages.bind(this)) | |
}, i.renderKeyframe = function (e, t, i) { | |
var r = e.getContext("2d"), | |
o = this._loader.keyframes[t], | |
n = o.image, | |
a = o.x, | |
s = o.y, | |
c = o.width, | |
p = o.height; | |
i === !0 ? r.drawImage(n, a, s, c, p, a, s, c, p) : this.flowData.reversible ? r.drawImage(n, 0, 0) : r.drawImage(n, a, s, c, p) | |
}, t | |
}), AC.define("flow/compositor/decorator/Keyframe", ["require", "flow/keyframe/Render", "defer/Deferred"], function (e) { | |
function t(e) { | |
this._compositor = e, this._flowDataProvider = this.mainCompositor._flowDataProvider | |
} | |
var i, r = e("flow/keyframe/Render"), | |
o = e("defer/Deferred"); | |
return i = t.prototype, i.init = function () { | |
return this._keyframeDiffRender = new r(this._flowDataProvider._data, this.mainCompositor._imageUrlPattern), this._keyframeDiffRender.init() | |
}, i.applyFrame = function () { | |
return this._compositor.applyFrame.apply(this._compositor, arguments) | |
}, i.applyKeyframe = function (e, t) { | |
this._keyframeDiffRender.renderKeyframe(this.canvas, e, t) | |
}, i.compositeFrames = function (e, t) { | |
if (!this._isKeyframeDiff(t - 1)) return this._compositor.compositeFrames.apply(this._compositor, arguments); | |
var i = new o; | |
return this.applyKeyframe(t - 1), i.resolve(e - 1), i.promise() | |
}, i._isKeyframeDiff = function (e) { | |
return e in this._keyframeDiffRender._loader._keyframes | |
}, i.calculateRenderCount = function () { | |
return this._compositor.calculateRenderCount.apply(this._compositor, arguments) | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(i, { | |
frameCount: { | |
get: function () { | |
return this._compositor.frameCount | |
}, | |
enumerable: !0 | |
}, | |
canvas: { | |
get: function () { | |
return this._compositor.canvas | |
}, | |
set: function (e) { | |
return this._compositor.canvas = e | |
}, | |
enumerable: !0 | |
}, | |
mainCompositor: { | |
get: function () { | |
return this._compositor.mainCompositor | |
}, | |
enumerable: !0 | |
} | |
}), t) | |
}), AC.define("flow/compositor/decorator/Superframe", [], function () { | |
function e(e, t) { | |
this._compositor = e, this._superframeInterval = t || 4 | |
} | |
var t; | |
return t = e.prototype, t._getClosestSuperframe = function (e) { | |
return Math.round(e / this._superframeInterval) * this._superframeInterval | |
}, t.init = function (e) { | |
this._screenCanvas = e | |
}, t.applyFrame = function () { | |
this._compositor.applyFrame.apply(this._compositor, arguments) | |
}, t.calculateRenderCount = function (e, t) { | |
var i = this._getClosestSuperframe(e); | |
return Math.abs(i - t) > this._superframeInterval / 2 ? (e = i + (e > t ? -1 : 1) * this._superframeInterval, this.calculateRenderCount(e, t) + 1) : Math.abs(i - t) + 1 | |
}, t.compositeFrames = function (e, t) { | |
var i, r; | |
return (0 >= t || t >= this.frameCount - 2) && this._compositor.compositeFrames(e, t), e > this.frameCount - 2 ? e = this.frameCount - 2 : 0 >= e && (e = 1), r = this._getClosestSuperframe(e), i = this._compositor.calculateRenderCount(e, t) > this.calculateRenderCount(e, t) ? this._compositor.compositeFrames(r, r).then(function () { | |
var i = r + (e > t ? -1 : 1) * this._superframeInterval; | |
this._compositor.compositeFrames(r, i).then(function () { | |
return this.compositeFrames(i, t) | |
}.bind(this)) | |
}.bind(this)) : this._compositor.compositeFrames(e, t).then(function () {}.bind(this)), i.then(function () {}.bind(this)), i | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(t, { | |
frameCount: { | |
get: function () { | |
return this._compositor.frameCount | |
}, | |
enumerable: !0 | |
}, | |
canvas: { | |
get: function () { | |
return this._compositor.canvas | |
}, | |
set: function (e) { | |
return this._compositor.canvas = e | |
}, | |
enumerable: !0 | |
}, | |
mainCompositor: { | |
get: function () { | |
return this._compositor.mainCompositor | |
}, | |
enumerable: !0 | |
} | |
}), e) | |
}), AC.define("flow/compositor/decorator/SuperKeyframe", ["require", "defer/Deferred"], function (e) { | |
function t(e) { | |
this._compositor = e, this._frames = this.mainCompositor._flowDataProvider._data.frames, this._superframeInterval = this.mainCompositor._diffRender.flowData.superframeFrequency | |
} | |
var i, r = e("defer/Deferred"); | |
return i = t.prototype, i.init = function () { | |
return this._compositor.init.apply(this._compositor, arguments) | |
}, i.applyFrame = function () { | |
return this._compositor.applyFrame.apply(this._compositor, arguments) | |
}, i.applyKeyframe = function () { | |
this._compositor.applyKeyframe.apply(this._compositor, arguments) | |
}, i.compositeFrames = function (e, t) { | |
var i, o, n = new r; | |
return 1 > t || t > this.frameCount - 2 ? this._compositor.compositeFrames.apply(this._compositor, arguments) : this._isKeyframeDiff(t - 1) ? (i = 1 === Math.abs(e - t) ? !0 : !1, this.applyKeyframe(t - 1, i), n.resolve(e - 1), n.promise()) : Math.abs(t - e) > this._superframeInterval && (o = this._getShortestRender(e, t), this._isKeyframeDiff(o - 1) || 0 >= o || o >= this.frameCount - 2) ? this._compositeFromSuperKeyframe(o, t) : this._compositor.compositeFrames.apply(this._compositor, [e, t]) | |
}, i._getShortestRender = function (e, t) { | |
var i = this._compositor.calculateRenderCount, | |
r = this._getClosestSuperKeyframe(t - 1), | |
o = i.apply(this._compositor, [r, t]) + 1, | |
n = i.apply(this._compositor, [e, t]); | |
return n >= o ? r : e | |
}, i._compositeFromSuperKeyframe = function (e, t) { | |
var i = this.canvas.getContext("2d"), | |
r = 0 >= e ? this.mainCompositor._images[0] : e >= this.frameCount - 2 ? this.mainCompositor._images[1] : this._frames[e - 1].image; | |
return i.drawImage(r, 0, 0), this._compositor.compositeFrames.call(this._compositor, e, t) | |
}, i._getClosestSuperFrame = function (e) { | |
return Math.round(e / this._superframeInterval) * this._superframeInterval | |
}, i._getClosestSuperKeyframe = function (e) { | |
var t, i, r, o, n = this._frames.length; | |
if (n + 1 > e && e > 0) { | |
for (o = e - 1; o >= 0;) { | |
if ("keyframe" === this._frames[o].type) { | |
t = o + 1; | |
break | |
} | |
o -= 1 | |
} | |
for (o = e + 1; n - 1 >= o;) { | |
if ("keyframe" === this._frames[o].type) { | |
i = o + 1; | |
break | |
} | |
o += 1 | |
} | |
} | |
return t = t ? t : 0, i = i ? i : this.frameCount, r = i - e > e - t ? t : i | |
}, i._isKeyframeDiff = function () { | |
return this._compositor._isKeyframeDiff.apply(this._compositor, arguments) | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(i, { | |
frameCount: { | |
get: function () { | |
return this._compositor.frameCount | |
}, | |
enumerable: !0 | |
}, | |
canvas: { | |
get: function () { | |
return this._compositor.canvas | |
}, | |
set: function (e) { | |
return this._compositor.canvas = e | |
}, | |
enumerable: !0 | |
}, | |
mainCompositor: { | |
get: function () { | |
return this._compositor.mainCompositor | |
}, | |
enumerable: !0 | |
} | |
}), t) | |
}), AC.define("flow/compositor/decorator/Cache", [], function () { | |
function e(e, t) { | |
this._compositor = e, this._keyframeInterval = t || 8, this._keyframes = [] | |
} | |
var t; | |
return t = e.prototype, t._getClosestKeyframe = function (e) { | |
var t = e % this._keyframeInterval, | |
i = Math.floor(e / this._keyframeInterval) + (t > this._keyframeInterval / 2 ? 1 : 0); | |
return i | |
}, t._getFrameFromKeyframe = function (e) { | |
return e * this._keyframeInterval | |
}, t._saveKeyframe = function (e) { | |
var t, i = Math.floor(e / this._keyframeInterval); | |
0 !== e % this._keyframeInterval || this._keyframes[i] || (t = document.createElement("canvas"), t.width = this._compositor.canvas.width, t.height = this._compositor.canvas.height, t.getContext("2d").drawImage(this._compositor.canvas, 0, 0), this._keyframes[i] = t) | |
}, t.init = function () { | |
return this._compositor.init.apply(this._compositor, arguments) | |
}, t.applyFrame = function () { | |
this._compositor.applyFrame.apply(this._compositor, arguments) | |
}, t.calculateRenderCount = function (e, t) { | |
return e = this._getFrameFromKeyframe(this._getClosestKeyframe(t)), this._compositor.calculateRenderCount(e, t) + 1 | |
}, t.compositeFrames = function (e, t) { | |
var i = this._getClosestKeyframe(t); | |
return this._keyframes[i] && this._compositor.calculateRenderCount(e, t) > this.calculateRenderCount(e, t) ? (e = this._getFrameFromKeyframe(i), this.applyFrame(this._keyframes[i]), this._compositor.compositeFrames(e, t).then(function () {})) : this._compositor.compositeFrames(e, t).then(function () {}, null, this._saveKeyframe.bind(this)) | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(t, { | |
frameCount: { | |
get: function () { | |
return this._compositor.frameCount | |
}, | |
enumerable: !0 | |
}, | |
canvas: { | |
get: function () { | |
return this._compositor.canvas | |
}, | |
set: function (e) { | |
return this._compositor.canvas = e | |
}, | |
enumerable: !0 | |
} | |
}), e) | |
}), AC.define("stats/Benchmark", [], function () { | |
function e(e) { | |
this.name = e | |
} | |
return e.prototype.start = function () {}, e.prototype.end = function () {}, e | |
}), AC.define("flow/compositor/decorator/Benchmark", ["require", "stats/Benchmark"], function (e) { | |
function t(e) { | |
this._compositor = e | |
} | |
var i, r = e("stats/Benchmark"); | |
return i = t.prototype, i.init = function () { | |
var e = new r("init"); | |
return e.start(), this._compositor.init.apply(this._compositor, arguments).then(e.end.bind(e)) | |
}, i.applyFrame = function () { | |
var e = new r("applyFrame"); | |
e.start(), this._compositor.applyFrame.apply(this._compositor, arguments), e.end.bind(e) | |
}, i.calculateRenderCount = function () { | |
return this._compositor.calculateRenderCount.apply(this._compositor, arguments) | |
}, i.compositeFrames = function () { | |
var e = new r("renderFrames"); | |
return e.start(), this._compositor.compositeFrames.apply(this._compositor, arguments).then(e.end.bind(e)) | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(i, { | |
frameCount: { | |
get: function () { | |
return this._compositor.frameCount | |
}, | |
enumerable: !0 | |
}, | |
canvas: { | |
get: function () { | |
return this._compositor.canvas | |
}, | |
set: function (e) { | |
return this._compositor.canvas = e | |
}, | |
enumerable: !0 | |
} | |
}), t.prototype = i, t) | |
}), 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 (e) { | |
function t(e, t) { | |
this._compositor = e, this.options = t || {} | |
} | |
var i, r = e("defer/Deferred"), | |
o = e("flow/compositor/decorator/Keyframe"), | |
n = e("flow/compositor/decorator/Superframe"), | |
a = e("flow/compositor/decorator/SuperKeyframe"), | |
s = e("flow/compositor/decorator/Cache"), | |
c = e("flow/compositor/decorator/Benchmark"); | |
return i = t.prototype, i.gotoFrame = function (e) { | |
return this._rendering ? (new r).resolve() : this._currentFrame === e ? (new r).resolve() : (this._rendering = !0, this._compositor.compositeFrames(this._currentFrame, e).then(function () { | |
this._rendering = !1, this._currentFrame = e | |
}.bind(this))) | |
}, i.init = function (e) { | |
var t; | |
return "CANVAS" === e.nodeName ? t = e : (t = document.createElement("canvas"), e.appendChild(t)), this._compositor.init(t).then(function (e) { | |
return r.all([this._compositor.createDiffRender(e).then(this._decorateCompositor.bind(this))]) | |
}.bind(this)) | |
}, i._decorateCompositor = function () { | |
var e = this._compositor, | |
t = this._compositor._diffRender.flowData, | |
i = this._compositor.canvas; | |
return t.superframeFrequency && (e = new n(e, t.superframeFrequency)), 3 === t.version && (e = new o(e)), 3 === t.version && t.superframeFrequency && (e = new a(e)), this.options.keyframeCache && (e = new s(e, this.options.keyframeCache)), this.options.benchmark && (e = new c(e)), e === this._compositor ? (new r).resolve() : (this._compositor = e, this._compositor.init(i)) | |
}, "function" != typeof Object.defineProperties ? function () {} : (Object.defineProperties(i, { | |
_currentFrame: { | |
value: 0, | |
enumerable: !1, | |
writable: !0 | |
}, | |
frameCount: { | |
get: function () { | |
return this._compositor.frameCount | |
}, | |
enumerable: !0 | |
} | |
}), t) | |
}), AC.define("flow/playerFactory", ["require", "flow/compositor/Sequence", "flow/data/provider/Async", "flow/data/provider/Sync", "flow/Player", "flow/Flow"], function (e) { | |
function t(e, t, s, c, p) { | |
var l, d, m; | |
return p = p || {}, p = { | |
keyframeCache: "undefined" == typeof p.keyframeCache ? 8 : p.keyframeCache, | |
benchmark: "undefined" == typeof p.benchmark ? !1 : p.benchmark, | |
preload: "undefined" == typeof p.preload ? !0 : p.preload | |
}, t = t || [e.getAttribute("data-start-frame")], e.getAttribute("data-end-frame") && t.push(e.getAttribute("data-end-frame")), s = s || e.getAttribute("data-image-url-pattern"), m = "string" == typeof c ? new r(c) : new o(c), l = new i(t, s, m), d = new n(e, new a(l, p)), p.preload && d.load(), d | |
} | |
var i = e("flow/compositor/Sequence"), | |
r = e("flow/data/provider/Async"), | |
o = e("flow/data/provider/Sync"), | |
n = e("flow/Player"), | |
a = e("flow/Flow"); | |
return t | |
}), AC.define("macpro/shared/MediaTimer", [], function () { | |
function e() { | |
this._currentTimeMS = 0, this._playbackRate = 1, this.playing = !1, this._paused = !0, this._resetStartTime() | |
} | |
var t = e.prototype; | |
return t._updateCurrentTime = function () { | |
var e, t = +new Date; | |
e = this.paused ? 0 : t - this._startTime, this._currentTimeMS += e * this._playbackRate, this._startTime = t | |
}, t._resetStartTime = function () { | |
this._startTime = +new Date | |
}, t.play = function () { | |
return this._resetStartTime(), this.playing = !0, this._paused = !1, this | |
}, t.pause = function () { | |
return this._updateCurrentTime(), this.playing = !1, this._paused = !0, this | |
}, Object.defineProperties(t, { | |
currentTime: { | |
get: function () { | |
return this._updateCurrentTime(), this._currentTimeMS / 1e3 | |
}, | |
set: function (e) { | |
this._resetStartTime(), this._currentTimeMS = 1e3 * e | |
} | |
}, | |
playbackRate: { | |
get: function () { | |
return this._playbackRate | |
}, | |
set: function (e) { | |
this._resetStartTime(), this._playbackRate = e | |
} | |
}, | |
paused: { | |
get: function () { | |
return this._paused | |
}, | |
set: function () {} | |
} | |
}), e | |
}), AC.define("macpro/shared/media/TimedVideo", ["require", "macpro/shared/MediaTimer", "defer/Deferred"], function (e) { | |
function t(e, t, o) { | |
this._deferred = new r, this._paused = !0, this._playbackRate = 1, this._backwardsTimer = new i, this._video = document.createElement("video"), o && (this._video.poster = o); | |
var n = function (e) { | |
this._video.removeEventListener("error", n), this._video.parentNode.removeChild(this._video), this._deferred.reject(e) | |
}.bind(this); | |
this._video.addEventListener("error", n), this._video.addEventListener("canplay", function (e) { | |
this._video.removeEventListener("error", n), this.canplay = !0, this._deferred.resolve(e) | |
}.bind(this)), this._video.src = t, e.appendChild(this._video) | |
} | |
var i = e("macpro/shared/MediaTimer"), | |
r = e("defer/Deferred"), | |
o = t.prototype; | |
return o.promise = function () { | |
return this._deferred.promise() | |
}, o.update = function () { | |
this.playbackRate < 0 && (this._video.currentTime = this._backwardsTimer.currentTime) | |
}, o.play = function () { | |
return this.paused && (this.playbackRate >= 0 ? (this._video.playbackRate = this.playbackRate, this._video.play()) : (this._backwardsTimer.playbackRate = this.playbackRate, this._backwardsTimer.play()), this._paused = !1), !0 | |
}, o.pause = function () { | |
this.paused || (this._video.pause(), this._backwardsTimer.pause(), this.currentTime = this.currentTime, this._paused = !0) | |
}, Object.defineProperties(o, { | |
currentTime: { | |
get: function () { | |
return !this.paused && this.playbackRate >= 0 ? this._video.currentTime : this._backwardsTimer.currentTime | |
}, | |
set: function (e) { | |
this._video.currentTime = e, this._backwardsTimer.currentTime = e | |
} | |
}, | |
playbackRate: { | |
get: function () { | |
return this._playbackRate | |
}, | |
set: function (e) { | |
this._playbackRate = e | |
} | |
}, | |
paused: { | |
get: function () { | |
return this._paused | |
}, | |
set: function () {} | |
} | |
}), t | |
}), AC.define("macpro/shared/media/BiVideo", ["require", "defer/Deferred", "macpro/shared/MediaTimer"], function (e) { | |
function t(e, t, o, n, a) { | |
var s, c = new i, | |
p = new i; | |
a = a || 0, this._paused = !0, this._playbackRate = 1, this._mediaTimer = new r, this._forwardsVideo = document.createElement("video"), n && (this._forwardsVideo.poster = n), o && (this._backwardsVideo = document.createElement("video")), this._canPlayBackwards = !1, this._canPlayForwards = !1; | |
var l = function (e) { | |
s = +new Date, document.removeEventListener("touchstart", l), this._forwardsVideo.addEventListener("canplaythrough", function () { | |
document.addEventListener("touchstart", d) | |
}), this._forwardsVideo.load(), window.app.uiController.next(), e.preventDefault() | |
}.bind(this), | |
d = function (e) { | |
document.removeEventListener("touchstart", d); | |
var t = setInterval(function () { | |
var e; | |
try { | |
e = this._forwardsVideo.seekable.end(0) | |
} catch (i) {} | |
e === this._forwardsVideo.duration && this.paused && (clearInterval(t), this._forwardsVideo.addEventListener("seeked", function () { | |
this._forwardsVideo.style.opacity = 1 | |
}.bind(this)), this._forwardsVideo.currentTime = a || this.currentTime, this._canPlayForwards = !0, app.uiController.enableInput()) | |
}.bind(this), 100); | |
e.preventDefault() | |
}.bind(this), | |
m = function (e) { | |
this._forwardsVideo.removeEventListener("progress", m), c.resolve(e) | |
}.bind(this), | |
u = function (e) { | |
this._backwardsVideo.removeEventListener("progress", u), p.resolve(e) | |
}.bind(this); | |
this._forwardsVideo.style.height = "100%", this._forwardsVideo.style.width = "100%", this._forwardsVideo.style.opacity = 0, this._forwardsVideo.controls = !1, o ? (this._backwardsVideo.style.height = "100%", this._backwardsVideo.style.width = "100%", this._backwardsVideo.style.opacity = 0, this._backwardsVideo.controls = !1, this._backwardsVideo.addEventListener("progress", u), this._backwardsVideo.src = o, e.appendChild(this._backwardsVideo)) : p = !0, this._forwardsVideo.addEventListener("progress", m), this._forwardsVideo.src = t, e.appendChild(this._forwardsVideo), this._promise = i.join(c, p).then(function () { | |
document.addEventListener("touchstart", l) | |
}.bind(this)) | |
} | |
var i = e("defer/Deferred"), | |
r = e("macpro/shared/MediaTimer"), | |
o = t.prototype; | |
return o.promise = function () { | |
return this._promise | |
}, o.play = function () { | |
var e = !1; | |
return this.paused && (this.playbackRate >= 0 ? this._canPlayForwards ? (this._forwardsVideo.play(), this._forwardsVideo.style.opacity = "1", this._backwardsVideo && (this._backwardsVideo.style.opacity = "0"), this._paused = !1, e = !0) : (this._mediaTimer.play(), this._paused = !1, e = !0) : 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 = !1, e = !0) : this._backwardsVideo && (this._backwardsVideo.play(), this._backwardsVideo.pause(), this._backwardsVideo.buffered.end(0) === this._backwardsVideo.duration && (this._canPlayBackwards = !0, this._backwardsVideo.currentTime = this._backwardsVideo.duration - this._mediaTimer.currentTime))), e | |
}, o.pause = function () { | |
this._playbackRate >= 0 ? this._canPlayForwards && (this._forwardsVideo.pause(), this._mediaTimer.currentTime = this._forwardsVideo.currentTime, this._canPlayBackwards && (this._backwardsVideo.currentTime = this._backwardsVideo.duration - this._mediaTimer.currentTime)) : 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 = !0 | |
}, Object.defineProperties(o, { | |
currentTime: { | |
get: function () { | |
return !this.paused && this._playbackRate >= 0 && this._canPlayForwards ? this._forwardsVideo.currentTime : !this.paused && this._playbackRate < 0 && this._canPlayBackwards ? this._backwardsVideo.duration - this._backwardsVideo.currentTime : this._mediaTimer.currentTime | |
}, | |
set: function (e) { | |
if (this._paused) { | |
this._mediaTimer.currentTime = e; | |
try { | |
this._forwardsVideo.currentTime = e, this._forwardsVideo.play(), this._forwardsVideo.pause() | |
} catch (t) {} | |
if (this._backwardsVideo) try { | |
this._backwardsVideo.currentTime = this._backwardsVideo.duration - e | |
} catch (t) {} | |
} | |
} | |
}, | |
playbackRate: { | |
get: function () { | |
return this._playbackRate | |
}, | |
set: function (e) { | |
if (this._paused) { | |
var t = this.currentTime; | |
this._playbackRate = e, this.currentTime = t | |
} | |
} | |
}, | |
paused: { | |
get: function () { | |
return this._paused | |
}, | |
set: function () {} | |
} | |
}), t | |
}), AC.define("macpro/shared/ClipContainer", ["require", "macpro/shared/controller/Clip", "flow/playerFactory", "macpro/shared/media/TimedVideo", "macpro/shared/media/BiVideo", "macpro/shared/MediaTimer", "defer/Deferred", "assetLoader/AssetLoader"], function (e) { | |
function t(e) { | |
var t, i = document.getElementById("stillcontainer"); | |
for (var r in e) i.querySelector(".still_" + r) || (t = document.createElement("img"), t.src = e[r], t.alt = "", t.className = "still still_" + r, i.appendChild(t)) | |
} | |
function i(e, t, i) { | |
this.containerElement = e, this.config = t, this.clips = i | |
} | |
var r = e("macpro/shared/controller/Clip"), | |
o = e("flow/playerFactory"), | |
n = e("macpro/shared/media/TimedVideo"), | |
a = e("macpro/shared/media/BiVideo"), | |
s = (e("macpro/shared/MediaTimer"), e("defer/Deferred")); | |
return e("assetLoader/AssetLoader"), i.prototype.constructor = i, i.prototype.initFlow = function (e) { | |
var i, r = new s, | |
n = "json", | |
a = "jpg", | |
c = [e.flowKeyFrame, e.flowEndFrame], | |
p = e.diffDir, | |
l = p + "flow_###." + a, | |
d = /^https?:\/\/[^\/]+\//i, | |
m = e.manifest.replace(d, "/") + "flow_manifest." + n; | |
return e.stills && t(e.stills, e.stillsDir), i = o(this.containerElement, c, l, m, { | |
superframes: !1, | |
keyframeCache: !1, | |
benchmark: !1 | |
}), i.frameRate = e.fps, i.loop = !1, i.on("canplaythrough", function (e) { | |
r.resolve(e) | |
}), this.mediaElement = i, r.promise() | |
}, i.prototype.initVideo = function (e) { | |
return e.stills && t(e.stills), this.mediaElement = new n(this.containerElement, e.file, e.poster), this.mediaElement.promise() | |
}, i.prototype.initBiVideo = function (e) { | |
return e.stills && t(e.stills), this.mediaElement = new a(this.containerElement, e.file, e.backwards, e.poster, e.startTime), this.mediaElement.promise() | |
}, i.prototype.loadExperience = function (e) { | |
switch (e.type) { | |
case "bivideo": | |
return this.initBiVideo(e); | |
case "video": | |
return this.initVideo(e); | |
case "flow": | |
return this.initFlow(e) | |
} | |
}, i.prototype.load = function () { | |
var e = new s, | |
t = this.config; | |
return this.loadExperience(t[0]).then(function () { | |
e.resolve() | |
}, function () { | |
this.loadExperience(t[1]).then(function () { | |
e.resolve() | |
}) | |
}.bind(this)), e.promise().then(function () { | |
this.clipController = new r(this.clips, this.mediaElement) | |
}.bind(this)) | |
}, i.prototype.play = function () { | |
this.clipController.play() | |
}, i | |
}), AC.define("macpro/shared/controller/Section", ["require", "macpro/shared/MediaTimer", "macpro/shared/event/Emitter", "macpro/shared/clip/Tween"], function (e) { | |
function t(e, t, o) { | |
if (i.call(this), !t || !t) throw new Error("SectionController: timeline is missing or incomplete."); | |
this._clipController = e, this._pauseTimeline = t, this._sections = o, this._currentSectionIndex = 0, this._currentPauseIndex = 0, this._seekable = !1, this._update = this._update.bind(this), this.fadeOutAnim = new r("#curtain", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]), this.fadeInAnim = new r("#curtain", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]), this._curtain = document.getElementById("curtain"), this.on("pauseenter:0", function () { | |
this._seekable = !0 | |
}.bind(this)), this._clipController.on("timeupdate", this._update), this._clipController.on("ended", this._enableSections.bind(this, null, !0)), this._clipController.on("play", this._derivePauseIndex.bind(this)) | |
} | |
var i = (e("macpro/shared/MediaTimer"), e("macpro/shared/event/Emitter")), | |
r = e("macpro/shared/clip/Tween"), | |
o = 500, | |
n = "IE" === AC.Environment.Browser.name, | |
a = AC.Environment.Feature.cssPropertyAvailable("transition"), | |
s = t.prototype = new i; | |
return s.constructor = t, s._update = function () { | |
var e = this.currentTime, | |
t = this._clipController.playbackRate > 0, | |
i = !t, | |
r = !this.paused || 0 === e || e === this.duration, | |
o = t && e >= this._pauseTimeline[this._currentPauseIndex + 1], | |
n = i && e <= this._pauseTimeline[this._currentPauseIndex - 1], | |
a = r && (o || n); | |
a && (this._clipController.pause(), this._currentPauseIndex += t ? 1 : -1, e = this._pauseTimeline[this._currentPauseIndex], this._clipController.currentTime = e), this._enableSections(e), a && this.trigger("pauseenter:" + this._currentPauseIndex, { | |
from: this._currentPauseIndex + (t ? -1 : 1), | |
to: this._currentPauseIndex | |
}) | |
}, s._derivePauseIndex = function (e) { | |
for (var t = 0; this._pauseTimeline[t] < e;) this._currentPauseIndex = t++; | |
return this._currentPauseIndex | |
}, s._deriveSectionIndex = function (e) { | |
var t, i = this.playbackRate > 0, | |
r = i ? 0 : this._sections.length - 1; | |
if (e === this.duration) return this._sections.length - 1; | |
if (i) | |
for (; r < this._sections.length && this._sections[r].time < e;) t = ++r; | |
else | |
for (; r > -1 && this._sections[r].time > e;) t = --r; | |
return t | |
}, s._enableSections = function (e, t) { | |
var e = e || this.currentTime, | |
i = t ? this._sections.length - 1 : this._deriveSectionIndex(e), | |
r = document.querySelectorAll("#panelcontainer > section"); | |
this._prevSectionIndex !== i && (this._currentSectionIndex = i, [].forEach.call(r, function (e, t) { | |
var r = i === t, | |
o = i >= t - 1 && t + 1 >= i; | |
e.classList[r ? "add" : "remove"]("front"), e.classList[o ? "add" : "remove"]("show") | |
}), this._prevSectionIndex = i) | |
}, s._fadeOut = function () { | |
a ? this._curtain.classList.add("fadeOut") : this._runTimeFade(!0) | |
}, s._fadeIn = function () { | |
a ? this._curtain.classList.remove("fadeOut") : this._runTimeFade(!1) | |
}, s._runTimeFade = function (e) { | |
function t(c) { | |
i || (i = c), r = (c - i) / 1e3, o = r / s * s, n.tween(o), s > r ? window.requestAnimationFrame(t) : e || (a.style.zIndex = 30) | |
} | |
var i, r, o, n = e ? this.fadeOutAnim : this.fadeInAnim, | |
a = this._curtain, | |
s = n.duration; | |
a.style.zIndex = 1e4, window.requestAnimationFrame(t) | |
}, s._makeJump = function (e, t, i) { | |
return function () { | |
var r = this._pauseTimeline.indexOf(e); | |
this._clipController.pause(), this.trigger("seek", i), setTimeout(function () { | |
this._fadeIn(), this._currentPauseIndex = r, this.currentTime = e, this._enableSections(e), this.trigger("pauseenter:" + r, { | |
from: this._currentPauseIndex, | |
to: r | |
}), this._seekable = !0, "function" == typeof t && cb.call() | |
}.bind(this), o) | |
}.bind(this) | |
}, s._makeEndJump = function (e, t, i, r) { | |
return function () { | |
var t = this._pauseTimeline.indexOf(e); | |
r = document.getElementById("wrapper"), r.style.position = "absolute", r.style.top = "0px", n && (this._clipController._mediaTimer._video.play(), this._clipController._mediaTimer._video.pause()), setTimeout(function () { | |
r.style.position = "relative", this.trigger("seek", i), this._currentPauseIndex = t, this.currentTime = e, this._enableSections(), -1 !== t && this.trigger("pauseenter:" + t, { | |
from: this._currentPauseIndex, | |
to: t | |
}), this._seekable = !0, document.documentElement.classList.add("overflow"), this._fadeIn(), this._clipController.pause() | |
}.bind(this), o) | |
}.bind(this) | |
}, s.seek = function (e, t) { | |
var i, r = this._pauseTimeline.indexOf(e), | |
n = e > this.currentTime ? 1 : -1, | |
a = 1 == Math.abs(this._currentPauseIndex - r), | |
s = this._currentPauseIndex == this._pauseTimeline.length - 1, | |
c = this.currentTime === this.duration, | |
p = s || c, | |
l = p ? this._pauseTimeline.length - 1 : this._currentPauseIndex, | |
d = { | |
from: l, | |
to: r | |
}, m = this[p ? "_makeEndJump" : "_makeJump"].call(this, e, t, d); | |
this._currentPauseIndex != r && this._seekable && (document.getElementById("curtain").style.display = "block", this.trigger("pauseexit:" + l, { | |
to: r | |
}), !p && this._clipController.paused && (this._clipController.playbackRate = n, i = this._clipController.play()), !p && a && i || (this._fadeOut(), this._seekable = !1, window.setTimeout(m, o))) | |
}, s._triggerPauseExit = function () { | |
var e = this._currentPauseIndex, | |
t = this.playbackRate > 0 ? e + 1 : e - 1; | |
(this._currentPauseIndex > 0 || this.playbackRate > 0) && this.trigger("pauseexit:" + e, { | |
from: e, | |
to: t | |
}) | |
}, s.next = function () { | |
var e = this._pauseTimeline[this._currentPauseIndex + 1]; | |
this._currentPauseIndex < this._pauseTimeline.length - 1 && this.seek(e) | |
}, s.previous = function () { | |
var e = this._pauseTimeline[this._currentPauseIndex - 1]; | |
this._currentPauseIndex > 0 && this.seek(e) | |
}, s.getSectionFromPausePoint = function (e) { | |
var t = app.sectionController._sections; | |
for (var i in t) | |
if (t[i].pause === e) return t[i] | |
}, Object.defineProperties(t.prototype, { | |
currentTime: { | |
enumerable: !0, | |
configurable: !1, | |
get: function () { | |
return this._clipController.currentTime | |
}, | |
set: function (e) { | |
this._clipController.currentTime = e | |
} | |
}, | |
paused: { | |
get: function () { | |
return this._clipController.paused | |
}, | |
set: function () {} | |
}, | |
duration: { | |
get: function () { | |
return this._clipController.duration | |
}, | |
set: function () {} | |
} | |
}), t | |
}), AC.define("macpro/shared/controller/Ui", [], function () { | |
function e(e) { | |
if (!e) throw new Error("UIController: sectionController required for instantiation."); | |
this._sectionController = e, this._pauseTimeline = e._pauseTimeline, this._takeoverThreshold = t, this._bufferDistance = 0, this._inputControllers = [], this._lastInteractionType = null, this._acceptingInput = !0, this._sectionController.on("pauseenter", function () { | |
window.setTimeout(function () { | |
this._acceptingInput = !0 | |
}.bind(this), i) | |
}.bind(this)), this.update = this.update.bind(this) | |
} | |
var t = .2, | |
i = 250; | |
return e.prototype = { | |
getPauseDiff: function () { | |
var e = 1 / 0, | |
t = this._sectionController.currentTime; | |
return this._pauseTimeline.forEach(function (i) { | |
e = Math.min(e, Math.abs(t - i)) | |
}), e | |
}, | |
update: function (e) { | |
this._sectionController.paused && (this._bufferDistance += e, this.getPauseDiff() > this._takeoverThreshold ? e > 0 ? this._sectionController.next() : this._sectionController.previous() : this._sectionController.currentTime + e > 0 ? this._sectionController.currentTime += e : this._sectionController.currentTime = 0) | |
}, | |
next: function () { | |
this._sectionController.paused && this._acceptingInput && (this._sectionController.next(), this._acceptingInput = !1) | |
}, | |
previous: function () { | |
this._sectionController.paused && this._acceptingInput && (this._sectionController.previous(), this._acceptingInput = !1) | |
}, | |
add: function (e) { | |
-1 === this._inputControllers.indexOf(e) && this._inputControllers.push(e) | |
}, | |
disableInput: function () { | |
this._inputControllers.forEach(function (e) { | |
e.disable() | |
}) | |
}, | |
enableInput: function () { | |
this._inputControllers.forEach(function (e) { | |
e.enable() | |
}) | |
} | |
}, e | |
}), AC.define("macpro/shared/controller/Nav", ["require"], function () { | |
function e(e, t) { | |
var i = this._getNavigatableSections(t); | |
this._sectionNav = document.getElementById("sectionNav"), this._navContainer = this._sectionNav.querySelector(".list"), this._sectionController = e, 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._buildNavigation(i), this._sectionController.on("pauseexit", this._handlePauseExit), this._sectionController.on("pauseenter", this._handlePauseEnter), this._sectionNav.addEventListener("touchstart", this._handleTouchStart, !0) | |
} | |
return e.prototype = { | |
constructor: e, | |
_getNavigatableSections: function (e) { | |
return e.filter(function (e) { | |
return !isNaN(e.pause) && e.labelSelector | |
}).map(function (e, t) { | |
return e.index = t, e | |
}) | |
}, | |
_handlePauseEnter: function () {}, | |
_handleClick: function (e) { | |
for (var t, i = e.target || e.srcElement; !i.getAttribute("data-seek-time");) i = i.parentNode; | |
t = parseFloat(i.getAttribute("data-seek-time")), isNaN(t) || this._sectionController.seek(t), window.app.uiController._lastInteractionType = "bubble-click" | |
}, | |
_handlePauseExit: function (e) { | |
var t = this._navContainer.querySelectorAll(".active"), | |
i = this._navContainer.querySelector('[data-seek-index="' + e.to + '"]'); | |
[].forEach.call(t, function (e) { | |
e.classList.remove("active") | |
}), i && window.setTimeout(function () { | |
i.classList.add("active") | |
}.bind(this), 250) | |
}, | |
_buildNavigation: function (e) { | |
var t = document.createDocumentFragment(), | |
i = document.getElementById("panelcontainer"), | |
r = "touchstart" in window; | |
e.forEach(function (e) { | |
var o, n = document.createElement("li"), | |
a = i.querySelector(e.labelSelector); | |
a && (n.setAttribute("data-seek-index", e.index), n.setAttribute("data-seek-time", e.pause), n.innerHTML = '<span class="label">' + a.getAttribute("data-section-label") + '</span><span class="dot" data-nav-item="true"><span class="inner" data-nav-item="true"></span></span>', o = n.querySelector(".dot"), o.addEventListener(r ? "touchstart" : "click", this._handleClick), o.addEventListener("mouseover", this._handleMouseOver), o.addEventListener("mouseout", this._handleMouseOut), t.appendChild(n)) | |
}.bind(this)), this._navContainer.appendChild(t) | |
}, | |
_handleMouseOver: function () { | |
var e = this.parentNode; | |
e.classList.add("hover") | |
}, | |
_handleMouseOut: function () { | |
var e = this.parentNode; | |
e.classList.remove("hover") | |
}, | |
_calcSection: function (e) { | |
return this._lastSectionCalc = Math.round((e - this._navRect.top) / this._navRect.height * this._navCount), this._lastSectionCalc | |
}, | |
_handleTouchStart: function (e) { | |
return e.target || e.srcElement, this._navRect = document.getElementById("sectionNav").getBoundingClientRect(), this._navCount = document.querySelectorAll("#sectionNav li").length, this._updateHover(this._calcSection(e.pageY)), document.body.addEventListener("touchend", this._handleTouchEnd), document.body.addEventListener("touchmove", this._handleTouchMove), e.preventDefault(), e.stopPropagation(), !1 | |
}, | |
_updateHover: function (e) { | |
var t = document.getElementById("sectionNav"); | |
[].slice.call(t.querySelectorAll("li.hover")).forEach(function (e) { | |
e.querySelector(".label").style.display = "none", e.classList.remove("hover") | |
}); | |
var i = t.querySelector('li[data-seek-index="' + e + '"]'); | |
i && (i.querySelector(".label").style.display = "block", i.classList.add("hover")) | |
}, | |
_handleTouchMove: function (e) { | |
var t; | |
return this._throttled || (this._throttled = !0, t = this._calcSection(e.pageY), this._updateHover(t), window.clearTimeout(this._throttledTimeout), this._throttledTimeout = window.setTimeout(function () { | |
this._throttled = !1 | |
}.bind(this), 50)), e.preventDefault(), e.stopPropagation(), !1 | |
}, | |
_handleTouchEnd: function (e) { | |
var t; | |
return document.body.removeEventListener("touchend", this._handleTouchEnd), document.body.removeEventListener("touchmove", this._handleTouchMove), t = document.getElementById("sectionNav").querySelector('li[data-seek-index="' + this._lastSectionCalc + '"]'), app.uiController._lastInteractionType = "bubble-click", t && (this._sectionController.seek(parseFloat(t.getAttribute("data-seek-time"))), t.classList.remove("hover")), e.preventDefault(), e.stopPropagation(), !1 | |
} | |
}, e | |
}), AC.define("macpro/desktop/input/Wheel", [], function () { | |
function e(e) { | |
if (this.uiController = e, this.uiController.add(this), this.enabled = !0, this.max = 0, this.pixelToMediaSpeedRatio = i, this.onWheel = this.onWheel.bind(this), !("addWheelListener" in window)) throw new Error("WheelInputController: window.addWheelListener polyfill missing."); | |
window.addWheelListener(document, this.onWheel) | |
} | |
var t = "Firefox" === AC.Environment.Browser.name, | |
i = t ? .01 : .01; | |
return e.prototype = { | |
onWheel: function (e) { | |
var i; | |
this.enabled && (e.preventDefault(), i = e.deltaY, t && (i = this._normalize(i)), i *= this.pixelToMediaSpeedRatio, this.uiController.update(i), this.uiController._lastInteractionType = "scroll") | |
}, | |
enable: function () { | |
this.enabled = !0 | |
}, | |
disable: function () { | |
this.enabled = !1 | |
}, | |
_normalize: function (e) { | |
var t = this._max || .2; | |
return e > t && (t = e), this._max = t, clearTimeout(this._normalizeTimeout), this._normalizeTimeout = setTimeout(function () { | |
this._max = null | |
}.bind(this), 100), e / t | |
} | |
}, e | |
}), AC.define("macpro/desktop/input/Keyboard", ["require"], function () { | |
function e(e) { | |
this.uiController = e, this.uiController.add(this), this.enabled = !0, this.onKeyDown = this.onKeyDown.bind(this), document.addEventListener("keydown", this.onKeyDown) | |
} | |
return e.prototype = { | |
keyMapping: { | |
37: "previous", | |
38: "previous", | |
39: "next", | |
40: "next", | |
32: "next" | |
}, | |
onKeyDown: function (e) { | |
var t, i = e.keyCode; | |
this.enabled && i in this.keyMapping && (t = this.keyMapping[e.keyCode], this.uiController._lastInteractionType = "scroll", this.uiController[t].call(this.uiController)) | |
}, | |
enable: function () { | |
this.enabled = !0 | |
}, | |
disable: function () { | |
this.enabled = !1 | |
} | |
}, e | |
}), AC.define("macpro/desktop/input/Click", ["require"], function () { | |
function e(e) { | |
this.uiController = e, this.uiController.add(this), this.enabled = !0, this.onClick = this.onClick.bind(this), document.addEventListener("click", this.onClick, !0) | |
} | |
return e.prototype = { | |
onClick: function (e) { | |
var t = e && e.target || e && e.srcElement, | |
i = t && t.getAttribute && t.getAttribute("data-nav-item"), | |
r = t && t.getAttribute("data-placeholder"); | |
window.clearTimeout(this._timeout), r && !i && (this.uiController._lastInteractionType = "image-click", this.uiController.next()) | |
}, | |
disable: function () { | |
this.enabled = !1 | |
}, | |
enable: function () { | |
this.enabled = !0 | |
} | |
}, e | |
}), AC.define("macpro/desktop/app/Desktop", ["require", "macpro/shared/app/Core", "macpro/desktop/timeline/intro", "macpro/desktop/timeline/timeline", "macpro/shared/ClipContainer", "macpro/shared/controller/Section", "macpro/shared/controller/Ui", "macpro/shared/controller/Nav", "macpro/desktop/input/Wheel", "macpro/desktop/input/Keyboard", "macpro/desktop/input/Click", "macpro/shared/clip/Tween", "macpro/shared/ComparisonChart"], function (e) { | |
function t(e, t) { | |
for (var i = e.parentNode, r = null; i.parentNode;) { | |
if (i.classList && i.classList.contains(t)) { | |
r = i; | |
break | |
} | |
i = i.parentNode | |
} | |
return r | |
} | |
function i(e) { | |
o.call(this), this.introcontainer = document.getElementById("introcontainer"), this.videocontainer = document.getElementById("videocontainer"), this.stillcontainer = document.getElementById("stillcontainer"), this.panelcontainer = document.getElementById("panelcontainer"), a = a(), n = n(), this.touch = "ontouchstart" in window, this.timeline = this.convertSectionsToClips(a), r && (this.timeline = this.addStaticChartClips(this.timeline)), this.introContainer = new s(this.introcontainer, e.intro, n), this.mainContainer = new s(this.videocontainer, e.main, this.timeline.clips), this.curtain = this.createFadeCurtain(), this.preventTouchDefault = this.preventTouchDefault.bind(this), document.addEventListener("touchstart", this.preventTouchDefault), this.revertToStaticDelay = 1e4, this.revertToStatic = this.revertToStatic.bind(this), this.revertToStaticTimeout = window.setTimeout(this.revertToStatic, this.revertToStaticDelay), this.dynamic = !0, this.introContainer.load().then(function () { | |
window.clearTimeout(this.revertToStaticTimeout), this.initializeInitialStill(), this.resizeFluidAreas(), 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 | |
} | |
var r = "IE" === AC.Environment.Browser.name, | |
o = e("macpro/shared/app/Core"), | |
n = e("macpro/desktop/timeline/intro"), | |
a = e("macpro/desktop/timeline/timeline"), | |
s = e("macpro/shared/ClipContainer"), | |
c = e("macpro/shared/controller/Section"), | |
p = e("macpro/shared/controller/Ui"), | |
l = e("macpro/shared/controller/Nav"), | |
d = e("macpro/desktop/input/Wheel"), | |
m = e("macpro/desktop/input/Keyboard"), | |
u = e("macpro/desktop/input/Click"), | |
h = e("macpro/shared/clip/Tween"), | |
f = e("macpro/shared/ComparisonChart"), | |
y = [{ | |
selector: "processor-chart", | |
pausePoint: 10 | |
}, { | |
selector: "memory-chart", | |
pausePoint: 13 | |
}, { | |
selector: "graphics-chart", | |
pausePoint: 17 | |
}, { | |
selector: "storage-chart", | |
pausePoint: 19 | |
}]; | |
return i.prototype = new o, i.prototype.constructor = i, i.prototype.revertToStatic = function () { | |
var e = document.documentElement, | |
t = document.body; | |
document.getElementById("wrapper"), this.dynamic = !1, this.uiController && this.uiController.disableInput(), e.classList.remove("enabled"), e.classList.remove("overflow"), t.id = "static", this.setupStaticCharts() | |
}, i.prototype.resizeFluidAreas = function () { | |
var e; | |
this.resizeContainers(), this.resizeCanvas(), e = this.getVideoHeight(), this.resizePlaceholders(e), this.resizeCallouts(e), this.resizeBottomContainers() | |
}, i.prototype.getVideoHeight = function () { | |
var e = videocontainer.querySelector("*") || introcontainer.querySelector("*"), | |
t = e.getBoundingClientRect(), | |
i = t.height; | |
return i | |
}, i.prototype.resizeContainers = function () { | |
var e = window.innerHeight; | |
window.innerWidth; | |
var t = this.videocontainer, | |
i = this.introcontainer, | |
r = this.stillcontainer; | |
this.panelcontainer; | |
var o, n = t.querySelector("*") || i.querySelector("*"); | |
if (!n) return !1; | |
if (583 > e) o = "495px"; | |
else if (750 > e) { | |
var a = 750 - 1.52 * Math.abs(e - 750); | |
o = a + "px" | |
} else o = "100%"; | |
r.style.height = o, i.style.height = o, t.style.height = o | |
}, i.prototype.resizeCanvas = function () { | |
var e, t = this.videocontainer.querySelector("canvas") || this.introcontainer.querySelector("canvas"); | |
t && (e = videocontainer.getBoundingClientRect().height, t.style.width = e * (t.width / t.height) + "px") | |
}, i.prototype.resizeBottomContainers = function () { | |
var e = this.panelcontainer.querySelectorAll(".bottom-container"); | |
[].forEach.call(e, function (e) { | |
var t, i = e.querySelector(".copy"); | |
null !== i && (t = Math.round(i.getBoundingClientRect().height), e.style.minHeight = t + "px") | |
}) | |
}, i.prototype.resizeCallouts = function (e) { | |
var i = this.panelcontainer.querySelectorAll(".callout"); | |
[].forEach.call(i, function (i) { | |
var r, o, n, a = 496, | |
s = .0013, | |
c = i.querySelector(".bars-container"), | |
p = i.querySelector(".mid"), | |
l = t(i, "placeholder-container"), | |
d = i.querySelector(".label"), | |
m = Math.round(p.getBoundingClientRect().height), | |
u = parseFloat(l.getAttribute("data-height-ratio")), | |
h = parseFloat(l.getAttribute("data-min-top")), | |
f = h / a, | |
y = e * u; | |
if (null !== c && (n = d.height, c.style.height = m - n + "px"), l.classList.contains("true-center")) i.style.top = "0px", i.style.height = y + "px"; | |
else { | |
if (window.innerHeight < 750) { | |
var w = 50 - .29 * Math.abs(window.innerHeight - 750); | |
0 > w && (w = 0), r = w | |
} else r = e * f * e * s; | |
o = e * u - (r + .3 * r), i.style.top = r + "px", i.style.height = o + "px" | |
} | |
}) | |
}, i.prototype.resizePlaceholders = function (e) { | |
var t = this.panelcontainer.querySelectorAll(".placeholder-container"); | |
[].forEach.call(t, function (t) { | |
var i, r, o, n = 496, | |
a = 185, | |
s = t.querySelector(".placeholder-inner"), | |
c = parseFloat(t.getAttribute("data-min-top")), | |
p = c / n, | |
l = parseFloat(t.getAttribute("data-height-ratio")), | |
d = parseFloat(t.getAttribute("data-width-ratio")), | |
m = t.getAttribute("data-width-ratio-narrow"); | |
m && (m = parseFloat(m)), isNaN(p) || isNaN(l) || isNaN(d) || (o = n > e ? c : e * p, i = e * l, r = e * d, t.classList.contains("hero") && (p = c / (e + a), o = e * p, t.style.top = o + "px"), t.style.top = t.classList.contains("static-top") ? c + "px" : o + "px", s.style.width = r + "px", s.style.height = i + "px") | |
}) | |
}, i.prototype.getMidVideoY = function () { | |
var e = Math.round(document.getElementById("change").querySelector(".copy").getBoundingClientRect().height); | |
return .07 * (document.documentElement.clientHeight - e) | |
}, i.prototype.applyDynamicTranslation = function (e) { | |
var t = this.getMidVideoY(), | |
i = AC.Environment.Feature.cssPropertyAvailable("transition"); | |
i || e ? (AC.Element.setVendorPrefixStyle(this.videocontainer, "transform", "translate3d(0," + t + "px,0)"), AC.Element.setVendorPrefixStyle(this.stillcontainer, "transform", "translate3d(0," + t + "px,0)")) : this.applyRuntimeTween(t) | |
}, i.prototype.getTranslateValues = function (e, t) { | |
this.mainContainer.clipController.playbackRate; | |
var i, r = 185; | |
return 0 === e && 1 === t ? i = { | |
from: r, | |
to: this.getMidVideoY() | |
} : 1 === e && 0 === t ? i = { | |
from: this.getMidVideoY(), | |
to: r | |
} : 1 === e && 2 === t ? i = { | |
from: this.getMidVideoY(), | |
to: 0 | |
} : 2 === e && 1 === t && (i = { | |
from: 0, | |
to: this.getMidVideoY() | |
}), i | |
}, i.prototype.applyRuntimeTween = function (e) { | |
function t(e) { | |
var s = r / o * o; | |
i || (i = e), r = (e - i) / 1e3, n.tween(s), a.tween(s), o > r && requestAnimationFrame(t) | |
} | |
var i, r, o, n = new h("#videocontainer", 1.5, [{ | |
property: "translate2d", | |
axis: "y", | |
from: e.from, | |
to: e.to, | |
units: "px" | |
}]), | |
a = new h("#stillcontainer", 1.5, [{ | |
property: "translate2d", | |
axis: "y", | |
from: e.from, | |
to: e.to, | |
units: "px" | |
}]), | |
o = n.duration, | |
i = null; | |
window.requestAnimationFrame(t) | |
}, i.prototype.setupMoveableSeekable = function () { | |
function e(e) { | |
e.classList.add("transition") | |
} | |
function t(e) { | |
e.classList.remove("transition") | |
} | |
function i(e) { | |
e.classList.add("lowered") | |
} | |
function r(e) { | |
e.classList.remove("lowered") | |
} | |
function o(e) { | |
AC.Element.setVendorPrefixStyle(e, "transform", "") | |
} | |
var n = this.videocontainer, | |
a = this.stillcontainer, | |
s = this.introcontainer, | |
c = [n, a, s], | |
p = AC.Environment.Feature.cssPropertyAvailable("transition"); | |
this.sectionController.on("seek", function (n) { | |
0 === n.to ? ((1 !== n.from || 2 !== n.from) && c.forEach(o), c.forEach(t), c.forEach(i)) : 1 === n.to && 2 !== n.from ? (c.forEach(i), setTimeout(function () { | |
c.forEach(e) | |
}, 10), this.applyDynamicTranslation(!0)) : (c.forEach(t), c.forEach(r), c.forEach(o)) | |
}.bind(this)), this.sectionController.on("pauseexit:0", function () { | |
app.mainContainer.clipController._mediaTimer._forwardsVideo, this.touch; | |
var t = function () { | |
this.applyDynamicTranslation(), c.forEach(e) | |
}.bind(this); | |
p ? t() : this.applyRuntimeTween(this.getTranslateValues(0, 1)) | |
}.bind(this)), this.sectionController.on("pauseexit:1", function (e) { | |
2 === e.to ? p ? (c.forEach(r), c.forEach(o)) : this.applyRuntimeTween(this.getTranslateValues(1, 2)) : 0 === e.to && (p ? c.forEach(o) : this.applyRuntimeTween(this.getTranslateValues(1, 0))) | |
}.bind(this)), this.sectionController.on("pauseenter:1", function () { | |
n.classList.remove("delayed-transition"), n.classList.add("transition") | |
}), this.sectionController.on("pauseexit:2", function (e) { | |
1 === e.to ? p ? (c.forEach(i), n.classList.add("delayed-transition"), this.applyDynamicTranslation()) : window.setTimeout(function () { | |
this.applyRuntimeTween(this.getTranslateValues(2, 1)) | |
}.bind(this), 1e3) : c.forEach(t) | |
}.bind(this)) | |
}, i.prototype.setupEnd = function () { | |
var e = document.getElementById("comingsoon").querySelector(".caret .button"), | |
t = app.sectionController._pauseTimeline.length - 1; | |
this.sectionController.seek.bind(this.sectionController, 0); | |
var i = document.getElementById("globalfooter"), | |
r = document.querySelector(".sosumi"), | |
o = document.getElementById("comingsoon").querySelector(".caret"); | |
e.addEventListener("click", function (e) { | |
return e.preventDefault(), this.sectionController.seek(0), !1 | |
}.bind(this)); | |
var n = function () { | |
this.uiController.disableInput(), document.documentElement.classList.remove("overflow"), i.classList.add("show"), r.classList.add("show"), o.classList.add("show") | |
}.bind(this); | |
this.sectionController.on("pauseenter:" + t, n), this.mainContainer.clipController.on("ended", n), this.sectionController.on("pauseexit:" + t, function () { | |
i.classList.remove("show"), r.classList.remove("show") | |
}), this.sectionController.on("seek", function (e) { | |
e.from === t && (this.uiController.enableInput(), this.videocontainer.classList.remove("transition"), this.stillcontainer.classList.remove("transition")) | |
}.bind(this)) | |
}, i.prototype.setupResizeEvents = function () { | |
var e = this.applyDynamicTranslation.bind(this), | |
t = this.resizeFluidAreas.bind(this); | |
this.sectionController.on("pauseenter:1", function () { | |
window.addEventListener("resize", e) | |
}.bind(this)), this.sectionController.on("pauseexit:1", function () { | |
window.removeEventListener("resize", e) | |
}.bind(this)), window.addEventListener("resize", t) | |
}, i.prototype.setupVideoCrossover = function () { | |
var e, t = function () { | |
clearTimeout(e), this.videocontainer.style.display = "block", this.introcontainer.style.display = "none" | |
}; | |
app.sectionController.on("pauseexit:0", t.bind(this)), e = setTimeout(t.bind(this), 1200) | |
}, i.prototype.setupCaret = function () { | |
var e = document.getElementById("hero").querySelector(".caret .button"); | |
e.addEventListener("click", this.sectionController.seek.bind(this.sectionController, 2)) | |
}, i.prototype.preventTouchDefault = function (e) { | |
e.preventDefault() | |
}, i.prototype.addStaticChartClips = function (e) { | |
var t, i; | |
return t = y.map(function (e) { | |
return { | |
start: e.pausePoint - .5, | |
end: e.pausePoint, | |
media: new h("#" + e.selector, .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
} | |
}), i = y.map(function (e) { | |
return { | |
start: e.pausePoint, | |
end: e.pausePoint + .5, | |
media: new h("#" + e.selector, .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
} | |
}), e.clips = e.clips.concat(t).concat(i), e | |
}, i.prototype.setupStaticCharts = function () { | |
y.forEach(function (e) { | |
var t = new f(e.selector); | |
t.visitorEngaged() | |
}) | |
}, i.prototype.setupForceCurrentTime = function () { | |
this.sectionController.on("pauseenter", function (e) { | |
var t = null != e.index ? e.index : e.to, | |
i = this._pauseTimeline[t]; | |
setTimeout(function () { | |
app.mainContainer.clipController, app.mainContainer.clipController.currentTime = i | |
}, 200) | |
}.bind(this.sectionController)) | |
}, i.prototype.initializeInitialStill = function () { | |
this.stillcontainer.querySelector(".still_1").classList.add("initial") | |
}, i.prototype.cleanUpInitialStill = function () { | |
this.stillcontainer.querySelector(".still_1").classList.remove("initial") | |
}, i.prototype.initMain = function () { | |
this.initialized || (this.sectionController = new c(this.mainContainer.clipController, this.timeline.events.pauses, a), this.uiController = new p(this.sectionController), this.dynamic && (this.navController = new l(this.sectionController, a), this.wheelInputController = new d(this.uiController), this.keyboardInputController = new m(this.uiController), this.clickInputController = new u(this.uiController)), this.setupEnd(), this.addTimelineEvents(a), this.setupMoveableSeekable(), this.setupResizeEvents(), this.setupCaret(), this.setupVideoCrossover(), this.mainContainer.clipController.currentTime = 0, this.sectionController.trigger("pauseenter:0"), this.sectionController._update(), this.sectionController.trigger("pauseenter:0"), this.sectionController._update(), r && (this.setupForceCurrentTime(), this.setupStaticCharts()), document.getElementById("sp-searchtext").addEventListener("focus", function () { | |
app.uiController.disableInput() | |
}), document.getElementById("sp-searchtext").addEventListener("blur", function () { | |
app.uiController.enableInput() | |
}), this.sectionController.on("pauseenter", this.callAnalytics.bind(this)), 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 = !0) | |
}, i | |
}), AC.define("macpro/desktop/config", [], function () { | |
var e = "mp4"; | |
return { | |
intro: [{ | |
type: "video", | |
file: window.assetPath + "video/macpro_intro_desktop." + e, | |
stills: { | |
1: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/04.00.jpg" | |
} | |
}, { | |
type: "flow", | |
manifest: "/v/mac-pro/home/a/flow/desktop/intro/", | |
diffDir: window.assetPath + "flow/desktop/intro/", | |
flowKeyFrame: "http://images.apple.com/v/mac-pro/home/a/flow/desktop/intro/flow_keyframe.jpg", | |
flowEndFrame: "http://images.apple.com/v/mac-pro/home/a/flow/desktop/intro/flow_endframe.jpg", | |
fps: 30 | |
}], | |
main: [{ | |
type: "video", | |
file: window.assetPath + "video/macpro_main_desktop." + e, | |
stills: { | |
1: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/04.00.jpg", | |
2: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/06.00.jpg", | |
3: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/10.00.jpg", | |
4: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/14.00.jpg", | |
5: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/17.00.jpg", | |
6: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/21.00.jpg", | |
7: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/23.00.jpg", | |
8: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/27.00.jpg", | |
9: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/34.00.jpg", | |
10: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/40.00.jpg", | |
13: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/45.00.jpg", | |
14: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/47.00.jpg", | |
15: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/49.00.jpg" | |
} | |
}, { | |
type: "flow", | |
manifest: "/v/mac-pro/home/a/flow/desktop/main/", | |
diffDir: window.assetPath + "flow/desktop/main/", | |
fps: 30, | |
flowKeyFrame: "http://images.apple.com/v/mac-pro/home/a/flow/desktop/main/flow_keyframe.jpg", | |
flowEndFrame: "http://images.apple.com/v/mac-pro/home/a/flow/desktop/main/flow_endframe.jpg", | |
stills: { | |
1: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/04.00.jpg", | |
2: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/06.00.jpg", | |
3: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/10.00.jpg", | |
4: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/14.00.jpg", | |
5: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/17.00.jpg", | |
6: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/21.00.jpg", | |
7: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/23.00.jpg", | |
8: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/27.00.jpg", | |
9: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/34.00.jpg", | |
10: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/40.00.jpg", | |
13: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/45.00.jpg", | |
14: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/47.00.jpg", | |
15: "http://images.apple.com/v/mac-pro/home/a/images/stills/desktop/49.00.jpg" | |
} | |
}] | |
} | |
}), AC.define("macpro/bootstrap", ["require", "macpro/desktop/app/Desktop", "macpro/desktop/config", "macpro/shared/ComparisonChart"], function (e) { | |
var t = navigator.userAgent, | |
i = AC.Environment.Feature.canvasAvailable(), | |
r = i && !t.match(/Mobile/i), | |
o = { | |
dynamic: function () { | |
var t = e("macpro/desktop/app/Desktop"), | |
i = e("macpro/desktop/config"); | |
window.app = new t(i), document.body.id = "desktop", document.body.style.display = "block", document.documentElement.classList.add("enabled"), document.documentElement.classList.add("overflow") | |
}, | |
"static": function () { | |
var t = e("macpro/shared/ComparisonChart"), | |
i = new t("processor-chart"), | |
r = new t("memory-chart"), | |
o = new t("graphics-chart"), | |
n = new t("storage-chart"); | |
document.body.style.display = "block", i.visitorEngaged(), r.visitorEngaged(), o.visitorEngaged(), n.visitorEngaged() | |
} | |
}; | |
return { | |
load: function () { | |
o[r ? "dynamic" : "static"].call(this) | |
} | |
} | |
}), AC.define("macpro/ipad/input/Touch", [], function () { | |
function e(e) { | |
this._uiController = e, this._uiController.add(this), this._pixelToMediaSpeedRatio = .003, this._swipeThreshold = 30, this._onEnd = this._onEnd.bind(this), this._onMove = this._onMove.bind(this), this._moveBuffer = 0, this._touchStartOnPlaceholder = !1, this.enabled = !1, document.addEventListener("touchend", this._onEnd), document.addEventListener("touchmove", this._onMove) | |
} | |
return e.prototype = { | |
_onEnd: function () { | |
var e; | |
this.enabled && (this._active = !1, window.clearTimeout(this._timeout), this._uiController._lastInteractionType = Math.abs(this._moveBuffer) > this._swipeThreshold ? "swipe" : "image-click", this._uiController._sectionController.paused && (e = this._moveBuffer >= 0 ? "next" : "previous", 0 === this._moveBuffer && this._uiController.update(.01), this._uiController[e].call(this._uiController)), this._moveBuffer = 0) | |
}, | |
_onMove: function (e) { | |
var t = e.target; | |
if (this.enabled) { | |
if (this._uiController._sectionController.paused) { | |
if (!this._active) return this._uiController.takeoverThreshold = .4, this._active = !0, this._prev = e.pageY, void 0; | |
this._delta = this._prev - e.pageY, this._moveBuffer += this._delta, this._touchStartOnPlaceholder = t && !! t.getAttribute("data-placeholder"), window.clearTimeout(this._timeout), this._timeout = window.setTimeout(this._onEnd.bind(this), 500), this._delta && this._uiController.update(this._delta * this._pixelToMediaSpeedRatio), this._prev = e.pageY | |
} | |
e.preventDefault() | |
} | |
}, | |
disable: function () { | |
this.enabled = !1 | |
}, | |
enable: function () { | |
this.enabled = !0 | |
} | |
}, e | |
}), AC.define("macpro/ipad/timeline/timeline-ipad", ["require", "macpro/shared/clip/Tween", "macpro/shared/ComparisonChart", "macpro/shared/clip/Basic"], function (e) { | |
var t = e("macpro/shared/clip/Tween"), | |
i = e("macpro/shared/ComparisonChart"), | |
r = e("macpro/shared/clip/Basic"); | |
return function () { | |
var e, o, n, a, s = new i("processor-chart"), | |
c = new i("memory-chart"), | |
p = new i("graphics-chart"), | |
l = new i("storage-chart"), | |
d = document.getElementById("hero"), | |
m = document.getElementById("measurements"), | |
u = document.getElementById("comingsoon"), | |
h = document.getElementById("navcontainer"); | |
return [{ | |
name: "home", | |
pause: 0, | |
time: 0, | |
labelSelector: "#hero", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
d.querySelector(".caret").classList.add("show"), d.classList.remove("slide-out"), h.classList.remove("slide-out"), setTimeout(function () { | |
h.style.zIndex = 4e4 | |
}, 1e3) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
d.classList.add("slide-out"), h.classList.add("slide-out"), h.style.zIndex = 1e4, app.uiController._lastInteractionType = "image-click", s.resetChart(), c.resetChart(), p.resetChart(), l.resetChart() | |
} | |
}], | |
clips: [{ | |
start: -1.95, | |
end: 0, | |
media: new t("#change .copy", 1.95, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: 0, | |
units: "px", | |
easing: "linear" | |
}]) | |
}] | |
}, { | |
name: "intro", | |
pause: 2, | |
time: 2, | |
labelSelector: "#change", | |
clips: [{ | |
start: -1.95, | |
end: .1, | |
media: new r("#change .hero", 2.05) | |
}, { | |
start: -1.95, | |
end: 0, | |
media: new r("#change .copy", 1.95) | |
}, { | |
start: -.5, | |
end: 47, | |
media: new t("#sectionNav", .5, [{ | |
property: "display", | |
from: "none", | |
to: "block" | |
}, { | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#change .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px", | |
easing: "linear" | |
}]) | |
}] | |
}, { | |
name: "computing", | |
pause: 6, | |
time: 6, | |
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: -.1, | |
end: .1, | |
media: new r(".still_3", .2) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#power .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#power .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "processor", | |
pause: 10, | |
time: 10, | |
labelSelector: "#processor", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_4").classList.add("crossFade"), window.clearTimeout(e), setTimeout(function () { | |
s.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_4").classList.remove("crossFade"), e = window.setTimeout(function () { | |
s.resetChart() | |
}, 600) | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_4", .2) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#processor .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#processor .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#processor .cores", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#processor .pcie", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#processor #processor-chart", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#processor .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#processor .cores", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#processor .pcie", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#processor #processor-chart", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "memory", | |
pause: 12.75, | |
time: 12.7, | |
labelSelector: "#memory", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_5").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
window.clearTimeout(o), setTimeout(function () { | |
c.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_5").classList.remove("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
o = window.setTimeout(function () { | |
c.resetChart() | |
}, 600) | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_5", .2) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#memory .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#memory .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#memory .bandwidth", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#memory .improvement", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#memory #memory-chart", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#memory .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#memory .bandwidth", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#memory .improvement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#memory #memory-chart", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "graphics", | |
pause: 16.95, | |
time: 16.95, | |
labelSelector: "#graphics", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_6").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
window.clearTimeout(o), setTimeout(function () { | |
c.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
window.clearTimeout(n), setTimeout(function () { | |
p.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_6").classList.remove("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
n = window.setTimeout(function () { | |
p.resetChart() | |
}, 600) | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_6", .2) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#graphics .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#graphics .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#graphics .dual-gpus", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#graphics .teraflops", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#graphics #graphics-chart", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#graphics .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#graphics .dual-gpus", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#graphics .teraflops", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#graphics #graphics-chart", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "storage", | |
pause: 18.95, | |
time: 18.95, | |
labelSelector: "#storage", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_7").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
window.clearTimeout(a), setTimeout(function () { | |
l.visitorEngaged() | |
}, 0) | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_7").classList.remove("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
a = window.setTimeout(function () { | |
l.resetChart() | |
}, 600) | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_7", .2) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#storage .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#storage .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#storage .flash", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#storage .improvement", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#storage #storage-chart", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#storage .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#storage .flash", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#storage .improvement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#storage #storage-chart", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "thermal core", | |
pause: 22.85, | |
time: 22.85, | |
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: -.1, | |
end: .1, | |
media: new r(".still_8", .2) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thermal .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#thermal .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "fan", | |
pause: 29.85, | |
time: 29.85, | |
labelSelector: "#fan", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_9").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_9").classList.remove("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: .1, | |
media: new r(".still_9", .2) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#fan .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#fan .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "expansion", | |
pause: 36, | |
time: 36, | |
labelSelector: "#expansion", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_10").classList.add("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: 3.2, | |
media: new r(".still_10", 3.3) | |
}, { | |
start: -1.5, | |
end: -1, | |
media: new t("#expansion .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -1, | |
end: 0, | |
media: new t("#expansion .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#expansion .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "thunderbolt", | |
pause: 37.3, | |
time: 37.3, | |
labelSelector: "#thunderbolt", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_10").classList.add("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.8, | |
end: -.3, | |
media: new t("#thunderbolt .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#thunderbolt .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thunderbolt .speeds", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thunderbolt .improvement", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thunderbolt .daisychain", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#thunderbolt .displays", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#thunderbolt .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#thunderbolt .speeds", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#thunderbolt .improvement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#thunderbolt .daisychain", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#thunderbolt .displays", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "io", | |
pause: 38.8, | |
time: 38.8, | |
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: -.9, | |
media: new t("#io .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.9, | |
end: 0, | |
media: new t("#io .copy", 1.7, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -1.2, | |
end: -.2, | |
media: new t("#io .hdmi", 1, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.2, | |
end: 0, | |
media: new t("#io .hdmi", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -1.2, | |
end: -.2, | |
media: new t("#io .gigabit", 1, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.2, | |
end: 0, | |
media: new t("#io .gigabit", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -1, | |
end: 0, | |
media: new t("#io .thunderbolt", 1, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -1, | |
end: 0, | |
media: new t("#io .usb", 1, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#io .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: .5, | |
end: .9, | |
media: new r("#io .copy", .4) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#io .thunderbolt", .4, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: .4, | |
end: .9, | |
media: new t("#io .thunderbolt", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .4, | |
media: new t("#io .usb", .4, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: .4, | |
end: .9, | |
media: new t("#io .usb", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .2, | |
media: new t("#io .hdmi", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: .2, | |
end: .7, | |
media: new t("#io .hdmi", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .2, | |
media: new t("#io .gigabit", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: .2, | |
end: .7, | |
media: new t("#io .gigabit", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "wireless", | |
pause: 41, | |
time: 41, | |
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: -.1, | |
end: 3.3, | |
media: new r(".still_13", 3.4) | |
}, { | |
start: -.7, | |
end: -.2, | |
media: new t("#wireless .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.2, | |
end: 0, | |
media: new t("#wireless .copy", .2, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#wireless .ac", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#wireless .bluetooth", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#wireless .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#wireless .ac", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#wireless .bluetooth", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "measurements", | |
time: 43, | |
clips: [{ | |
start: -.7, | |
end: .2, | |
media: new t("#measurements .height .line", .9, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.45, | |
end: .2, | |
media: new t("#measurements .height .line", .65, [{ | |
property: "height", | |
from: 0, | |
to: 100, | |
units: "%", | |
easing: "keyspline", | |
keyspline: [.29, .01, .3, 1] | |
}]) | |
}, { | |
start: -.4, | |
end: -.3, | |
media: new t("#measurements .height .measurement-container", .1, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#measurements .height .measurement-container", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#measurements .height .measurement", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: -.3, | |
media: new t("#measurements .height .measurement", .2, [{ | |
property: "scale", | |
axis: "y", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.7, | |
end: .2, | |
media: new t("#measurements .width .line", .9, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.45, | |
end: .2, | |
media: new t("#measurements .width .line", .65, [{ | |
property: "width", | |
from: 0, | |
to: 100, | |
units: "%", | |
easing: "keyspline", | |
keyspline: [.29, .01, .3, 1] | |
}]) | |
}, { | |
start: -.8, | |
end: -.7, | |
media: new t("#measurements .width .measurement-container", .1, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.7, | |
end: 0, | |
media: new t("#measurements .width .measurement-container", .7, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.7, | |
end: 0, | |
media: new t("#measurements .width .measurement", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: -.3, | |
media: new t("#measurements .width .measurement", .2, [{ | |
property: "scale", | |
axis: "y", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .height .line", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
units: "%" | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .height .measurement-container", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .height .measurement-container", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .height .measurement", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .width .line", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1, | |
units: "%" | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .width .measurement-container", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .width .measurement-container", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: 1, | |
media: new t("#measurements .width .measurement", 1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .height .measurement-container", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 1.5, | |
end: 1.6, | |
media: new t("#measurements .height .measurement-container", .1, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .height .measurement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .height .line", .5, [{ | |
property: "height", | |
from: 100, | |
to: 100, | |
units: "%" | |
}, { | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .height .measurement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .width .measurement-container", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: 1.5, | |
end: 1.6, | |
media: new t("#measurements .width .measurement-container", .1, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .width .line", .5, [{ | |
property: "width", | |
from: 100, | |
to: 100, | |
units: "%" | |
}, { | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 1, | |
end: 1.5, | |
media: new t("#measurements .width .measurement", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "design", | |
pause: 45, | |
time: 45, | |
labelSelector: "#design", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_14").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
m.classList.remove("show") | |
} | |
}, { | |
type: "pauseexit", | |
action: function (e) { | |
13 === e.to && m.classList.add("show") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: 1.4, | |
media: new r(".still_14", 1.5) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#design .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#design .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}] | |
}, { | |
name: "assembly", | |
pause: 46.3, | |
time: 46.3, | |
labelSelector: "#assembly", | |
events: [{ | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_14").classList.remove("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: 0, | |
media: new t(".still_14", .1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.8, | |
end: -.3, | |
media: new t("#assembly .copy", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 20, | |
to: 0, | |
units: "px" | |
}]) | |
}, { | |
start: -.3, | |
end: 0, | |
media: new t("#assembly .copy", .3, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#assembly .thermalcore", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: -.5, | |
end: 0, | |
media: new t("#assembly .enclosure", .5, [{ | |
property: "opacity", | |
from: 0, | |
to: 1 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#assembly .copy", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}, { | |
property: "translate", | |
axis: "y", | |
from: 0, | |
to: -20, | |
units: "px" | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#assembly .thermalcore", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}, { | |
start: 0, | |
end: .5, | |
media: new t("#assembly .enclosure", .5, [{ | |
property: "opacity", | |
from: 1, | |
to: 0 | |
}]) | |
}] | |
}, { | |
name: "later this year", | |
pause: 49, | |
time: 49, | |
labelSelector: "#comingsoon", | |
events: [{ | |
type: "pauseenter", | |
action: function () { | |
u.querySelector(".caret").classList.add("show"), h.classList.remove("slide-out") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
window.setTimeout(function () { | |
u.querySelector(".caret").classList.remove("show") | |
}, 500), h.classList.add("slide-out") | |
} | |
}, { | |
type: "pauseenter", | |
action: function () { | |
document.querySelector(".still_15").classList.add("crossFade") | |
} | |
}, { | |
type: "pauseexit", | |
action: function () { | |
document.querySelector(".still_15").classList.remove("crossFade") | |
} | |
}], | |
clips: [{ | |
start: -.1, | |
end: 0, | |
media: new t(".still_15", .1, [{ | |
property: "opacity", | |
from: 1, | |
to: 1 | |
}]) | |
}, { | |
start: -1.3, | |
end: 0, | |
media: new t("#comingsoon .copy", 1.3, [{ | |
property: "opacity", | |
from: 0, | |
to: 1, | |
easing: "easeInQuad" | |
}]) | |
}, { | |
start: -1.3, | |
end: 0, | |
media: new r("#comingsoon .caret", 1.3) | |
}] | |
}] | |
} | |
}), AC.define("macpro/ipad/app/iPad", ["require", "macpro/shared/app/Core", "macpro/shared/ClipContainer", "macpro/shared/controller/Section", "macpro/shared/controller/Ui", "macpro/shared/controller/Nav", "macpro/ipad/input/Touch", "defer/Deferred", "assetLoader/AssetLoader", "macpro/ipad/timeline/timeline-ipad"], function (e) { | |
function t(e) { | |
i.call(this), l = l(), 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(l), this.mainContainer = new r(this.videocontainer, e.main, this.timeline.clips), this.curtain = this.createFadeCurtain(), this.preventTouchDefault = this.preventTouchDefault.bind(this), document.addEventListener("touchstart", this.preventTouchDefault); | |
var t = document.getElementById("globalheader"); | |
t.addEventListener("touchstart", function (e) { | |
e.stopPropagation() | |
}), t.addEventListener("touchend", function (e) { | |
e.stopPropagation() | |
}), document.getElementById("navcontainer").style.zIndex = 4e4, this.loadIntro(e.intro[0]).then(function () { | |
this.mainContainer.load().then(this.initMain.bind(this)) | |
}.bind(this)), window.app = this | |
} | |
var i = e("macpro/shared/app/Core"), | |
r = e("macpro/shared/ClipContainer"), | |
o = e("macpro/shared/controller/Section"), | |
n = e("macpro/shared/controller/Ui"), | |
a = e("macpro/shared/controller/Nav"), | |
s = e("macpro/ipad/input/Touch"), | |
c = e("defer/Deferred"), | |
p = e("assetLoader/AssetLoader"), | |
l = e("macpro/ipad/timeline/timeline-ipad"); | |
return t.prototype = new i, t.prototype.constructor = t, t.prototype.initAssetLoader = function (e) { | |
var t, i = e.assets.map(function (e) { | |
return e.url | |
}); | |
return e.assets ? (t = new p(i), t.load().then(function (t) { | |
t.forEach(function (t, i) { | |
var r = e.assets[i].container, | |
o = document.querySelector(r); | |
t.setAttribute("class", e.assets[i].className), o.appendChild(t) | |
}) | |
})) : (new c).resolve() | |
}, t.prototype.loadIntro = function (e) { | |
var t = new c, | |
i = document.getElementById("hero").querySelector(".caret"), | |
r = function () { | |
i.removeEventListener("webkitTransitionEnd", r), t.resolve(), i.classList.add("no-delay") | |
}; | |
i.addEventListener("webkitTransitionEnd", r); | |
var o = this.initAssetLoader(e); | |
return o.then(function () { | |
this.resizeFluidAreas(), i.classList.add("show"), document.body.classList.remove("intro-hidden") | |
}.bind(this)), t.promise() | |
}, t.prototype.resizeContainers = function () { | |
var e = window.innerHeight; | |
window.innerWidth; | |
var t, i = this.videocontainer; | |
this.introcontainer; | |
var r = this.stillcontainer, | |
o = this.panelcontainer, | |
n = 768 === screen.width && 1024 === screen.height && "number" == typeof window.orientation, | |
a = n && (0 === window.orientation || 180 === window.orientation); | |
return t = e * (a ? .9 : 1), n || (o.style.height = t + "px"), r.style.height = t + "px", i.style.height = t + "px", o.style.height = t + "px", t | |
}, t.prototype.resizePlaceholders = function (e) { | |
var t = document.querySelectorAll(".placeholder-container"), | |
i = 768 === screen.width && 1024 === screen.height && "number" == typeof window.orientation; | |
[].forEach.call(t, function (t) { | |
var r, o, n, a, s, c = t.querySelector(".placeholder-inner"), | |
p = t.querySelectorAll(".callout"), | |
l = parseFloat(t.getAttribute("data-min-top")), | |
d = 496, | |
m = l / d, | |
u = parseFloat(t.getAttribute("data-height-ratio")), | |
h = parseFloat(t.getAttribute("data-width-ratio")), | |
f = t.getAttribute("data-width-ratio-narrow"), | |
y = .0013, | |
w = 185; | |
f && (f = parseFloat(f)), isNaN(m) || isNaN(u) || isNaN(h) || (n = d > e ? l : e * m, r = e * u, o = e * (i && f ? f : h), t.classList.contains("hero") && (m = l / (e + w), n = e * m, t.style.top = n + "px"), t.style.top = t.classList.contains("static-top") ? l + "px" : n + "px", c.style.width = o + "px", c.style.height = r + "px", [].forEach.call(p, function (i) { | |
t.classList.contains("true-center") ? (i.style.top = "0px", i.style.height = r + "px") : (a = d > e ? 0 : e * m * e * y, s = e * u - (a + .3 * a), i.style.top = a + "px", i.style.height = s + "px") | |
})) | |
}) | |
}, t.prototype.setupEnd = function () { | |
var e = document.getElementById("comingsoon").querySelector(".caret .button"), | |
t = app.sectionController._pauseTimeline.length - 1, | |
i = function () { | |
app.uiController._lastInteractionType = "image-click", this.sectionController.seek(0) | |
}, r = document.getElementById("globalfooter"), | |
o = document.querySelector(".sosumi"), | |
n = document.getElementById("comingsoon").querySelector(".caret"); | |
e.addEventListener("click", i.bind(this)), e.addEventListener("touchstart", i.bind(this)); | |
var a = function () { | |
this.uiController.disableInput(), document.documentElement.classList.remove("overflow"), document.removeEventListener("touchstart", this.preventTouchDefault), r.classList.add("show"), o.classList.add("show"), n.classList.add("show"), setTimeout(function () { | |
document.getElementById("curtain").style.display = "none" | |
}, 1e3) | |
}.bind(this); | |
this.sectionController.on("pauseenter:" + t, a), this.mainContainer.clipController.on("ended", a), this.sectionController.on("pauseexit:" + t, function () { | |
r.classList.remove("show"), o.classList.remove("show") | |
}), this.sectionController.on("seek", function (e) { | |
e.from === t && (this.uiController.enableInput(), document.addEventListener("touchstart", this.preventTouchDefault), this.videocontainer.classList.remove("transition"), this.stillcontainer.classList.remove("transition")) | |
}.bind(this)) | |
}, t.prototype.setupResizeEvents = function () { | |
var e = this.resizeFluidAreas.bind(this); | |
window.addEventListener("orientationchange", e) | |
}, t.prototype.setupVideoCrossover = function () { | |
var e, t = function () { | |
clearTimeout(e), this.videocontainer.style.display = "block", this.introcontainer.style.display = "none" | |
}; | |
app.sectionController.on("pauseexit:0", t.bind(this)), e = setTimeout(t.bind(this), 1300) | |
}, t.prototype.setupCaret = function () { | |
var e = document.getElementById("hero").querySelector(".caret .button"); | |
e.addEventListener("click", this.sectionController.seek.bind(this.sectionController, 2)) | |
}, t.prototype.preventTouchDefault = function (e) { | |
e.preventDefault() | |
}, t.prototype.initMain = function () { | |
if (!this.initialized) { | |
this.sectionController = new o(this.mainContainer.clipController, this.timeline.events.pauses, l), this.uiController = new n(this.sectionController), this.navController = new a(this.sectionController, l), this.touchInputController = new s(this.uiController), this.setupEnd(), this.addTimelineEvents(l), this.setupResizeEvents(), this.setupCaret(), this.setupVideoCrossover(), this.touch && this.resizeFluidAreas(), this.sectionController.trigger("pauseenter:0"), this.sectionController.on("pauseenter", this.callAnalytics.bind(this)), this.sectionController.on("pauseexit", function () { | |
document.getElementById("sp-searchtext").blur() | |
}); | |
var e = (new Date).getTime(), | |
t = function () { | |
var i = (new Date).getTime(); | |
i - e > 1e3 && app.mainContainer && app.mainContainer.clipController && !app.mainContainer.clipController.paused && app.mainContainer.clipController._mediaTimer._forwardsVideo.paused && 0 === app.mainContainer.clipController._mediaTimer._forwardsVideo.currentTime && (app.mainContainer.clipController.pause(), app.mainContainer.clipController.play()), e = i, setTimeout(t, 500) | |
}; | |
t(), this.sectionController._update(), this.initialized = !0 | |
} | |
}, t | |
}), AC.define("macpro/ipad/config", [], function () { | |
var e = "mp4"; | |
return { | |
intro: [{ | |
type: "loadassets", | |
assets: [{ | |
url: "http://images.apple.com/mac-pro/images/static/hero_2x.jpg", | |
container: "#hero .hero-container", | |
className: "hero" | |
}, { | |
url: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/06.00.jpg", | |
container: "#change .hero-container", | |
className: "hero" | |
}] | |
}], | |
main: [{ | |
type: "bivideo", | |
file: window.assetPath + "video/macpro_main_ipad." + e, | |
poster: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/06.00.jpg", | |
startTime: 2, | |
stills: { | |
3: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/10.00.jpg", | |
4: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/14.00.jpg", | |
5: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/17.00.jpg", | |
6: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/21.00.jpg", | |
7: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/23.00.jpg", | |
8: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/27.00.jpg", | |
9: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/34.00.jpg", | |
10: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/40.00.jpg", | |
13: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/45.00.jpg", | |
14: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/47.00.jpg", | |
15: "http://images.apple.com/v/mac-pro/home/a/images/stills/ipad/49.00.jpg" | |
} | |
}] | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment