Team:Tianjin/Resources/JS:app
function toggleMenu() {
var t = $("#site-navigation"),
e = $("#menu-icon");
$("#nav-toggle").click(function() {
t.toggle(),
e.toggleClass("active"),
$("#site-header").toggleClass("modal")
})
} function portfolioScroll() {
var t = navigator.userAgent,
e = $(".portfolio-list--wrapper"),
i = $(".portfolio-list");
if ( - 1 == t.indexOf("Mobile")) {
var n = $(".scroll-bar").slider({
range: !0,
slide: function(t, n) {
i.width() > e.width() ? i.css("margin-left", Math.round(n.value / 100 * (e.width() - i.width())) + "px") : i.css("margin-left", 0)
}
});
} else {
$(".scroll-bar").remove(),
$(".portfolio-list--outline").css({
"overflow-x": "scroll"
});
}
} function smoothScroll() {
$(".portfolio").find("a[href*='#']").click(function() {
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
var t = $(this.hash);
if (t = t.length ? t: $("[name=" + this.hash.slice(1) + "]"), t.length) {
var e = t.position().top;
return $(".page-container").animate({
scrollTop: e
},
1e3),
console.log(e),
console.log(t.offset()),
console.log($("#main-content").offset()),
!1
}
}
});
var t = $(".portfolio-details section"),
e = $(".portfolio-nav");
$(".page-container").on("scroll",
function() {
var i = $(this).scrollTop();
t.each(function() {
var n = $(this).position().top,
o = n + $(this).outerHeight();
i >= n && i <= o && (e.find("a").removeClass("active"), t.removeClass("active"), $(this).addClass("active"), e.find("a[href='#" + $(this).attr("id") + "']").addClass("active"))
})
})
} function portfolioGuideNav() {
$(".page-container").scroll(function() {
$(this).scrollTop() > $(window).height() ? $(".portfolio-nav-panel").fadeIn() : ($("#menu-icon span").removeClass("active"), $(".portfolio-nav").hide(), !0 === $(".btn-hide").is(":visible") && ($(".btn-hide").hide(), $(".btn-guide").show()), $(".portfolio-nav-panel").fadeOut())
}),
$("#portfolio-nav-toggle").on("click",
function() {
$("#menu-icon span").toggleClass("active"),
$(".portfolio-nav").slideToggle("slow"),
$("#portfolio-nav-toggle .hint").toggle()
})
} function gearTransform() {
var t = $(window).width(),
e = $(".gear-canvas--wrapper").outerWidth();
ratio = t / e,
ratio < 1 && $(".gear-canvas--wrapper").css({
"-webkit-transform": "scale(" + ratio + ")",
"-moz-transform": "scale(" + ratio + ")",
"-ms-transform": "scale(" + ratio + ")",
"-o-transform": "scale(" + ratio + ")",
transform: "scale(" + ratio + ")"
})
} function svgsnimations() {
function t(t) {
this.el = t,
this.image = this.el.previousElementSibling,
this.current_frame = 0,
this.total_frames = 60,
this.path = [],
this.length = [],
this.handle = 0,
this.init()
}
function e() {
var t = r.clientHeight,
e = window.innerHeight;
return t < e ? e: t
}
function i() {
return window.pageYOffset || r.scrollTop
}
function n(t) {
var e = 0,
i = 0;
do {
isNaN(t.offsetTop) || (e += t.offsetTop), isNaN(t.offsetLeft) || (i += t.offsetLeft)
} while ( t === t . offsetParent );
return {
top: e,
left: i
}
}
function o(t, o) {
var a = t.offsetHeight,
r = i(),
s = r + e(),
l = n(t).top,
c = l + a;
return l + a * (o || 0) <= s && c >= r
}
function a() {
var e = Array.prototype.slice.call(document.querySelectorAll(".drawings svg")),
i = [],
n = !1,
a;
e.forEach(function(e, n) {
var a = new t(e);
i[n] = a,
setTimeout(function(t) {
return function() {
o(t.parentNode) && a.render()
}
} (e), 250)
});
var r = function() {
n || (n = !0, setTimeout(function() {
s()
},
60))
},
s = function() {
e.forEach(function(t, e) {
o(t.parentNode, .5) && i[e].render()
}),
n = !1
},
l = function() {
function t() {
s(),
a = null
}
a && clearTimeout(a),
a = setTimeout(t, 200);
};
window.addEventListener("scroll", r, !1),
window.addEventListener("resize", l, !1)
}
var r = window.document.documentElement;
window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(t) {
window.setTimeout(t, 1e3 / 60)
}
} (),
window.cancelAnimFrame = function() {
return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.oCancelAnimationFrame || window.msCancelAnimationFrame ||
function(t) {
window.clearTimeout(t)
}
} (),
t.prototype.init = function() {
var t = this; [].slice.call(this.el.querySelectorAll("path")).forEach(function(e, i) {
t.path[i] = e;
var n = t.path[i].getTotalLength();
t.length[i] = n,
t.path[i].style.strokeDasharray = n + " " + n,
t.path[i].style.strokeDashoffset = n;
})
},
t.prototype.render = function() {
this.rendered || (this.rendered = !0, this.draw())
},
t.prototype.draw = function() {
var t = this,
e = this.current_frame / this.total_frames;
if (e > 1) {
window.cancelAnimFrame(this.handle);
} else {
this.current_frame++;
for (var i = 0,
n = this.path.length; i < n; i++) {
this.path[i].style.strokeDashoffset = Math.floor(this.length[i] * (1 - e));
}
this.handle = window.requestAnimFrame(function() {
t.draw()
})
}
},
a()
} function lettering() {
function t(t, e, i, n) {
var o = t.text(),
a = o.split(e),
r = "";
a.length && ($(a).each(function(t, e) {
r += '' + e + "" + n
}), t.attr("aria-label", o).empty().append(r))
}
var e = {
init: function() {
return this.each(function() {
t($(this), "", "char", "")
})
},
words: function() {
return this.each(function() {
t($(this), " ", "word", " ")
})
},
lines: function() {
return this.each(function() {
var e = "eefec303079ad17405c889e092e105b0";
t($(this).children("br").replaceWith(e).end(), e, "line", "")
})
}
};
$.fn.lettering = function(t) {
return t && e[t] ? e[t].apply(this, [].slice.call(arguments, 1)) : "letters" !== t && t ? ($.error("Method " + t + " does not exist on jQuery.lettering"), this) : e.init.apply(this, [].slice.call(arguments, 0))
}
} function funnytxt() {
function t(t) {
return / In /.test(t) || $.inArray(t, $.fn.textillate.defaults.inEffects) >= 0
}
function e(t) {
return / Out /.test(t) || $.inArray(t, $.fn.textillate.defaults.outEffects) >= 0
}
function i(t) {
return "true" !== t && "false" !== t ? t: "true" === t
}
function n(t) {
var e = t.attributes || [],
n = {};
return e.length ? ($.each(e,
function(t, e) {
var o = e.nodeName.replace(/delayscale/, "delayScale");
/^data-in-*/.test(o) ? (n. in =n. in ||{},
n. in [o.replace(/data-in-/, "")] = i(e.nodeValue)) : /^data-out-*/.test(o) ? (n.out = n.out || {},
n.out[o.replace(/data-out-/, "")] = i(e.nodeValue)) : /^data-*/.test(o) && (n[o] = i(e.nodeValue));
}), n) : n
}
function o(t) {
for (var e, i, n = t.length; n; e = parseInt(Math.random() * n), i = t[--n], t[n] = t[e], t[e] = i);
return t
}
function a(t, e, i) {
t.addClass("animated " + e).css("visibility", "visible").show(),
t.one("animationend webkitAnimationEnd oAnimationEnd",
function() {
t.removeClass("animated " + e),
i && i()
})
}
function r(i, n, r) {
var s = this,
l = i.length;
if (!l) {
return void(r && r());
}
n.shuffle && (i = o(i)),
n.reverse && (i = i.toArray().reverse()),
$.each(i,
function(i, o) {
function s() {
t(n.effect) ? c.css("visibility", "visible") : e(n.effect) && c.css("visibility", "hidden"),
!(l -= 1) && r && r()
}
var c = $(o),
f = n.sync ? n.delay: n.delay * i * n.delayScale;
c.text() ? setTimeout(function() {
a(c, n.effect, s)
},
f) : s()
})
}
var s = function(i, o) {
var a = this,
s = $(i);
a.init = function() {
a.$texts = s.find(o.selector),
a.$texts.length || (a.$texts = $('- ' + s.html() + "
a.$texts.hide(),
a.$current = $("").text(a.$texts.find(":first-child").html()).prependTo(s),
t(o. in .effect) ? a.$current.css("visibility", "hidden") : e(o.out.effect) && a.$current.css("visibility", "visible"),
a.setOptions(o),
a.timeoutRun = null,
setTimeout(function() {
a.options.autoStart && a.start()
},
a.options.initialDelay)
},
a.setOptions = function(t) {
a.options = t;
},
a.triggerEvent = function(t) {
var e = $.Event(t + ".tlt");
return s.trigger(e, a),
e;
},
a. in =function(i, o) {
i = i || 0;
var s = a.$texts.find(":nth-child(" + (i + 1) + ")"),
l = $.extend(!0, {},
a.options, s.length ? n(s[0]) : {}),
c;
s.addClass("current"),
a.triggerEvent("inAnimationBegin"),
a.$current.text(s.html()).lettering("words"),
a.$current.find('[class^="word"]').css({
display: "inline-block",
"-webkit-transform": "translate3d(0,0,0)",
"-moz-transform": "translate3d(0,0,0)",
"-o-transform": "translate3d(0,0,0)",
transform: "translate3d(0,0,0)"
}).each(function() {
$(this).lettering()
}),
c = a.$current.find('[class^="char"]').css("display", "inline-block"),
t(l. in .effect) ? c.css("visibility", "hidden") : e(l. in .effect) && c.css("visibility", "visible"),
a.currentIndex = i,
r(c, l. in ,
function() {
a.triggerEvent("inAnimationEnd"),
l. in .callback && l. in .callback(),
o && o(a)
})
},
a.out = function(t) {
var e = a.$texts.find(":nth-child(" + (a.currentIndex + 1) + ")"),
i = a.$current.find('[class^="char"]'),
o = $.extend(!0, {},
a.options, e.length ? n(e[0]) : {});
a.triggerEvent("outAnimationBegin"),
r(i, o.out,
function() {
e.removeClass("current"),
a.triggerEvent("outAnimationEnd"),
o.out.callback && o.out.callback(),
t && t(a)
})
},
a.start = function(t) {
a.triggerEvent("start"),
function t(e) {
a. in (e,
function() {
var i = a.$texts.children().length;
e += 1,
!a.options.loop && e >= i ? (a.options.callback && a.options.callback(), a.triggerEvent("end")) : (e %= i, a.timeoutRun = setTimeout(function() {
a.out(function() {
t(e)
})
},
a.options.minDisplayTime))
})
} (t || 0)
},
a.stop = function() {
a.timeoutRun && (clearInterval(a.timeoutRun), a.timeoutRun = null);
},
a.init()
};
$.fn.textillate = function(t, e) {
return this.each(function() {
var i = $(this),
o = i.data("textillate"),
a = $.extend(!0, {},
$.fn.textillate.defaults, n(this), "object" == typeof t && t);
o ? "string" == typeof t ? o[t].apply(o, [].concat(e)) : o.setOptions.call(o, a) : i.data("textillate", o = new s(this, a));
})
},
$.fn.textillate.defaults = {
selector: ".texts",
loop: !1,
minDisplayTime: 2e3,
initialDelay: 0,
in:{
effect: "fadeInLeftBig",
delayScale: 1.5,
delay: 50,
sync: !1,
reverse: !1,
shuffle: !1,
callback: function() {}
},
out: {
effect: "hinge",
delayScale: 1.5,
delay: 50,
sync: !1,
reverse: !1,
shuffle: !1,
callback: function() {}
},
autoStart: !0,
inEffects: [],
outEffects: ["hinge"],
callback: function() {}
}
} function txt() {
$(".tlt").textillate({
minDisplayTime: 500,
initialDelay: 0,
autoStart: !0,
in:{
effect: "bounceIn",
delay: 50
},
out: {
effect: "bounceOut",
delayScale: 1,
delay: 50,
shuffle: !0
},
loop: !0
})
} function detectDevice() {
var t = navigator.userAgent, e = $(window).width(), i = $(window).height();if (console.log(t), console.log(e, i), e < 321 && $("#copy-right").replaceWith("
(c) 2008-2017 by 4EB Studio all rights reserved.
"), t.indexOf("AppleWebKit")) {
var n = $(window).height() - 16;
$(".page-border").height(n)
}
e < 1025 ? $("#portfolio-slider").removeClass().addClass("slides") : $("#portfolio-slider").removeClass().addClass("slides-v")
} function work() {
$(".work-detail .panel").hide(),
$(".work-detail .panel:first").show(),
$(".work-detail-nav li a").click(function() {
var t = $(this).attr("href");
$(".work-detail-nav li a").removeClass("active"),
$(this).addClass("active"),
$(".work-detail section").hide(),
$(t).show()
})
} var pageTransition = {
init: function(t) {
pageTransition.config = {
container: $("#main-content"),
triggerAll: $("a.page-transit"),
overlay: $("<section class='target--overlay'></section>"),
target: $(".target--overlay")
},
$.extend(pageTransition.config, t),
pageTransition.setup(),
$(window).on("popstate",
function(t) {
var e = t.state;
$("title").html(t.originalEvent.state.title),
$("#main-content").html(t.originalEvent.state.content),
$("body").removeClass().addClass(t.originalEvent.state.bodyclass)
}),
$(window).on("load",
function() {
id = $("body").data("id"),
$("body").hasClass("layout--work") && pageTransition.createTarget(id)
})
},
setup: function() {
pageTransition.config.triggerAll.on("click",
function(t) {
t.preventDefault(),
url = $(this).attr("href"),
pageTitle = $(this).attr("rel"),
pageLayout = $(this).attr("data-layout"),
$(this).hasClass("goto--page") ? (offset = $(this).find("picture").offset(), width = $(this).find("picture").outerWidth(), height = $(this).find("picture").outerHeight(), id = $(this).attr("rel"), pageTransition.pageLoad(offset, width, height, id), pageTransition.getContent(url)) : $(this).hasClass("backto--page") ? (offset = $(this).offset(), width = $(this).outerWidth(), height = $(this).outerHeight(), ripple = pageTransition.config.target, pageTransition.pageClose(ripple, offset, width, height), pageTransition.getContent(url)) : $(this).hasClass("page--navi") ? (offset = $(this).offset(), width = $(this).outerWidth(), height = $(this).outerHeight(), id = $(this).attr("rel"), pageTransition.config.target.remove(), pageTransition.pageLoad(offset, width, height, id), pageTransition.getContent(url)) : $(this).hasClass("menu-item") ? (pageTransition.indexMenuTrigger(), setTimeout(function() {
pageTransition.getContent(url)
},
500)) : pageTransition.getContent(url)
})
},
getContent: function() {
$.get(url,
function(t) {
newTitle = "4EB Studio - " + pageTitle,
newBodyClass = "layout--" + pageLayout + " page--" + pageTitle,
$("title").html(newTitle),
$("body").removeClass().addClass(newBodyClass),
pageTransition.config.container.html($(t).find("#main-content").html()),
state = {
title: $("title").html(),
content: $("#main-content").html(),
bodyclass: $("body").attr("class"),
back: !0
},
history.pushState(state, newTitle, url, portfolioScroll(), smoothScroll(), portfolioGuideNav(), toggleMenu(), gearTransform(), work(), detectDevice()),
pageTransition.init()
})
},
createTarget: function(t) {
pageTransition.config.overlay.prependTo("body").addClass(t).css({
position: "absolute",
opacity: 1,
width: 0,
height: 0,
left: 0,
top: 0,
"border-radius": "50%",
transform: "scale(0)",
"z-index": 99999
})
},
pageLoad: function(t, e, i, n) {
$(".page-border").css("opacity", 0),
pageTransition.config.overlay.prependTo("body").addClass("portfolio--" + n).css({
position: "absolute",
opacity: 1,
width: 0,
height: 0,
left: t.left + e / 2,
top: t.top + i / 2,
"z-index": 99999
}).animate({
left: 0,
top: 0,
width: "100vw",
height: "100vh",
opacity: 1
},
800,
function() {
$(this).css({
width: 0,
height: 0,
"border-radius": "50%",
transform: "scale(0)"
}),
$(".page-border").css("opacity", 1),
$(".page-container").scrollTop(0)
})
},
pageClose: function() {
$(".page-border").css("opacity", 0),
pageTransition.clickRipple(ripple, offset, width, height),
setTimeout(function() {
pageTransition.config.target.remove(),
$(".page-border").animate({
opacity: 1
})
},
500)
},
clickRipple: function(t, e, i, n) {
$(window).width() > 600 ? i <= n ? n = i: i = n: (i = 15, n = 15),
$(".target--overlay").css({
width: i,
height: n,
top: e.top + n / 2,
left: e.left + i / 2
}).addClass("rippleEffect")
},
indexMenuTrigger: function() {
blockOne = $("#home-navigation--wrapper"),
blockTwo = $("#home-portfolio-list--wrapper");
var t = $(window).height();
blockOne_posY = (t - 16 - blockOne.height()) / 2,
blockTwo_posY = (t - 16 - blockTwo.height()) / 2,
blockOne.css({
position: "absolute",
left: 0,
top: blockOne_posY
}).animate({
left: "-100%"
},
"slow"),
blockTwo.css({
position: "absolute",
right: 0,
top: blockTwo_posY
}).animate({
right: "-100%"
},
"slow")
}
}, siteLoading = {
init: function(t) {
siteLoading.config = {
loader: $("#logo-svg"),
landing: $("#landing-container"),
enter: $("#enter-link"),
container: $(".page-border"),
vw: $(window).width(),
vh: $(window).height(),
overlay: $("<section class='enter--overlay'></section>"),
device: navigator.userAgent
},
$.extend(siteLoading.config, t),
siteLoading.setup()
},
setup: function() {
$("html").hasClass("lt-ie10") ? siteLoading.ie() : (siteLoading.loading(), $(window).on("load",
function() {
siteLoading.transform(),
siteLoading.ready()
}), siteLoading.config.enter.on("click",
function() {
siteLoading.enter()
}))
},
ie: function() {
$("#loading").remove(),
$(".page-border").remove(),
$("body").load("ie.html")
},
loading: function() {
var t = siteLoading.config.loader.width(),
e = siteLoading.config.loader.height(),
i = (siteLoading.config.vw - t) / 2,
n = (siteLoading.config.vh - e) / 2;
siteLoading.config.loader.css({
left: i,
top: n
})
},
transform: function() {
var t = $(window).width(),
e = $("#mbp-drawing svg").width();
if (ratio = t / e, t < 800 && $("#mbp-wrapper").css({
"-webkit-transform": "scale(" + ratio + ")",
"-moz-transform": "scale(" + ratio + ")",
"-ms-transform": "scale(" + ratio + ")",
"-o-transform": "scale(" + ratio + ")",
transform: "scale(" + ratio + ")"
}), t < 800) var i = $("#mbp-drawing svg").height() * ratio;
else var i = $("#mbp-drawing svg").height();
var n = $(window).height();
enterLinkPos = (n / 2 - i / 2) / 2,
mbpWrapperHeight = n - enterLinkPos,
$("#enter-link").offset({
top: mbpWrapperHeight
})
},
ready: function() { - 1 == siteLoading.config.device.indexOf("Mobile") ? left = "60px": left = "auto",
siteLoading.config.loader.delay(3500).animate({
left: left,
top: "85px",
transform: 0
},
"slow",
function() {
$(this).removeClass("loading"),
siteLoading.config.landing.find("#about-us").hide(),
siteLoading.config.landing.show(),
svgsnimations(),
siteLoading.config.landing.find("#about-us").delay(1500).fadeIn("slow")
})
},
enter: function() {
siteLoading.config.overlay.prependTo("body").css({
position: "absolute",
opacity: 0,
width: 0,
height: 0,
left: "50vw",
top: "50vh",
background: "white",
"z-index": 99999
}).animate({
left: 0,
top: 0,
width: "100vw",
height: "100vh",
opacity: 1
},
"slow",
function() {
$("#loading").remove(),
$(".enter--overlay").remove()
})
}
}; ! function() {
"use strict";
siteLoading.init(),
pageTransition.init(),
portfolioScroll(),
detectDevice(),
toggleMenu(),
smoothScroll(),
portfolioGuideNav(),
gearTransform(),
lettering(),
funnytxt(),
txt(),
work(),
$.preloadImages = function() {
for (var t = 0; t < arguments.length; t++) {
$("<img />").attr("src", arguments[t]);
}
},
$.preloadImages(),
$(window).resize(function() {
gearTransform(),
siteLoading.transform(),
detectDevice()
})
} ();
