julienmonnerie/public/assets/js/app.js

import Splide from '@splidejs/splide';

// ----------------------------------------------------------------------------
// DATA
// ----------------------------------------------------------------------------

// UTILS

const body = document.body;

// SPLIDE SLIDER

let splideSlider = document.querySelector('.splide');
const logoIcon = document.querySelector('.logo__icon');

// EXHIBITION IFRAME

const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--internal');
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(body).getPropertyValue('font-size'));
	return rem * fontSize;
}

// SPLIDE SLIDER

function setUpSlider() {
	if (splideSlider) {
		splideSlider = new Splide('.splide', {
			type: 'fade',
			rewind: true,
			rewindByDrag: true,
			speed: 400,
			fixedWidth: '100vw',
			fixedHeight: '100vh',
			arrows: false,
			pagination: false,
			easing: 'ease-in-out',
			drag: true,
			wheel: true
		}).mount();
	}
}

function goToNextSlideOnClick() {
	if (splideSlider) {
		splideSlider.on('click', function(e) {
			splideSlider.go('>');
		});		
	}
}

function turnLogoIconToWhite() {
	if (logoIcon) {
		logoIcon.classList.add('logo__icon--white');
	}
}

function turnLogoIconToBlack() {
	if (logoIcon) {
		logoIcon.classList.remove('logo__icon--white');
	}
}

function editLogoColorOnSlideActive() {
	if (splideSlider) {
		splideSlider.on('active', function(e) {
			if (e.slide.getAttribute('data-logo-color') === 'white') {
				turnLogoIconToWhite();
			} else if (e.slide.getAttribute('data-logo-color') === 'black') {
				turnLogoIconToBlack();
			}
		});
	}
}

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 rotateLogoOnSliderMove() {
	if (splideSlider && logoIcon) {
		splideSlider.on('move', function(e) {
			logoIcon.removeEventListener('animationiteration', disableLogoIconRotation);
			enableLogoIconRotation();
		});
		splideSlider.on('moved', function(e) {
			logoIcon.addEventListener('animationiteration', disableLogoIconRotation);
		});
	}
}

// EXHIBITION IFRAME

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

// SPLIDE SLIDER

setUpSlider();
goToNextSlideOnClick();
editLogoColorOnSlideActive();
rotateLogoOnSliderMove();

// EXHIBITION IFRAME

loadExhibitionIframe();