julienmonnerie/public/assets/js/app.js

// ----------------------------------------------------------------------------
// 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();