import './blocks/accordion.js';
import './blocks/carousel.js';
import './blocks/marquee.js';
import './blocks/page-title-banner.js';
import './blocks/secondary-nav.js';
import './blocks/tabs.js';
import './blocks/tease.js';
/**
* Global scripts
*/
window.addEventListener('load', (event) => {
/**
* Vars
*/
//functional
let vh = '100vh'
let currentScrollPos = 0
let prevScrollPos = 0
let menuToggledScrollPos
let menuIsOpen = false
let desktopMenuIsOpen = false
let mobileMenuIsOpen = false
//media query
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
const isDesktop = window.matchMedia('(min-width: 80rem)')
// DOM elements
const body = document.body
const header = document.querySelector('.site-header')
const logo = document.querySelector('.site-logo')
const a11y_ariaexpanded = document.querySelectorAll('[aria-expanded="false"]')
const mainNav = document.getElementById('site-header-main-nav')
const menuItems = document.querySelectorAll('#site-header-main-nav > ul > .menu-item-has-children > a')
const menuBtn = document.getElementById('menu-btn')
const overlay = document.getElementById('overlay')
const menuMobile = document.getElementById('menu-mobile')
const pageWrapper = document.getElementById('site-content-wrapper')
const accordionMenuItems = document.querySelectorAll('[data-toggle-menu-items]')
const footer = document.getElementById('site-footer')
/**
* Throttle
*/
function throttle(mainFunction, delay) {
let timerFlag = null
return (...args) => {
if (timerFlag === null) {
mainFunction(...args)
timerFlag = setTimeout(() => {
timerFlag = null
}, delay)
}
}
}
/**
* Check if iOS, then set --vh
*/
if (isIOS && window.matchMedia("(max-width: 1024px)").matches) {
document.documentElement.classList.add('is-ios')
}
function set100vh() {
// If window size is iPad or smaller, then use JS to set screen height.
if (isIOS && window.matchMedia("(max-width: 1024px)").matches) {
vh = `${window.innerHeight}px`
document.documentElement.style.setProperty("--vh", vh)
}
}
set100vh()
/**
* WAI-ARIA toggle aria-expanded
*/
function updateAriaExpanded(item){
const ariaexpanded = item.getAttribute('aria-expanded')
if (ariaexpanded == 'true') {
item.setAttribute('aria-expanded', 'false')
} else {
item.setAttribute('aria-expanded', 'true')
}
}
a11y_ariaexpanded.forEach((item) => {
item.addEventListener('click', function () {
updateAriaExpanded(this)
})
})
/**
* Get header height
*/
function getHeaderHeight(){
document.documentElement.style.setProperty("--header-height", `${header.clientHeight}px`)
}
getHeaderHeight()
/**
* Hide header if scrolling down, show if scrolling up
*/
window.addEventListener('scroll', () => {
currentScrollPos = window.scrollY
// const currentScrollPos = window.scrollY
//if you start scrolling add class
if (currentScrollPos > 0 && !menuIsOpen) {
body.classList.add('is-scrolled')
} else{
body.classList.remove('is-scrolled')
}
// if scrolling down, hide header and position logo to the left
// if scrolling up, show header and logo in initial position
if (prevScrollPos > 0 && prevScrollPos < currentScrollPos && !menuIsOpen) {
header.classList.add('is-hidden')
logo.classList.add('is-visible')
overlay.classList.remove('is-active')
} else if (prevScrollPos >= currentScrollPos && !menuIsOpen) {
header.classList.remove('is-hidden')
logo.classList.remove('is-visible')
}
prevScrollPos = currentScrollPos
})
/**
* Menu
*/
function toggleMenuSharedElements(toggle = true){
if (!menuIsOpen) {
body.classList.add('has-menu-toggled')
menuBtn.classList.add('is-active')
menuBtn.classList.add('is-toggled')
overlay.classList.add('is-active')
menuIsOpen = true
} else if (toggle) {
body.classList.remove('has-menu-toggled')
menuBtn.classList.remove('is-active')
menuBtn.classList.remove('is-toggled')
overlay.classList.remove('is-active')
menuIsOpen = false
}
}
// when menu is toggled, set margin top based
// on scrolled px and restore scroll after menu is closed
function setScrolledMarginContent(scrolled){
if (mobileMenuIsOpen || desktopMenuIsOpen) {
pageWrapper.style.marginTop = 0
document.body.scrollTop = menuToggledScrollPos
document.body.scrollTop = menuToggledScrollPos
document.documentElement.scrollTop = menuToggledScrollPos
} else {
pageWrapper.style.marginTop = `-${scrolled}px`
}
menuToggledScrollPos = scrolled
}
function toggleMobileMenu(forceClosing = null){
toggleMenuSharedElements()
if (forceClosing) {
menuMobile.classList.remove('is-toggled')
} else {
menuMobile.classList.toggle('is-toggled')
// if (menuIsOpen) {
// menuMobile.animate(
// [
// { height: '0px' },
// { height: `${menuMobile.clientHeight}px` }
// ],
// {
// duration: 500,
// easing: 'ease-out'
// }
// )
// } else {
// menuMobile.animate(
// [
// { height: '0px' },
// { height: `${menuMobile.clientHeight}px` }
// ],
// {
// duration: 500,
// easing: 'ease-out'
// }
// )
// }
}
closeAllAccordionMenuItems()
// set margin on page wapper
// and restore scrolled position when you close menu
setScrolledMarginContent(currentScrollPos)
menuIsOpen ? mobileMenuIsOpen = true : mobileMenuIsOpen = false
}
let previousClickedItem
function toggleDesktopMenu(clickedItem = null){
if (clickedItem == null) {
toggleMenuSharedElements()
openSubMenu()
} else if (clickedItem == previousClickedItem || previousClickedItem == null || !desktopMenuIsOpen) {
// if desktop menu is not toggled or you are toggling menu item
toggleMenuSharedElements()
openSubMenu(clickedItem)
} else if (clickedItem != previousClickedItem && clickedItem != null){
// if you are swapping submenu
openSubMenu(clickedItem, false)
}
// assign previous clicked item to currently clicked item
previousClickedItem = clickedItem
// toggle/remove class on all menu items
menuItems.forEach((item) => {
const itemListItem = item.parentElement
if (itemListItem != clickedItem) {
itemListItem.classList.remove('is-toggled')
} else {
itemListItem.classList.toggle('is-toggled')
}
})
// set margin on page wapper
// and restore scrolled position when you close menu
setScrolledMarginContent(currentScrollPos)
menuIsOpen ? desktopMenuIsOpen = true : desktopMenuIsOpen = false
}
function toggleMenuWhenResized(){
// if mobile menu is open and window resized to desktop
if (mobileMenuIsOpen && isDesktop.matches){
toggleMenuSharedElements()
toggleMobileMenu(true)
menuIsOpen = false
}
// if desktop menu is open and window resized to mobile
if (desktopMenuIsOpen && !isDesktop.matches){
toggleMenuSharedElements()
toggleDesktopMenu()
menuIsOpen = false
}
}
// animate desktop dropdown and toggle
function openSubMenu(clickedItem, animate = true){
let submenu
if (clickedItem) {
//if there's a clicked item get submenu descendante
submenu = clickedItem.querySelector('.site-header-navbar-submenu-0')
} else {
// if there isn't a clicked item (eg: X button), select visible menus
submenu = document.querySelector('.site-header-navbar-submenu-0.is-visible')
clickedItem = document.querySelector('#site-header-main-nav .menu-item-has-children.is-toggled')
console.log(clickedItem)
}
if (clickedItem.classList.contains('is-toggled')) {
// if desktop menu is already open and click on already toggled item
// remove classes and animate submenu to 0px height
mainNav.classList.remove('is-toggled')
submenu.classList.add('is-closing')
submenu.animate(
[
{ height: `${submenu.clientHeight}px` },
{ height: 0 }
],
{
duration: 250,
delay: 250,
easing: 'ease-out'
}
)
// timeout animation
setTimeout(() => {
submenu.classList.remove('is-visible')
submenu.classList.remove('is-closing')
}, 500);
} else if (!animate){
// if desktop menu is open and click on item not yet toggled
// swap submenu container without animations
[...document.querySelectorAll('.site-header-navbar-submenu-0')].forEach(s=>{
if(submenu != s){
s.classList.remove('is-visible')
} else {
submenu.classList.add('is-visible')
}
})
} else {
// if desktop menu is not open and click on item
// show and animate submenu
submenu.classList.add('is-visible')
submenu.animate(
[
{ height: 0 },
{ height: `${submenu.clientHeight}px` }
],
{
duration: 250,
easing: 'ease-out'
}
)
setTimeout(() => {
mainNav.classList.add('is-toggled')
}, 500);
}
}
function cbToggleDesktopMenu(event){
const item = event.target.parentElement
toggleDesktopMenu(item)
}
// Throttle the fetchData function with a delay of 5000 ms
const throttledtoggleDesktopMenu = throttle(cbToggleDesktopMenu, 500)
menuItems.forEach(item => {
item.addEventListener('click', throttledtoggleDesktopMenu)
})
menuBtn.addEventListener('click', function(){
if (isDesktop.matches) {
console.log('test')
toggleDesktopMenu()
} else {
toggleMobileMenu()
}
})
//close all accordion menu items
function closeAllAccordionMenuItems(){
accordionMenuItems.forEach(item => {
item.parentElement.parentElement.classList.remove('is-toggled')
item.parentElement.parentElement.setAttribute('aria-expanded', 'false')
})
}
accordionMenuItems.forEach(button => {
button.addEventListener('click', function(){
// get <li>
const clickedItem = this.parentElement.parentElement
// get nesting of clicked item (from button)
const nesting = this.getAttribute('data-toggle-menu-items')
if (nesting == 0 && clickedItem.classList.contains('is-toggled')) {
// if is first level and already opened,
// when clicked close all items
closeAllAccordionMenuItems()
} else {
// when you click on item, close other items on same nesting level
// [...document.querySelectorAll(`[data-toggle-menu-items="${nesting}"]`)].forEach(i=>{if(this != i){i.parentElement.parentElement.classList.remove('is-toggled')}})
// toggle clicked item
clickedItem.classList.toggle('is-toggled')
}
})
})
// if click on overlay close menu
overlay.addEventListener('click', function(){
// toggleMenuSharedElements()
if (isDesktop.matches) {
toggleDesktopMenu()
} else {
toggleMobileMenu()
}
})
/**
* Back to top
*/
document.getElementById('backToTop').addEventListener('click', function(){
window.scrollTo({
top: 0,
behavior: 'smooth'
})
})
/**
* Footer observer
*/
//when footer is in viewport, restore logo position
let footerObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting){
body.classList.add('footer-in-viewport')
} else {
body.classList.remove('footer-in-viewport')
}
})
},
{
rootMargin: '0px'
})
footerObserver.observe(footer)
/**
* Window resize function callbacks
*/
const resizeHandler = function(){
// set vh
set100vh()
// get header height
getHeaderHeight()
// when resizing disable menu if toggled
toggleMenuWhenResized()
}
window.addEventListener('resize', resizeHandler)
/**
* Keyboard related functions and events
*/
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ('key' in evt) {
isEscape = (evt.key === 'Escape' || evt.key === 'Esc');
} else {
isEscape = (evt.keyCode === 27);
}
// if menu is open and press escape, toggle desktop or mobile menu
// based on media query
if (isEscape && menuIsOpen) {
toggleMenuSharedElements()
if (isDesktop.matches) {
toggleDesktopMenu()
} else {
toggleMobileMenu()
}
}
}
})
