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 sliderSection = document.querySelector('.slider-section');
let slider;
const slides = document.querySelectorAll('.splide__slide');

// ----------------------------------------------------------------------------
// 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('<');
            }
        });
    }
}

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

// UTILS

enableActivePseudoClass();

// SLIDER

setUpSlider();
mountSlider();
changeSlideOnClick();
changeSlideOnSwipe();