kcc-gem-theme-core 0.0.1

data/assets/js/nav/megaNav/searchToggleMegaNav.js

@@ -0,0 +1,96 @@
+// Custom JS to toggle the search form
+const FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR = [
+  '#gsc-i-id1',
+  '#gs_st50 .gsst_a',
+  '.gsc-search-button .gsc-search-button.gsc-search-button-v2'
+]; // Elements that Google Custom Search builds into the page
+const OPEN_SEARCH_BUTTON_ID = 'openSearchButton';
+const OPEN_SEARCH_BUTTON_CLASS = 'header-global__search-icon';
+const CLOSE_SEARCH_BUTTON_ID = 'closeSearchButton';
+const CLOSE_SEARCH_BUTTON_CLASS = 'header-global__close-icon';
+const SEARCH_INPUT_ID = 'gsc-i-id1';  // An element that Google Custom Search builds into the page
+const HEADER_GLOBAL_NAV_ID = 'headerGlobalNavbar';
+const SEARCH_COLLAPSE_ID = 'searchCollapse';
+
+function setElementAttribute(selector, attr, val) {
+  const el = document.querySelector(selector);
+
+  el.setAttribute(attr, val);
+}
+
+function toggleButtonAttributes(button, removeButtonOption, buttonClass) {
+  if ( removeButtonOption ) {
+    button.classList.add(buttonClass + '--hidden');
+    button.setAttribute('aria-hidden', 'true');
+    button.setAttribute('tabindex', '-1');
+  } else {
+    button.classList.remove(buttonClass + '--hidden');
+    button.setAttribute('aria-hidden', 'false');
+    button.setAttribute('tabindex', '0');
+  }
+}
+
+function handleSearchToggle(searchButtonWasClicked) {
+  const searchButtonEl = document.getElementById(OPEN_SEARCH_BUTTON_ID);
+  const closeButtonEl = document.getElementById(CLOSE_SEARCH_BUTTON_ID);
+  const searchInputField = document.getElementById(SEARCH_INPUT_ID);
+  let len = FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR.length;
+
+  if ( searchButtonWasClicked ) {
+    toggleButtonAttributes(searchButtonEl, true, OPEN_SEARCH_BUTTON_CLASS);
+    toggleButtonAttributes(closeButtonEl, false, CLOSE_SEARCH_BUTTON_CLASS);
+    for (var i = 0; i < len; i++) {
+      setElementAttribute(FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR[i], 'tabindex', '0');
+    }
+    searchInputField.focus();
+  } else {
+    toggleButtonAttributes(searchButtonEl, false, OPEN_SEARCH_BUTTON_CLASS);
+    toggleButtonAttributes(closeButtonEl, true, CLOSE_SEARCH_BUTTON_CLASS);
+    for (var i = 0; i < len; i++) {
+      setElementAttribute(FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR[i], 'tabindex', '-1');
+    }
+  }
+}
+
+function toggleOtherElements() {
+  const searchCollapse = document.getElementById(SEARCH_COLLAPSE_ID);
+  const headerGlobalNavbar = document.getElementById(HEADER_GLOBAL_NAV_ID);
+  const collapseAria = searchCollapse.getAttribute('aria-hidden');
+
+  searchCollapse.classList.toggle('header-global__search-collapse--visible');
+  (collapseAria === "true") ? searchCollapse.setAttribute('aria-hidden', 'false') : searchCollapse.setAttribute('aria-hidden', 'true');
+  headerGlobalNavbar.classList.toggle('header-global__navbar--search-toggle');
+}
+
+function checkClickedButton(event) {
+  let openSearchButtonWasClicked;
+
+  if ( event.target.closest('#openSearchButton') ) {
+    openSearchButtonWasClicked = true;
+  } else if ( event.target.closest('#closeSearchButton') ) {
+    openSearchButtonWasClicked = false;
+  }
+  handleSearchToggle(openSearchButtonWasClicked);
+  toggleOtherElements();
+}
+
+function clickEventHandler(event) {
+  if ( event.target.closest('#openSearchButton') || event.target.closest('#closeSearchButton') ) {
+    checkClickedButton(event);
+  } else {
+    return; // Bail-out
+  }
+}
+
+function addClickEventListener() {
+  document.addEventListener('click', clickEventHandler);
+}
+
+function initSearchToggle() {
+  if ( ! document.getElementById('openSearchButton') )
+    return;
+
+  addClickEventListener();
+}
+
+export default initSearchToggle;

