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

Edit slider behaviour and add custom cursor

Browse source
This commit is contained in:
Paul Nicoué 2022-11-24 16:58:24 +01:00
parent 07bc24cd7b
commit 0c74117eae
10 changed files with 72 additions and 4599 deletions
Download patch file Download diff file Expand all files Collapse all files

57
assets/js/app.js
View file

@ -9,14 +9,16 @@ import create from 'swiped-events';
const body = document.body;
// SPLIDE SLIDER
// SLIDER
const sliderSection = document.querySelector('.slider-section');
let slider;
const slides = document.querySelectorAll('.splide__slide');
const homeSection = document.querySelector('.home-section');
const navLinks = document.querySelectorAll('.navigation__link');
const socialLinks = document.querySelectorAll('.social__link');
const sliderSection = document.querySelector('.slider-section');
let slider;
const slides = document.querySelectorAll('.splide__slide');
let cursorOrientation;
let cursorColor;
// ----------------------------------------------------------------------------
// LOGIC
@ -35,7 +37,7 @@ function convertRemToPixels(rem) {
return rem * fontSize;
}
// SPLIDE SLIDER
// SLIDER
function setUpSlider() {
if (sliderSection) {
@ -60,11 +62,13 @@ function mountSlider() {
}
}
function goToNextSlideOnClick() {
function changeSlideOnClick() {
if (homeSection && slider) {
homeSection.addEventListener('click', function(e) {
if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
if (e.clientX >= window.innerWidth / 2) {
slider.go('>');
} else {
slider.go('<');
}
});
}
@ -108,28 +112,48 @@ function turnSidebarLinksToBlack() {
}
}
function editNavLinksColor(slide) {
function editColorTheme(slide) {
if (slide) {
if (slide.getAttribute('data-logo-color') === 'white') {
turnSidebarLinksToWhite();
cursorColor = 'light';
} else if (slide.getAttribute('data-logo-color') === 'black') {
turnSidebarLinksToBlack();
cursorColor = 'dark';
}
if (body && cursorOrientation && cursorColor) {
body.style.cursor = `url('/icons/cursor-${cursorOrientation}-${cursorColor}.svg') 0 16, auto`;
}
}
}
function editNavLinksColorOnSliderMounted() {
function editColorThemeOnSliderMounted() {
if (slider && slides) {
slider.on('mounted', function() {
editNavLinksColor(slides[0]);
editColorTheme(slides[0]);
})
}
}
function editNavLinksColorOnSlideActive() {
function editColorThemeOnSlideActive() {
if (slider) {
slider.on('active', function(e) {
editNavLinksColor(e.slide);
editColorTheme(e.slide);
});
}
}
function setCursorOnMove() {
if (body) {
body.addEventListener('mousemove', function(e) {
if (e.clientX >= window.innerWidth / 2) {
cursorOrientation = 'next';
} else {
cursorOrientation = 'previous';
}
if (cursorOrientation && cursorColor) {
body.style.cursor = `url('/icons/cursor-${cursorOrientation}-${cursorColor}.svg') 0 16, auto`;
}
});
}
}
@ -142,11 +166,12 @@ function editNavLinksColorOnSlideActive() {
enableActivePseudoClass();
// SPLIDE SLIDER
// SLIDER
setUpSlider();
editNavLinksColorOnSliderMounted();
editColorThemeOnSliderMounted();
mountSlider();
goToNextSlideOnClick();
changeSlideOnClick();
changeSlideOnSwipe();
editNavLinksColorOnSlideActive();
editColorThemeOnSlideActive();
setCursorOnMove();