84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
// ----------------------------------------------------------------------------
|
|
// DATA
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// SIDEBAR ANIMATION
|
|
|
|
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;
|
|
}
|
|
|
|
// SIDEBAR ANIMATION
|
|
|
|
function slimDownSidebar() {
|
|
if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
|
|
sidebar.classList.add('sidebar--slimmed');
|
|
}
|
|
}
|
|
|
|
|
|
function enableLogoIconRotation() {
|
|
if (logoIcon) {
|
|
if (logoIcon.classList.contains('logo__icon--vertical')) {
|
|
logoIcon.classList.add('logo__icon--rotate-vertical-left');
|
|
} else {
|
|
logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
|
|
}
|
|
}
|
|
}
|
|
|
|
function disableLogoIconRotation() {
|
|
if (logoIcon) {
|
|
if (logoIcon.classList.contains('logo__icon--vertical')) {
|
|
logoIcon.classList.remove('logo__icon--rotate-vertical-left');
|
|
} else {
|
|
logoIcon.classList.remove('logo__icon--rotate-horizontal-bottom');
|
|
}
|
|
}
|
|
}
|
|
|
|
function loadExhibitionIframe() {
|
|
if (sidebarNavLinks.length > 0 && exhibitionIframe) {
|
|
for (let i = 0; i < sidebarNavLinks.length; i++) {
|
|
sidebarNavLinks[i].addEventListener('click', function(e) {
|
|
enableLogoIconRotation();
|
|
exhibitionIframe.classList.remove('exhibition--visible');
|
|
exhibitionIframe.addEventListener('load', function(e) {
|
|
slimDownSidebar();
|
|
disableLogoIconRotation();
|
|
exhibitionIframe.classList.add('exhibition--visible');
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// PROGRAM
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// UTILS
|
|
|
|
enableActivePseudoClass();
|
|
|
|
// SIDEBAR ANIMATION
|
|
|
|
loadExhibitionIframe();
|