julienmonnerie/public/assets/js/app.js

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