data/assets/js/nav/megaNav/toggleDropdownOnWindowResize.js

@@ -0,0 +1,78 @@
+//
+//
+//
+//  TODO: Combine method bellow with a class added to the nav when it is desktop size and above
+//
+//
+//
+//
+//
+// Custom JS to Close the Navigation menu, if its open, & if the screen goes above 992px wide (Bootstrap 4 'lg' devices)
+const NAV_ELEMENT_ID_STRING = 'headerGlobalNavbar';
+const NAVBAR_COLLAPSE_ID = 'headerGlobalNavbarContent'; // ID built into the sites' HTML
+const NAVBAR_IS_DESKTOP = 'header-global__navbar--lg';
+const NAVBAR_ELEMENT = document.getElementById(NAV_ELEMENT_ID_STRING);
+
+function removeClassFromElement(el, classString) {
+  el.classList.remove(classString);
+}
+
+function collapseElement(dropdownToggle) {
+  //console.log( $(dropdownToggle) );
+  $(dropdownToggle).collapse('hide'); // Bootstrap 4 `.collapse()` method.
+  removeClassFromElement(NAVBAR_ELEMENT, NAVBAR_IS_DESKTOP);
+
+}
+
+function checkDropdownCollapseState(el) {
+  let dropdownToggle = el.parentElement
+  //console.log(el.parentElement.classList);
+  if ( dropdownToggle.classList.contains('show') ) { // 'show' is a Bootstrap 4 class that makes `.collapse` items visible. // Checking to see if the Menu is open
+    //console.log(el);
+    collapseElement(dropdownToggle);
+  }
+}
+
+function loopOverNodeList(nodeList) {
+  //console.log(nodeList);
+  let len = nodeList.length;
+
+  for (var i = 0; i < len; i++) {
+    const dropdownMenu = nodeList[i];
+
+    checkDropdownCollapseState(dropdownMenu);
+  }
+}
+
+function windowResizeHandler() {
+  const navbarEl = windowResizeHandler.element;
+
+  if ( window.innerWidth <= 992 && navbarEl.classList.contains(NAVBAR_IS_DESKTOP) ) {
+    const menuCollapseElement = document.getElementById(NAVBAR_COLLAPSE_ID);
+    const dropdownMenuNodeList = menuCollapseElement.querySelectorAll('.dropdown-toggle');
+
+    loopOverNodeList(dropdownMenuNodeList);
+    //checkNavbarCollapseState(menuCollapseElement);
+  }
+}
+
+function addClassToElement(el, classString) {
+  el.classList.add(classString);
+}
+
+function checkWindowWidth() {
+  const windowIsWiderThanBootStrapLarge = window.innerWidth >= 992;
+
+  windowIsWiderThanBootStrapLarge ?
+    addClassToElement(NAVBAR_ELEMENT, NAVBAR_IS_DESKTOP)
+  : null;
+}
+
+function toggleDropdownOnWindowResize() {
+
+  windowResizeHandler.element = NAVBAR_ELEMENT;
+  checkWindowWidth();
+  window.addEventListener('resize', windowResizeHandler);
+}
+
+export default toggleDropdownOnWindowResize;

data/assets/js/nav/megaNav/toggleDropdownOnWindowResizeTwo.js

