diff options
Diffstat (limited to 'srcs/wordpress/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js')
| -rw-r--r-- | srcs/wordpress/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js | 354 |
1 files changed, 0 insertions, 354 deletions
diff --git a/srcs/wordpress/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js b/srcs/wordpress/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js deleted file mode 100644 index 2fa1905..0000000 --- a/srcs/wordpress/wp-content/themes/twentynineteen/js/touch-keyboard-navigation.js +++ /dev/null @@ -1,354 +0,0 @@ -/** - * Touch & Keyboard navigation. - * - * Contains handlers for touch devices and keyboard navigation. - */ - -(function() { - - /** - * Debounce - * - * @param {Function} func - * @param {number} wait - * @param {boolean} immediate - */ - function debounce(func, wait, immediate) { - 'use strict'; - - var timeout; - wait = (typeof wait !== 'undefined') ? wait : 20; - immediate = (typeof immediate !== 'undefined') ? immediate : true; - - return function() { - - var context = this, args = arguments; - var later = function() { - timeout = null; - - if (!immediate) { - func.apply(context, args); - } - }; - - var callNow = immediate && !timeout; - - clearTimeout(timeout); - timeout = setTimeout(later, wait); - - if (callNow) { - func.apply(context, args); - } - }; - } - - /** - * Add class - * - * @param {Object} el - * @param {string} cls - */ - function addClass(el, cls) { - if ( ! el.className.match( '(?:^|\\s)' + cls + '(?!\\S)') ) { - el.className += ' ' + cls; - } - } - - /** - * Delete class - * - * @param {Object} el - * @param {string} cls - */ - function deleteClass(el, cls) { - el.className = el.className.replace( new RegExp( '(?:^|\\s)' + cls + '(?!\\S)' ),'' ); - } - - /** - * Has class? - * - * @param {Object} el - * @param {string} cls - * - * @returns {boolean} Has class - */ - function hasClass(el, cls) { - - if ( el.className.match( '(?:^|\\s)' + cls + '(?!\\S)' ) ) { - return true; - } - } - - /** - * Toggle Aria Expanded state for screenreaders - * - * @param {Object} ariaItem - */ - function toggleAriaExpandedState( ariaItem ) { - 'use strict'; - - var ariaState = ariaItem.getAttribute('aria-expanded'); - - if ( ariaState === 'true' ) { - ariaState = 'false'; - } else { - ariaState = 'true'; - } - - ariaItem.setAttribute('aria-expanded', ariaState); - } - - /** - * Open sub-menu - * - * @param {Object} currentSubMenu - */ - function openSubMenu( currentSubMenu ) { - 'use strict'; - - // Update classes - // classList.add is not supported in IE11 - currentSubMenu.parentElement.className += ' off-canvas'; - currentSubMenu.parentElement.lastElementChild.className += ' expanded-true'; - - // Update aria-expanded state - toggleAriaExpandedState( currentSubMenu ); - } - - /** - * Close sub-menu - * - * @param {Object} currentSubMenu - */ - function closeSubMenu( currentSubMenu ) { - 'use strict'; - - var menuItem = getCurrentParent( currentSubMenu, '.menu-item' ); // this.parentNode - var menuItemAria = menuItem.querySelector('a[aria-expanded]'); - var subMenu = currentSubMenu.closest('.sub-menu'); - - // If this is in a sub-sub-menu, go back to parent sub-menu - if ( getCurrentParent( currentSubMenu, 'ul' ).classList.contains( 'sub-menu' ) ) { - - // Update classes - // classList.remove is not supported in IE11 - menuItem.className = menuItem.className.replace( 'off-canvas', '' ); - subMenu.className = subMenu.className.replace( 'expanded-true', '' ); - - // Update aria-expanded and :focus states - toggleAriaExpandedState( menuItemAria ); - - // Or else close all sub-menus - } else { - - // Update classes - // classList.remove is not supported in IE11 - menuItem.className = menuItem.className.replace( 'off-canvas', '' ); - menuItem.lastElementChild.className = menuItem.lastElementChild.className.replace( 'expanded-true', '' ); - - // Update aria-expanded and :focus states - toggleAriaExpandedState( menuItemAria ); - } - } - - /** - * Find first ancestor of an element by selector - * - * @param {Object} child - * @param {String} selector - * @param {String} stopSelector - */ - function getCurrentParent( child, selector, stopSelector ) { - - var currentParent = null; - - while ( child ) { - - if ( child.matches(selector) ) { - - currentParent = child; - break; - - } else if ( stopSelector && child.matches(stopSelector) ) { - - break; - } - - child = child.parentElement; - } - - return currentParent; - } - - /** - * Remove all off-canvas states - */ - function removeAllFocusStates() { - 'use strict'; - - var siteBranding = document.getElementsByClassName( 'site-branding' )[0]; - var getFocusedElements = siteBranding.querySelectorAll(':hover, :focus, :focus-within'); - var getFocusedClassElements = siteBranding.querySelectorAll('.is-focused'); - var i; - var o; - - for ( i = 0; i < getFocusedElements.length; i++) { - getFocusedElements[i].blur(); - } - - for ( o = 0; o < getFocusedClassElements.length; o++) { - deleteClass( getFocusedClassElements[o], 'is-focused' ); - } - } - - /** - * Matches polyfill for IE11 - */ - if (!Element.prototype.matches) { - Element.prototype.matches = Element.prototype.msMatchesSelector; - } - - /** - * Toggle `focus` class to allow sub-menu access on touch screens. - */ - function toggleSubmenuDisplay() { - - document.addEventListener('touchstart', function(event) { - - if ( event.target.matches('a') ) { - - var url = event.target.getAttribute( 'href' ) ? event.target.getAttribute( 'href' ) : ''; - - // Open submenu if url is # - if ( '#' === url && event.target.nextSibling.matches('.submenu-expand') ) { - openSubMenu( event.target ); - } - } - - // Check if .submenu-expand is touched - if ( event.target.matches('.submenu-expand') ) { - openSubMenu(event.target); - - // Check if child of .submenu-expand is touched - } else if ( null != getCurrentParent( event.target, '.submenu-expand' ) && - getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) ) { - openSubMenu( getCurrentParent( event.target, '.submenu-expand' ) ); - - // Check if .menu-item-link-return is touched - } else if ( event.target.matches('.menu-item-link-return') ) { - closeSubMenu( event.target ); - - // Check if child of .menu-item-link-return is touched - } else if ( null != getCurrentParent( event.target, '.menu-item-link-return' ) && getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) { - closeSubMenu( event.target ); - } - - // Prevent default mouse/focus events - removeAllFocusStates(); - - }, false); - - document.addEventListener('touchend', function(event) { - - var mainNav = getCurrentParent( event.target, '.main-navigation' ); - - if ( null != mainNav && hasClass( mainNav, '.main-navigation' ) ) { - // Prevent default mouse events - event.preventDefault(); - - } else if ( - event.target.matches('.submenu-expand') || - null != getCurrentParent( event.target, '.submenu-expand' ) && - getCurrentParent( event.target, '.submenu-expand' ).matches( '.submenu-expand' ) || - event.target.matches('.menu-item-link-return') || - null != getCurrentParent( event.target, '.menu-item-link-return' ) && - getCurrentParent( event.target, '.menu-item-link-return' ).matches( '.menu-item-link-return' ) ) { - // Prevent default mouse events - event.preventDefault(); - } - - // Prevent default mouse/focus events - removeAllFocusStates(); - - }, false); - - document.addEventListener('focus', function(event) { - - if ( event.target.matches('.main-navigation > div > ul > li a') ) { - - // Remove Focused elements in sibling div - var currentDiv = getCurrentParent( event.target, 'div', '.main-navigation' ); - var currentDivSibling = currentDiv.previousElementSibling === null ? currentDiv.nextElementSibling : currentDiv.previousElementSibling; - var focusedElement = currentDivSibling.querySelector( '.is-focused' ); - var focusedClass = 'is-focused'; - var prevLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).previousElementSibling; - var nextLi = getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ).nextElementSibling; - - if ( null !== focusedElement && null !== hasClass( focusedElement, focusedClass ) ) { - deleteClass( focusedElement, focusedClass ); - } - - // Add .is-focused class to top-level li - if ( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ) ) { - addClass( getCurrentParent( event.target, '.main-navigation > div > ul > li', '.main-navigation' ), focusedClass ); - } - - // Check for previous li - if ( prevLi && hasClass( prevLi, focusedClass ) ) { - deleteClass( prevLi, focusedClass ); - } - - // Check for next li - if ( nextLi && hasClass( nextLi, focusedClass ) ) { - deleteClass( nextLi, focusedClass ); - } - } - - }, true); - - document.addEventListener('click', function(event) { - - // Remove all focused menu states when clicking outside site branding - if ( event.target !== document.getElementsByClassName( 'site-branding' )[0] ) { - removeAllFocusStates(); - } else { - // nothing - } - - }, false); - } - - /** - * Run our sub-menu function as soon as the document is `ready` - */ - document.addEventListener( 'DOMContentLoaded', function() { - toggleSubmenuDisplay(); - }); - - /** - * Run our sub-menu function on selective refresh in the customizer - */ - document.addEventListener( 'customize-preview-menu-refreshed', function( e, params ) { - if ( 'menu-1' === params.wpNavMenuArgs.theme_location ) { - toggleSubmenuDisplay(); - } - }); - - /** - * Run our sub-menu function every time the window resizes - */ - var isResizing = false; - window.addEventListener( 'resize', function() { - isResizing = true; - debounce( function() { - if ( isResizing ) { - return; - } - - toggleSubmenuDisplay(); - isResizing = false; - - }, 150 ); - } ); - -})(); |
