julienmonnerie/assets/js/app.js

import Splide from '@splidejs/splide';
import create from 'swiped-events';

// ----------------------------------------------------------------------------
// DATA
// ----------------------------------------------------------------------------

// UTILS

const body = document.body;

// SLIDER

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
// ----------------------------------------------------------------------------

// UTILS

// Enable CSS :active pseudo-class in Safari Mobile
function enableActivePseudoClass() {
    document.addEventListener("touchstart", function() {},false);
}

// Convert rem to pixels by getting font-size CSS property
function convertRemToPixels(rem) {
    let fontSize = parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
    return rem * fontSize;
}

// SLIDER

function setUpSlider() {
    if (sliderSection) {
        slider = new Splide('.splide', {
            type: 'fade',
            rewind: true,
            rewindByDrag: true,
            speed: 400,
            width: '100vw',
            height: '100vh',
            arrows: false,
            pagination: false,
            easing: 'ease-in-out',
            drag: true
        });
    }
}

function mountSlider() {
    if (slider) {
        slider.mount();
    }
}

function changeSlideOnClick() {
    if (homeSection && slider) {
        homeSection.addEventListener('click', function(e) {
            if (!e.target.closest('.navigation__link') && !e.target.closest('.social__link')) {
                if (e.clientX >= window.innerWidth / 2) {
                    slider.go('>');
                } else {
                    slider.go('<');
                }
            }
        });
    }
}

function changeSlideOnSwipe() {
    if (homeSection && slider) {
        homeSection.addEventListener('swiped', function(e) {
            if (e.detail.dir === 'left') {
                slider.go('>');
            } else if (e.detail.dir === 'right') {
                slider.go('<');
            }
        });
    }
}

function turnSidebarLinksToWhite() {
    if (navLinks) {
        for (let i = 0; i < navLinks.length; i++) {
            navLinks[i].classList.add('navigation__link--white');
        }
    }
    if (socialLinks) {
        for (let i = 0; i < socialLinks.length; i++) {
            socialLinks[i].classList.add('social__link--white');
        }
    }
}

function turnSidebarLinksToBlack() {
    if (navLinks) {
        for (let i = 0; i < navLinks.length; i++) {
            navLinks[i].classList.remove('navigation__link--white');
        }
    }
    if (socialLinks) {
        for (let i = 0; i < socialLinks.length; i++) {
            socialLinks[i].classList.remove('social__link--white');
        }
    }
}

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 editColorThemeOnSliderMounted() {
    if (slider && slides) {
        slider.on('mounted', function() {
            editColorTheme(slides[0]);
        })
    }
}

function editColorThemeOnSlideActive() {
    if (slider) {
        slider.on('active', function(e) {
            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`;
            }
        });
    }
}

// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------

// UTILS

enableActivePseudoClass();

// SLIDER

setUpSlider();
editColorThemeOnSliderMounted();
mountSlider();
changeSlideOnClick();
changeSlideOnSwipe();
editColorThemeOnSlideActive();
setCursorOnMove();