102 lines
3 KiB
JavaScript
102 lines
3 KiB
JavaScript
// ----------------------------------------------------------------------------
|
|
// DATA
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// IFRAME LOADING ANIMATIONS
|
|
|
|
const body = document.querySelector('body');
|
|
const sidebar = document.querySelector('.sidebar');
|
|
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
|
|
const logoIcon = document.querySelector('.logo__icon');
|
|
const exhibitionIframe = document.querySelector('.exhibition');
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// LOGIC
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// UTILS
|
|
|
|
// Enable CSS :active pseudo-class in Safari Mobile
|
|
function enableActivePseudoClass() {
|
|
document.addEventListener("touchstart", function() {},false);
|
|
}
|
|
|
|
// Convert rem to pixels by getting font-size CSS property
|
|
function convertRemToPixels(rem) {
|
|
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
|
|
return rem * fontSize;
|
|
}
|
|
|
|
// IFRAME LOADING ANIMATIONS
|
|
|
|
function enableLogoIconRotation() {
|
|
if (logoIcon) {
|
|
logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
|
|
}
|
|
}
|
|
|
|
function disableLogoIconRotation() {
|
|
if (logoIcon) {
|
|
logoIcon.classList.remove('logo__icon--rotate-horizontal-bottom');
|
|
}
|
|
}
|
|
|
|
function slimDownSidebar() {
|
|
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
|
|
sidebar.classList.add('sidebar--slimmed');
|
|
}
|
|
}
|
|
|
|
function enableExhibitionIframeVisibility() {
|
|
if (exhibitionIframe) {
|
|
exhibitionIframe.classList.add('exhibition--visible');
|
|
}
|
|
}
|
|
|
|
function disableExhibitionIframeVisibility() {
|
|
if (exhibitionIframe) {
|
|
exhibitionIframe.classList.remove('exhibition--visible');
|
|
}
|
|
}
|
|
|
|
function editBackgroundColor(sidebarNavLink) {
|
|
if (body && sidebar) {
|
|
if (sidebarNavLink.getAttribute('data-background') === 'feldgrau') {
|
|
body.classList.remove('body--white-background');
|
|
sidebar.classList.remove('sidebar--white-background');
|
|
} else if (sidebarNavLink.getAttribute('data-background') === 'white') {
|
|
body.classList.add('body--white-background');
|
|
sidebar.classList.add('sidebar--white-background');
|
|
}
|
|
}
|
|
}
|
|
|
|
function loadExhibitionIframe() {
|
|
if (sidebarNavLinks.length > 0 && exhibitionIframe) {
|
|
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
|
sidebarNavLinks[i].addEventListener('click', function(e) {
|
|
logoIcon.removeEventListener('animationiteration', disableLogoIconRotation);
|
|
enableLogoIconRotation();
|
|
disableExhibitionIframeVisibility();
|
|
exhibitionIframe.addEventListener('load', function(e) {
|
|
logoIcon.addEventListener('animationiteration', disableLogoIconRotation);
|
|
slimDownSidebar();
|
|
enableExhibitionIframeVisibility();
|
|
editBackgroundColor(sidebarNavLinks[i]);
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// PROGRAM
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// UTILS
|
|
|
|
enableActivePseudoClass();
|
|
|
|
// IFRAME LOADING ANIMATIONS
|
|
|
|
loadExhibitionIframe();
|