angelovcom.net

priority-menu.js (5375B)

---

 (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);
 			}
 		};
 	}
 
 	/**
 	 * Prepends an element to a container.
 	 *
 	 * @param {Element} container
 	 * @param {Element} element
 	 */
 	function prependElement(container, element) {
 		if (container.firstChild.nextSibling) {
 			return container.insertBefore(element, container.firstChild.nextSibling);
 		} else {
 			return container.appendChild(element);
 		}
 	}
 
 	/**
 	 * Shows an element by adding a hidden className.
 	 *
 	 * @param {Element} element
 	 */
 	function showButton(element) {
 		// classList.remove is not supported in IE11.
 		element.className = element.className.replace('is-empty', '');
 	}
 
 	/**
 	 * Hides an element by removing the hidden className.
 	 *
 	 * @param {Element} element
 	 */
 	function hideButton(element) {
 		// classList.add is not supported in IE11.
 		if (!element.classList.contains('is-empty')) {
 			element.className += ' is-empty';
 		}
 	}
 
 	/**
 	 * Returns the currently available space in the menu container.
 	 *
 	 * @returns {number} Available space
 	 */
 	function getAvailableSpace( button, container ) {
 		return container.offsetWidth - button.offsetWidth - 22;
 	}
 
 	/**
 	 * Returns whether the current menu is overflowing or not.
 	 *
 	 * @returns {boolean} Is overflowing
 	 */
 	function isOverflowingNavivation( list, button, container ) {
 		return list.offsetWidth > getAvailableSpace( button, container );
 	}
 
 	/**
 	 * Set menu container variable.
 	 */
 	var navContainer = document.querySelector('.main-navigation');
 	var breaks       = [];
 
 	/**
 	 * Let’s bail if we our menu doesn't exist.
 	 */
 	if ( ! navContainer ) {
 		return;
 	}
 
 	/**
 	 * Refreshes the list item from the menu depending on the menu size.
 	 */
 	function updateNavigationMenu( container ) {
 
 		/**
 		 * Let’s bail if our menu is empty.
 		 */
 		if ( ! container.parentNode.querySelector('.main-menu[id]') ) {
 			return;
 		}
 
 		// Adds the necessary UI to operate the menu.
 		var visibleList  = container.parentNode.querySelector('.main-menu[id]');
 		var hiddenList   = visibleList.parentNode.nextElementSibling.querySelector('.hidden-links');
 		var toggleButton = visibleList.parentNode.nextElementSibling.querySelector('.main-menu-more-toggle');
 
 		if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
 
 			// Record the width of the list.
 			breaks.push( visibleList.offsetWidth );
 			// Move last item to the hidden list.
 			prependElement( hiddenList, ! visibleList.lastChild || null === visibleList.lastChild ? visibleList.previousElementSibling : visibleList.lastChild );
 			// Show the toggle button.
 			showButton( toggleButton );
 
 		} else {
 
 			// There is space for another item in the nav.
 			if ( getAvailableSpace( toggleButton, container ) > breaks[breaks.length - 1] ) {
 				// Move the item to the visible list.
 				visibleList.appendChild( hiddenList.firstChild.nextSibling );
 				breaks.pop();
 			}
 
 			// Hide the dropdown btn if hidden list is empty.
 			if (breaks.length < 2) {
 				hideButton( toggleButton );
 			}
 		}
 
 		// Recur if the visible list is still overflowing the nav.
 		if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
 			updateNavigationMenu( container );
 		}
 	}
 
 	/**
 	 * Run our priority+ function as soon as the document is `ready`.
 	 */
 	document.addEventListener( 'DOMContentLoaded', function() {
 
 		updateNavigationMenu( navContainer );
 
 		// Also, run our priority+ function on selective refresh in the customizer.
 		var hasSelectiveRefresh = (
 			'undefined' !== typeof wp &&
 			wp.customize &&
 			wp.customize.selectiveRefresh &&
 			wp.customize.navMenusPreview.NavMenuInstancePartial
 		);
 
 		if ( hasSelectiveRefresh ) {
 			// Re-run our priority+ function on Nav Menu partial refreshes.
 			wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function ( placement ) {
 
 				var isNewNavMenu = (
 					placement &&
 					placement.partial.id.includes( 'nav_menu_instance' ) &&
 					'null' !== placement.container[0].parentNode &&
 					placement.container[0].parentNode.classList.contains( 'main-navigation' )
 				);
 
 				if ( isNewNavMenu ) {
 					updateNavigationMenu( placement.container[0].parentNode );
 				}
 			});
         }
 	});
 
 	/**
 	 * Run our priority+ function on load.
 	 */
 	window.addEventListener( 'load', function() {
 		updateNavigationMenu( navContainer );
 	});
 
 	/**
 	 * Run our priority+ function every time the window resizes.
 	 */
 	var isResizing = false;
 	window.addEventListener( 'resize',
 		debounce( function() {
 			if ( isResizing ) {
 				return;
 			}
 
 			isResizing = true;
 			setTimeout( function() {
 				updateNavigationMenu( navContainer );
 				isResizing = false;
 			}, 150 );
 		} )
 	);
 
 	/**
 	 * Run our priority+ function.
 	 */
 	updateNavigationMenu( navContainer );
 
 })();