fara-web/js/fara.js

//use strict;
localStorage.setItem('online', true);

/**
 * Export constants!! 
 * @todo titles, vimeoVids
 */
export const titles = [

]

export const vimeoVids = {
    'thumb_prologo'     : '478632535',
    'thumb_viaggiatore' : '562518107',
    'thumb_faresi'      : '562529310',
    'thumb_piazza'      : '443587380',
    'thumb_antonio'     : '606341398',
    'thumb_francesco'   : '471773781',
    'thumb_nobili'      : '562534835',
    'thumb_rocco'       : '606346781',
    'thumb_alberto'     : '606372910',
    'thumb_disputa'     : '471537982',
    'thumb_duomo'       : '606343917',
    'thumb_loredana'    : '513080769',
    'thumb_pietro'      : '455576197',
    'thumb_castello'    : '562536148',
    'thumb_sabini'      : '542321131',
    'thumb_monumento'   : '606362546',
    'thumb_eva'         : '606352547',
    'thumb_toto'        : '606348670',
    'thumb_fuori'       : '606358668',
    'thumb_carro'       : '562262086',
};
/**
 * '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()
{
    let slideIndex = 0;
    carousel();

    function carousel() {
        let i;
        let slides = document.querySelectorAll(".slide");
        
        for (i = 0; i < slides.length; i++) {
            slides[i].classList.add("hide");
            slides[i].classList.remove("show");
        }
        slideIndex++;
        
        if (slideIndex > slides.length) {
            slideIndex = 1;
        }
        
        slides[slideIndex-1].classList.remove("hide");
        slides[slideIndex-1].classList.add("show");
        
        setTimeout(carousel, 2000); // Change image every 2 seconds
    }
}
/**
 * @todo Interactive SVG?
 * 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',

                '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');
        });
    }
}
/**
 * Get video source for given
 * link and open video page
 */
 export function openVideo(a)
 {
     let aNodes = a.childNodes;
     // Hacky??
     let title = a.parentElement
         .nextElementSibling
         .firstElementChild
         .innerHTML
         .trim();
             
     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';
 }
/**
 * 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');
    }
}
/**
 * Generate anchors in 'itinerario' to
 * track click position to go back to
 * when closing video page...
 */
export function genAnchors()
{
    let sections = document.querySelectorAll('.poi');
    let count = 0;

    sections.forEach(s => {
        let a = document.createElement('a');
        count++;

        a.id = 's' + new String(count);
        
        s.prepend(a);
    });
}