Edit folder structure and webpack configuration

assets/js/app.js

@@ -0,0 +1,253 @@
+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();