// Side Navigation let body = document.querySelector("body"); let sideNavigationToggle = document.querySelector(".side-navigation-toggle"); let sideNavigation = document.querySelector(".side-navigation"); const offClick = () => { sideNavigation.classList.toggle("scale-in"); sideNavigationToggle.setAttribute("aria-expanded", false); document.removeEventListener("click", offClick); } const toggleSideNav = (e) => { e.stopPropagation(); sideNavigation.classList.toggle("scale-in"); if(sideNavigation.classList.contains("scale-in")) { document.addEventListener("click", offClick) } var menuOpen = !sideNavigation.classList.contains("scale-in"); sideNavigationToggle.setAttribute("aria-expanded", !menuOpen); } sideNavigationToggle.addEventListener("click", toggleSideNav); var enterKeyCode = 13; var spaceKeyCode = 32; sideNavigationToggle.addEventListener("keyup", function(event) { if(event.keyCode == enterKeyCode || event.keyCode == spaceKeyCode) { toggleSideNav(); } }); // //Images reveal on scroll on mobile// window.addEventListener('scroll', reveal); function reveal(){ var reveals = document.querySelectorAll('.reveal'); if (typeof(reveals) != 'undefined' && reveals != null){ for(var i = 0; i < reveals.length; i++){ var windowheight = window.innerHeight; var revealtop = reveals[i].getBoundingClientRect().top; var revealpoint = 150; if(revealtop < windowheight - revealpoint){ reveals[i].classList.add('shown'); } else{ reveals[i].classList.remove('shown'); } }} } // Header Color Change const header = document.querySelector('.header'); const headerSecondary = document.querySelector('.header__inner__secondary'); const onScroll = () => { const scroll = document.documentElement.scrollTop if (scroll > 50) { header.classList.add("header-background"); headerSecondary.classList.add("header__inner__secondary-background"); } else { header.classList.remove("header-background"); headerSecondary.classList.remove("header__inner__secondary-background"); } }; window.addEventListener("scroll", onScroll); // Hero Heading Scroll Up On Load let heroHeading = document.querySelector(".hero__heading"); const showHeroHeading = () => { heroHeading.classList.add("active"); } window.addEventListener("load", showHeroHeading); // Five Functions Cards let functionsCards = Array.from(document.querySelectorAll(".functions-card")); const activateCard = function() { let functionsCardInner = this.querySelector(".functions-card-inner"); functionsCardInner.classList.add("active"); } const deactivateCard = function() { let functionsCardInner = this.querySelector(".functions-card-inner"); functionsCardInner.classList.remove("active"); } functionsCards.forEach(card => { card.addEventListener("mouseover", activateCard) }) functionsCards.forEach(card => { card.addEventListener("mouseleave", deactivateCard) }) // get keyboard focus to iframe lightbox videos, and give iframe a title attribute function makeFocus(event) { const title= event.currentTarget.getAttribute("title"); setTimeout(() => { $("iframe").each(function(index) { var iframe = $(this); if(iframe && iframe.parents('.iframe-lightbox').length) { console.log("Found lightbox iframe, giving focus"); iframe.focus(); debugger; iframe[0].setAttribute("title", title); } } ); },500); } /*function setIframeFocus(){ $("iframe").each(function(index) { var iframe = $(this); if(iframe && iframe.parents('.iframe-lightbox').length) { console.log("Found lightbox iframe, giving focus"); iframe.focus(); } } ); }*/ // Video Lightbox /*window.document.onkeydown = function(e) { if (!e) { e = event; } if (e.keyCode == 27) { lightbox_close(); } } let activeLightbox = document.querySelector("#lightbox1"); let lightboxVideo; let lightboxClose; const lightboxFade = document.getElementById('lightbox-fade'); const videoImages = Array.from(document.querySelectorAll(".content-block-visuals__video-image")); const videoLinks = (document.querySelectorAll(".videoLink")); videoImages.forEach(image => { image.addEventListener("click", setActiveLightbox); image.addEventListener("keypress", setActiveLightbox); }) videoLinks.forEach(link => { link.addEventListener("click", setActiveLightbox); link.addEventListener("keypress", setActiveLightbox); }) function setActiveLightbox() { activeLightbox = document.querySelector(`#${this.dataset.lightbox}`); lightboxVideo = activeLightbox.querySelector(".lightbox__video"); lightboxClose = activeLightbox.querySelector(".lightbox__boxclose"); lightbox_open(); } function lightbox_open() { activeLightbox.style.display = 'block'; lightboxFade.style.display = 'block'; lightboxVideo.play(); lightboxClose.addEventListener("click", lightbox_close); } function lightbox_close() { activeLightbox.style.display = 'none'; lightboxFade.style.display = 'none'; lightboxVideo.pause(); } lightboxFade.addEventListener("click", lightbox_close); */ //Hero parallax //https://codepen.io/patrickwestwood/pen/MyoBaY (function() { // Tutorial: https://medium.com/@patrickwestwood/how-to-make-multi-layered-parallax-illustration-with-css-javascript-2b56883c3f27 window.addEventListener('scroll', function(event) { var depth, i, layer, layers, len, movement, topDistance, translate3d; topDistance = window.pageYOffset; layers = document.querySelectorAll("[data-type='parallax']"); for (i = 0, len = layers.length; i < len; i++) { layer = layers[i]; depth = layer.getAttribute('data-depth'); movement = (topDistance * depth); translate3d = 'translate3d(0, ' + movement + 'px, 0)'; layer.style['-webkit-transform'] = translate3d; layer.style['-moz-transform'] = translate3d; layer.style['-ms-transform'] = translate3d; layer.style['-o-transform'] = translate3d; layer.style.transform = translate3d; } }); }).call(this);