Edit iframe loading animations

public/assets/css/main.scss

@@ -14,6 +14,10 @@ body {
 	font-size: var(--text-font-size);
 	line-height: var(--text-line-height);
 	color: var(--black);
+	background-color: var(--feldgrau);
+}
+
+.body--white-background {
 	background-color: var(--white);
 }
 
@@ -133,7 +137,7 @@ body {
 	flex-direction: column;
 	justify-content: space-between;
 	align-items: flex-start;
-	background-color: var(--white);
+	background-color: transparent;
 	transition: background-color 400ms ease-in-out;
 
 	.sidebar__nav {
@@ -185,7 +189,6 @@ body {
 
 	&--slimmed {
 		width: 15%;
-		background-color: transparent;
 
 		.sidebar__nav-link {
 			color: var(--transparent-black);
@@ -197,7 +200,7 @@ body {
 		}
 
 		&:hover {
-			background-color: var(--transparent-white);
+			background-color: var(--transparent-feldgrau);
 
 				
 			.sidebar__nav-link {
@@ -209,7 +212,13 @@ body {
 				fill: var(--black);
 			}
 		}
+	}
 
+	&--white-background {
+
+		&:hover {
+			background-color: var(--transparent-white);
+		}
 	}
 }
 
@@ -228,7 +237,7 @@ body {
 	opacity: 0;
 	width: 100%;
 	height: 100%;
-	padding: 0 0 0 15%;
+	// padding: 0 0 0 15%;
 	transition: opacity 400ms ease-in-out;
 
 	&--visible {

public/assets/css/partials/animations.scss

@@ -11,21 +11,6 @@
 	}
 }
 
-@keyframes rotate-vertical-left {
-	0% {
-		transform: rotateY(0);
-		transform-origin: left;
-	}
-	50% {
-		transform: rotateY(180deg);
-		transform-origin: left;
-	}
-	100% {
-		transform: rotateY(0);
-		transform-origin: left;
-	}
-}
-
 @keyframes rotate-horizontal-bottom {
 	0% {
 		transform: rotateX(0);

public/assets/css/partials/variables.scss

@@ -38,6 +38,7 @@
 	--white: #fff;
 	--transparent-white: rgba(255, 255, 255, 0.9);
 	--feldgrau: #4B6259;
+	--transparent-feldgrau: rgba(75, 98, 89, 0.9);
 }
 
 // Media queries

public/assets/js/app.js

@@ -2,8 +2,9 @@
 // DATA
 // ----------------------------------------------------------------------------
 
-// SIDEBAR ANIMATION
+// 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');
@@ -26,7 +27,19 @@ function convertRemToPixels(rem) {
 	return rem * fontSize;
 }
 
-// SIDEBAR ANIMATION
+// 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')) {
@@ -34,23 +47,26 @@ function slimDownSidebar() {
 	}
 }
 
-
-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 enableExhibitionIframeVisibility() {
+	if (exhibitionIframe) {
+		exhibitionIframe.classList.add('exhibition--visible');
 	}
 }
 
-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 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');
 		}
 	}
 }
@@ -59,12 +75,14 @@ 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();
-				exhibitionIframe.classList.remove('exhibition--visible');
+				disableExhibitionIframeVisibility();
 				exhibitionIframe.addEventListener('load', function(e) {
+					logoIcon.addEventListener('animationiteration', disableLogoIconRotation);
 					slimDownSidebar();
-					disableLogoIconRotation();
-					exhibitionIframe.classList.add('exhibition--visible');
+					enableExhibitionIframeVisibility();
+					editBackgroundColor(sidebarNavLinks[i]);
 				});
 			});
 		}
@@ -79,6 +97,6 @@ function loadExhibitionIframe() {
 
 enableActivePseudoClass();
 
-// SIDEBAR ANIMATION
+// IFRAME LOADING ANIMATIONS
 
 loadExhibitionIframe();