@@ -0,0 +1,54 @@
+// Custom JS to make the site look pretty while ITS shrinks and expands the window with the menu open
+const NAV_ELEMENT_ID_STRING = 'headerGlobalNavbar';  // ID built into the site's HMTL
+const NAVBAR_COLLAPSE_ID = 'headerGlobalNavbarContent';  // ID built into the sites' HTML
+const GLOBAL_NAVIGATION_ITEMS = 'navGlobalBottom';  // ID built into the site's HMTL
+const NAVBAR_ELEMENT = document.getElementById(NAV_ELEMENT_ID_STRING);  // The <nav> element built into the site's HMTL
+const BOOTSTRAP_COLLAPSE_SHOW_CLASS_STRING = 'show';
+const BOOTSTRAP_DROPDOWN_TOGGLER_CLASS = '.dropdown-toggle'; // Class specific to Bootstrap 4 code
+
+function openNavigationCollapse() {
+
+  if ( NAVBAR_ELEMENT.navbar_toggled === true )  // Track if the navbar has already been toggled
+    return; // Bail-out to prevent repetitive calls to the code below (without this the code is called many, many, many times while the screen is resizing)
+
+  const menuCollapseElement = document.getElementById(NAVBAR_COLLAPSE_ID);
+
+  NAVBAR_ELEMENT.navbar_toggled = true;
+  $(menuCollapseElement).collapse(BOOTSTRAP_COLLAPSE_SHOW_CLASS_STRING);  // BOOTSTRAP 4 METHOD (requires jQuery (yuck!).)!!! Official BS4 docs on `.collapse()` https://getbootstrap.com/docs/4.4/components/collapse/#via-javascript
+}
+
+function checkForOpenDropdownMenus(menuItem) {
+  const dropdown = menuItem.parentElement;
+
+  if ( dropdown.classList.contains(BOOTSTRAP_COLLAPSE_SHOW_CLASS_STRING) ) {
+    openNavigationCollapse();
+  }
+}
+
+function loopOverDropdownItems(nodeList) {
+  let len = nodeList.length;
+
+  for (var i = 0; i < len; i++) {
+    checkForOpenDropdownMenus(nodeList[i]);
+  }
+}
+
+function windowResizeHandler() {
+  const dropdownToggleNodeList = document.getElementById(GLOBAL_NAVIGATION_ITEMS).querySelectorAll(BOOTSTRAP_DROPDOWN_TOGGLER_CLASS);
+
+  if ( window.innerWidth <= 992 ) {
+    loopOverDropdownItems(dropdownToggleNodeList);
+  } else {
+    NAVBAR_ELEMENT.navbar_toggled = false;
+  }
+}
+
+function toggleDropdownOnWindowResize() {
+
+  if ( ! NAVBAR_ELEMENT )
+    return;
+
+  window.addEventListener('resize', windowResizeHandler);
+}
+
+export default toggleDropdownOnWindowResize;

data/assets/js/nav/megaNav/toggleMenuOnWindowResize.js

@@ -0,0 +1,26 @@
+// Custom JS to Close the Navigation menu, if its open, & if the screen goes above 992px wide (Bootstrap 4 'lg' devices)
+const NAVBAR_COLLAPSE_SELECTOR = '.navbar-toggler--multi-collapse'; // ID built into the sites' HTML
+
+function collapseElement(el) {
+  $(el).collapse('hide'); // Bootstrap 4 `.collapse()` method.
+}
+
+function checkNavbarCollapseState(menuEl) {
+  if ( menuEl.classList.contains('show') ) { // 'show' is a Bootstrap 4 class that makes `.collapse` items visible. // Checking to see if the Menu is open
+    collapseElement(menuEl);
+  }
+}
+
+function windowResizeHandler() {
+  if ( window.innerWidth >= 992 ) {
+    const nodeList = document.querySelectorAll(NAVBAR_COLLAPSE_SELECTOR);
+    
+    [...nodeList].forEach(el => checkNavbarCollapseState(el));
+  }
+}
+
+function toggleMenuOnWindowResize() {
+  window.addEventListener('resize', windowResizeHandler);
+}
+
+export default toggleMenuOnWindowResize;

data/assets/js/nav/megaNav/underlineCurrentSite.js

@@ -0,0 +1,22 @@
+const  NAV_GLOBAL_BOTTOM_NAV_ITEMS = document.getElementById('navGlobalBottom'); // ID from the HTML
+
+function underlineCurrentSite() {
+  // JS is fun!
+  if (window.location.pathname === '/') // YOU DON'T NEED TO RUN THIS ON THE HOMEPAGE!!
+    return;
+  //console.log('execution of further functions has ceased.');
+  const NAV_ITEMS = NAV_GLOBAL_BOTTOM_NAV_ITEMS.querySelectorAll('li');  // Navigation HTML structure uses <ul><li>...</li><li>...</li></ul> which is common markup for a Bootrap's nav (from their documentation)
+  const url = window.location.pathname.replace(/(^\/|\/$)/g, '');
+  //console.log(url);
+
+  for (let i = 0, len = NAV_ITEMS.length; i < len; i++) {
+    let NAV_CATEGORIES = NAV_ITEMS[i].dataset.nav; // Comes from data-set attributes built into the HTML
+
+    if ( url.search(NAV_CATEGORIES) !== -1 ) {
+      let NAV_LINK = NAV_ITEMS[i].querySelector('a'); // Again, pretty standard bootstrap navigation HTML struture to have anchors in the <li>
+
+      return NAV_LINK.classList.add('header-global__nav-bottom--underlined'); // return breaks the loop and this is the class to underline stuff with
+    }
+  }
+}
+export default underlineCurrentSite;

