[buddypress-trac] [BuddyPress Trac] #9273: Navigation menu breaks

[buddypress-trac]

#9273: Navigation menu breaks
----------------------------+-----------------------------
 Reporter:  alexanderwbell  |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  low             |  Milestone:  Awaiting Review
Component:  Navigation      |    Version:  14.3.2
 Severity:  minor           |   Keywords:  has-patch
----------------------------+-----------------------------
 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:

 if (!hiddenList || !(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 );
                 }
         }

-- 
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/9273>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac