kcc-gem-theme 1.65.57

data/assets/js/theme/nav/megaNav/closeMegaNavOnClick.js

@@ -0,0 +1,50 @@
+const NAV_LINKS_SELECTOR = '.nav-link:not(.dropdown-toggle)';  // Bootstrap 4 class
+const MENU_COLLAPSE_JQUERY = $('#headerGlobalNavbarContent'); // Bootstrap 4 crap that requires $() w/ an ID from the HTML
+const MENU_COLLAPSE = 'headerGlobalNavbarContent';  // 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/theme/nav/megaNav/googleCustomSearch.js

@@ -0,0 +1,112 @@
+import initSearchToggle from './searchToggleMegaNav.js';
+
+const FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR = [
+  '#gsc-i-id1',
+  '#gs_st50 .gsst_a',
+  '.gsc-search-button .gsc-search-button.gsc-search-button-v2'
+];
+const SEARCH_INPUT_ID = 'gsc-i-id1';  // ID OF THE GOOGLE CUSTOM SEARCH (GCS) INPUT ELEMENT // Not in the DOM until the GCS JS fires `gcsInit()`
+const SEARCH_DIV_WRAPPER_ID = 'searchCollapse';  // ID OF THE DIV BUILT INTO THE SITES HTML WHICH WRAPS THE GCS
+
+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 addAttribute(selector, attr, val) {
+  const el = document.querySelector(selector);
+
+  el.setAttribute(attr, val);
+}
+
+function gcsInit() {  // Init The GCS JS
+  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 googleCustomSearchInit() {
+  if ( document.getElementById(SEARCH_DIV_WRAPPER_ID) ) {
+    let initSearchPromise = new Promise((resolve, reject) => {
+      gcsInit();
+      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();
+                  let len = FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR.length;
+                  for (var i = 0; i < len; i++) {
+                    addAttribute(FOCUSABLE_GOOGLE_CUSTOM_SEARCH_SELECTORS_ARR[i], 'tabindex', '-1'); // Make Elements initially unfocusable, so that screen readers don't pick up the hidden GCS
+                  }
+                  resolve();
+                }
+            }
+        };
+        const observer = new MutationObserver(callback);  // Using a MutationObserver to watch for changes in the Google Custom Search Elements that got built into the page from `gcsInit()`
+        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();
+        initSearchToggle();
+      });
+    });
+  }
+}
+
+export default googleCustomSearchInit;

data/assets/js/theme/nav/megaNav/megaNav.js

@@ -0,0 +1,13 @@
+import toggleMenuOnWindowResize from './toggleMenuOnWindowResize.js';
+import toggleDropdownOnWindowResize from './toggleDropdownOnWindowResizeTwo.js';
+import googleCustomSearchInit from './googleCustomSearch.js';
+import closeMenuOnClick from './closeMegaNavOnClick.js';
+import underlineCurrentSite from './underlineCurrentSite.js';
+
+document.addEventListener('DOMContentLoaded', function() {
+  googleCustomSearchInit();
+  underlineCurrentSite();
+  toggleMenuOnWindowResize();
+  toggleDropdownOnWindowResize();
+  closeMenuOnClick();
+});

data/assets/js/theme/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/theme/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/theme/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/theme/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_ID = 'headerGlobalNavbarContent'; // 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 menuCollapseElement = document.getElementById(NAVBAR_COLLAPSE_ID);
+
+    checkNavbarCollapseState(menuCollapseElement);
+  }
+}
+
+function toggleMenuOnWindowResize() {
+  window.addEventListener('resize', windowResizeHandler);
+}
+
+export default toggleMenuOnWindowResize;

data/assets/js/theme/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;