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

Edit logo color on slider mounted event

Browse source
This commit is contained in:
Paul Nicoué 2022-08-04 17:56:28 +02:00
parent 4e12cc1583
commit 6251dc8128
4 changed files with 119 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

95
public/assets/build/app.js
View file

File diff suppressed because one or more lines are too long

12
public/assets/build/main.css
View file

File diff suppressed because one or more lines are too long

15
public/assets/css/main.scss
View file

@ -105,12 +105,12 @@ body {
width: 100%;
height: 100%;
path:nth-child(1) {
&--black {
stroke: var(--black);
transition: stroke 400ms ease-in-out;
}
path:nth-child(2) {
&--white {
stroke: var(--white);
transition: stroke 400ms ease-in-out;
}
@ -118,17 +118,6 @@ body {
&--rotate-horizontal-bottom {
animation: rotate-horizontal-bottom 800ms ease-in-out infinite;
}
&--white {
path:nth-child(1) {
stroke: var(--white);
}
path:nth-child(2) {
stroke: var(--black);
}
}
}
}

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

@ -10,8 +10,9 @@ const body = document.body;
// SPLIDE SLIDER
let splideSlider = document.querySelector('.splide');
const logoIcon = document.querySelector('.logo__icon');
const logo = document.querySelector('.logo__icon');
let slider = document.querySelector('.splide');
const slides = document.querySelectorAll('.splide__slide');
// EXHIBITION IFRAME
@ -39,8 +40,8 @@ function convertRemToPixels(rem) {
// SPLIDE SLIDER
function setUpSlider() {
if (splideSlider) {
splideSlider = new Splide('.splide', {
if (slider) {
slider = new Splide('.splide', {
type: 'fade',
rewind: true,
rewindByDrag: true,
@ -52,62 +53,82 @@ function setUpSlider() {
easing: 'ease-in-out',
drag: true,
wheel: true
}).mount();
});
}
}
function mountSlider() {
slider.mount();
}
function goToNextSlideOnClick() {
if (splideSlider) {
splideSlider.on('click', function(e) {
splideSlider.go('>');
if (slider) {
slider.on('click', function(e) {
slider.go('>');
});
}
}
function turnLogoIconToWhite() {
if (logoIcon) {
logoIcon.classList.add('logo__icon--white');
function turnLogoIconToBlack() {
if (logo) {
logo.classList.remove('logo__icon--white');
logo.classList.add('logo__icon--black');
}
}
function turnLogoIconToBlack() {
if (logoIcon) {
logoIcon.classList.remove('logo__icon--white');
function turnLogoIconToWhite() {
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') {
turnLogoIconToWhite();
} else if (slide.getAttribute('data-logo-color') === 'black') {
turnLogoIconToBlack();
}
}
}
function editLogoColorOnSliderMounted() {
if (slider && slides) {
slider.on('mounted', function() {
editLogoColor(slides[0]);
})
}
}
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();
}
if (slider) {
slider.on('active', function(e) {
editLogoColor(e.slide);
});
}
}
function enableLogoIconRotation() {
if (logoIcon) {
logoIcon.classList.add('logo__icon--rotate-horizontal-bottom');
if (logo) {
logo.classList.add('logo__icon--rotate-horizontal-bottom');
}
}
function disableLogoIconRotation() {
if (logoIcon) {
logoIcon.classList.remove('logo__icon--rotate-horizontal-bottom');
if (logo) {
logo.classList.remove('logo__icon--rotate-horizontal-bottom');
}
}
function rotateLogoOnSliderMove() {
if (splideSlider && logoIcon) {
splideSlider.on('move', function(e) {
logoIcon.removeEventListener('animationiteration', disableLogoIconRotation);
if (slider && logo) {
slider.on('move', function(e) {
logo.removeEventListener('animationiteration', disableLogoIconRotation);
enableLogoIconRotation();
});
splideSlider.on('moved', function(e) {
logoIcon.addEventListener('animationiteration', disableLogoIconRotation);
slider.on('moved', function(e) {
logo.addEventListener('animationiteration', disableLogoIconRotation);
});
}
}
@ -148,11 +169,11 @@ 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);
logo.removeEventListener('animationiteration', disableLogoIconRotation);
enableLogoIconRotation();
disableExhibitionIframeVisibility();
exhibitionIframe.addEventListener('load', function(e) {
logoIcon.addEventListener('animationiteration', disableLogoIconRotation);
logo.addEventListener('animationiteration', disableLogoIconRotation);
slimDownSidebar();
enableExhibitionIframeVisibility();
editBackgroundColor(sidebarNavLinks[i]);
@ -173,6 +194,8 @@ enableActivePseudoClass();
// SPLIDE SLIDER
setUpSlider();
editLogoColorOnSliderMounted();
mountSlider();
goToNextSlideOnClick();
editLogoColorOnSlideActive();
rotateLogoOnSliderMove();