xiaowang/assets/js/app.js

'use strict';

// ----------------------------------------------------------------------------
// DATA
// ----------------------------------------------------------------------------

// Get HTML root element
const root = document.documentElement;

// HOME NAVIGATION DISPLAY //

// Get navigation HTML elements
const navEl = document.querySelector('.home__nav');
const navLinks = document.querySelectorAll('.home__nav-link');
const navImage = document.querySelector('.home__nav-image');

// Declare empty circleTypes array for further use
const circleTypes = [];

// ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------

// Convert rem to pixels by getting font-size CSS property
function convertRemToPixels(rem) {
    let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
    return rem * fontSize;
}

// ----------------------------------------------------------------------------
// LOGIC
// ----------------------------------------------------------------------------

// HOME NAVIGATION DISPLAY //

// Calculate navigation grid inner width
function calculateNavGridInnerWidth() {
    if (root && navImage) {
        let navGridGapProperty = window.getComputedStyle(root).getPropertyValue('--home-nav-gap');
        let navGridGap = parseFloat(navGridGapProperty.slice(0, -3));
        return navImage.getBoundingClientRect().width + (convertRemToPixels(navGridGap) * 2);
    }
}

// Calculate navigation grid inner diagonal
function calculateNavGridInnerDiagonal() {
    return calculateNavGridInnerWidth() * Math.sqrt(2);
}

// Create new instance of CircleType for each navigation link, set radius and direction
function curveNavLinks() {
    if (navLinks.length !== 0 && circleTypes) {
        if (navLinks.length < 7) {
            for (let i = 0; i < (navLinks.length - 1); i++) {
                circleTypes[i] = new CircleType(navLinks[i]);
                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
            }
            for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
                circleTypes[i] = new CircleType(navLinks[i]);
                circleTypes[i].dir(-1);
                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
            }
        } else {
            for (let i = 0; i < (navLinks.length - 3); i++) {
                circleTypes[i] = new CircleType(navLinks[i]);
                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
            }
            for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
                circleTypes[i] = new CircleType(navLinks[i]);
                circleTypes[i].dir(-1);
                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
            }
        }
    }
}

// Set --home-nav-item-translation CSS property
function setNavItemTranslationProperty() {
    let navItemTranslation = (calculateNavGridInnerDiagonal() - calculateNavGridInnerWidth()) / 2;
    if (root) {
        root.style.setProperty('--home-nav-item-translation', navItemTranslation + 'px');
    }
}

// Set navigation grid display depending on number of links
function setNavGridDisplay() {
    if (navEl && navLinks.length !== 0) {
        if (navLinks.length === 2) {
            navEl.classList.add('home__nav--2-items');
        } else if (navLinks.length === 3) {
            navEl.classList.add('home__nav--3-items');
        } else if (navLinks.length === 4) {
            navEl.classList.add('home__nav--4-items');
        } else if (navLinks.length === 5) {
            navEl.classList.add('home__nav--5-items');
        } else if (navLinks.length === 6) {
            navEl.classList.add('home__nav--6-items');
        } else if (navLinks.length === 7) {
            navEl.classList.add('home__nav--7-items');
        } else if (navLinks.length === 8) {
            navEl.classList.add('home__nav--8-items');
        }
        for (let i = 0; i < navLinks.length; i++) {
            navLinks[i].classList.add('home__nav-link--visible');
        }
    }
}

// Edit navigation links radius and translation on window resize event
function editNavLinksOnResize() {
    window.addEventListener('resize', function(e) {
        if (navLinks.length !== 0 && circleTypes) {
            for (let i = 0; i < navLinks.length; i++) {
                circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
            }
        }
        setNavItemTranslationProperty();
    });
}

// Add wave up animation to a single letter and remove it on animationend event
function waveNavLetterUp(navLetter) {
    navLetter.classList.add('home__nav-letter--wave-up');
    navLetter.addEventListener('animationend', function(e) {
        navLetter.classList.remove('home__nav-letter--wave-up');
    });
}

// Add wave down animation to a single letter and remove it on animationend event
function waveNavLetterDown(navLetter) {
    navLetter.classList.add('home__nav-letter--wave-down');
    navLetter.addEventListener('animationend', function(e) {
        navLetter.classList.remove('home__nav-letter--wave-down');
    });
}

// Add wave up animation to every letters of a single link with a slight delay
function waveNavLinkUp(navLink) {
    let navLinkLetters = navLink.querySelectorAll('span');
    let animationDelay = 0;
    for (let i = 0; i < navLinkLetters.length; i++) {
        setTimeout(waveNavLetterUp, animationDelay, navLinkLetters[i]);
        animationDelay += 50;
    }
}

// Add wave down animation to every letters of a single link with a slight delay
function waveNavLinkDown(navLink) {
    let navLinkLetters = navLink.querySelectorAll('span');
    let animationDelay = 0;
    for (let i = 0; i < navLinkLetters.length; i++) {
        setTimeout(waveNavLetterDown, animationDelay, navLinkLetters[i]);
        animationDelay += 50;
    }
}

// Add wave (up or down) animation to every letters of each link on mouseover event
function waveNavLinksOnHover() {
    if (navLinks.length !== 0) {
        if (navLinks.length < 7) {
            for (let i = 0; i < (navLinks.length - 1); i++) {
                navLinks[i].addEventListener('mouseover', function(e) {
                    waveNavLinkUp(navLinks[i]);
                });
            }
            for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
                navLinks[i].addEventListener('mouseover', function(e) {
                    waveNavLinkDown(navLinks[i]);
                });
            }
        } else {
            for (let i = 0; i < (navLinks.length - 3); i++) {
                navLinks[i].addEventListener('mouseover', function(e) {
                    waveNavLinkUp(navLinks[i]);
                });
            }
            for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
                navLinks[i].addEventListener('mouseover', function(e) {
                    waveNavLinkDown(navLinks[i]);
                });
            }
        }
    }
}

// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------

// Enable CSS :active pseudo-class in Safari Mobile
document.addEventListener("touchstart", function() {},false);

// HOME NAVIGATION DISPLAY //

window.addEventListener('load', function() {
    curveNavLinks();
    setNavItemTranslationProperty();
    setNavGridDisplay();
    editNavLinksOnResize();
    waveNavLinksOnHover();
});