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