592 lines
14 KiB
JavaScript
Executable File
592 lines
14 KiB
JavaScript
Executable File
(function ($, root, undefined) {
|
|
|
|
$(function () {
|
|
|
|
'use strict';
|
|
|
|
// DOM ready, take it away
|
|
|
|
console.log("DOM ready")
|
|
|
|
//settings
|
|
//change the speed in css as well in .wrapper!! 1s
|
|
const menuSpeed = 300
|
|
const filterspeed = 200
|
|
const pressPageSpeed = 300
|
|
|
|
// global variables
|
|
var isMobile
|
|
var isUltrawide
|
|
var menuopen = false
|
|
var menuClosedLeft
|
|
// var logoWidth
|
|
// var logoPadding = $(".logo").css("padding")
|
|
|
|
var teamnr = 0
|
|
|
|
var homeArticlePos = 0
|
|
var homeArticleNr = 0
|
|
const wrapperWidth = $(".wrapper").outerWidth()
|
|
|
|
// const templateUrl = '<?= get_bloginfo("template_url"); ?>';
|
|
const templateUrl = object_name.templateUrl;
|
|
|
|
|
|
|
|
/* ======================== */
|
|
/* FUNCTIONS */
|
|
/* ======================== */
|
|
|
|
$.fn.scrollStopped = function (callback) {
|
|
var that = this, $this = $(that);
|
|
$this.scroll(function (ev) {
|
|
clearTimeout($this.data('scrollTimeout'));
|
|
$this.data('scrollTimeout', setTimeout(callback.bind(that), 500, ev));
|
|
});
|
|
};
|
|
|
|
|
|
function convertRemToPixels(rem) {
|
|
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
|
|
}
|
|
|
|
function showMenu() {
|
|
// logoWidth = $(".logo")[0].getBoundingClientRect().width;
|
|
|
|
$("#menuopen").hide()
|
|
|
|
// // if mobile, move the motto left
|
|
// if (isMobile) {
|
|
// $(".logo").css({
|
|
// width: 0,
|
|
// padding: 0
|
|
// })
|
|
// }
|
|
|
|
if (isMobile) {
|
|
$(".logo").hide()
|
|
}
|
|
|
|
// show the menu
|
|
$("header .topnav")
|
|
.show()
|
|
.animate({
|
|
left: 0
|
|
}, menuSpeed, "linear", function () {
|
|
//then show the motto:
|
|
menuopen = true;
|
|
if (isMobile) {
|
|
$(".logo").addClass("inverted")
|
|
$(".logo").fadeIn()
|
|
|
|
}
|
|
|
|
$(".header-top #motto, #menuclose").fadeIn(function(){
|
|
$("#menuclose").css({
|
|
display: "inline-block"
|
|
})
|
|
})
|
|
|
|
|
|
})
|
|
}
|
|
|
|
function hideMenu() {
|
|
// if (isMobile) {
|
|
// $(".logo").css({
|
|
// width: logoWidth,
|
|
// padding: logoPadding
|
|
// })
|
|
// }
|
|
|
|
$(".header-top #motto, #menuclose").hide()
|
|
if (isMobile) {
|
|
$(".logo").hide()
|
|
$(".logo").removeClass("inverted")
|
|
|
|
}
|
|
$("header .topnav")
|
|
.animate({
|
|
left: menuClosedLeft
|
|
}, menuSpeed, "linear", function () {
|
|
$("#menuopen").fadeIn()
|
|
$("header .topnav").hide()
|
|
menuopen = false
|
|
if (isMobile) {
|
|
$(".logo").fadeIn()
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
//-----------------//
|
|
// --- loading --- //
|
|
//-----------------//
|
|
|
|
// check if mobile
|
|
if ($(window).width() < 1024) {
|
|
isMobile = true;
|
|
} else {
|
|
isMobile = false;
|
|
if ($(window).width() < 1921) {
|
|
isUltrawide = false
|
|
} else {
|
|
isUltrawide = true
|
|
}
|
|
}
|
|
|
|
//css tricks
|
|
$("header .topnav")
|
|
.hide()
|
|
.css({
|
|
// width: "0%"
|
|
})
|
|
|
|
//--------//
|
|
// footer //
|
|
//--------//
|
|
|
|
// add date to copyright
|
|
var today = new Date();
|
|
var year = today.getFullYear();
|
|
|
|
$(".footer .copyright").append(" " + year)
|
|
|
|
//add hr after address
|
|
if (!isMobile) {
|
|
|
|
$("#footerbottom #info p br").replaceWith(" ")
|
|
$("#footerbottom #info p:nth-child(2)").wrapInner('<p class="footer-address"></p>')
|
|
$("#footerbottom #info p:nth-child(2)").append('<p class="hr"></p>')
|
|
|
|
}
|
|
|
|
//------//
|
|
// home //
|
|
//------//
|
|
|
|
|
|
|
|
//------//
|
|
// menu //
|
|
//------//
|
|
|
|
//settings for mobile:
|
|
// menuWidth = "100%"
|
|
// menuBorderLeft = "0%"
|
|
// menuLeft = 0
|
|
menuClosedLeft = "100%"
|
|
|
|
if (!isMobile) {
|
|
//if desktop:
|
|
// menuBorderLeft = "9rem"
|
|
// menuWidth = (wrapperWidth - convertRemToPixels(parseInt(menuBorderLeft))) + "px"
|
|
if (isUltrawide) {
|
|
|
|
}
|
|
}
|
|
|
|
//Overwrite text for slug
|
|
$("#menu-language-selector>li").each(function () {
|
|
var theanchor = $(this).children("a")
|
|
var langstring = theanchor.attr("lang").split("-")
|
|
theanchor.html(langstring[0])
|
|
|
|
})
|
|
|
|
//-------//
|
|
// about //
|
|
//-------//
|
|
|
|
//wrapper for the secondary title of the about page
|
|
$(".page.about article h2:first-of-type").wrap("<span class='h2wrapper'></div>")
|
|
|
|
//wrapper for the "our team" section on about page
|
|
$(".page.about article hr:nth-of-type(odd)").addClass("begin")
|
|
$(".page.about article hr:nth-of-type(even)").addClass("end")
|
|
$('.page.about hr.begin').each(function () {
|
|
var $set = $();
|
|
var nxt = this.nextSibling;
|
|
while (nxt) {
|
|
if (!$(nxt).is('hr.end')) {
|
|
$set.push(nxt);
|
|
nxt = nxt.nextSibling;
|
|
} else break;
|
|
}
|
|
$set.wrapAll('<div class="team team-' + teamnr + '" />');
|
|
teamnr++
|
|
});
|
|
|
|
if (!isMobile) {
|
|
|
|
$(".page.about article>p, .page.about article>blockquote").addClass("aligned-text")
|
|
|
|
$(".page.about article>h3").each(function () {
|
|
var $set = $(this);
|
|
var nxt = this.nextSibling;
|
|
while (nxt) {
|
|
if (!$(nxt).is('h3') & !$(nxt).is('h2')) {
|
|
$set.push(nxt);
|
|
nxt = nxt.nextSibling;
|
|
} else break;
|
|
|
|
}
|
|
$set.wrapAll('<div class="aligned-text-wrapper" />');
|
|
|
|
})
|
|
}
|
|
|
|
|
|
//-------//
|
|
// team //
|
|
//-------//
|
|
|
|
//remove hrs
|
|
if (!isMobile) {
|
|
$(".page.about article hr").remove();
|
|
$(".page.about article>h2, .page.about .team").wrapAll('<div class="teamWrapper" />');
|
|
}
|
|
|
|
//wrap team members
|
|
$(".page.about .team").each(function () {
|
|
$(this).children("h3, h4, p").wrapAll('<div class="team-text" />');
|
|
$(this).children(".team-text").children("h3, h4").wrapAll('<div class="team-header" />');
|
|
$(this).children(".team-text").children("p").wrapAll('<div class="team-body" />');
|
|
})
|
|
|
|
//hide team member texts
|
|
$(".page.about article .team .team-text").hide();
|
|
|
|
//-------//
|
|
// press //
|
|
//-------//
|
|
|
|
//create vertical
|
|
$("body.category-press article.tag-publication").wrapAll("<div class='publication-wrapper article-wrapper'></div>")
|
|
$("body.category-press article.tag-award").wrapAll("<div class='award-wrapper article-wrapper'></div>")
|
|
|
|
var pressPublCount = $(".category-press .publication-wrapper article").length
|
|
var pressAwardCount = $(".category-press .award-wrapper article").length
|
|
var pressArtHeight = pressPublCount
|
|
if (pressAwardCount > pressPublCount) {
|
|
pressArtHeight = pressAwardCount
|
|
}
|
|
|
|
$(".category-press article").css({
|
|
height: (100 / parseInt(pressArtHeight)) + "%"
|
|
})
|
|
|
|
if (isMobile) {
|
|
$(".category-press .tag-publication .project-tags").addClass("active");
|
|
} else {
|
|
$(".category-press article .project-tags").addClass("active")
|
|
}
|
|
|
|
|
|
$(".category-press .article-wrapper").each(function () {
|
|
var nr = 0
|
|
$(this).children("article").each(function () {
|
|
$(this).addClass("art" + nr)
|
|
nr++
|
|
})
|
|
})
|
|
|
|
//move date on desktop
|
|
if (!isMobile) {
|
|
$(".category-press section").prepend('<div class="dateWrapper"></div>')
|
|
}
|
|
$(".category-press .award-wrapper article .project-date").prependTo(".dateWrapper")
|
|
|
|
//---------//
|
|
// process //
|
|
//---------//
|
|
|
|
//add classes for wrapall
|
|
var titleNr = -1
|
|
var h3contents = [];
|
|
$(".page-template-template-process article>h3").each(function () {
|
|
titleNr++
|
|
$(this).addClass("process-title-" + titleNr)
|
|
$(this).next("h2").addClass("process-title-" + titleNr)
|
|
h3contents.push($(this).html())
|
|
|
|
})
|
|
var pNr = -1
|
|
$(".page-template-template-process article>p").each(function () {
|
|
pNr++
|
|
$(this).addClass("process-page-" + pNr)
|
|
$(this).prev("blockquote").addClass("process-page-" + pNr)
|
|
|
|
})
|
|
|
|
//wrap them in divs
|
|
for (let i = 0; i < titleNr + 1; i++) {
|
|
$(".process-title-" + i).wrapAll("<div class='process-title-wrapper process-title-w-" + i + " '></div>")
|
|
}
|
|
|
|
for (let i = 0; i < pNr + 1; i++) {
|
|
$(".process-page-" + i).wrapAll("<div class='process-page-wrapper process-page-w-" + i + " '></div>")
|
|
}
|
|
|
|
//contents at the bottom
|
|
$(".process-page-wrapper").append("<ul class='process-contents'></ul")
|
|
for (let i = 0; i < h3contents.length; i++) {
|
|
const element = h3contents[i];
|
|
$(".process-contents").append("<li><a>" + element + "</a></li>")
|
|
}
|
|
|
|
//add the arrow
|
|
if (isMobile) {
|
|
$(".process-title-wrapper, .process-page-wrapper").append($(".theArrow"))
|
|
}
|
|
|
|
|
|
// $(".process-title-wrapper").wrapInner("<div class='paralax-wrapper'></div>");
|
|
|
|
|
|
/* ======================== */
|
|
/* SCROLL */
|
|
/* ======================== */
|
|
|
|
$(window).scroll(function () {
|
|
if (!menuopen) {
|
|
$(".header-top").fadeOut();
|
|
}
|
|
});
|
|
|
|
$(window).scrollStopped(function () {
|
|
if (!menuopen) {
|
|
// setTimeout(function(){
|
|
$(".header-top").fadeIn();
|
|
// },200)
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
/* ======================== */
|
|
/* CLICKS */
|
|
/* ======================== */
|
|
|
|
//show/hide menu
|
|
$(".menuelem").click(function (e) {
|
|
e.preventDefault();
|
|
$("header .topnav").stop();
|
|
if (!menuopen) {
|
|
//ha nem látszik
|
|
showMenu()
|
|
} else {
|
|
// ha látszik
|
|
hideMenu()
|
|
}
|
|
})
|
|
|
|
|
|
$("header a, .topnav").on('click', function (e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
$(document).on('click', function (e) {
|
|
if (menuopen) {
|
|
e.preventDefault();
|
|
hideMenu()
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
//about team
|
|
$(".page article .team figure").click(function (e) {
|
|
e.preventDefault();
|
|
|
|
//hide images
|
|
if (isMobile) {
|
|
$(".page article .team figure,.page article>h2").hide();
|
|
} else {
|
|
$(this).hide();
|
|
$(".page.about article .teamWrapper>h2").hide()
|
|
}
|
|
|
|
|
|
//show texts:
|
|
$(this).prev(".page article .team-text").show()
|
|
$(this).parent().addClass("activemember")
|
|
|
|
});
|
|
|
|
$(".page article .team-text").click(function (e) {
|
|
e.preventDefault();
|
|
//show images
|
|
if (isMobile) {
|
|
$(".page article .team figure,.page article>h2").show();
|
|
} else {
|
|
$(this).siblings("figure").show();
|
|
if ($(".activemember").length == 1) {
|
|
$(".page.about article .teamWrapper>h2").show()
|
|
}
|
|
}
|
|
|
|
|
|
//hide texts:
|
|
$(this).hide()
|
|
$(this).parent().removeClass("activemember")
|
|
|
|
});
|
|
|
|
/* ============== */
|
|
/* PROJECTS */
|
|
/* ============== */
|
|
|
|
$(".category main .tag-list .tag-filter a, .category main .tag-list .tag-filter object").click(function (e) {
|
|
e.preventDefault();
|
|
|
|
console.log("opening")
|
|
if ($(".category main .tag-list .tag-filter").hasClass("opened")) {
|
|
$(".category main .tag-list .tag-filter").removeClass("opened")
|
|
$(".category main .tag-list").removeClass("open")
|
|
|
|
//move the arrow
|
|
$(".category main .tag-list .tag-filter").animate({
|
|
width: ""
|
|
}, filterspeed)
|
|
//flip the arrow
|
|
$(".category main .tag-list .tag-filter object").css({
|
|
"-moz-transform": "scaleX(-1)",
|
|
"-o-transform": "scaleX(-1)",
|
|
"-webkit-transform": "scaleX(-1)",
|
|
transform: "scaleX(-1)",
|
|
filter: "FlipH",
|
|
"-ms-filter": '"FlipH"'
|
|
})
|
|
|
|
$(".category main .tag-list .tag-wrapper ").slideUp(filterspeed)
|
|
|
|
} else {
|
|
$(".category main .tag-list .tag-filter").addClass("opened")
|
|
$(".category main .tag-list").addClass("open")
|
|
|
|
//move the arrow
|
|
$(".category main .tag-list .tag-filter").animate({
|
|
width: "100%"
|
|
}, filterspeed)
|
|
//flip the arrow
|
|
$(".category main .tag-list .tag-filter object").css({
|
|
"-moz-transform": "scaleX(1)",
|
|
"-o-transform": "scaleX(1)",
|
|
"-webkit-transform": "scaleX(1)",
|
|
transform: "scaleX(1)",
|
|
filter: "",
|
|
"-ms-filter": '""'
|
|
})
|
|
$(".category main .tag-list .tag-wrapper ").slideDown(filterspeed)
|
|
}
|
|
});
|
|
|
|
$('.category main .tag-list .tag-wrapper a').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
if ($(this).hasClass("activetag")) {
|
|
$(".activetag").removeClass("activetag")
|
|
$("article img").animate({
|
|
opacity: "1",
|
|
filter: "alpha(opacity=100)"
|
|
}, filterspeed)
|
|
} else {
|
|
$(".activetag").removeClass("activetag")
|
|
|
|
var theTag = $(this).attr("class")
|
|
console.log(theTag)
|
|
$("article.tag-" + theTag + " img ").animate({
|
|
opacity: "1",
|
|
filter: "alpha(opacity=100)"
|
|
}, filterspeed)
|
|
$("article:not( .tag-" + theTag + ") img")
|
|
// .addClass("hidden-article")
|
|
.animate({
|
|
opacity: "0",
|
|
filter: "alpha(opacity=0)"
|
|
}, filterspeed)
|
|
$(this).addClass("activetag")
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
/* ============== */
|
|
/* CLICKPRESS */
|
|
/* ============== */
|
|
|
|
|
|
|
|
$("body.category-press .tag-award .project-tags a").click(function (e) {
|
|
e.preventDefault();
|
|
// only if it's not active
|
|
if (!$(this).parent().hasClass("active") & isMobile) {
|
|
|
|
//move text in
|
|
$(this).parent().siblings(".project-content").animate({
|
|
left: -(wrapperWidth + convertRemToPixels(4))
|
|
}, pressPageSpeed)
|
|
|
|
//search for the horizontal class:
|
|
var articleClasses = $(this).parent().parent().attr("class")
|
|
var horizontalClass = ""
|
|
var classArr = articleClasses.split(" ")
|
|
for (let i = 0; i < classArr.length; i++) {
|
|
const element = classArr[i];
|
|
if (element.substring(0, 3) == "art") {
|
|
horizontalClass = element
|
|
}
|
|
}
|
|
//move other side as well
|
|
$("body.category-press .publication-wrapper ." + horizontalClass + " .project-content").animate({
|
|
left: -(wrapperWidth + convertRemToPixels(4))
|
|
}, pressPageSpeed)
|
|
|
|
//change typo of text:
|
|
$("body.category-press .publication-wrapper ." + horizontalClass + ">.project-tags").removeClass("active")
|
|
$(this).parent().addClass("active")
|
|
}
|
|
});
|
|
|
|
$("body.category-press .tag-publication .project-tags a").click(function (e) {
|
|
e.preventDefault();
|
|
if (!$(this).parent().hasClass("active")) {
|
|
|
|
//move text in
|
|
$(this).parent().siblings(".project-content").animate({
|
|
left: 0
|
|
}, pressPageSpeed)
|
|
|
|
//search for the horizontal class:
|
|
var articleClasses = $(this).parent().parent().attr("class")
|
|
var horizontalClass = ""
|
|
var classArr = articleClasses.split(" ")
|
|
for (let i = 0; i < classArr.length; i++) {
|
|
const element = classArr[i];
|
|
if (element.substring(0, 3) == "art") {
|
|
horizontalClass = element
|
|
}
|
|
}
|
|
//move other side as well
|
|
$("body.category-press .award-wrapper ." + horizontalClass + " .project-content").animate({
|
|
left: 0
|
|
}, pressPageSpeed)
|
|
|
|
//change typo of text:
|
|
$("body.category-press .project-tags.active").removeClass("active")
|
|
$(this).parent().addClass("active")
|
|
}
|
|
});
|
|
|
|
|
|
});
|
|
|
|
})(jQuery, this);
|