data/assets/js/nav/nav/closeNavOnClick.js

@@ -0,0 +1,50 @@
+const NAV_LINKS_SELECTOR = '.nav-link:not(.dropdown-toggle)';  // Bootstrap 4 class
+const MENU_COLLAPSE_JQUERY = $('#mainNavContent'); // Bootstrap 4 crap that requires $() w/ an ID from the HTML
+const MENU_COLLAPSE = 'mainNavContent';  // ID from the HTML
+const HIDE = 'hide';  // Bootstrap 4 class
+const SHOW = 'show';  // Bootstrap 4 class
+
+function hideBootstrapMenu() {
+  MENU_COLLAPSE_JQUERY.collapse(HIDE);
+}
+
+function checkIfMenuIsOpen() {
+  if ( document.getElementById(MENU_COLLAPSE).classList.contains(SHOW) ) {
+    return true;
+  }
+  return false;
+}
+
+function hideMenuIfOpen(menuIsOpen) {
+  if ( menuIsOpen ) {
+    hideBootstrapMenu();
+  } else {
+    return;
+  }
+}
+
+function clickHandlerFunction(e) {
+  if ( !e.target.matches(NAV_LINKS_SELECTOR) )  // Bail out of the rest of the code if the click event's target is not what we want!
+    return;
+
+  if ( e.target.classList.contains('dropdown-toggle') )
+    return;
+
+
+  const menuIsOpen = checkIfMenuIsOpen();
+
+  hideMenuIfOpen(menuIsOpen);
+}
+
+function addEventListenerFunction(element, clickEvent) {
+  element.addEventListener(clickEvent, clickHandlerFunction, false);
+}
+
+function closeMenuOnClick() {
+  const clickEvent = 'click';
+  const element = document;
+
+  addEventListenerFunction(element, clickEvent);
+}
+
+export default closeMenuOnClick;

data/assets/js/nav/nav/highlightCurrentNav.js

