mirror of
https://github.com/WordPress/WordPress.git
synced 2024-08-16 18:43:13 +02:00
Merges [43808,43821,43842,43860,43892,43904,43909,43926-43929,43956,43961-43963] from the 5.0 branch to trunk. Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, jorbin, netweb, b-07, khleomix, audrasjb, nielslange, mmaumio, richsalvucci, littlebigthing, dimadin, joyously, anevins, peterwilsoncc, dannycooper, iCaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, grapplerulrich, ocean90, joshfeck, frankew, AbdulWahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, nao, mayukojpn, enodekciw, ketuchetan, atanasangelovdev, poena, sharaz, artisticasad, mukesh27, burhandodhy, crunnells, aprakasa, themeroots, imonly_ik, tlxo, youthkee, brentswisher, smyoon315, mrahmadawais, desideveloper, Kau-Boy, mor10, mikeyarce, dingo_bastard, xkon, twoabove. Fixes #45424. Built from https://develop.svn.wordpress.org/trunk@44149 git-svn-id: http://core.svn.wordpress.org/trunk@43979 1a063a9b-81f0-0310-95a4-ce76da25c4cd
217 lines
5.2 KiB
JavaScript
217 lines
5.2 KiB
JavaScript
(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 );
|
||
|
||
})();
|