fara-web/js/fara.js

//use strict;
/**
 * 'Slide' background images
 * in landing page
 * @todo Preload iamges?? https://stackoverflow.com/questions/3646036/preloading-images-with-javascript
 */
export function sliderBg()
{
    let nextimage = 0;
    let header = document.querySelector('header');
    slider();
    
    function slider() {
        /*** Fade in??*/
        //opacity = 1;

    let images = [
            'img/lp-bg/fara_bg_1.jpg',
            'img/lp-bg/fara_bg_2.jpg',
            'img/lp-bg/fara_bg_3.jpg',
            'img/lp-bg/fara_bg_4.jpg',
            'img/lp-bg/fara_bg_5.jpg',
        ];
        
    if (nextimage >= images.length) {
        nextimage = 0;
    }
    header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
    setTimeout(slider, 2000);
   }
}
/**
 * @todo
 * Simple slideshow (Credits page) 
 */
export function slideshow()
{
    // Write me...
}
/**
 * @todo
 * The canvas should be drawn into an overlay
 * container (always fullscreen)
 */
export function interactiveMap() 
{
    let canvas = document.createElement('canvas');

    let ctx = canvas.getContext('2d');

    const img = new Image;
    img.src = 'img/mappa.png';

    img.onload = () => {
        ctx.drawImage(img, 0, 0);
    }
}
/**
 * Menu keys for accessibility
 */
export function menuKeys() 
{
    document.addEventListener('keypress', e => {
        let keyCode = e.code;

        if (keyCode.includes('Digit')) {
            let numCode = keyCode.replace('Digit', '');

            let menuK = {
                '1' : 'itinerario.html',
                '2' : 'progetto.html',
                '3' : 'news.html',
                '4':  'credits.html',
            };

            for (let k in menuK) {
                if (k === numCode) 
                    window.location.href = menuK[k];
            }
        }
    });
}
/**
 * Apply active class to nav links
 * @todo Inefficient?
 */
export function activeNav()
{
    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');
        }
    });
}
/**
 * Show vertical nav on mobile
 */
export function mobileNav()
{
    let menu = document.querySelector('i');

    if (menu) {
        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
 */
export function openVideo(a)
{
    /**
    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) {
        vidLinks.forEach(a => {
        */

    let aNodes = a.childNodes;
    // Hacky??
    let title = a.parentElement
        .nextElementSibling
        .firstElementChild
        .innerHTML
        .trim();
    
    console.log(aNodes);
    let vStr = '';

    aNodes.forEach(n => {
        if (n.src) {
            vStr = n.src;
            vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
                .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
        }
    });

    localStorage.setItem('vidURI', vStr);
    localStorage.setItem('vidTitle', title);
    /**
     * Go to video page
     */
    window.location.href = 'video.html';
    /* Close the modal when clicking on the
    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');
    });

    *  overlay
    overlay.addEventListener('click', () => {
        modal.classList.remove('active');
    })
    */
}
/**
 * Activate background on scroll for nav only
 * if not small screen
 */
export function navOnScroll()
{
    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');
    }
}