gistfile1.js

console.log('hello from nav.js');
let triggers;
let hero = $('.hero-color')[0];
const navBkgrnd = $('.nav')[0];
const nav = $('.nav-color');
const navCTA = $('.nav-cta-btn')[0];
const navBurger = $('.bar1, .bar2, .bar3');
const nav1 = $('#nav-logo-v1')[0]; // previously white
const nav2 = $('#nav-logo-v2')[0]; //previously black
$(document).ready(function(){
    console.log('ready!')
    handlePageRefresh();
    // updateNav();
    $(window).scroll(updateNav);
    $(window).scroll(showNavCTA);
    onresize = function(){
        triggers = getNavTriggers();
        // need to make sure video doesn't stop playing after exiting fullscreen
        if ( document.webkitFullscreenElement == null ) {
            location.reload();
        }
    }
});
window.onload = function(){
    correctScrollValue()
    setTriggerVariable()
    updateNav();
}
function correctScrollValue(){
    console.log('loaded!')
    console.log('hello from correctScrollValue... ')
    let testScroll = $('.scroll');
    for(var i = 0; i < testScroll.length; i++){
        console.log(JSON.stringify(testScroll[i].getBoundingClientRect()));
    }
}
/*
For navigation triggers to work they must be retrieved while window is at top of screen.
If page refreshes not at 0,0 it can mess up the navigation trigger locations.
*/
function handlePageRefresh(){
    window.addEventListener("beforeunload", function(){
        window.scrollTo(0, 0)
    });
}
/*
We don't want the page to refresh if the browser resizes due to video going into full screen
*/
function isVideoFullScreen(){
    return !document.webkitFullscreenElement != null;
}
/*
Takes in the color trigger objects created/saved by getNavTriggers and updates
the navigation by utilizing the navChange function stored within these objects
*/
function updateNav(){
    var nav = $('.nav')[0]; // This var is unused. Do we need it?
    for(var i = 0; i < triggers.length; i++){
        if ( $(this).scrollTop() >= triggers[i].startPoint ){
            triggers[i].navChange();
        }
    }
}
function showNavCTA(){
    navCTA.style.visibility = "visible";
    navCTA.style.opacity = 1;
}
function setTriggerVariable(){
    console.log('setting triggers... ')
    triggers = getNavTriggers();
}
function getNavTriggers(){
    let divs = $('.scroll');
    console.log('divs... ')
    console.log(divs);
    let navTriggers = [];
    for(var i = 0; i < divs.length; i++){
        console.log('Hello from getNavTriggers ' + JSON.stringify(divs[i].getBoundingClientRect()))
        let trigger = {
            elementName: divs[i].className,
            top: divs[i].getBoundingClientRect().top,
            startPoint : ( divs[i].getBoundingClientRect().top - $(window).scrollTop() ) - 100,
            color: extractSlideBkColor(window.getComputedStyle(divs[i], null)["background"]),
            passed: false
        }
        navTriggers.push(trigger);
    }
    addColorChanges(navTriggers);
    return navTriggers;
}
function addColorChanges(triggers){
    console.log('addColorChanges called! ');
    checkColor(triggers);
    for(var i = 0; i < triggers.length; i++){
        if( triggers[i].backgroundType == "gradient" ){
            triggers[i].navChange = changeToGradient;
        } else if ( triggers[i].backgroundType == "dark" ){
            triggers[i].navChange = changeToWhite;
        } else if ( triggers[i].backgroundType == "light" ){
            triggers[i].navChange = changeToBlack;
        }
    }
}
function checkColor(triggers){
    console.log('Checking color type ');
    for(var i = 0; i < triggers.length; i++){
        if( triggers[i].color.search('gradient') != -1 ){
            triggers[i].backgroundType = "gradient";
            console.log(triggers[i].backgroundType);
        } else if (triggers[i].color != 'rgb(255, 255, 255)' && triggers[i].color != 'rgb(238, 241, 246)'){
            triggers[i].backgroundType = "dark";
            console.log(triggers[i].backgroundType);
        } else if (triggers[i].color == 'rgb(238, 241, 246)'){
            triggers[i].backgroundType = "light";
            console.log(triggers[i].backgroundType);
        } else if (triggers[i].color == 'rgb(255, 255, 255)' || 'rgb(238, 241, 246)'){
            triggers[i].backgroundType = "light";
            console.log(triggers[i].backgroundType);
        }
    }
}
function changeToWhite(){
    // navBkgrnd.style.background = rgb2hex(this.color) + 'F0';
    navBkgrnd.style.background = this.color;
    nav2.style.opacity = 0;
    nav1.style.opacity = 1;
    for(var i = 0; i < navBurger.length; i++){
        navBurger[i].style.background = "#ffffff";
    }
    for(var i = 0; i < nav.length; i++){
        nav[i].style.color = "#ffffff";
    }
}
function changeToGradient(){
    navBkgrnd.style.background = this.color;
    nav2.style.opacity = 0;
    nav1.style.opacity = 1;
    for(var i = 0; i < navBurger.length; i++){
        navBurger[i].style.background = "#ffffff";
    }
    for(var i = 0; i < nav.length; i++){
        nav[i].style.color = "#ffffff";
    }
}
function changeToBlack(){
    navBkgrnd.style.background = this.color;
    nav2.style.opacity = 1;
    nav1.style.opacity = 0;
    for(var i = 0; i < navBurger.length; i++){
        navBurger[i].style.backgroundColor = "black";
    }
    for(var i = 0; i < nav.length; i++){
        nav[i].style.color = "black";
    }
}
function burgerToggle(x) {
    x.classList.toggle("change-burger");
    toggleBurgerOpenClose();
}
// TODO fix hardcoded height numbers should be flexible (should prob refactor to do a css toggle)
function toggleBurgerOpenClose(){
    var slide = $('.burger-content')[0];
    var menu = slide.children[0];
    var startState = window.getComputedStyle(slide, null)["height"]
    // var startState = window.getComputedStyle(slide, null).getPropertyValue("height");
    if( startState == '0px' ){
        // slide.style.minHeight =
        slide.classList.remove('slide-inactive');
        menu.classList.remove('menu-inactive');
        slide.classList.toggle('slide-active');
        menu.classList.toggle('menu-active');
    } else {
        slide.classList.remove('slide-active');
        menu.classList.remove('menu-active');
        slide.classList.toggle('slide-inactive');
        menu.classList.toggle('menu-inactive');
    }
}
function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
/*
Helper function is passed a background property string and parses
the string to extract only the rgba color value
Color value is then used to update nav background on change
*/
function extractSlideBkColor(color){
    console.log('Extracting color... ');
    let newColor = color.slice(color.indexOf('rgb'), color.lastIndexOf(')') + 1);
    if( newColor.search('url') != -1 ){
        let cutUrl = newColor.slice(newColor.indexOf('url'), newColor.lastIndexOf(')') + 1 );
        let colorOnly = newColor.replace(cutUrl, "");
        let finalColor = colorOnly.slice(colorOnly.indexOf('rgb'), colorOnly.lastIndexOf(')') + 1);
        return finalColor;
    } else { return newColor; }
};