Skip to content

Instantly share code, notes, and snippets.

@motionharvest

motionharvest/KeySpline

Created June 10, 2013 20:12
Show Gist options
  • Save motionharvest/5751857 to your computer and use it in GitHub Desktop.
Save motionharvest/5751857 to your computer and use it in GitHub Desktop.
Download ZIP
KeySpline
Raw
KeySpline
/*! @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 <renaudeau.gaetan@gmail.com>
*
* Permission is hereby granted, free of charge, to any person obtaining a
* copy of this software and associated documentation files (the "Software"),
* to deal in the Software without restriction, including without limitation
* the rights to use, copy, modify, merge, publish, distribute, sublicense,
* and/or sell copies of the Software, and to permit persons to whom the
* Software is furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
* DEALINGS IN THE SOFTWARE.
*/
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