host/julienmonnerie
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Edit iframe loading animations

Browse source
This commit is contained in:
Paul Nicoué 2022-08-01 16:59:46 +02:00
parent e0cb8d46f4
commit 39466006da
8 changed files with 121 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

58
public/assets/js/app.js
View file

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