geico-design-kit 7.0.0

package/dist/global/nav.js

@@ -0,0 +1,1257 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.closeAllPanels = closeAllPanels;
+exports.init = init;
+var utils = _interopRequireWildcard(require("../utils"));
+var _appState = _interopRequireDefault(require("../appState"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+//Global nav vars
+var body,
+  header,
+  headerAnchors,
+  nav,
+  navBackground,
+  actionableIcons,
+  submenuWrapper,
+  panelTriggers,
+  headerLinks,
+  currentlyOpenPanel,
+  currentlyOpenSubPanel,
+  panels,
+  panelUL,
+  panelIsOpen = false,
+  hover_timer,
+  panel_timer,
+  open_timer,
+  svgAnim_timer,
+  currentNavState,
+  mainListItems,
+  mainListItemsAnchor,
+  mainListItemsAnchorMobile,
+  mainListItemsAnchorRightMobile,
+  mobilenavaccordionHeadlines,
+  secondaryListItemsAnchorMobile,
+  svgToAnim,
+  subpanelName,
+  hamburgerIcons,
+  dashOffsetEnd = 180,
+  //svg animation settings
+  dashArrayComplete = 183,
+  //svg animation settings
+  tickSpeed = 3.5,
+  //svg animation settings
+  tickSpeedMobile = 5,
+  //svg animation settings
+  tick = 0; //svg animation settings
+var isHovering = false;
+var isTouch = false;
+function init(config) {
+  if (!config || config.generateMobileNavHtml) {
+    generateMobileMenuElements(config);
+    /*
+     * At this point the mobile nav has been generated so we
+     * can initialize the view-more-less components for the first menu tier.
+     * */
+    var mobileNav = new GDK.Accordion({
+      "content": "#mobile-nav",
+      "forceOpenSingleAccordionElement": true
+    });
+  }
+  console.log('Initialized Navigation');
+  findDomElements();
+  if (_appState["default"].mode === "mobile") {
+    body.style.overflowX = "hidden";
+  }
+
+  //add the navigation background
+  nav.insertAdjacentHTML('afterBegin', '<div id="nav-background"></div>');
+  navBackground = document.getElementById('nav-background');
+  addSVGs();
+  addHamburgerMarkup();
+  if (_appState["default"].mode === "desktop") {
+    currentNavState = "desktop";
+    if (_appState["default"].isTouchDevice) {
+      initDesktopTouchEvents();
+    } else {
+      initDesktopEvents();
+    }
+  } else {
+    currentNavState = "mobile";
+    if (_appState["default"].isTouchDevice) {
+      initMobileTouchEvents();
+    } else {
+      initMobileEvents();
+    }
+  }
+  if (document.querySelector('.skip-to-content') && (!document.body.classList.contains('with-unsupported-browser') || !document.querySelector('.unsupported-browser'))) {
+    document.querySelector('.skip-to-content').addEventListener('blur', function () {
+      document.querySelector('#primary-header').style.top = '0';
+    });
+    document.querySelector('.skip-to-content').addEventListener('focus', function () {
+      document.querySelector('#primary-header').style.top = '2rem';
+    });
+  }
+  Array.prototype.forEach.call(headerAnchors, function (el, i) {
+    el.setAttribute('aria-expanded', 'false');
+  });
+  window.addEventListener('resize', handleResize);
+  handleResize();
+
+  //for IE
+  Array.prototype.forEach.call(mainListItemsAnchor, function (el, i) {
+    el.addEventListener('pointerdown', function (e) {
+      if (e.pointerType == 'touch' && el.parentNode.querySelector('.geico-nav-menu-secondary-wrapper')) {
+        e.preventDefault();
+      }
+    });
+  });
+
+  //for IE, Chrome, FF - affects all browsers
+  document.querySelector('#primary-header').addEventListener('mouseover', function () {
+    if (isHovering === false) {
+      isHovering = true;
+      isTouch = false;
+      _appState["default"].isTouchDevice = false;
+      removeNavEvents();
+      if (_appState["default"].mode === "desktop") {
+        currentNavState = "desktop";
+        if (_appState["default"].isTouchDevice) {
+          initDesktopTouchEvents();
+        } else {
+          initDesktopEvents();
+        }
+      } else {
+        currentNavState = "mobile";
+        if (_appState["default"].isTouchDevice) {
+          initMobileTouchEvents();
+        } else {
+          initMobileEvents();
+        }
+      }
+    }
+  });
+}
+function closeAccordionsMobileNav() {
+  var openAccordians = document.querySelector('#mobile-nav').querySelectorAll(".accordion > li.open");
+  Array.prototype.forEach.call(openAccordians, function (el, i) {
+    el.classList.remove("open");
+    var contentContainer = el.querySelector(".accordion-content-container");
+    contentContainer.style.display = "none";
+  });
+}
+
+/**
+ * findDomElements()
+ * Finds all Dom elements needed to run the navigation functionality
+ */
+function findDomElements() {
+  body = document.getElementsByTagName('body')[0];
+  header = document.getElementById('primary-header');
+  nav = document.getElementById('primary-navigation');
+
+  //find all header anchors
+  headerAnchors = header.querySelectorAll('a');
+
+  //finds any dom elements that have a data attribute of side-panel.
+  //Any header element that opens a panel should have this data attribute, so we know which panel to open
+  panelTriggers = header.querySelectorAll('[data-side-panel-trigger]');
+  headerLinks = header.querySelectorAll('a');
+  panels = nav.querySelectorAll('.panel-wrapper');
+
+  //find all the submenus
+  submenuWrapper = nav.querySelectorAll('.geico-nav-menu-secondary-wrapper');
+
+  //find all hamburger icons
+  hamburgerIcons = header.querySelectorAll('.hamburger-menu');
+
+  //find all the actionable-icons
+  actionableIcons = nav.querySelectorAll('a .geico-icon--actionable');
+  Array.prototype.forEach.call(actionableIcons, function (el, i) {
+    el.style.width = "60px";
+    el.style.height = "60px";
+    el.style.lineHeight = "60px";
+    el.style.fontSize = "30px";
+  });
+
+  //find all first level li's for mobile
+  mainListItems = nav.querySelectorAll('.panel-wrapper > ul > li');
+  mainListItemsAnchor = nav.querySelectorAll('.panel-wrapper > ul > li > a');
+  mainListItemsAnchorMobile = nav.querySelectorAll('.panel-wrapper > #mobile-nav > li > .accordion-content-container > div > ul > li > a');
+  mainListItemsAnchorRightMobile = nav.querySelectorAll('.panel-wrapper.right > ul > li > a');
+  mobilenavaccordionHeadlines = nav.querySelectorAll('.panel-wrapper > #mobile-nav > li > .accordion-headline');
+  secondaryListItemsAnchorMobile = nav.querySelectorAll('.panel-wrapper > #mobile-nav .geico-nav-menu-secondary-wrapper > ul > li > a');
+  panelUL = nav.querySelectorAll('.panel-wrapper > ul');
+}
+
+/**
+ * Svetoslav Kostadinov
+ * 07.Jan.2106
+ *
+ * Generate mobile navigation markup.
+ */
+function generateMobileMenuElements(config) {
+  var navContainer = document.querySelectorAll('#primary-navigation')[0];
+  /* Delete any existing Mobile Nav */
+  if (navContainer.querySelector('[data-side-panel="mobile-menu"]') !== null) {
+    navContainer.removeChild(navContainer.querySelector('[data-side-panel="mobile-menu"]'));
+  }
+  var mobileNavDiv = navContainer.cloneNode(true);
+
+  // Create the mobile menu element
+  var navMobilePanelWrapper = document.createElement('div');
+  navMobilePanelWrapper.className = 'panel-wrapper';
+  navMobilePanelWrapper.setAttribute('data-side-panel', 'mobile-menu');
+
+  // Generate the mobile nav shell
+  var mobileNavigation = document.createElement('ul');
+  mobileNavigation.setAttribute('id', 'mobile-nav');
+  mobileNavigation.setAttribute('class', 'accordion');
+
+  // generate the search form section
+  if (config && config.mobileSearchForm) {
+    var searchForm = document.createElement('form');
+    searchForm.setAttribute('method', config.mobileSearchForm.method);
+    searchForm.setAttribute('action', config.mobileSearchForm.action);
+    searchForm.setAttribute('class', 'search-box');
+    var searchInputField = document.createElement('input');
+    searchInputField.setAttribute('type', 'text');
+    searchInputField.setAttribute('class', 'search-input');
+    searchInputField.setAttribute('placeholder', config.mobileSearchForm.placeholder);
+    searchInputField.setAttribute('name', config.mobileSearchForm.name);
+    searchInputField.setAttribute('aria-label', config.mobileSearchForm.ariaLabel);
+    var searchSubmitButton = document.createElement('button');
+    searchSubmitButton.setAttribute('type', 'submit');
+    searchSubmitButton.setAttribute('class', 'icon-search small');
+
+    // assemble the search form
+    searchForm.appendChild(searchInputField);
+    searchForm.appendChild(searchSubmitButton);
+    var searchResultField = document.createElement('ul');
+    searchResultField.setAttribute('class', 'dropdown-list');
+    searchResultField.setAttribute('style', 'display: none');
+
+    // Add the search form to the Mobile Nav before the Tier One Elements Loop
+    navMobilePanelWrapper.appendChild(searchForm);
+    navMobilePanelWrapper.appendChild(searchResultField);
+  }
+  var mobileHeader = document.querySelector('#primary-header').cloneNode(true);
+  var primaryHeaderLeftAnchors = mobileHeader.querySelectorAll('#header-left-links .desktop-links a');
+  var nonMenuAnchorUL = document.createElement('UL');
+  Array.prototype.forEach.call(primaryHeaderLeftAnchors, function (el, i) {
+    if (!el.getAttribute('data-side-panel-trigger')) {
+      var justAnchorLI = document.createElement('LI');
+      var anchorTextNode = document.createTextNode(el.innerHTML);
+      el.innerHTML = "";
+      var justAnchorSpan = document.createElement('SPAN');
+      justAnchorSpan.classList.add('geico-nav-menu-item');
+      justAnchorSpan.appendChild(anchorTextNode);
+      el.appendChild(justAnchorSpan);
+      justAnchorLI.appendChild(el);
+      nonMenuAnchorUL.appendChild(justAnchorLI);
+    }
+  });
+
+  // generate nav tier 1 elements
+  // pull nav elements from the desktop main menu.
+  var navElementsArray = mobileNavDiv.querySelectorAll('.panel-wrapper');
+  // Loop through and generate the mobile menu structure.
+  Array.prototype.forEach.call(navElementsArray, function (element, i) {
+    if (element.className.indexOf("no-mobile") === -1) {
+      var tierOneElement = document.createElement('li');
+
+      // Element Headline and Label
+      var tierOneHeadline = document.createElement('div');
+      tierOneHeadline.setAttribute('class', 'accordion-headline');
+      tierOneHeadline.setAttribute('tabindex', '0');
+      var tierOneHeadlineH3 = document.createElement('h3');
+      tierOneHeadlineH3.innerHTML = element.getAttribute('data-side-panel').capitalizeFirstLetter();
+      tierOneHeadline.appendChild(tierOneHeadlineH3);
+
+      //element content container
+      var tierOneContentContainer = document.createElement('div');
+      tierOneContentContainer.setAttribute('class', 'accordion-content-container');
+      var tierOneContent = document.createElement('div');
+      tierOneContent.setAttribute('class', 'accordion-content');
+      tierOneContent.setAttribute('data-side-panel', 'mobile-menu');
+      var tierOneContentUl = document.createElement('ul');
+      // fill the ul with tier 2 and 3 elements.
+      Array.prototype.forEach.call(element.querySelectorAll('ul>li[data-name]'), function (el, i) {
+        var classNames = el.className;
+        var classArray = classNames.split(' ');
+        el.className = classArray.join(' ');
+        tierOneContentUl.appendChild(el);
+      });
+
+      // assemble the navigation
+      tierOneContent.appendChild(tierOneContentUl);
+      tierOneContentContainer.appendChild(tierOneContent);
+      tierOneElement.appendChild(tierOneHeadline);
+      tierOneElement.appendChild(tierOneContentContainer);
+      mobileNavigation.appendChild(tierOneElement);
+    }
+  });
+  navMobilePanelWrapper.appendChild(mobileNavigation);
+  navMobilePanelWrapper.appendChild(nonMenuAnchorUL);
+  navContainer.appendChild(navMobilePanelWrapper);
+}
+
+/**
+ * Svetoslav Kostadinov
+ * 07.Jan.2016
+ *
+ * @returns {string}
+ */
+String.prototype.capitalizeFirstLetter = function () {
+  return this.charAt(0).toUpperCase() + this.slice(1);
+};
+
+/**
+ * initDesktopEvents()
+ * Initialize all desktop  events
+ */
+function initDesktopEvents() {
+  console.log("initDesktopEvents");
+  document.addEventListener('keyup', function (e) {
+    if (document.getElementById('wrapper').contains(e.target)) {
+      if (e.which == '9' || e.keyCode == '9') {
+        if (panelIsOpen) {
+          closePanel(currentlyOpenPanel);
+        }
+      }
+    }
+  });
+  Array.prototype.forEach.call(panelTriggers, function (el, i) {
+    el.addEventListener('click', menuEnter);
+    el.addEventListener('keydown', menuEnter);
+  });
+  Array.prototype.forEach.call(headerLinks, function (el, i) {
+    el.addEventListener('mouseenter', displayHoverStyle);
+    el.addEventListener('mouseleave', removeHoverStyle);
+  });
+
+  //keyboard navigation events on header anchors
+  Array.prototype.forEach.call(headerAnchors, function (el, i) {
+    addKeyboardFocus(el);
+    el.addEventListener('focus', focusPanel);
+  });
+  Array.prototype.forEach.call(mainListItems, function (el, i) {
+    el.addEventListener('click', closeAllPanels);
+    el.addEventListener('mouseenter', openSubMenu);
+    el.addEventListener('focus', openSubMenu, true);
+  });
+
+  //for each submenu wrapper listen for its mouse over
+  //so we know when to close the menu when you roll off the submenu
+  Array.prototype.forEach.call(submenuWrapper, function (el, i) {
+    el.addEventListener('mouseover', submenuWrapperHover);
+  });
+
+  //for each panel listen for its mouse leave so we know when to close the menu
+  Array.prototype.forEach.call(panels, function (el, i) {
+    el.addEventListener('mouseenter', function () {
+      var dataside = el.getAttribute('data-side-panel');
+      Array.prototype.forEach.call(headerAnchors, function (el, i) {
+        if (el.getAttribute('data-side-panel-trigger') != dataside) {
+          el.classList.add("not-open");
+        }
+      });
+    });
+    var firstFocusableInPanel = nav.querySelectorAll('.first-focusable');
+    Array.prototype.forEach.call(firstFocusableInPanel, function (el, i) {
+      el.addEventListener('keydown', keyPressSearchBackward);
+    });
+    if (document.querySelector('.search input')) {
+      document.querySelector('.search input').addEventListener('keydown', keyPressSearchBackward);
+    }
+    if (!el.classList.contains('search')) {
+      if (el.querySelector('ul') && el.firstElementChild.nodeName == 'UL' && el.querySelector('ul').firstElementChild && el.querySelector('ul').lastElementChild) {
+        el.querySelector('ul').firstElementChild.querySelector('a').addEventListener('keydown', keyPressFirstBackwards);
+        if (el.querySelector('ul').lastElementChild.querySelector('.geico-nav-menu-secondary-wrapper')) {
+          el.querySelector('ul').lastElementChild.querySelector('.geico-nav-menu-secondary-wrapper').querySelector('ul').lastElementChild.querySelector('a').addEventListener('keydown', keyPressNextTab);
+        } else {
+          el.querySelector('ul').lastElementChild.querySelector('a').addEventListener('keydown', keyPressNextTab);
+        }
+      } else {
+        if (el.lastElementChild.querySelector('ul') && el.lastElementChild.querySelector('ul').lastElementChild) {
+          el.lastElementChild.querySelector('ul').lastElementChild.querySelector('a').addEventListener('keydown', keyPressNextTab);
+        }
+      }
+    }
+    navBackground.addEventListener('click', closeAllPanels);
+  });
+}
+function removeHoverStyle() {
+  var _this = this;
+  Array.prototype.forEach.call(headerAnchors, function (el, i) {
+    if (el != _this) {
+      el.classList.remove("not-open");
+    }
+  });
+}
+function displayHoverStyle() {
+  var _this2 = this;
+  Array.prototype.forEach.call(headerAnchors, function (el, i) {
+    if (el != _this2) {
+      el.classList.add("not-open");
+    }
+  });
+}
+function keyPressSearchBackward(e) {
+  if (e.shiftKey && e.keyCode == 9) {
+    e.preventDefault();
+    var parentPanel = e.target.parentNode.parentNode;
+    //to be refined for an easier way to implement this logic
+    if (!parentPanel.getAttribute('data-side-panel')) {
+      parentPanel = parentPanel.parentNode;
+      if (!parentPanel.getAttribute('data-side-panel')) {
+        parentPanel = parentPanel.parentNode;
+        if (!parentPanel.getAttribute('data-side-panel')) {
+          parentPanel = parentPanel.parentNode;
+        }
+      }
+    }
+    header.querySelector('[data-side-panel-trigger="' + parentPanel.getAttribute('data-side-panel') + '"]').focus();
+    if (_appState["default"].mode === "desktop") {
+      Array.prototype.forEach.call(headerAnchors, function (el, i) {
+        el.removeAttribute('tabindex');
+      });
+    }
+  }
+}
+function keyPressNextTab(e) {
+  if (e.shiftKey) {
+    return;
+  } else if (e.which == 9 || e.keyCode == 9) {
+    console.log('tab only');
+    console.log(e.target);
+    var parentPanel = findUpParent(e.target, 'data-side-panel');
+    //let parentPanel = e.target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
+    //console.log(header.querySelector('[data-side-panel-trigger="' + parentPanel.getAttribute('data-side-panel') + '"]').parentNode);
+    header.querySelector('[data-side-panel-trigger="' + parentPanel.getAttribute('data-side-panel') + '"]').parentNode.querySelector('a').focus();
+  }
+}
+function keyPressFirstBackwards(e) {
+  //header.querySelector('[data-side-panel-trigger="versions"]').focus();
+  if (e.shiftKey && e.keyCode == 9) {
+    e.preventDefault();
+    var parentPanel = e.target.parentNode.parentNode.parentNode;
+    if (_appState["default"].mode == 'desktop') {
+      header.querySelector('[data-side-panel-trigger="' + parentPanel.getAttribute('data-side-panel') + '"]').focus();
+    } else if (_appState["default"].mode == 'mobile') {
+      header.querySelector('.mobile-links [data-side-panel-trigger="' + parentPanel.getAttribute('data-side-panel') + '"]').focus();
+    }
+    console.log(parentPanel);
+    console.log(header.querySelector('[data-side-panel-trigger="' + parentPanel.getAttribute('data-side-panel') + '"]'));
+  }
+}
+function findUpParent(el, attribute) {
+  while (el.parentNode) {
+    el = el.parentNode;
+    if (el.getAttribute(attribute)) return el;
+  }
+  return null;
+}
+
+/**
+ * initDesktopTouchEvents()
+ * Initialize all desktop touch events
+ */
+function initDesktopTouchEvents() {
+  console.log("initDesktopTouchEvents");
+
+  //All panel triggers should have a click event that open or closes a panel
+  Array.prototype.forEach.call(panelTriggers, function (el, i) {
+    el.addEventListener('touchend', menuEnter);
+    el.addEventListener('click', function (e) {
+      if (el.getAttribute('data-side-panel-trigger') !== '') {
+        e.preventDefault();
+      }
+    });
+  });
+  Array.prototype.forEach.call(mainListItemsAnchor, function (el, i) {
+    el.addEventListener('click', openSubMenu);
+  });
+
+  //for each submenu wrapper listen for its mouse over
+  //so we know when to close the menu when you roll off the submenu
+  Array.prototype.forEach.call(submenuWrapper, function (el, i) {
+    el.addEventListener('touchend', submenuWrapperHover);
+  });
+  navBackground.addEventListener('touchend', closeAllPanels);
+}
+
+/**
+ * initMobileEvents()
+ * Initialize all mobile events
+ */
+function initMobileEvents() {
+  var isClick = false;
+  document.addEventListener('keyup', function (e) {
+    if (document.getElementById('wrapper').contains(e.target)) {
+      if (e.which == '9' || e.keyCode == '9') {
+        if (panelIsOpen) {
+          closePanel(currentlyOpenPanel);
+          header.querySelector('.mobile-links [data-side-panel-trigger="' + currentlyOpenPanel.getAttribute('data-side-panel') + '"]').focus();
+        }
+      }
+    }
+  });
+
+  //All panel triggers should have a click event that open or closes a panel
+  Array.prototype.forEach.call(panelTriggers, function (el, i) {
+    el.addEventListener('click', menuEnter);
+    el.addEventListener('keypress', menuEnter);
+  });
+  Array.prototype.forEach.call(headerAnchors, function (el, i) {
+    addKeyboardFocus(el);
+  });
+
+  //close mobile panel when focusing on geico logo
+  document.querySelector('#header-middle-links a').addEventListener('focus', function () {
+    Array.prototype.forEach.call(panels, function (panel, i) {
+      if (panel.classList.contains('open')) {
+        closePanel(panel);
+      }
+    });
+  });
+  Array.prototype.forEach.call(mainListItemsAnchorMobile, function (el, i) {
+    addKeyboardFocus(el);
+    el.addEventListener('mousedown', function () {
+      isClick = true;
+    });
+    el.addEventListener('click', openMobileSubMenu);
+    el.addEventListener('focus', function (e) {
+      var submenu = el.parentNode.getElementsByClassName('geico-nav-menu-secondary-wrapper');
+      if (!isClick && submenu.length > 0) {
+        openMobileSubMenu.bind(this)(e);
+      } else {
+        if (currentlyOpenSubPanel) {
+          //closeMobileSubMenu(currentlyOpenSubPanel); do not need, duplicate
+        }
+      }
+
+      //reset flag
+      isClick = false;
+      var parentAccordion = findClosestParent(el, 'accordion-content-container');
+      var accordionHeadline = parentAccordion.parentNode.querySelector('.accordion-headline');
+      if (!parentAccordion.parentNode.classList.contains('open')) {
+        accordionHeadline.click();
+      }
+    });
+    Array.prototype.forEach.call(secondaryListItemsAnchorMobile, function (el, i) {
+      addKeyboardFocus(el);
+      el.addEventListener('focus', function (e) {
+        //var parentLI = el.closest('.accordion-content > ul > li');
+        var parentLI = findUpParent(el, 'data-name');
+        var submenu = parentLI.querySelector('.geico-nav-menu-secondary-wrapper');
+        if (!parentLI.classList.contains('open')) {
+          openMobileSubMenu.bind(submenu)(e);
+        }
+        var parentAccordion = findClosestParent(el, 'accordion-content-container');
+        var accordionHeadline = parentAccordion.parentNode.querySelector('.accordion-headline');
+        if (!parentAccordion.parentNode.classList.contains('open')) {
+          accordionHeadline.click();
+        }
+      });
+      el.addEventListener('click', closeAllPanels);
+    });
+  });
+  navBackground.addEventListener('click', closeAllPanels);
+  Array.prototype.forEach.call(mobilenavaccordionHeadlines, function (el, i) {
+    addKeyboardFocus(el);
+    el.addEventListener('click', closeSubMenufromHeadline);
+  });
+  Array.prototype.forEach.call(headerAnchors, function (el, i) {
+    el.setAttribute('tabindex', '-1');
+    if (el.parentNode.parentNode.classList.contains('mobile-links') || el.parentNode.parentNode.classList.contains('right-mobile-links') || el.classList.contains('icon-geico')) {
+      el.removeAttribute('tabindex');
+    }
+  });
+  Array.prototype.forEach.call(mainListItemsAnchorRightMobile, function (el, i) {
+    el.addEventListener('focus', function () {
+      addKeyboardFocus(el);
+    });
+  });
+}
+
+/**
+ * initMobileTouchEvents()
+ * Initialize mobile touch events
+ */
+function initMobileTouchEvents() {
+  //All panel triggers should have a click event that open or closes a panel
+  Array.prototype.forEach.call(panelTriggers, function (el, i) {
+    el.addEventListener('touchend', menuEnter);
+  });
+  Array.prototype.forEach.call(mainListItemsAnchorMobile, function (el, i) {
+    el.addEventListener('click', openMobileSubMenu);
+  });
+  navBackground.addEventListener('touchend', closeAllPanels);
+  Array.prototype.forEach.call(mobilenavaccordionHeadlines, function (el, i) {
+    el.addEventListener('touchend', closeSubMenufromHeadline);
+  });
+}
+function closeSubMenufromHeadline() {
+  if (currentlyOpenSubPanel) {
+    closeMobileSubMenu(currentlyOpenSubPanel);
+    //console.log(subWrapper.getBoundingClientRect().top);
+  }
+}
+
+/**
+ * removeNavEvents()
+ * Remove all navigation events
+ */
+
+function removeNavEvents() {
+  Array.prototype.forEach.call(panelTriggers, function (el, i) {
+    el.removeEventListener('touchstart', menuEnter);
+    el.removeEventListener('click', menuEnter);
+    el.removeEventListener('mouseenter', menuEnter);
+    el.removeEventListener('mouseleave', menuLeave);
+    el.removeEventListener('keypress', menuEnter);
+    el.removeEventListener('touchend', menuEnter);
+  });
+  Array.prototype.forEach.call(headerAnchors, function (el, i) {
+    el.removeEventListener('keypress', menuEnter);
+    el.removeEventListener('focus', focusPanel);
+  });
+  Array.prototype.forEach.call(mainListItems, function (el, i) {
+    el.removeEventListener('click', closeAllPanels);
+    el.removeEventListener('mouseenter', openSubMenu);
+    el.removeEventListener('focus', openSubMenu, true);
+  });
+  Array.prototype.forEach.call(mainListItemsAnchor, function (el, i) {
+    el.removeEventListener('click', openMobileSubMenu);
+    el.removeEventListener('touchstart', openSubMenu);
+    el.removeEventListener('mouseenter', openSubMenu);
+  });
+  Array.prototype.forEach.call(submenuWrapper, function (el, i) {
+    el.removeEventListener('touchstart', submenuWrapperHover);
+    el.removeEventListener('mouseover', submenuWrapperHover);
+  });
+  Array.prototype.forEach.call(panels, function (el, i) {
+    el.removeEventListener('mouseleave', panelLeave);
+  });
+  navBackground.removeEventListener('touchstart', closeAllPanels);
+  navBackground.removeEventListener('click', closeAllPanels);
+  removeTabIndexes();
+}
+function focusPanel() {
+  Array.prototype.forEach.call(panels, function (panel, i) {
+    if (panel.classList.contains('open')) {
+      closePanel(panel);
+    }
+  });
+}
+
+/**
+ * removeTabIndexes()
+ * remove all tabindexes from nav elements
+ */
+function removeTabIndexes() {
+  var headerLinks = header.querySelectorAll('a');
+  Array.prototype.forEach.call(headerLinks, function (headerLink) {
+    headerLink.removeAttribute('tabindex');
+  });
+  var panelElements = nav.querySelectorAll('*');
+  Array.prototype.forEach.call(panelElements, function (panelElement) {
+    if (panelElement.classList && !panelElement.classList.contains('accordion-headline')) panelElement.removeAttribute('tabindex');
+  });
+}
+
+/**
+ * addKeyboardFocus()
+ * add/remove focus class to keyboard focused and blurred elements
+ */
+function addKeyboardFocus(element) {
+  var isClick = false;
+  element.addEventListener('mousedown', function () {
+    isClick = true;
+  });
+  element.addEventListener('focus', function (e) {
+    if (!isClick) {
+      element.classList.add('keyboard-focus');
+    }
+
+    //reset flag
+    isClick = false;
+  });
+  element.addEventListener('blur', function () {
+    element.classList.remove('keyboard-focus');
+  });
+}
+
+/**
+ * findClosestParent()
+ * finds closest parent element by class
+ */
+function findClosestParent(element, parentClass) {
+  while ((element = element.parentElement) && !element.classList.contains(parentClass));
+  return element;
+}
+
+/**
+ * menuEnter()
+ * Gets called whenever your mouse enters a trigger link
+ */
+
+function menuEnter(e) {
+  var _this3 = this;
+  //for keyboard navigation: if anything other than "enter" key is pressed do not continue
+  if ((e.type == 'keydown' || e.type == 'keypress') && (e.keyCode || e.which) != 13) {
+    return;
+  } else if (e.type == 'keydown' || e.type == 'keypress' || e.type == 'click') {
+    if (_appState["default"].mode === "desktop") {
+      Array.prototype.forEach.call(headerAnchors, function (el, i) {
+        el.setAttribute('tabindex', '-1');
+      });
+    }
+    Array.prototype.forEach.call(submenuWrapper, function (el, i) {
+      el.removeEventListener('mouseover', submenuWrapperHover);
+    });
+  } else if (e.type == 'mouseenter') {
+    removeNavEvents();
+    if (_appState["default"].isTouchDevice) {
+      initDesktopTouchEvents();
+    } else {
+      initDesktopEvents();
+    }
+    if (_appState["default"].mode == "desktop") {
+      if (panelIsOpen && e.target.classList.contains('open')) {
+        e.preventDefault();
+        return;
+      }
+    }
+  } else if (e.type == 'click') {
+    if (_appState["default"].mode == "desktop") {
+      if (panelIsOpen) {
+        e.preventDefault();
+        return;
+      }
+    }
+  }
+  e.preventDefault();
+  var panelToFind;
+
+  //get the name of the panel to find which is stored in the data attribute of the trigger
+  if (e.target.nodeName === "A") {
+    panelToFind = e.target.getAttribute('data-side-panel-trigger');
+  } else {
+    panelToFind = utils.getParentByTagName(e.target, "A").getAttribute('data-side-panel-trigger');
+  }
+  if (_appState["default"].mode === "mobile" && utils.hasClass(this, 'open')) {
+    //if our mode is mobile and the panel is already open just close it
+    Array.prototype.forEach.call(panels, function (el, i) {
+      if (el.getAttribute('data-side-panel') === panelToFind) {
+        closePanel(el);
+      }
+    });
+  } else {
+    if (this.classList.contains('open')) {
+      closePanel(currentlyOpenPanel);
+      return;
+    }
+
+    //if there is a current panel open then close it before opening the new one
+    if (panelIsOpen) {
+      closePanel(currentlyOpenPanel);
+    }
+
+    //add and open class the the a tag
+    this.classList.add('open');
+    this.setAttribute('aria-expanded', 'true');
+
+    //for each panel find the one that was triggered
+    Array.prototype.forEach.call(panels, function (el, i) {
+      if (el.getAttribute('data-side-panel') === panelToFind) {
+        openPanel(el);
+        if (_appState["default"].mode == 'desktop' && !_appState["default"].isTouchDevice) el.style.display = "block";
+        var allAinPanel = el.querySelectorAll('a');
+        Array.prototype.forEach.call(allAinPanel, function (el, i) {
+          el.removeAttribute('tabindex');
+        });
+        var allULinPanel = el.querySelectorAll('ul');
+        if (el.querySelector('.geico-nav-menu-secondary-wrapper')) {
+          var allSecondaryUL = el.querySelectorAll('.geico-nav-menu-secondary-wrapper > ul');
+          Array.prototype.forEach.call(allSecondaryUL, function (el, i) {
+            el.removeAttribute('tabindex');
+          });
+          Array.prototype.forEach.call(allULinPanel, function (el, i) {
+            el.setAttribute('tabindex', '-1');
+            var allSVGinUL = el.querySelectorAll('svg');
+            Array.prototype.forEach.call(allSVGinUL, function (el, i) {
+              el.setAttribute('focusable', 'false');
+            });
+          });
+        }
+      } else {
+        if (_appState["default"].mode == 'desktop' && !_appState["default"].isTouchDevice) el.style.display = "none";
+        var _allAinPanel = el.querySelectorAll('a');
+        Array.prototype.forEach.call(_allAinPanel, function (el, i) {
+          el.setAttribute('tabindex', '-1');
+        });
+        var _allULinPanel = el.querySelectorAll('ul');
+        if (el.querySelector('.geico-nav-menu-secondary-wrapper')) {
+          var _allSecondaryUL = el.querySelectorAll('.geico-nav-menu-secondary-wrapper > ul');
+          Array.prototype.forEach.call(_allSecondaryUL, function (el, i) {
+            el.setAttribute('tabindex', '-1');
+          });
+        }
+        Array.prototype.forEach.call(_allULinPanel, function (el, i) {
+          el.setAttribute('tabindex', '-1');
+        });
+      }
+    });
+
+    //add a class to every panel trigger you did not roll over
+    Array.prototype.forEach.call(panelTriggers, function (el, i) {
+      if (el != _this3) {
+        el.classList.add("not-open");
+        el.setAttribute('aria-expanded', 'false');
+      }
+    });
+  }
+}
+
+/**
+ * menuEnter()
+ * Gets called whenever your mouse leaves a trigger link
+ */
+function menuLeave(e) {
+  //When your mouse leaves the trigger detect if its over the open panel
+  //If its not over the open panel then close the panel
+  if (currentlyOpenPanel) {
+    if (!currentlyOpenPanel.contains(e.relatedTarget)) {
+      closePanel(currentlyOpenPanel);
+    }
+  }
+}
+function scrollTo(element, to, duration) {
+  if (duration <= 0) return;
+  var difference = to - element.scrollTop;
+  var perTick = difference / duration * 10;
+  setTimeout(function () {
+    element.scrollTop = element.scrollTop + perTick;
+    if (element.scrollTop === to) return;
+    scrollTo(element, to, duration - 10);
+  }, 10);
+}
+
+/**
+ * panelLeave()
+ * Gets fired when your mouse leaves a panel
+ */
+function panelLeave() {
+  //only close the panel if there is not a sub panel open
+  if (currentlyOpenSubPanel || currentlyOpenPanel) {
+    if (!currentlyOpenPanel.contains(document.activeElement)) {
+      closePanel(currentlyOpenPanel);
+    }
+  }
+}
+
+/**
+ * openPanel()
+ * Opens a panel by adding the necessary open a classes
+ */
+function openPanel(el) {
+  //if there is a panel close timer than cancel it because we just opened up another panel
+  if (panel_timer) {
+    clearTimeout(panel_timer);
+    nav.style.display = "block";
+  }
+  nav.style.display = "block";
+  if (_appState["default"].mode === "mobile") {
+    document.querySelector('body').style.overflowY = "hidden";
+    document.querySelector('body').style.position = "fixed";
+    header.querySelector('#header-middle-links a').setAttribute('tabindex', '-1');
+    if (el.getAttribute('data-side-panel') == 'mobile-menu') {
+      var allHeaderRight = header.querySelectorAll('#header-right-links .mobile-links a');
+      Array.prototype.forEach.call(allHeaderRight, function (el, i) {
+        el.setAttribute('tabindex', '-1');
+      });
+    } else if (el.classList.contains('right')) {
+      header.querySelector('#header-middle-links a').removeAttribute('tabindex');
+    }
+  }
+  clearTimeout(open_timer);
+  open_timer = setTimeout(function () {
+    nav.classList.add('open');
+    if (el.getAttribute('data-side-panel') == 'mobile-menu') {
+      header.classList.add('open');
+    }
+    el.classList.add('open');
+    if (_appState["default"].mode === 'mobile' && !_appState["default"].isTouchDevice) {
+      Array.prototype.forEach.call(panels, function (el, i) {
+        if (!el.classList.contains('open')) {
+          el.style.display = "none";
+        }
+      });
+    }
+
+    //store the open panel
+    currentlyOpenPanel = el;
+    panelIsOpen = true;
+  }, 50);
+}
+
+/**
+ * closePanel()
+ * Closes a panel by removing the necessary open a classes
+ */
+function closePanel(el, e) {
+  if (_appState["default"].mode === "mobile") {
+    document.querySelector('body').style.overflowY = "visible";
+    document.querySelector('body').style.position = "relative";
+    closeAccordionsMobileNav();
+    header.querySelector('#header-middle-links a').removeAttribute('tabindex');
+  }
+  if (_appState["default"].mode === 'mobile') {
+    Array.prototype.forEach.call(panels, function (el, i) {
+      el.removeAttribute('style');
+    });
+  }
+  nav.classList.remove('open');
+  header.classList.remove('open');
+  el.classList.remove('open');
+  panelIsOpen = false;
+  subpanelName = null;
+  Array.prototype.forEach.call(panelTriggers, function (el, i) {
+    el.classList.remove('open');
+    el.classList.remove('not-open');
+    el.setAttribute('aria-expanded', 'false');
+  });
+
+  //if a sub menu is open then close that
+  if (currentlyOpenSubPanel) {
+    currentlyOpenSubPanel.classList.remove("open");
+    currentlyOpenSubPanel = null;
+  }
+  panel_timer = setTimeout(function () {
+    Array.prototype.forEach.call(mainListItems, function (el, i) {
+      el.classList.remove("open");
+    });
+    if (_appState["default"].mode === "mobile") {
+      Array.prototype.forEach.call(submenuWrapper, function (el, i) {
+        el.style.maxHeight = "0px";
+      });
+    }
+    nav.style.display = "none";
+    panel_timer = null;
+  }, 500);
+  removeTabIndexes();
+  //no animation for kit purpose because too jagged
+}
+
+/**
+ * submenuWrapperHover()
+ * Detects if you have rolled over the submenuWrapper
+ * so we know when to close the menu when you roll off the submenu
+ */
+function submenuWrapperHover(e) {
+  if (currentlyOpenPanel) {
+    //NodeList of items that the mouse is currently over in document order.
+    //The last element in the NodeList is the most specific, each preceding
+    //one should be a parent, grandparent, and so on.
+    var nodes = document.querySelectorAll(":hover");
+
+    //if the target node is a div an the last hovered node is the wrapper
+    //we know we are off the submenu so close menues
+    if (e.target.nodeName == "DIV" && e.target == nodes[nodes.length - 1]) {
+      closePanel(currentlyOpenPanel);
+    }
+  }
+}
+
+/**
+ * openSubMenu()
+ * Opens the submenu when you click on its parent li
+ * This is used when on a touch device
+ */
+function openSubMenu(e) {
+  Array.prototype.forEach.call(headerAnchors, function (el, i) {
+    el.removeAttribute('tabindex');
+  });
+  //dont open a subpanel if the parent is not open
+  if (!panelIsOpen) {
+    return;
+  }
+  clearTimeout(hover_timer);
+  var p;
+  var hoverDelay;
+  if (_appState["default"].isTouchDevice) {
+    p = this.parentNode;
+    hoverDelay = 0;
+  } else {
+    p = this;
+    hoverDelay = 150;
+  }
+  var subWrapper = p.querySelector(".geico-nav-menu-secondary-wrapper");
+  if (subWrapper) {
+    e.preventDefault();
+  }
+  hover_timer = setTimeout(function () {
+    if (!utils.hasClass(p, 'open')) {
+      //animate the svg
+      if (p.querySelector("svg")) {
+        svgToAnim = p.querySelector("svg");
+        svgAnim();
+      }
+    }
+
+    //if a sub menu is open then close that
+    if (currentlyOpenSubPanel) {
+      currentlyOpenSubPanel.classList.remove("open");
+      currentlyOpenSubPanel = null;
+    }
+    currentlyOpenSubPanel = p;
+    if (!_appState["default"].isTouchDevice) {
+      p.classList.toggle('open'); //this FF
+    }
+    if (subWrapper) {
+      if (_appState["default"].isTouchDevice) {
+        p.classList.toggle('open');
+      }
+    }
+  }, hoverDelay);
+}
+
+/**
+ * closeMobileSubMenu()
+ * Opens the submenu when you click on its parent li
+ */
+function closeMobileSubMenu(el) {
+  el.classList.remove('open');
+  var subWrapper = el.querySelector(".geico-nav-menu-secondary-wrapper");
+  subWrapper.style.maxHeight = "0px";
+  currentlyOpenSubPanel = null;
+  subpanelName = null;
+}
+
+/**
+ * openMobileSubMenu()
+ * Opens the submenu when you click on its parent li
+ */
+function openMobileSubMenu(e) {
+  //console.log("openMobileSubMenu");
+
+  //this is the list item that was clicked
+  var p = this.parentNode;
+  var subWrapper = p.querySelector(".geico-nav-menu-secondary-wrapper");
+  var clickedSubpanelName = p.getAttribute('data-name');
+  var shouldOpenSubPanel = false;
+  var subMenuOpened = false;
+  //console.log(subWrapper.parentNode.querySelector('a').querySelector('span').getBoundingClientRect().top);
+
+  if (subWrapper) {
+    //if there is a submenu then prevent default
+    e.preventDefault();
+    if (subpanelName !== clickedSubpanelName) {
+      shouldOpenSubPanel = true;
+    }
+
+    ///close any open submenus
+    if (currentlyOpenSubPanel) {
+      subMenuOpened = true;
+      closeMobileSubMenu(currentlyOpenSubPanel);
+    }
+
+    //if the submenu you are trying to open up is not already open then open the submenu
+    if (shouldOpenSubPanel) {
+      //store the open panel and its name
+      currentlyOpenSubPanel = p;
+      subpanelName = this.parentNode.getAttribute('data-name');
+      if (!utils.hasClass(p, 'open')) {
+        //animate the svg
+        svgToAnim = p.querySelector("svg");
+        svgAnim();
+      }
+      p.classList.toggle('open');
+      var accordionContainer = searchParentByClassName(this, "accordion-content-container");
+      var subWrapperUl = subWrapper.querySelector("ul");
+      if (window.getComputedStyle(subWrapper).maxHeight == "0px") {
+        subWrapper.style.maxHeight = outerHeight(subWrapperUl) + "px";
+        accordionContainer.style.maxHeight = accordionContainer.offsetHeight + outerHeight(subWrapperUl) + "px";
+
+        //if there are no other submenus opened, scroll the current submenu being opened to the top of the page
+        if (subMenuOpened === false) {
+          var aboveNavOffset = 0;
+          var aboveNavElements = document.getElementsByClassName('above-nav');
+          Array.prototype.forEach.call(aboveNavElements, function (el, i) {
+            aboveNavOffset += el.offsetHeight;
+          });
+          var mobileMenu = document.querySelector('[data-side-panel="mobile-menu"]');
+          var offset = p.getBoundingClientRect().top + mobileMenu.scrollTop - aboveNavOffset;
+          setTimeout(function () {
+            scrollTo(mobileMenu, offset, 200);
+          }, 296);
+        }
+      } else {
+        accordionContainer.style.maxHeight = accordionContainer.offsetHeight - outerHeight(subWrapperUl) + "px";
+        subWrapper.style.maxHeight = "0px";
+      }
+    }
+  } else {
+    closePanel(currentlyOpenPanel);
+  }
+}
+
+/**
+ * Svetoslav Kostadinov
+ * 06.Jan.2016
+ * Recursive Search of a Parent element by a search Criteria
+ *
+ * @param sPoint // starting point
+ * @param criteria // search criteria
+ * @returns {*}
+ */
+function searchParentByClassName(sPoint, criteria) {
+  if (typeof sPoint === "undefined") {
+    return null;
+  } else if (sPoint.className.indexOf(criteria) === -1) {
+    var element = searchParentByClassName(sPoint.parentNode, criteria);
+    if (element !== null) return element;
+  } else {
+    return sPoint;
+  }
+}
+
+/**
+ * addSVGs()
+ * Adds the border SVGs to all first level nav items
+ */
+function addSVGs() {
+  //All panel triggers should have a click event that open or closes a panel
+  Array.prototype.forEach.call(actionableIcons, function (el, i) {
+    el.insertAdjacentHTML('beforebegin', "<svg width=\"60\" height=\"60\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" style=\"width: 60px; height: 60px;\"><circle cx=\"30\" cy='30' r=\"29\" /></svg>");
+  });
+  Array.prototype.forEach.call(actionableIcons, function (el, i) {
+    el.style.width = "60px";
+    el.style.height = "60px";
+    el.style.lineHeight = "60px";
+    el.style.fontSize = "30px";
+  });
+}
+
+/**
+ * addSVGs()
+ * Adds additional markup to every hamburger item
+ */
+function addHamburgerMarkup() {
+  //All panel triggers should have a click event that open or closes a panel
+  Array.prototype.forEach.call(hamburgerIcons, function (el, i) {
+    el.insertAdjacentHTML('beforeend', "<div class=\"hamburger\"><span></span><span></span><span></span><span></span></div>");
+  });
+}
+
+/**
+ * handleResize()
+ * listen for window resize so we can detect the mode
+ */
+function handleResize() {
+  if (_appState["default"].mode === "desktop" && currentNavState === "mobile") {
+    //clear some styling
+    Array.prototype.forEach.call(submenuWrapper, function (el, i) {
+      el.removeAttribute('style');
+    });
+    Array.prototype.forEach.call(panels, function (el, i) {
+      if (!el.classList.contains('open')) {
+        el.removeAttribute('style');
+      }
+    });
+    removeNavEvents();
+    currentNavState = "desktop";
+    if (currentlyOpenPanel) {
+      closePanel(currentlyOpenPanel);
+    }
+    if (_appState["default"].isTouchDevice) {
+      initDesktopTouchEvents();
+    } else {
+      initDesktopEvents();
+    }
+    //document.querySelector('body').style.overflowY = "visible";
+    //document.querySelector('body').style.position = "relative";
+    //body.style.overflowX = "visible";
+    body.removeAttribute('style');
+  } else if (_appState["default"].mode === "mobile" && currentNavState === "desktop") {
+    removeNavEvents();
+    currentNavState = "mobile";
+    if (currentlyOpenPanel) {
+      closePanel(currentlyOpenPanel);
+    }
+    if (_appState["default"].isTouchDevice) {
+      initMobileTouchEvents();
+    } else {
+      initMobileEvents();
+    }
+  }
+}
+
+/**
+ * closeAllPanels()
+ * this force closes all menus, good for single page apps thats need to close the menu
+ */
+function closeAllPanels() {
+  if (currentlyOpenPanel) {
+    closePanel(currentlyOpenPanel);
+    removeHoverStyle();
+  }
+}
+
+/**
+ * outerHeight()
+ * used to get the height of an element that is the same across all browsers
+ *
+ * @param  {Object} node    DOM node
+ * @return {number}
+ */
+function outerHeight(el) {
+  var height = el.offsetHeight;
+  var style = getComputedStyle(el);
+  height += parseInt(style.marginTop) + parseInt(style.marginBottom);
+  return height;
+}
+
+/**
+ * svgAnim()
+ * animates the svg around the icon
+ */
+function svgAnim() {
+  if (_appState["default"].mode === "desktop") {
+    tick += tickSpeed;
+  } else {
+    tick += tickSpeedMobile;
+  }
+  var t = tick / 100;
+  var offsetStrokeDasharray = easeInQuad(t, 0, dashArrayComplete, 1);
+  svgToAnim.style.strokeDasharray = "".concat(offsetStrokeDasharray, " , ").concat(dashArrayComplete);
+  if (tick < 100) {
+    requestAnimationFrame(svgAnim.bind(this));
+  } else {
+    tick = 0;
+  }
+}
+
+/**
+ * easeInQuad()
+ * Quadratic easing
+ */
+function easeInQuad(t, b, c, d) {
+  var ts = (t /= d) * t;
+  return b + c * ts;
+}
+/**
+ * easeInCubic()
+ * Cubic easing
+ */
+function easeInCubic(t, b, c, d) {
+  var ts = (t /= d) * t * t;
+  return b + c * ts;
+}