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};","// ***************************\r\n// ***** Header Search *****\r\n// ***************************\r\n\r\nimport { breakPoint } from './config';\r\nimport { headerSearch } from './global';\r\n\r\nlet s = null,\r\n isMobile = true,\r\n resizeRequested = false;\r\n\r\nheaderSearch.setActive(false);\r\n\r\nclass HeaderSearchSystem {\r\n\r\n constructor(showBtn, wrapper, closeBtn, searchField) {\r\n this.showBtn = showBtn;\r\n this.wrapper = wrapper;\r\n this.closeBtn = closeBtn;\r\n this.searchField = searchField;\r\n this.active = false;\r\n // remove 'hidden' attribute\r\n this.wrapper.removeAttribute('hidden');\r\n // triggers\r\n this.showBtn.onclick = () => {\r\n // open search\r\n if(!this.active) {\r\n this.show();\r\n } else if(sideHeaderLayout) {\r\n this.hide();\r\n }\r\n };\r\n this.closeBtn.onclick = () => {\r\n if(this.active) this.hide();\r\n };\r\n // ESC key closes search\r\n this.wrapper.addEventListener('keydown', (e) => {\r\n switch (e.key) {\r\n // ESCAPE jumps out a level\r\n case 'Escape':\r\n if(this.active) {\r\n e.preventDefault();\r\n this.hide(true);\r\n }\r\n break;\r\n }\r\n });\r\n // loop the tabbing if search area is active\r\n this.closeBtn.addEventListener('keydown', (e) => {\r\n switch (e.key) {\r\n // TAB\r\n case 'Tab':\r\n if(this.active) {\r\n e.preventDefault();\r\n this.searchField.focus();\r\n }\r\n break;\r\n }\r\n });\r\n }\r\n\r\n show() {\r\n this.wrapper.ontransitionend = null;\r\n this.wrapper.setAttribute('aria-hidden', false);\r\n this.showBtn.setAttribute('aria-expanded', true);\r\n this.active = true;\r\n headerSearch.setActive(true);\r\n window.requestAnimationFrame(() => {\r\n this.wrapper.classList.add('search-form--active');\r\n this.searchField.focus();\r\n });\r\n }\r\n\r\n hide(doFocus = false) {\r\n this.showBtn.setAttribute('aria-expanded', false);\r\n this.active = false;\r\n headerSearch.setActive(false);\r\n this.wrapper.classList.remove('search-form--active');\r\n this.wrapper.ontransitionend = (e) => {\r\n if(e.target == this.wrapper) this.transitionEnd(doFocus);\r\n };\r\n }\r\n\r\n transitionEnd(doFocus = false) {\r\n this.wrapper.setAttribute('aria-hidden', true);\r\n this.wrapper.ontransitionend = null;\r\n if(doFocus) this.showBtn.focus();\r\n }\r\n}\r\n\r\nconst headerSearchOpenBtn = document.querySelector('#main-header--content--search-open-btn'),\r\n headerSearchWrapper = document.querySelector('#main-header--content--search-wrapper'),\r\n headerSearchCloseBtn = document.querySelector('#main-header--content--search-close-btn'),\r\n headerSearchField = headerSearchWrapper !== null ? headerSearchWrapper.querySelector('input[type=\"search\"]') : null;\r\n\r\nif(headerSearchOpenBtn != null && headerSearchWrapper != null && headerSearchCloseBtn != null && headerSearchField != null) {\r\n s = new HeaderSearchSystem(headerSearchOpenBtn, headerSearchWrapper, headerSearchCloseBtn, headerSearchField);\r\n}\r\n\r\n// define and trigger resize check\r\n\r\nconst resize = () => {\r\n isMobile = window.innerWidth < breakPoint.LG;\r\n if(isMobile && s.active) s.hide(false);\r\n};\r\n\r\nresize();\r\nwindow.addEventListener('window-resize', (e) => {\r\n resize();\r\n});\r\n\r\n"],"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","s","isMobile","resizeRequested","HeaderSearchSystem","showBtn","wrapper","closeBtn","searchField","_this","_classCallCheck","removeAttribute","onclick","show","sideHeaderLayout","hide","e","key","preventDefault","focus","_createClass","value","_this2","ontransitionend","requestAnimationFrame","_this3","doFocus","remove","target","transitionEnd","headerSearchOpenBtn","headerSearchWrapper","headerSearchCloseBtn","headerSearchField","resize","innerWidth"],"sourceRoot":""}