/******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ /***/ "./src/js/core/events.js": /*!*******************************!*\ !*** ./src/js/core/events.js ***! \*******************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _setup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./setup */ "./src/js/core/setup.js"); /*-------------------------------------------------------------- # Adding some global events and functions users can use via data attributes --------------------------------------------------------------*/ /** * resize menu buttons on load. also runs on resize. * menu button is not inside site-top for various reasons (we dont want x to be inside or when menu opens the ex is uinderneath. * so we use this function to match the site -top height and center it as if it was inside */ var menuButtons = ''; function placeMenuButtons() { var $siteTopHeight = document.querySelector('.site-top'); if ($siteTopHeight != null) { $siteTopHeight = $siteTopHeight.clientHeight; } // let adminbar = document.querySelector('#wpadminbar'); // let adminbarHeight = 0; // // if (adminbar !== null) { // adminbarHeight = adminbar.clientHeight; // } if (menuButtons.length) { menuButtons.forEach(function (button) { button.style.height = $siteTopHeight + 'px'; }); } } /*-------------------------------------------------------------- # IGN Events --------------------------------------------------------------*/ document.addEventListener('DOMContentLoaded', function () { /*------- Add touch classes or not --------*/ if (!("ontouchstart" in document.documentElement)) { document.documentElement.className += " no-touch-device"; } else { document.documentElement.className += " touch-device"; } /*------- menu buttons --------*/ //if the menu button is outside site-top. get both buttons for centering both. if (!document.querySelector('.app-menu')) { menuButtons = document.querySelectorAll('.panel-left-toggle, .panel-right-toggle'); } else { //otherwise the menu button does not need to be centered because its part of the app menu and moves. (moved in navigation.js) menuButtons = document.querySelectorAll('.panel-right-toggle'); } //we run menu button function below in resize event /*------- Toggle Buttons --------*/ //trigger optional afterToggle event //adding new custom event for after the element is toggled var toggleEvent = null; if (isIE11) { toggleEvent = document.createEvent('Event'); // Define that the event name is 'build'. toggleEvent.initEvent('afterToggle', true, true); } else { toggleEvent = new Event('afterToggle', { bubbles: true }); //bubble allows for delegation on body } //add aria to buttons currently on page var buttons = document.querySelectorAll('[data-toggle]'); buttons.forEach(function (button) { button.setAttribute('role', 'switch'); button.setAttribute('aria-checked', button.classList.contains('toggled-on') ? 'true' : 'false'); }); //toggling the buttons with delegation click document.body.addEventListener('click', function (e) { var item = e.target.closest('[data-toggle]'); if (item) { var $doDefault = item.getAttribute('data-default'); //normally we prevent default unless someone add data-default if (null === $doDefault) { e.preventDefault(); e.stopPropagation(); } //if data-radio is found, only one can be selected at a time. // untoggles any other item with same radio value //radio items cannot be untoggled until another item is clicked var radioSelector = item.getAttribute('data-radio'); if (radioSelector !== null) { var radioSelectors = document.querySelectorAll("[data-radio=\"".concat(radioSelector, "\"]")); radioSelectors.forEach(function (radioItem) { if (radioItem !== item && radioItem.classList.contains('toggled-on')) { toggleItem(radioItem); //toggle all other radio items off when this one is being turned on } }); } //if item has data-switch it can only be turned on or off but not both by this button based on value of data-switch (its either on or off) var switchItem = item.getAttribute('data-switch'); //finally toggle the clicked item. some types of items cannot be untoggled like radio or an on switch if (radioSelector !== null) { toggleItem(item, 'on'); //the item clicked on cannot be unclicked until another item is pressed } else if (switchItem !== null) { if (switchItem === 'on') { toggleItem(item, 'on'); } else { toggleItem(item, 'off'); } } else { toggleItem(item); //normal regular toggle can turn itself on or off } } //end if item found }); //actual toggle of an item and add class toggled-on and any other classes needed. Also do a slide if necessary function toggleItem(item) { var forcedState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'none'; //toggle item if (forcedState === 'on') { item.classList.add('toggled-on'); //radio or data-switch of on will always toggle-on } else if (forcedState === 'off') { item.classList.remove('toggled-on'); //data-switch of off will always toggle off } else { item.classList.toggle('toggled-on'); //basic data toggle item } //is item toggled? used for the rest of this function to toggle another target if needed. var isToggled = item.classList.contains('toggled-on'); item.setAttribute('aria-expanded', isToggled ? 'true' : 'false'); //get class to add to this item or another var $class = item.getAttribute('data-toggle'), $target = document.querySelectorAll(item.getAttribute('data-target')); if ($class === null || !$class) { $class = 'toggled-on'; //default class added is toggled-on } //special class added to another item if ($target.length) { $target.forEach(function (targetItem) { if (isToggled) { targetItem.classList.add($class); } else { targetItem.classList.remove($class); } targetItem.setAttribute('aria-expanded', isToggled ? 'true' : 'false'); //data slide open or closed if (targetItem.dataset.slide !== undefined) { var slideTime = targetItem.dataset.slide ? parseFloat(targetItem.dataset.slide) : .5; if (isToggled) { (0,_setup__WEBPACK_IMPORTED_MODULE_0__.ignSlideDown)(targetItem, slideTime); } else { ignSlideUp(targetItem, slideTime); } } //allow event to happen after click for the targeted item targetItem.dispatchEvent(toggleEvent); }); } else { //applies class to the clicked item, there is no target if ($class !== 'toggled-on') { //add class to clicked item if its not set to be toggled-on if (isToggled) { item.classList.toggle($class); } else { item.classList.remove($class); } } } //trigger optional afterToggle event. continue the click event for customized stuff item.dispatchEvent(toggleEvent); } /*------- Moving items Event as well as all resizing --------*/ //on Window resize we can move items to and from divs with data-moveto="the destination" //it will move there when the site reaches smaller than a size defaulted to 1030 or set that with data-moveat //the whole div, including the data att moveto moves back and forth var movedId = 0; var moveEvent = new Event('afterResize', { bubbles: true }); //bubble allows for delegation on body function moveItems() { var windowWidth = window.innerWidth; var $moveItems = document.querySelectorAll('[data-moveto]'); $moveItems.forEach(function (item) { var moveAt = item.getAttribute('data-moveat'), destination = document.querySelector(item.getAttribute('data-moveto')), source = item.getAttribute('data-movefrom'); moveAt = moveAt ? moveAt : 1030; if (moveAt.startsWith('--')) { if (isIE11) { moveAt = 1030; } else { var cssVars = getComputedStyle(document.body); //get css variables moveAt = parseInt(cssVars.getPropertyValue(moveAt), 10); } } if (!destination) { return; } //if no data movefrom is found add one to parent so we can move items back in. now they go back and forth if (!source) { var sourceElem = item.parentElement.id; //if parent has no id attr, add one with a number so its unique if (!sourceElem) { item.parentElement.setAttribute('id', 'move-' + movedId); movedId++; sourceElem = item.parentElement.id; } item.setAttribute('data-movefrom', '#' + sourceElem); } source = document.querySelector(item.getAttribute('data-movefrom')); //if the screen is smaller than moveAt (1030), move to destination if (windowWidth < moveAt || moveAt == 0) { //no need to move if its already there... if (!destination.contains(item)) { if (item.hasAttribute('data-moveto-pos')) { destination.insertBefore(item, destination.children[item.getAttribute('data-moveto-pos')]); } else { destination.appendChild(item); } } } else { if (!source.contains(item)) { if (item.hasAttribute('data-movefrom-pos')) { source.insertBefore(item, source.children[item.getAttribute('data-movefrom-pos')]); } else { source.appendChild(item); } } } //show it item.classList.add('visible'); }); placeMenuButtons(); //running the moving of menu buttons here. nothing to do with moving items. //fix height of fixed holder fixed at top items document.querySelectorAll('.fixed-holder').forEach(function (fixed) { fixed.style.height = fixed.firstElementChild.clientHeight + 'px'; }); document.dispatchEvent(moveEvent); } window.addEventListener('resize', (0,_setup__WEBPACK_IMPORTED_MODULE_0__.throttle)(moveItems, 400)); moveItems(); document.documentElement.classList.remove('dom-loading'); //add finished loading aspace-free events var EventFinished = null; if (isIE11) { EventFinished = document.createEvent('Event'); // Define that the event name is 'build'. EventFinished.initEvent('afterIgnEvents', true, true); } else { EventFinished = new Event('afterIgnEvents'); } document.dispatchEvent(EventFinished); }); /*------- Function for hi red background image swap --------*/ //check if device is retina function isHighDensity() { return window.matchMedia && window.matchMedia('(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)').matches; } //check if file exists on server before using function fileExists(image_url) { var http = new XMLHttpRequest(); http.open('HEAD', image_url, true); http.send(); return http.status != 404; } //Add inline retina image if found and on retina device. To use add data-high-res to an inline element with a background-image if (isHighDensity()) { var retinaImage = document.querySelectorAll('[data-high-res]'); retinaImage.forEach(function (item) { var image2x = ''; //if a high res is provided use that, else use background image but add 2x at end. if (item.dataset.highRes) { image2x = item.dataset.highRes; } else { //get url for original image var image = item.style.backgroundImage.slice(4, -1).replace(/"/g, ""); //add @2x to it if image exists. image2x = image.replace(/(\.[^.]+$)/, '@2x$1'); } if (fileExists(image2x)) { item.style.backgroundImage = 'url("' + image2x + '")'; } }); } /***/ }), /***/ "./src/js/core/icons.js": /*!******************************!*\ !*** ./src/js/core/icons.js ***! \******************************/ /***/ (() => { //turn icons into svg if using the icons that come with theme folder document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.svg-icon').forEach(function (icon) { icon.classList.remove('svg-icon'); //classlist.value does not wokr in ie11. use getAttrbiute var iconClass = icon.getAttribute('class'); //ie11 does not work well with nodes. needed to add as string. no createelementNS var iconString = ""); icon.insertAdjacentHTML('afterend', iconString); icon.remove(); }); }); /***/ }), /***/ "./src/js/core/navigation.js": /*!***********************************!*\ !*** ./src/js/core/navigation.js ***! \***********************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; __webpack_require__.r(__webpack_exports__); /* harmony import */ var _setup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./setup */ "./src/js/core/setup.js"); /* harmony import */ var _navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./navigation_callbacks */ "./src/js/core/navigation_callbacks.js"); /* harmony import */ var _theme_config__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../theme.config */ "./theme.config.json"); //toggle logic functionality that calls the above functions //use this one to run the opening and closing of a menu item. dont call above functions directly function toggleMenuItem(menuItem) { var toggleState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; var topLevel = isTopLevel(menuItem); var horizontalMenu = isHorizontalMenu(menuItem); //toplevel horizontal on tablet if (topLevel && horizontalMenu) { //also check if menu is offscreen and give it a class //checkOffScreenMenu(menuItem.querySelector('.sub-menu')) (0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.toggleTopLevelHorizontalMenu)(menuItem, toggleState); return; } //toplevel vertical on tablet if (topLevel && !horizontalMenu) { (0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.toggleTopLevelVerticalMenu)(menuItem, toggleState); return; } (0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.toggleSubMenu)(menuItem, toggleState); } //MAIN MENU EVENT. CAN BE CALLED ON ANY MENU ITEM WITH CHILDREN var menuClickEvent = false; //make only one click event once a click is used function createMenuListener(menuItem) { menuItem.addEventListener('pointerover', function (e) { e.stopPropagation(); var toggleState = true; //always open unless touch event which changes this below //TOUCH CLICK EVENT if (e.pointerType !== 'mouse') { //clicking a real link opens it if (!e.target.closest("a[href^=\"#\"]") && !e.target.closest('.submenu-dropdown-toggle')) { return; } if (menuItem.classList.contains('toggled-on')) { toggleState = false; } //if were opening a top level on horizontal with a click, we need a way to close another that may be opened if (isTopLevel(menuItem) && !menuItem.classList.contains('toggled-on') && isHorizontalMenu(menuItem)) { closeAllTopMenus(); } } //touch device //open close for hover and device touch toggleMenuItem(menuItem, toggleState); }); //pointerover menuItem.addEventListener('pointerleave', function (e) { e.stopPropagation(); //simply close for hover if (e.pointerType === 'mouse') { toggleMenuItem(menuItem, false); } //triggers when the lcick on is removed...too fast so we need to add another event for clicking off if (e.pointerType !== 'mouse') { //clicked up on touch now we want that fi they click elsewhere to close everything if (!menuClickEvent) { menuClickEvent = true; document.addEventListener('click', function (e) { //if were not clicking a menu, close any menus opened if (!e.target.closest('.menu')) { closeAllTopMenus(); } }); } } }); } //close all top level menus function closeAllTopMenus() { var otherMenuItems = document.querySelectorAll('.top-level-item.toggled-on'); if (otherMenuItems) { otherMenuItems.forEach(function (item) { toggleMenuItem(item, false); }); } } function isTopLevel(menuItem) { return menuItem.classList.contains('top-level-item'); } //if the item is inside a submenu inside another submenu function isNestedSubMenu(menuItem) { return menuItem.classList.contains('nested-menu-item'); } function isHorizontalMenu(menuItem) { return getComputedStyle(menuItem.closest('.menu')).flexDirection !== 'column'; } //fix and reset on resize document.addEventListener('afterResize', function () { document.querySelectorAll('.top-level-item.menu-item-has-children').forEach(function (item) { toggleMenuItem(item, false); item.querySelector('.sub-menu').style.removeProperty('display'); if (isHorizontalMenu(item)) { checkOffScreenMenu(item.querySelector('.sub-menu')); } }); }); document.addEventListener('DOMContentLoaded', function () { //adds menu events to all menus. more menus can be added later by passing it through createMenuListener var menus = document.querySelectorAll('.menu-item'); menus.forEach(function (menuItem, index) { createMenuListener(menuItem); }); //on load if its a vertical menu, open the parent dropdown right away document.querySelectorAll('.menu .current-menu-item.menu-item-has-children, .menu .current-menu-parent').forEach(function (menu) { //if its a vertical menu. we can know by the flex direction of menu if (getComputedStyle(menu.closest('.menu')).flexDirection === 'column') { toggleMenuItem(menu); } }); }); // FOCUS EVENTS - only for keyboard var menuMightBeOpen = false; document.body.addEventListener('focusin', function (e) { var menuItem = e.target.closest('.menu-item'); if (menuItem && menuItem.classList.contains('menu-item-has-children')) { window.addEventListener('keyup', function (e) { var code = e.keyCode ? e.keyCode : e.which; if (code === 9 || code === 16) { menuMightBeOpen = true; //close other top menus when this one is turned on if (isTopLevel(menuItem)) { closeAllTopMenus(); } toggleMenuItem(menuItem, true); } }, { once: true }); } if (menuMightBeOpen) { closeAllTopMenus(); menuMightBeOpen = false; } }); /*------- move submenus if too close to edge on desktop --------*/ function checkOffScreenMenu(submenu) { var display = window.getComputedStyle(submenu).display; if (display !== 'block') { submenu.style.display = 'block'; } //make item visible so we can get left edge var rightEdge = submenu.getBoundingClientRect().right; var leftEdge = submenu.getBoundingClientRect().left; //set menu back if (display !== 'block') { submenu.style.removeProperty('display'); } var viewport = document.documentElement.clientWidth; //if the submenu is off the page, pull it back somewhat if (rightEdge > viewport) { (0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.fixOffScreenMenu)(submenu, 'right'); return; } if (leftEdge < 0) { (0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.fixOffScreenMenu)(submenu, 'left'); } else { (0,_navigation_callbacks__WEBPACK_IMPORTED_MODULE_1__.fixOffScreenMenu)(submenu, 'none'); } } jQuery(function ($) { //move logo in middle of menu on desktop if logo is middle position if ($('.logo-in-middle').length) { var navigationLi = $('.site-navigation__nav-holder .menu li'); var middle = Math.floor($(navigationLi).length / 2) - 1; //add logo to the middle when page loads $('