julienmonnerie/assets/js/app.js

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

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

// UTILS

const body = document.body;

// SPLIDE SLIDER

const slider = document.querySelector('.slider-section');
let splideSlider;
const slides = document.querySelectorAll('.splide__slide');
const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');

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

// SPLIDE SLIDER

function setUpSlider() {
    if (slider) {
        splideSlider = 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 (splideSlider) {
        splideSlider.mount();
    }
}

function goToNextSlideOnClick() {
    if (sidebar && splideSlider) {
        sidebar.addEventListener('click', function(e) {
            if (!e.target.matches('a') && !e.target.parentElement.matches('a')) {
                splideSlider.go('>');
            }
        });
    }
}

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

function turnSidebarLinksToWhite() {
    if (sidebarNavLinks) {
        for (let i = 0; i < sidebarNavLinks.length; i++) {
            sidebarNavLinks[i].classList.add('sidebar__nav-link--white');
        }
    }
    if (sidebarSocialLinks) {
        for (let i = 0; i < sidebarSocialLinks.length; i++) {
            sidebarSocialLinks[i].classList.add('sidebar__social-link--white');
        }
    }
}

function turnSidebarLinksToBlack() {
    if (sidebarNavLinks) {
        for (let i = 0; i < sidebarNavLinks.length; i++) {
            sidebarNavLinks[i].classList.remove('sidebar__nav-link--white');
        }
    }
    if (sidebarSocialLinks) {
        for (let i = 0; i < sidebarSocialLinks.length; i++) {
            sidebarSocialLinks[i].classList.remove('sidebar__social-link--white');
        }
    }
}

function editNavLinksColor(slide) {
    if (slide) {
        if (slide.getAttribute('data-logo-color') === 'white') {
            turnSidebarLinksToWhite();
        } else if (slide.getAttribute('data-logo-color') === 'black') {
            turnSidebarLinksToBlack();
        }
    }
}

function editNavLinksColorOnSliderMounted() {
    if (splideSlider && slides) {
        splideSlider.on('mounted', function() {
            editNavLinksColor(slides[0]);
        })
    }
}

function editNavLinksColorOnSlideActive() {
    if (splideSlider) {
        splideSlider.on('active', function(e) {
            editNavLinksColor(e.slide);
        });
    }
}

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

// UTILS

enableActivePseudoClass();

// SPLIDE SLIDER

setUpSlider();
editNavLinksColorOnSliderMounted();
mountSlider();
goToNextSlideOnClick();
changeSlideOnSwipe();
editNavLinksColorOnSlideActive();