@@ -0,0 +1,56 @@
+// Custom Vanilla JS to highlight the user's current location in the navigation bar and the sub-nav navigation bar
+function setActive(thisLink, linkText) {
+  let thisAnchor = thisLink.querySelector('a');
+
+  thisLink.classList.add('active');
+  thisAnchor.insertAdjacentHTML('beforeend', ' <span class="sr-only">(current)</span>');
+}
+
+function highlightSubNav(pathname) {
+  const subNavItems = document.querySelectorAll('.js-sub-nav-item');
+
+  for ( let link of subNavItems) {
+    const anchor = link.querySelector('a');
+    const href = anchor.getAttribute('href').replace(/\.\.\//g, '');
+    const linkText = anchor.textContent;
+    const urlMatchesLink = pathname.indexOf(href) !== -1;
+
+    urlMatchesLink ?
+      setActive(link, linkText)
+    : null;
+  }
+}
+
+function highlightNav() {
+  const pathname = window.location.pathname;
+  const locationIsContactHash = window.location.hash === '#contact';
+  const locationIsHome = window.location.pathname === '/';
+
+  document.getElementById('subNavNav') ?
+    highlightSubNav(pathname)
+  : null;
+
+  const navigationItems = document.querySelectorAll('.js-nav-item');
+
+  for ( let link of navigationItems ) {
+    const linkAnchor = link.querySelector('a');
+    const linkHrefValue = linkAnchor.getAttribute('href').replace(/\.\.\//g, '');
+    const linkTextValue = linkAnchor.textContent;
+    const linkIsHome = linkTextValue.toLowerCase() === 'home';
+    const urlMatchesLink = pathname.indexOf(linkHrefValue) !== -1;
+
+    if ( locationIsHome || locationIsContactHash ) {
+      linkIsHome ? setActive(link, linkTextValue) : null;
+    } else {
+      urlMatchesLink && !linkIsHome ? setActive(link, linkTextValue) : null;
+    }
+  }
+}
+//
+//  USEAGE:
+//
+//    document.addEventListener('DOMContentLoaded', function() {
+//      highlightNav();
+//    });
+//
+export default highlightNav;

data/assets/js/nav/nav/moveSearchIcon.js

@@ -0,0 +1,94 @@
+function checkXIcon() {
+  const checkXIconOnLoad = (function() {
+      let executed = false;
+      return function() {
+          if (!executed) {
+              executed = true;
+              // do checkXIconOnLoad
+              const icon = document.getElementById('xIcon');
+              const xIsHidden = icon.getAttribute('style') === 'display: none;';
+              xIsHidden ? removeClear() : clearXIcon();
+          }
+      };
+  })();
+  checkXIconOnLoad(); // "do checkXIconOnLoad" happens
+}
+
+function clearXIcon() {
+  const targetEl = document.querySelector('button.gsc-search-button-v2');
+  targetEl.classList.add('gsc-overrides__clear-x');
+}
+
+function removeClear() {
+  const targetEl = document.querySelector('button.gsc-search-button-v2');
+  targetEl.classList.remove('gsc-overrides__clear-x');
+}
+
+function addId() {
+  const xIcon = document.querySelector('.gsst_a');
+  xIcon.setAttribute('id', 'xIcon');
+}
+
+function gscInit() {
+  var cx = '006320264078644364913:sy48bet-lr8';
+  var gcse = document.createElement('script');
+  gcse.type = 'text/javascript';
+  gcse.async = true;
+  gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
+  var s = document.getElementsByTagName('script')[0];
+  s.parentNode.insertBefore(gcse, s);
+}
+
+function moveSearchIcon() {
+  const pageHasGSearch = document.getElementById('searchCollapse');
+
+  if ( pageHasGSearch ) {
+    let initSearchPromise = new Promise((resolve, reject) => {
+      gscInit();
+      resolve();
+    });
+    initSearchPromise.then(() => {
+
+      let addIdPromise = new Promise((resolve, reject) => {
+
+        const targetNode = document.getElementById('searchCollapse');
+        const config = { attributes: true, childList: true, subtree: true };
+        const callback = function(mutationsList, observer) {
+            for(const mutation of mutationsList) {
+                if (mutation.type == 'childList') {
+                    addId();
+                    resolve();
+                }
+            }
+        };
+        const observer = new MutationObserver(callback);
+        observer.observe(targetNode, config);
+        // Later, you can stop observing
+        //observer.disconnect();
+      });
+      addIdPromise.then(() => {
+        checkXIcon();
+        const targetNode = document.getElementById('xIcon');
+        const config = { attributes: true, childList: true, subtree: true };
+        const callback = function(mutationsList, observer) {
+            for(const mutation of mutationsList) {
+                if (mutation.type == 'attributes') {
+                  const xIsHidden = targetNode.getAttribute('style') === 'display: none;';
+                  if (xIsHidden) {
+                    removeClear();
+                  } else {
+                    clearXIcon();
+                  }
+                }
+            }
+        };
+        const observer = new MutationObserver(callback);
+        observer.observe(targetNode, config);
+        // Later, you can stop observing
+        //observer.disconnect();
+      });
+    });
+  }
+}
+
+export default moveSearchIcon;

data/assets/js/nav/nav/nav.js

@@ -0,0 +1,13 @@
+import highlightNav from './highlightCurrentNav.js';
+import closeMenuOnClick from './closeNavOnClick.js';
+import moveSearchIcon from './moveSearchIcon.js';
+import searchToggle from './searchToggleNav.js';
+import toggleSearchDropdownOnWindowResize from './toggleNavSearchDropdownOnWindowResize.js';
+
+document.addEventListener('DOMContentLoaded', function() {
+  highlightNav();
+  searchToggle();
+  moveSearchIcon();
+  closeMenuOnClick();
+  toggleSearchDropdownOnWindowResize();
+});

data/assets/js/nav/nav/searchToggleNav.js

@@ -0,0 +1,40 @@
+// Custom JS to toggle the search form on mobile devices
+function searchToggle() {
+  const searchButton = document.getElementById('searchIcon');
+  searchButton ?
+    document.addEventListener('click', function (event) {
+      const searchIconElement = document.getElementById('searchImg');
+      const searchCollapse = document.getElementById('searchCollapse');
+      const mainNav = document.getElementById('mainNav');
+      const globalNav = document.getElementById('globalNav');
+      const searchIconBackgroundImage = searchIconElement.style.backgroundImage;
+      const iconIsSearch = ( searchIconBackgroundImage.indexOf('assets/img/search.svg') != -1 );
+      const collapseAria = searchCollapse.getAttribute('aria-hidden');
+      const searchInputField = document.getElementById('gsc-i-id1');
+
+      function switchToX() {
+        searchIconElement.style.backgroundImage = 'url("/assets/img/x.svg")';
+        searchIconElement.setAttribute('alt', 'Close icon');
+        searchButton.setAttribute('aria-label', 'Toggle Close');
+      }
+
+      function switchToSearch() {
+        searchIconElement.style.backgroundImage = 'url("/assets/img/search.svg")';
+        searchIconElement.setAttribute('alt', 'Search icon');
+        searchButton.setAttribute('aria-label', 'Toggle Search');
+        searchInputField.focus();
+      }
+
+      // If the clicked element doesn't have the right selector, bail
+      if (!event.target.closest('#searchIcon')) return;
+      // Don't follow the link
+      event.preventDefault();
+      iconIsSearch ? switchToX() : switchToSearch();
+      searchCollapse.classList.toggle('nav-global__search-collapse--visible');
+      (collapseAria === "true") ? searchCollapse.setAttribute('aria-hidden', 'false') : searchCollapse.setAttribute('aria-hidden', 'true');
+      mainNav.classList.toggle('nav-local__search-toggle');
+      globalNav.classList.toggle('nav-global__search-toggle');
+    }, false)
+  : null;
+}
+export default searchToggle;

data/assets/js/nav/nav/toggleNavSearchDropdownOnWindowResize.js

@@ -0,0 +1,57 @@
+// Custom JS to Close the Navigation menu, if its open, & if the screen goes above 992px wide (Bootstrap 4 'lg' devices)
+const SEARCH_COLLAPSE_ID = 'searchCollapse'; // ID built into the sites' HTML
+const SEARCH_COLLAPSE_IS_VISIBLE_CLASS = 'nav-global__search-collapse--visible'; // Class in the HTML when the search collapse is open/visible
+const GLOBAL_NAV_ID = 'globalNav';
+const LOCAL_NAV_ID = 'mainNav';
+const GLOBAL_NAV_SEARCH_IS_VISIBLE_CLASS = 'nav-global__search-toggle';
+const LOCAL_NAV_SEARCH_IS_VISIBLE_CLASS = 'nav-local__search-toggle';
+const SEARCH_ICON_ID = 'searchIcon';
+const SEARCH_ICON_SPAN_QUERY_SELECTOR = '#searchImg';
+
+function removeClassFromElement(el, classToRemove) {
+  el.classList.remove(classToRemove);
+}
+
+function checkElementCollapseState(el, classToCheckFor) {
+  if ( ! el.classList.contains(classToCheckFor) )
+    return;
+
+  removeClassFromElement(el, classToCheckFor);
+}
+
+function toggleSearchIconToX(el) {
+  const span = el.querySelector(SEARCH_ICON_SPAN_QUERY_SELECTOR);
+
+  el.setAttribute('aria-label', 'Toggle Search');
+  span.setAttribute('alt', 'Open icon');
+  span.setAttribute('style', 'background-image: url("/assets/img/search.svg")');
+}
+
+function checkSearchToggleIcon(el) {
+  let ariaLabel = el.getAttribute('aria-label');
+
+  if ( ! ariaLabel === 'Toggle Close' )
+    return;
+
+  toggleSearchIconToX(el)
+}
+
+function windowResizeHandler() {
+  if ( window.innerWidth >= 992 ) {
+    const searchCollapseElement = document.getElementById(SEARCH_COLLAPSE_ID);
+    const globalNav = document.getElementById(GLOBAL_NAV_ID);
+    const localNav = document.getElementById(LOCAL_NAV_ID);
+    const searchIcon = document.getElementById(SEARCH_ICON_ID);
+
+    checkElementCollapseState(searchCollapseElement, SEARCH_COLLAPSE_IS_VISIBLE_CLASS);
+    checkElementCollapseState(globalNav, GLOBAL_NAV_SEARCH_IS_VISIBLE_CLASS);
+    checkElementCollapseState(localNav, LOCAL_NAV_SEARCH_IS_VISIBLE_CLASS);
+    checkSearchToggleIcon(searchIcon);
+  }
+}
+
+function toggleSearchDropdownOnWindowResize() {
+  window.addEventListener('resize', windowResizeHandler);
+}
+
+export default toggleSearchDropdownOnWindowResize;

data/assets/js/src/addClassToOpenNavbar.js

@@ -0,0 +1,20 @@
+const NAVBAR_COLLAPSE_ID = 'headerGlobalNavbarContent';
+const HEADER_GLOBAL = '.header-global';
+
+function addClassToOpenNavbar() {
+  if ( ! document.getElementById(NAVBAR_COLLAPSE_ID) )
+    return;
+
+  const collapse = document.getElementById(NAVBAR_COLLAPSE_ID);
+  const header = document.querySelector(HEADER_GLOBAL);
+
+  $(collapse).on('show.bs.collapse', (e) => {
+    header.classList.add('header-global__open');
+  });
+
+  $(collapse).on('hide.bs.collapse', (e) => {
+    header.classList.remove('header-global__open');
+  });
+}
+
+export default addClassToOpenNavbar;

data/assets/js/src/all.js

@@ -0,0 +1,61 @@
+import '../../scss/kcc-theme.scss';
+import loadModule from './loadModule'; // loadModule takes the following arguments:
+// arg1 - Name of the module - required
+// arg2 - Modules' default function which becomes the callback function after module is loaded - optional
+// arg3 - Argument to pass to the default function - optional and requires arg2
+// Syntax: loadModule(arg1, arg2, arg3).then(...)... // uses Webpack dynamic imports which is Promise based
+const errorHandler = err => console.error(`Error loading module:\n${err}`, err);
+const path = window.location.pathname;
+
+function loadScript(src, callback) {
+  const script = document.createElement('script');
+
+  script.src = src;
+  script.addEventListener('load', () => callback())
+  document.head.append(script);
+}
+
+// window.addEventListener('load', () => {
+//   import('../nav/megaNav/megaNav.js') // This JS can wait until window.onload.
+//     .then(({ default: megaNav }) => megaNav())
+//     .catch(err => errorHandler(err));
+// });
+
+window.addEventListener('load', () => {
+  loadScript('https://apis.google.com/js/api.js', () => {
+    import('jquery').then(({default: $}) => import('bootstrap'))
+      .then(() => import('../alerts/alerts.js').then(({ default: alerts }) => alerts()))
+      .then(() => {
+        if ( document.querySelector('.hero-slider__slider') ) {
+          return import('../../scss/slick-carousel.scss')
+            .then(() => loadModule('wrapPowerText'))
+            .then(() => loadModule('sliders', 'initSliders'))
+        }
+      })
+      .then(() => document.querySelector('img[data-src]') ? loadModule('lazyLoad') : null)
+      .then(() => loadModule('walkText', 'walkText', document.body))
+      .then(() => loadModule('footerDate'))
+      .then(() => loadModule('addClassToOpenNavbar'))
+      .then(() => document.getElementById('darkModeButton') ? loadModule('userSettings') : null)
+      .then(() => {
+        if (window.localStorage.getItem('darkModeSetting') == 'true' || document.getElementById('darkModeButton')) {
+          import('./darkMode').then(({ default: darkMode }) => darkMode)
+            .then(darkMode => {
+            import('../../scss/darkMode.scss').then(() => {
+              darkMode();
+            });
+          })
+        }
+      })
+      .then(() => path == '/search/' ? import('../../scss/searchPageOverrides.scss') : null)
+      .then(() => {
+        return document.getElementById('google_translate_element') ?
+          loadModule('translateScript', 'watchForMenuClicks')
+        : null;
+      }).then(() => document.getElementById('errorPageSearch') ? loadModule('errorPageSearch', 'errorPageSearch') : null)
+      .then(() => {
+        return import('../nav/megaNav/megaNav.js').then(({ default: megaNav }) => megaNav())
+      })
+      .catch( err => errorHandler(err));
+    });
+});