Manage the visual effects on this site:
';\r\n siteSettings.fx.forEach(i => {\r\n settingsModalContent.appendChild(i.controller);\r\n });\r\n }\r\n}\r\n\r\nexport const siteSettings = {\r\n reducedMotionPref: detectReducedMotionPref.matches,\r\n desktopSideHeaderLayout: document.querySelector('body.site-layout.side-header-layout') != null,\r\n fx: [],\r\n fxAdd: (fxType, fxEnable, fxCallback = null) => {\r\n let exists = false;\r\n siteSettings.fx.forEach(i => {\r\n if(i.type == fxType) exists = true;\r\n });\r\n if(!exists) {\r\n siteSettings.fx.push({\r\n type: fxType,\r\n enabled: fxEnable,\r\n callback: fxCallback,\r\n controller: document.createElement('div')\r\n });\r\n let thisIndex = siteSettings.fx.length - 1,\r\n thisFX = siteSettings.fx[thisIndex];\r\n thisFX.controller.setAttribute('class','form-check form-switch');\r\n let checkbox = document.createElement('input');\r\n checkbox.setAttribute('id',`site-settings--fx--${thisIndex}`);\r\n checkbox.setAttribute('class','form-check-input');\r\n checkbox.setAttribute('type','checkbox');\r\n checkbox.setAttribute('role','switch');\r\n if(fxEnable) checkbox.setAttribute('checked',true);\r\n checkbox.addEventListener('click',() => {\r\n siteSettings.fxToggle(thisFX.type,checkbox.checked);\r\n });\r\n thisFX.controller.appendChild(checkbox);\r\n let label = document.createElement('label');\r\n label.setAttribute('for',`site-settings--fx--${thisIndex}`);\r\n label.setAttribute('class','form-check-label');\r\n label.innerHTML = thisFX.type;\r\n thisFX.controller.appendChild(label);\r\n }\r\n if(fxCallback) fxCallback(fxEnable);\r\n // add settings links if not already added\r\n if(!settingsLinksAdded) addSettingsLinks();\r\n // refresh modal content\r\n refreshModalContent();\r\n },\r\n fxToggle: (fxType, mode) => {\r\n siteSettings.fx.forEach(i => {\r\n if(i.type == fxType) {\r\n i.enabled = mode;\r\n if(i.callback) i.callback(mode);\r\n }\r\n });\r\n }\r\n};\r\n\r\n// nav/search states\r\n\r\nexport const mainNavigation = {\r\n active: false,\r\n setActive: (mode) => {\r\n mainNavigation.active = mode;\r\n }\r\n};\r\n\r\nexport const megaMenuNavigation = {\r\n mobileActive: false,\r\n setMobileActive: (mode) => {\r\n megaMenuNavigation.mobileActive = mode;\r\n },\r\n desktopActive: false,\r\n setDesktopActive: (mode) => {\r\n megaMenuNavigation.desktopActive = mode;\r\n }\r\n};\r\n\r\nexport const headerSearch = {\r\n active: false,\r\n setActive: (mode) => {\r\n headerSearch.active = mode;\r\n }\r\n};","// imports\r\nimport { watchViewport } from 'tornis';\r\nimport { breakPoint } from './config';\r\nimport { ResizeObserver as Polyfill } from '@juggle/resize-observer';\r\nconst ResizeObserver = window.ResizeObserver || Polyfill;\r\n\r\nimport { mainNavigation, megaMenuNavigation, headerSearch } from './global';\r\n\r\n\r\nlet $body = document.querySelector('body.site-layout'),\r\n $pageContentArea = document.querySelector('#page-content-area'),\r\n buffer = 10,\r\n headerMode = 'default',\r\n transparentHeader = false,\r\n headerAdjusted = false,\r\n threshold = 80,\r\n bodyHeight = 0,\r\n lastScrollY = 0,\r\n vw = 0,\r\n t;\r\n\r\nconst eventHeaderHide = new Event('headerHide'),\r\n eventHeaderShow = new Event('headerShow'),\r\n eventHeaderMinify = new Event('headerMinify'),\r\n eventHeaderExpand = new Event('headerExpand');\r\n\r\n// listen for custom event to update vw\r\nwindow.addEventListener('window-resize', (e) => {\r\n //alert(`w: ${e.detail.w()}, h: ${e.detail.h()}`);\r\n vw = e.detail.w();\r\n});\r\n\r\n// function to get current headerMode\r\n\r\nconst getHeaderMode = () => {\r\n let m = 'default';\r\n transparentHeader = $body.classList.contains('header-transparent');\r\n if($body.classList.contains('header-minifies')) {\r\n m = 'header-minifies';\r\n } else if($body.classList.contains('header-smart')) {\r\n m = 'header-smart';\r\n }\r\n if($body.classList.contains('side-header-layout') && vw >= breakPoint.LG) {\r\n m = 'default';\r\n transparentHeader = false;\r\n }\r\n return m;\r\n};\r\n\r\n\r\n// scroll functions\r\n\r\nconst toggleHeader = (mode) => { // true = show/expand, false = hide/minify\r\n if(headerMode == 'header-minifies') {\r\n if(mode && headerAdjusted) {\r\n $body.classList.remove('header-minified');\r\n headerAdjusted = false;\r\n window.dispatchEvent(eventHeaderExpand);\r\n } else if(!mode && !headerAdjusted) {\r\n $body.classList.add('header-minified');\r\n headerAdjusted = true;\r\n window.dispatchEvent(eventHeaderMinify);\r\n }\r\n } else if(headerMode == 'header-smart') {\r\n if(mode && headerAdjusted) {\r\n $body.classList.remove('header-hidden');\r\n headerAdjusted = false;\r\n window.dispatchEvent(eventHeaderShow);\r\n } else if(!mode && !headerAdjusted) {\r\n $body.classList.add('header-hidden');\r\n headerAdjusted = true;\r\n window.dispatchEvent(eventHeaderHide);\r\n }\r\n }\r\n};\r\n\r\n// define a watched function, to be run on each update\r\nconst updateScroll = ({scroll, size}) => {\r\n const prevHeaderMode = headerMode;\r\n if (size.changed) {\r\n // get header mode\r\n headerMode = getHeaderMode();\r\n // set threshold\r\n threshold = parseInt(getComputedStyle($pageContentArea,null).getPropertyValue('padding-top')) - buffer;\r\n }\r\n if (scroll.changed || prevHeaderMode != headerMode) {\r\n // page scrolled at all?\r\n $body.classList.toggle('page-scrolled', scroll.top > 0);\r\n // transparent header to opaque?\r\n $body.classList.toggle('header-transparent--scrolled', transparentHeader && scroll.top > (threshold * 2));\r\n // do smart or minify header changes?\r\n if(headerMode == 'header-minifies' || headerMode == 'header-smart') {\r\n if(scroll.top > (lastScrollY + buffer) && scroll.top > threshold && !headerSearch.active && !mainNavigation.active && !megaMenuNavigation.mobileActive && !megaMenuNavigation.desktopActive) {\r\n clearTimeout(t);\r\n t = setTimeout(toggleHeader(false), 200);\r\n lastScrollY = scroll.top;\r\n } else if(scroll.bottom < bodyHeight && (scroll.top < (lastScrollY - buffer) || scroll.top <= threshold)) {\r\n clearTimeout(t);\r\n t = setTimeout(toggleHeader(true), 200);\r\n lastScrollY = scroll.top;\r\n }\r\n } else {\r\n clearTimeout(t);\r\n $body.classList.remove('header-hidden','header-minified');\r\n }\r\n }\r\n}\r\n\r\n// bind the watch function\r\nwatchViewport(updateScroll);\r\n\r\n// also watch $body for resize caused by expanders etc.\r\nconst ro = new ResizeObserver(() => {\r\n bodyHeight = $body.offsetHeight;\r\n});\r\nro.observe($body);"],"names":["breakPoint","SM","MD","LG","XL","XXL","detectReducedMotionPref","window","matchMedia","settingsLinksAdded","settingsModalContent","addSettingsLinks","utilityBar","document","body","querySelector","utilityBarIcons","content","createElement","classList","add","innerHTML","appendChild","utilityBarContent","setAttribute","headerContent","midSectionLinks","newLink","refreshModalContent","settingsModal","siteSettings","fx","length","forEach","i","controller","reducedMotionPref","matches","desktopSideHeaderLayout","fxAdd","fxType","fxEnable","fxCallback","arguments","undefined","exists","type","push","enabled","callback","thisIndex","thisFX","checkbox","concat","addEventListener","fxToggle","checked","label","mode","mainNavigation","active","setActive","megaMenuNavigation","mobileActive","setMobileActive","desktopActive","setDesktopActive","headerSearch","watchViewport","ResizeObserver","Polyfill","$body","$pageContentArea","buffer","headerMode","transparentHeader","headerAdjusted","threshold","bodyHeight","lastScrollY","vw","t","eventHeaderHide","Event","eventHeaderShow","eventHeaderMinify","eventHeaderExpand","e","detail","w","getHeaderMode","m","contains","toggleHeader","remove","dispatchEvent","updateScroll","_ref","scroll","size","prevHeaderMode","changed","parseInt","getComputedStyle","getPropertyValue","toggle","top","clearTimeout","setTimeout","bottom","ro","offsetHeight","observe"],"sourceRoot":""}