window.addEventListener('load', (event) => {
const body = document.body
// If less than most tablets, set CSS var to window height.
let vh = '100vh'
// Check if iOS
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
if (isIOS && window.matchMedia("(max-width: 1024px)").matches) {
$('html').addClass('is-ios')
set100vhVar()
}
function set100vhVar() {
// If window size is iPad or smaller, then use JS to set screen height.
if (window.innerWidth && window.innerWidth <= 1024) {
vh = `${window.innerHeight}px`
}
document.documentElement.style.setProperty("--vh", vh)
}
const wh = window.innerHeight
const header = document.querySelector('.site-header')
const logo = document.querySelector('.site-logo')
const secondaryNav = document.querySelector('.secondary-nav')
const secondaryNavTrigger = document.querySelector('.secondary-nav-trigger')
let prevScrollPos = 0
/**
* Get header height
*/
function getHeaderHeight(){
document.documentElement.style.setProperty("--header-height", `${header.clientHeight}px`)
}
getHeaderHeight()
/**
* Get secondary nav height
*/
function getSecondaryNavHeight(){
document.documentElement.style.setProperty("--secondary-nav-height", `${secondaryNav.clientHeight}px`)
}
if(secondaryNav !== null) getSecondaryNavHeight()
/**
* Hide header if scrolling down, show if scrolling up
*/
window.addEventListener('scroll', () => {
const currentScrollPos = window.scrollY
//if you start scrolling add class
if (currentScrollPos > 0) {
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 ) {
header.classList.add('is-hidden')
logo.classList.add('is-visible')
if(secondaryNav !== null) secondaryNav.classList.remove('is-stacked')
overlay.classList.remove('is-active')
} else if (prevScrollPos >= currentScrollPos) {
header.classList.remove('is-hidden')
logo.classList.remove('is-visible')
if(secondaryNav !== null) secondaryNav.classList.add('is-stacked')
}
prevScrollPos = currentScrollPos
})
/**
* Submenu
*/
const menuItems = document.querySelectorAll('.menu-item-has-children')
const overlay = document.getElementById('overlay'
)
menuItems.forEach(item => {
item.addEventListener('mouseenter', function(){
item.classList.add('is-hovered')
overlay.classList.add('is-active')
})
item.addEventListener('mouseleave', function(){
item.classList.remove('is-hovered')
overlay.classList.remove('is-active')
})
})
/**
* Marquees
*/
const marquees = document.querySelectorAll('.block-marquee-posts-row')
let marqueesCardWidth
if (marquees.length > 0){
marqueesCardWidth = window.getComputedStyle(marquees[0]).getPropertyValue('--marquee-card-width')
}
marquees.forEach(marquee => {
const marqueeSpeed = Number(marquee.getAttribute('data-marquee-row-speed'))
let marqueePos = 0
let marqueeIntvl
//get vars
const items = marquee.getAttribute('data-marquee-row-items')
const wrapper = marquee.querySelector('.block-marquee-posts-row__wrapper')
//clone cards in marquee
const cards = wrapper.querySelectorAll('.card')
cards.forEach(card => {
wrapper.appendChild(card.cloneNode(true))
})
//calculate wrapper width
wrapper.style.width = `calc(${items*2}*${marqueesCardWidth})`
marqueeIntvl = setInterval(() => {
if (marqueePos > 50) {
wrapper.style.transform = `translateX(0%)`
marqueePos = 0
} else {
wrapper.style.transform = `translateX(-${marqueePos}%)`
}
marqueePos = marqueePos+marqueeSpeed
}, 0)
marquee.addEventListener('mouseover', function(){
clearInterval(marqueeIntvl)
})
marquee.addEventListener('mouseleave', function(){
marqueeIntvl = setInterval(() => {
if (marqueePos > 50) {
wrapper.style.transform = `translateX(0%)`
marqueePos = 0
} else {
wrapper.style.transform = `translateX(-${marqueePos}%)`
}
marqueePos = marqueePos+marqueeSpeed
}, 0)
})
})
/**
* Cards hover effect
*/
const cards = document.querySelectorAll('.card')
cards.forEach(card => {
const marqueeWrapper = card.closest('.block-marquee-posts-row')
card.addEventListener('mouseenter', function(){
this.classList.add('is-hovered')
if (marqueeWrapper){
marqueeWrapper.classList.add('is-hovered')
}
})
card.addEventListener('mouseleave', function(){
this.classList.remove('is-hovered')
if (marqueeWrapper){
marqueeWrapper.classList.remove('is-hovered')
}
})
})
/**
* Homepage Hero Banner parallax effect
*/
const parallaxImages = document.querySelectorAll('[data-banner-scroll-image]')
document.addEventListener('scroll', function(){
const scrollPosition = window.scrollY
parallaxImages.forEach(image => {
const imageSpeed = image.getAttribute('data-banner-scroll-image-parallax-speed')
const imagePos = scrollPosition * imageSpeed
image.style.transform = `translateY(-${imagePos}px)`
scrollBannerObserver.observe(image)
})
})
let scrollBannerObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting && (entry.target.getBoundingClientRect().top > 0)){
entry.target.classList.add('is-visible')
entry.target.style.opacity = entry.intersectionRatio
}
})
},
{
rootMargin: "0px 0px 0px 0px",
threshold: [0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1]
})
/**
* Tease height transition
*/
function updateTeaseHeight(tease){
const teaseHeight = tease.clientHeight
const teaseImg = tease.querySelector('.tease__img')
const teaseText = tease.querySelector('.tease__main')
const teaseTextHeight = teaseText.clientHeight
teaseImg.style.height = `${teaseHeight-teaseTextHeight}px`
teaseText.style.marginTop = `${teaseHeight-teaseTextHeight}px`
}
const teaseItems = document.querySelectorAll('.tease')
teaseItems.forEach(tease => {
updateTeaseHeight(tease)
})
/**
* Accordion
*/
const accordions = document.querySelectorAll('[data-accordion]')
accordions.forEach(accordion => {
const title = accordion.querySelector('[data-accordion-title]')
const content = accordion.querySelector('[data-accordion-content]')
title.addEventListener('click', function(){
[...accordions].forEach(item => { item.classList.remove('is-toggled'); item.querySelector('[data-accordion-content]').style.display = 'none'})
accordion.classList.toggle('is-toggled')
content.style.display = content.style.display == 'none' ? 'block' : 'none';
})
})
/**
* Secondary Nav
*/
let secondaryNavObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(!entry.isIntersecting){
secondaryNav.classList.add('is-visible')
} else {
secondaryNav.classList.remove('is-visible')
}
})
},
{
threshold: 1,
rootMargin: '-1px 0px 0px 0px'
})
if(secondaryNav !== null) secondaryNavObserver.observe(secondaryNavTrigger)
function getSecondaryNavButtonWidth(){
const secondaryNavButtonWidth = secondaryNav.querySelector('.secondary-nav__btn').clientWidth
secondaryNav.style.setProperty("--secondary-nav-button-width", `${secondaryNavButtonWidth}px`)
}
if(secondaryNav !== null) getSecondaryNavButtonWidth()
/**
* Window resize function callbacks
*/
const resizeHandler = function(){
// get header height
getHeaderHeight()
// if secondary nav exists
if(secondaryNav !== null) getSecondaryNavHeight()
if(secondaryNav !== null) getSecondaryNavButtonWidth()
//resize tease posts
teaseItems.forEach(tease => {
updateTeaseHeight(tease)
})
}
window.addEventListener('resize', resizeHandler)
})
