Opened 2 months ago
#9273 new defect (bug)
Navigation menu breaks
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | low |
| Severity: | minor | Version: | 14.3.2 |
| Component: | Navigation | Keywords: | has-patch |
| Cc: |
Description
in buddypress-priority-menu.js
in this function:
function updateNavigationMenu( container, menu ) {
/
- Let’s bail if our menu is empty. */
if ( ! container.parentNode.querySelector('.bp-priority-' + menu + '-nav-items[id]') ) {
return;
}
Adds the necessary UI to operate the menu.
var visibleList = container.parentNode.querySelector('.bp-priority-' + menu + '-nav-items[id]');
var hiddenList = visibleList.nextElementSibling.querySelector('.hidden-items');
var toggleButton = visibleList.nextElementSibling.querySelector('.bp-priority-nav-more-toggle');
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
if ( ! visibleList.firstChild ) {
return;
}
Record the width of the list.
breaks[menu].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[menu][breaks[menu].length - 1] ) {
Move the item to the visible list.
visibleList.appendChild( hiddenList.firstChild.nextSibling );
breaks[menu].pop();
}
if (breaks[menu].length < 2) {
hideButton( toggleButton );
}
}
Recur if the visible list is still overflowing the nav.
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
updateNavigationMenu( container, menu );
}
}
there is an error here:
if (breaks[menu].length < 2) {
hideButton( toggleButton );
}
we should dynamically check or otherwise check the hiddenList for items before hiding the menu like:
| !(hiddenList.querySelectorAll('li').length > 0)) { |
hideButton( toggleButton );
}
because if breaks[menu].length == 1
and there is still an item in the hidden list, it hides the toggle button.
the current code doesn't account for when there was 1 break and an item was put into the hidden list. There are other fixes for this, but I found this the easiest.
here is the fully updated function:
function updateNavigationMenu( container, menu ) {
/
- Let’s bail if our menu is empty. */
if ( ! container.parentNode.querySelector('.bp-priority-' + menu + '-nav-items[id]') ) {
return;
}
Adds the necessary UI to operate the menu.
var visibleList = container.parentNode.querySelector('.bp-priority-' + menu + '-nav-items[id]');
var hiddenList = visibleList.nextElementSibling.querySelector('.hidden-items');
var toggleButton = visibleList.nextElementSibling.querySelector('.bp-priority-nav-more-toggle');
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
if ( ! visibleList.firstChild ) {
return;
}
Record the width of the list.
breaks[menu].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[menu][breaks[menu].length - 1] ) {
Move the item to the visible list.
visibleList.appendChild( hiddenList.firstChild.nextSibling );
breaks[menu].pop();
}
Hide the dropdown btn if hidden list is empty.
if (!hiddenList !(hiddenList.querySelectorAll('li').length > 0)) { hideButton(toggleButton);
}
}
Recur if the visible list is still overflowing the nav.
if ( isOverflowingNavivation( visibleList, toggleButton, container ) ) {
updateNavigationMenu( container, menu );
}
}