kcc-gem-theme 1.33.15 → 1.34.15

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

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

data/assets/js/theme/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 './toggleSearchDropdownOnWindowResize.js';
+
+document.addEventListener('DOMContentLoaded', function() {
+  highlightNav();
+  searchToggle();
+  moveSearchIcon();
+  closeMenuOnClick();
+  toggleSearchDropdownOnWindowResize();
+});

data/assets/js/theme/nav/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/{src/searchToggle.js → nav/searchToggleNav.js}

@@ -15,13 +15,13 @@ function searchToggle() {
       function switchToX() {
         searchIconElement.style.backgroundImage = 'url("/assets/img/x.svg")';
         searchIconElement.setAttribute('alt', 'Close icon');
-        searchButton.setAttribute('aria-label', 'Close');
+        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', 'Search');
+        searchButton.setAttribute('aria-label', 'Toggle Search');
         searchInputField.focus();
       }
 

data/assets/js/theme/nav/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/toggleSearchDropdownOnWindowResize.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/theme/src/all.js

@@ -1,20 +1,18 @@
 import footerDate from './footerDate.js';
-import searchToggle from './searchToggle.js';
 import lazyLoad from './lazyLoad.js';
 import walkText from './walkText.js';
 import initSliders from './sliders.js';
-import moveSearchIcon from './moveSearchIcon.js';
-import highlightNav from './highlightCurrentNav.js';
 import watchForMenuClicks from './translate.js';
-import closeMenuOnClick from './closeMenuOnClick.js';
 import accordion from './accordion.js';
 import wrapPowerText from './wrapPowerText.js';
-//import './babelTest.js';
 //import test from './test.js';
 
 document.addEventListener('DOMContentLoaded', function() {
-  highlightNav();
-  moveSearchIcon();
+  wrapPowerText();
+  initSliders();
+  walkText(document.body);
+  footerDate();
+  lazyLoad();
   watchForMenuClicks();
   // polyfill for Element.closest() b/c IE can't handle an anchor.match() when the anchor has another element inside it (Like spans used for BS4 menu toggler)
   if (!Element.prototype.matches) {
@@ -32,13 +30,5 @@ document.addEventListener('DOMContentLoaded', function() {
       return null;
     };
   }
-  //test();
-  wrapPowerText();
-  initSliders();
-  walkText(document.body);
-  footerDate();
-  lazyLoad();
   accordion();
-  searchToggle();
-  closeMenuOnClick();
 });

data/assets/scss/0-tools/_bootstrap-overrides.scss

@@ -43,12 +43,30 @@
 // Modify the Bootstrap 4 dropdown menu's carot to give it an animated/interactice effect using pure CSS
 // ======================================
 // .dropdown-toggle::after controls the BS4 dropdown-menu carot symbol's display
-.dropdown-toggle::after {  // Set starting position & transition Fx
+@media screen and (max-width: 992px) {
+  .dropdown-toggle::after {  // Set starting position & transition Fx
+    transform: rotate(0deg);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .nav-item.dropdown.show .dropdown-toggle::after {  // Selectors that are only present when a dropdown is toggled to the open state.
+    transform: rotate(-180deg);
+  }
+}
+
+.dropdown-toggle.btn::after {  // Set starting position & transition Fx
   transform: rotate(0deg);
   transition: transform 0.3s ease-in-out;
 }
 
-.nav-item.dropdown.show .dropdown-toggle::after {  // Selectors that are only present when a dropdown is toggled to the open state.
+.nav-item.dropdown.show .dropdown-toggle.btn::after {  // Selectors that are only present when a dropdown is toggled to the open state.
   transform: rotate(-180deg);
 }
+
+@media screen and (min-width: 992px) {
+  .dropdown-toggle:not(.btn)::after {  // Set starting position & transition Fx
+    display: none;
+  }
+}
+
 // End BS4 dropdown-menu carot modifications.

data/assets/scss/0-tools/_gsc-overrides.scss

@@ -1,9 +1,13 @@
-#___gcse_0:hover #gsc-iw-id1,
-#___gcse_0:focus #gsc-iw-id1 {
+// Custom styling to the Google Custom Search used in `_includes/header-global.html` & `_includes/nav-global.html`
+// ==================================================
+// Styling for the Google Custom Search used in the `_includes/header-global.html` version of the nav
+// ==================================================
+.header-global__search-collapse #___gcse_0:hover #gsc-iw-id1,
+.header-global__search-collapse #___gcse_0:focus #gsc-iw-id1 {
   filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
 }
 
-#gsc-iw-id1 {
+.header-global__search-collapse #gsc-iw-id1 {
   border-radius: 2rem;
   padding-left: .5rem;
   border: solid thin $grey-5;
@@ -12,7 +16,85 @@
   padding-bottom: 3px;
 }
 
-.gsc-search-button-v2 {
+.header-global__search-collapse .gsc-search-button-v2 {
+  background-color: transparent !important;
+  border: none !important;
+  pointer-events: auto;
+  position: relative;
+  right: -0.5rem;
+  top: -.25rem;
+  transition-property: right;
+  transition-duration: .2s;
+}
+
+.header-global__search-collapse button.gsc-overrides__clear-x {
+  right: .5rem;
+  padding-right: 5px !important;
+}
+
+@media screen and (min-width: 992px) {
+  .header-global__search-collapse .gsc-search-button-v2 {
+    top: 0;
+    right: .5rem;
+  }
+
+  .header-global__search-collapse button.gsc-overrides__clear-x {
+    right: 1.125rem;
+    padding-right: 5px !important;
+  }
+}
+
+.header-global__search-collapse .gsst_a .gscb_a {
+  vertical-align: middle;
+}
+
+.header-global__search-collapse .gsc-search-button-v2 svg {
+  fill: $primary-blue !important;
+  height: 1.25rem;
+  width: 1.25rem;
+  transition-property: fill;
+  transition-duration: .2s;
+}
+
+.header-global__search-collapse .gsc-search-button-v2:hover svg,
+.header-global__search-collapse .gsc-search-button-v2:focus svg {
+  fill: $primary-red !important;
+}
+
+.header-global__search-collapse td.gsc-search-button {
+  display: inline;
+  pointer-events: none;
+  position: absolute;
+  right: 50px;
+}
+
+@media screen and (min-width: 1400px) {
+  .header-global__search-collapse td.gsc-search-button {
+    right: 44px;
+  }
+}
+
+.header-global__search-collapse .gsc-search-box-tools .gsc-search-box .gsc-input {
+  padding-right: 0 !important;
+}
+
+// Similar styling for the Google Custom Search used in the `_includes/nav-global.html` version of the nav
+// ==================================================
+.nav-global__gcse-wrapper #___gcse_0:hover #gsc-iw-id1,
+.nav-global__gcse-wrapper #___gcse_0:focus #gsc-iw-id1 {
+  filter: drop-shadow(2px 2px 6px rgba(128,128,128, 0.5));
+}
+
+.nav-global__gcse-wrapper #gsc-iw-id1 {
+  border-radius: 2rem;
+  padding-left: .5rem;
+  border: solid thin $grey-5;
+  line-height: 1;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.nav-global__gcse-wrapper .gsc-search-button-v2 {
   background-color: transparent !important;
   border: none !important;
   pointer-events: auto;
@@ -22,16 +104,16 @@
   transition-duration: .2s;
 }
 
-.gsst_a .gscb_a {
+.nav-global__gcse-wrapper .gsst_a .gscb_a {
   vertical-align: middle;
 }
 
-button.gsc-overrides__clear-x {
+.nav-global__gcse-wrapper button.gsc-overrides__clear-x {
   right: 48px;
   padding-right: 5px !important;
 }
 
-.gsc-search-button-v2 svg {
+.nav-global__gcse-wrapper .gsc-search-button-v2 svg {
   fill: $primary-blue !important;
   height: 1.25rem;
   width: 1.25rem;
@@ -39,12 +121,12 @@ button.gsc-overrides__clear-x {
   transition-duration: .2s;
 }
 
-.gsc-search-button-v2:hover svg,
-.gsc-search-button-v2:focus svg {
+.nav-global__gcse-wrapper .gsc-search-button-v2:hover svg,
+.nav-global__gcse-wrapper .gsc-search-button-v2:focus svg {
   fill: $primary-red !important;
 }
 
-td.gsc-search-button {
+.nav-global__gcse-wrapper td.gsc-search-button {
   display: inline;
   pointer-events: none;
   position: absolute;
@@ -52,7 +134,7 @@ td.gsc-search-button {
 }
 
 @media screen and (min-width: 1400px) {
-  td.gsc-search-button {
+  .nav-global__gcse-wrapper td.gsc-search-button {
     right: 44px;
   }
 }