kcc-gem-theme 1.65.57

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

@@ -0,0 +1,34 @@
+import footerDate from './footerDate.js';
+import lazyLoad from './lazyLoad.js';
+import walkText from './walkText.js';
+import initSliders from './sliders.js';
+import watchForMenuClicks from './translate.js';
+import wrapPowerText from './wrapPowerText.js';
+//import ytEmbed from './ytEmbed.js';
+//import test from './test.js';
+
+document.addEventListener('DOMContentLoaded', function() {
+  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) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+  }
+
+  if (!Element.prototype.closest) {
+    Element.prototype.closest = function(s) {
+      var el = this;
+
+      do {
+        if (el.matches(s)) return el;
+        el = el.parentElement || el.parentNode;
+      } while (el !== null && el.nodeType === 1);
+      return null;
+    };
+  }
+});

data/assets/js/theme/src/babelTest.js

@@ -0,0 +1,18 @@
+function doStuff() {
+  const materials = [
+    'Hydrogen',
+    'Helium',
+    'Lithium',
+    'Beryllium',
+    'Boron',
+    'Carbon',
+    'Nitrogen',
+    'Oxygen'
+  ];
+  const data = materials.map(material => material.length + '<br>' + material + ' <br><hr>');
+  const theDiv = document.getElementById('theDiv');
+  theDiv.innerHTML = data;
+}
+document.addEventListener('DOMContentLoaded', function() {
+  doStuff();
+});

data/assets/js/theme/src/footerDate.js

@@ -0,0 +1,7 @@
+// Sets copyright year
+function footerDate() {
+  const d = new Date();
+  const fullYear = d.getFullYear();
+  document.getElementById('currentYear').innerHTML = fullYear;
+}
+export default footerDate;

data/assets/js/theme/src/lazyLoad.js

@@ -0,0 +1,13 @@
+// Lazy load images
+// ex. <img src="/path/to/small-placeholder_image.png" data-src="/path/to/actual_image.jpg" alt="You better not leave it blank">
+function lazyLoad() {
+  const lazyLoadImages = document.querySelectorAll('img[data-src]');
+
+  for (let img of lazyLoadImages) {
+    img.setAttribute('src', img.getAttribute('data-src'));
+    img.onload = function() {
+      img.removeAttribute('data-src');
+    };
+  }
+}
+export default lazyLoad;

data/assets/js/theme/src/sliders.js

@@ -0,0 +1,88 @@
+// Custom JS to initialize slick slider (https://github.com/kenwheeler/slick) and then build a play/pause toggle button
+// Uses slick-specific methods & slick events. See slick events at: https://github.com/kenwheeler/slick/#events
+const HERO_SLIDER_CLASSNAME = '.hero-slider__slider';  // Our classname for the hero-slider's DOM parent
+const SLICK_PLAY = 'slickPlay';  // Methods unique to slick
+const SLICK_PAUSE = 'slickPause';  // Methods unique to slick
+const SLICK_NEXT_SLIDE = 'slickNext';  // Methods unique to slick
+const play = 'Play';
+const pause = 'Pause';
+// =============================================================================================== //
+// TODO:                                                                                           //
+//                                                                                                 //
+//    Rewrite below prevArrow & nextArrow as <button> elements (like slick's default arrows).      //
+//                                                                                                 //
+// =============================================================================================== //
+
+function initSlick() {
+  $(HERO_SLIDER_CLASSNAME).slick({
+    dots: true,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 4000,
+    prevArrow:'<button type="button" data-role="none" class="prev slick-prev" aria-label="Previous" role="button" style="display: block;">Previous</button>',  // TODO: change to <button> el
+    nextArrow:'<button type="button" data-role="none" class="next slick-next" aria-label="Next" role="button" style="display: block;">Next</button>'  // TODO: change to <button> el
+  });
+}
+
+function setAttributeOnEl(el, attr, value) {
+  return el.setAttribute(attr, value);
+}
+
+function toggleSlickPlayState(el, slickState, newButtonText) {
+  const newButtonTextIsPause = newButtonText === pause;
+
+  $(HERO_SLIDER_CLASSNAME).slick(slickState);
+  setAttributeOnEl(el, 'aria-label', newButtonText);
+  el.classList.toggle('hero-slider__button--play');
+  el.innerHTML = newButtonText;
+
+  newButtonTextIsPause ? $(HERO_SLIDER_CLASSNAME).slick(SLICK_NEXT_SLIDE) : null;
+}
+
+function watchForElementClicks(el) {
+  el.addEventListener('click', function(e) {
+    let buttonTextIsPause = el.innerHTML === 'Pause';
+
+    buttonTextIsPause ? toggleSlickPlayState(el, SLICK_PAUSE, play) : toggleSlickPlayState(el, SLICK_PLAY, pause);
+  });
+}
+
+function createButton() {
+  const SLICK_PARENT_EL = document.querySelector(HERO_SLIDER_CLASSNAME);
+  const button = document.createElement('button');
+  const initialButtonText = 'Pause';
+
+  setAttributeOnEl(button, 'role', 'button');
+  setAttributeOnEl(button, 'type', 'button');
+  setAttributeOnEl(button, 'aria-label', 'Pause');
+  setAttributeOnEl(button, 'style', 'display: block;');
+  button.innerHTML = initialButtonText;
+  button.classList.add('hero-slider__button--toggle');
+  SLICK_PARENT_EL.appendChild(button);
+  watchForElementClicks(button);
+}
+
+function watchForSlickInit(initFunction) {
+  // slick's on 'init' function (See events in slick docs):
+  $(HERO_SLIDER_CLASSNAME).on('init', function(event, slick){ // According to slick doc's; you have to call a $(slick).on('init', function(){ //... }); before you initialize slick
+    createButton();
+  });
+  initFunction();  // Initializing slick after the above `.on('init', function() {})`
+}
+
+function initSliders() {
+  if ( ! document.querySelector(HERO_SLIDER_CLASSNAME) )
+    return;
+
+  watchForSlickInit(initSlick);
+}
+//
+//  USAGE:
+//
+//    import initSliders from './sliders.js';
+//
+//    document.addEventListener('DOMContentLoaded', function() {
+//      initSliders();
+//    });
+export default initSliders;