fara-web/js/ui.js

//use strict;

//import * as Farapp from './fara.js';
let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/);

if (homeRE.test(window.location.href)) {
    document.addEventListener('readystatechange', () => {
        let nextimage = 0;
        let header = document.querySelector('header');
        slider();
        
        function slider() {
            /*** Fade in??*/
            //opacity = 1;

        let images = [
                'img/fara_background.jpg',
                //'img/fara_bg_2.jpg',
                'img/fara_bg_3.jpg',
                'img/fara_bg_4.jpg',
                'img/fara_bg_5.jpg',
                //'img/fara_bg_6.jpg',
                'img/fara_bg_7.jpg',
                'img/fara_bg_8.jpg',
                'img/fara_bg_9.jpg',
                'img/fara_bg_10.png',
                'img/fara_bg_11.jpg',
            ];
            
        if (nextimage >= images.length) {
            nextimage = 0;
        }
        header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
        setTimeout(slider, 2000);
       }
    });
}
/**
 * Apply active class to selected link...
 * @todo Inefficient!!
 */
document.addEventListener('readystatechange', () => {
    let navlinks = Array.from(document.querySelectorAll('#links a'));

    navlinks.forEach(element => {
        let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
        
        if (window.location.href.includes(ref)) {
            element.setAttribute('class', 'active');
        }
        if (homeRE.test(window.location.href)) {
            navlinks[0].setAttribute('class', 'active');
        }
    });
});
/**
 * Activate background on scroll for nav only
 * if not small screen
 */
window.addEventListener('scroll', event => {
    let nav = document.querySelector('#nav');
    let links = document.querySelector('#links');

    if (window.pageYOffset !== 0) {
        nav.classList.add('bg-white', 'border');
        nav.classList.remove('text-gray');
        links.classList.add('nav-dark');
        links.classList.remove('nav-light');
    }
    else {
        if (!document.querySelector('header').classList.contains('itin')) {
            nav.classList.add('text-gray');
            links.classList.remove('nav-dark');
            links.classList.add('nav-light');
        }
        nav.classList.remove('bg-white', 'border');
    }
});
/**
* Show horizontal nav on mobile
*/
document.addEventListener('readystatechange', () => {
    let menu = document.querySelector('i');

    menu.addEventListener('click', () => {
        document.querySelector('.side-nav').classList.remove('d-hide');
        document.querySelector('.side-nav').classList.remove('slide-out');
        document.querySelector('body').classList.add('opaque');
    });

    let close = document.querySelector('#close-nav');

    close.addEventListener('click', () => {
        document.querySelector('.side-nav').classList.add('d-hide');
        document.querySelector('body').classList.remove('opaque');
    })
})
/**
 * Open / close modal for videos
 * and apply video source
 */
window.addEventListener('load', () => {
    let modal = document.querySelector('#mod-vid');
    let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
    /**
     * Dynamically change video source
     * Note naming convention...
     */
    if (vidLinks.length) {
        let source = document.querySelector('source');
        let video = source.parentNode;
        let overlay = document.querySelector('.modal-overlay');

        vidLinks.forEach(a => {
            let aNodes = a.childNodes;
            // Hacky??
            let title = a.parentElement
                .nextElementSibling
                .firstElementChild
                .innerHTML
                .trim();
    
            a.addEventListener('click', () => {
                aNodes.forEach(n => {
                    if (n.src) {
                        let vStr = n.src
                        .substr(n.src.lastIndexOf('/')+1, n.src.length)
                        .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
                        
                        source.src = `assets/video/${vStr}`;
                        
                        video.load();
                    }
                });
                
                modal.classList.add('active');
                document.querySelector('.modal-title').classList.add('roboto');
                document.querySelector('.modal-title').innerHTML = title;
            });
        });
    
        let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
    
        close.addEventListener('click', () => {
            modal.classList.remove('active');
        });

        /* Close the modal when clicking on the
        *  overlay
        */
       overlay.addEventListener('click', () => {
            modal.classList.remove('active');
       })
    }
});