julienmonnerie/assets/js/app.js

import Splide from '@splidejs/splide';

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

// UTILS

const body = document.body;

// SPLIDE SLIDER

const logo = document.querySelector('.logo__icon');
let slider = document.querySelector('.splide');
const slides = document.querySelectorAll('.splide__slide');

// EXHIBITION IFRAME

const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
const exhibitionIframe = document.querySelector('.exhibition');

// NAV LINKS TARGET

const mediaQueries = {
	remTabletWidth: 48,
    remDesktopWidth: 62
}

// ----------------------------------------------------------------------------
// 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 (slider) {
		slider = 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
		});
	}
}

function mountSlider() {
	if (slider) {
		slider.mount();
	}
}

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

function turnLogoToBlack() {
	if (logo) {
		logo.classList.remove('logo__icon--white');
		logo.classList.add('logo__icon--black');
	}
}

function turnLogoToWhite() {
	if (logo) {
		logo.classList.remove('logo__icon--black');
		logo.classList.add('logo__icon--white');
	}
}

function editLogoColor(slide) {
	if (slide) {
		if (slide.getAttribute('data-logo-color') === 'white') {
			turnLogoToWhite();
		} else if (slide.getAttribute('data-logo-color') === 'black') {
			turnLogoToBlack();
		}
	}
}

function editLogoColorOnSliderMounted() {
	if (slider && slides) {
		slider.on('mounted', function() {
			editLogoColor(slides[0]);
		})
	}
}

function editLogoColorOnSlideActive() {
	if (slider) {
		slider.on('active', function(e) {
			editLogoColor(e.slide);
		});
	}
}

function enableLogoRotation() {
	if (logo) {
		logo.classList.add('logo__icon--rotate-horizontal-bottom');
	}
}

function disableLogoRotation() {
	if (logo) {
		logo.classList.remove('logo__icon--rotate-horizontal-bottom');
	}
}

function rotateLogoOnSliderMove() {
	if (slider && logo) {
		slider.on('move', function(e) {
			logo.removeEventListener('animationiteration', disableLogoRotation);
			enableLogoRotation();
		});
		slider.on('moved', function(e) {
			logo.addEventListener('animationiteration', disableLogoRotation);
		});
	}
}

// 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) {
				if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
					logo.removeEventListener('animationiteration', disableLogoRotation);
					enableLogoRotation();
					disableExhibitionIframeVisibility();
					exhibitionIframe.addEventListener('load', function(e) {
						logo.addEventListener('animationiteration', disableLogoRotation);
						slimDownSidebar();
						enableExhibitionIframeVisibility();
						editBackgroundColor(sidebarNavLinks[i]);
					});
				}
			});
		}
	}
}

// NAV LINKS TARGET

function setNavLinksIframeTarget() {
	if (sidebarNavLinks) {
		for (let i = 0; i < sidebarNavLinks.length; i++) {
			sidebarNavLinks[i].setAttribute('target', 'exhibition');
		}
	}
}

function setNavLinksBlankTarget() {
	if (sidebarNavLinks) {
		for (let i = 0; i < sidebarNavLinks.length; i++) {
			sidebarNavLinks[i].setAttribute('target', '_blank');
		}
	}
}

function editNavLinksTarget() {
		if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
			setNavLinksIframeTarget();
		} else {
			setNavLinksBlankTarget();
		}
}

function editNavLinksTargetOnResize() {
	window.addEventListener('resize', function(e) {
		editNavLinksTarget();
	})
}

// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------

// UTILS

enableActivePseudoClass();

// SPLIDE SLIDER

setUpSlider();
editLogoColorOnSliderMounted();
mountSlider();
goToNextSlideOnClick();
editLogoColorOnSlideActive();
rotateLogoOnSliderMove();

// EXHIBITION IFRAME

loadExhibitionIframe();

// NAV LINKS TARGET

editNavLinksTarget();
editNavLinksTargetOnResize();