hookson-connect-base/src/_js/app.js

Master Theme

/////////////////////////////////////////////////////////
// Use the file bootstrap-pieces to exclude js plugins 
// that are not required (_js/src/lib/bootstrap-pieces.js)

//////////////////////////////////////////////////////////
//
//  Code conventions (tbc)
//
// Variable & Function Names: camelCase
// Variable Names: prefixed with hksn_{variableName}
// Function Names: prefixed with hksn_{functionName}
//////////////////////////////////////////////////////////


 
import './lib/bootstrap-pieces';
import './lib/libraries';
 


// Navbar Toggler

var hksn_menuBtn = document.querySelector('.navbar-toggler .navbar-icon'); 
var hksn_menu = document.querySelector('.navbar-collapse');
var hksn_navIcon = document.querySelector('.navbar-icon');
var hksn_navClose = document.querySelector('.navbar-toggler .navbar-close');
var hksn_body = document.querySelector('.body');

// Menu Toggle

hksn_menuBtn.addEventListener('click', function() {

    [hksn_menu, hksn_navClose].forEach( (item) => {
        item.classList.add('show')
    })
    hksn_body.classList.add('overflow-hidden');
    hksn_navIcon.classList.add('hide');

});

hksn_navClose.addEventListener('click', function() {

    hksn_menu.classList.remove('show');
    hksn_navIcon.classList.remove('show');
    hksn_navClose.classList.remove('show');
    hksn_navIcon.classList.remove('hide');
    hksn_body.classList.remove('overflow-hidden');

});




// YouTube Video

document.addEventListener("DOMContentLoaded", () => {
    var hksn_youtube = document.querySelectorAll( ".youtube-video" );

    for (var i = 0; i < hksn_youtube.length; i++) {
 
        // thumbnail image source.
        var hksn_source = "https://img.youtube.com/vi/"+ hksn_youtube[i].dataset.embed +"/sddefault.jpg"; 
        
        var hksn_image = new Image();
        hksn_image.src = hksn_source;
        hksn_image.alt = 'YouTube Video Cover Image';
        hksn_image.addEventListener( "load", function() {
            hksn_youtube[ i ].appendChild( hksn_image );
        }( i ) );

        hksn_youtube[i].addEventListener( "click", function() {
 
            var iframe = document.createElement( "iframe" );
     
                iframe.setAttribute( "frameborder", "0" );
                iframe.setAttribute( "allowfullscreen", "" );
                iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
     
                this.innerHTML = "";
                this.appendChild( iframe );
        } );
    }
});