initial commit
This commit is contained in:
591
js/scripts.js
Executable file
591
js/scripts.js
Executable file
@@ -0,0 +1,591 @@
|
||||
(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);
|
||||
Reference in New Issue
Block a user