julienmonnerie/assets/js/app.js

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

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

// UTILS

const body = document.body;

// SPLIDE SLIDER

const slider = document.querySelector('.slider-section');
let splideSlider;
const slides = document.querySelectorAll('.splide__slide');

// EXHIBITION IFRAME

const sidebar = document.querySelector('.sidebar');
const sidebarNavLinks = document.querySelectorAll('.sidebar__nav-link');
const sidebarEmbeddedNavLinks = document.querySelectorAll('.sidebar__nav-link--iframe');
const sidebarSocialLinks = document.querySelectorAll('.sidebar__social-link');
const exhibitionIframe = document.querySelector('.exhibition');

// NAV LINKS TARGET

const mediaQueries = {
    remTabletWidth: 48,
    remDesktopWidth: 62
}

// ----------------------------------------------------------------------------
// 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,
            fixedWidth: '100vw',
            fixedHeight: '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);
        });
    }
}

// EXHIBITION IFRAME

function slimDownSidebar() {
    if (sidebar && !sidebar.classList.contains('sidebar--slimmed')) {
        sidebar.classList.add('sidebar--slimmed');
    }
}

function enlargeSidebar() {
    if (sidebar) {
        sidebar.classList.remove('sidebar--slimmed');
    }
}

function hideSlider() {
    if (slider) {
        slider.classList.add('slider-section--hidden');
    }
}

function showSlider() {
    if (slider) {
        slider.classList.remove('slider-section--hidden');
    }
}

function enableExhibitionIframe() {
    if (exhibitionIframe) {
        exhibitionIframe.classList.add('exhibition--visible');
    }
}

function disableExhibitionIframe() {
    if (exhibitionIframe && slider) {
        exhibitionIframe.classList.remove('exhibition--visible');
    }
}

function loadExhibitionIframe() {
    if (sidebarEmbeddedNavLinks.length > 0 && exhibitionIframe) {
        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
            sidebarEmbeddedNavLinks[i].addEventListener('click', function(e) {
                if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
                    exhibitionIframe.addEventListener('load', function(e) {
                        turnSidebarLinksToBlack();
                        slimDownSidebar();
                        hideSlider();
                        enableExhibitionIframe();
                    });
                }
            });
        }
    }
}

// NAV LINKS TARGET

function setNavLinksIframeTarget() {
    if (sidebarEmbeddedNavLinks) {
        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
            sidebarEmbeddedNavLinks[i].setAttribute('target', 'exhibition');
        }
    }
}

function setNavLinksBlankTarget() {
    if (sidebarEmbeddedNavLinks) {
        for (let i = 0; i < sidebarEmbeddedNavLinks.length; i++) {
            sidebarEmbeddedNavLinks[i].setAttribute('target', '_blank');
        }
    }
}

function editNavLinksTarget() {
        if (window.innerWidth >= convertRemToPixels(mediaQueries.remDesktopWidth)) {
            setNavLinksIframeTarget();
        } else {
            setNavLinksBlankTarget();
        }
}

function editNavLinksTargetOnResize() {
    window.addEventListener('resize', function(e) {
        editNavLinksTarget();
    })
}

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

// UTILS

enableActivePseudoClass();

// SPLIDE SLIDER

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

// EXHIBITION IFRAME

loadExhibitionIframe();

// NAV LINKS TARGET

editNavLinksTarget();
editNavLinksTargetOnResize();