BomAle Posted October 15, 2018 Posted October 15, 2018 I would suggest changing as follow the js controller of navBar improve condition to check if add a menu item into more menu, outerwidth only if navMore contain a child, this way more menu is counted only if has child <script type='text/javascript'> ;( function($, _, undefined){ "use strict"; ips.controller.mixin('test', 'core.front.core.navBar', true, function () { this.lengthMore = function (bar) { if( bar.is('[data-role="primaryNavBar"]') ){ if( this._usingSubBars ){ return bar.find('> [data-role="navMore"] > [data-role="secondaryNavBar"] > li').length; } else { return this.scope.find('#elNavigationMore_dropdown_menu > li').length; } } else { return bar.find('[data-role="moreDropdown"]').find('> li').length; } } this._mushMenu = function (bar, widthAdjustment) { var self = this; var padding = parseInt( this.scope.css('padding-left') ) + parseInt( this.scope.css('padding-right') ); var availableSpace = this._getNavElement().width() - widthAdjustment - padding; var moreItem = bar.find('> [data-role="navMore"]'); var moreMenuSize = moreItem.outerWidth(); var menuItems = bar.find('> li[data-role="navBarItem"]'); var sizeIncrement = 0; var dropdown = bar.find('[data-role="moreDropdown"]'); if( !moreItem.is(':visible') ){ moreMenuSize = moreItem.removeClass('ipsHide').outerWidth(); moreItem.addClass('ipsHide'); } menuItems.each( function () { var item = $( this ); var itemSize = 0; // We set the original width on an item so that we can easily // sum the width of the menu. Even if we don't mush now, we'll set it // for easy use later if( item.attr('data-originalWidth' ) ){ itemSize = parseInt( item.attr('data-originalWidth') ); } else { var o = item.outerWidth() + parseInt( item.css('margin-right') ) + parseInt( item.css('margin-left') ); item.attr( 'data-originalWidth', o ); itemSize = o; } // If this item will push us over our available size, then mush it // We add the more menu manually because we *have* to show that one of course if( ( sizeIncrement + itemSize + (self.lengthMore(bar) ? moreMenuSize : 0) ) > availableSpace ){ // Have we been mushed already? if( !item.attr('data-mushed') ){ // Build a new list item containing the contents of our menu item var newLI = $('<li/>') .attr('data-originalItem', item.identify().attr('id') ) .append( item.contents() ); if( self._usingSubBars ){ // If this is the primary nav, then we put it in the sub menu; otherwise, // build a dropdown if( bar.is('[data-role="primaryNavBar"]') ){ bar.find('> [data-role="navMore"] > [data-role="secondaryNavBar"]').prepend( newLI ); //-------------- // If this item has a submenu, we need to move those into a dropdown if( newLI.find('> [data-role="secondaryNavBar"] > li').length ){ var newA = newLI.find('> a'); var newDropdown = $('<ul/>') .addClass('ipsMenu ipsMenu_auto ipsHide') .attr( 'id', newA.identify().attr('id') + '_menu' ) .attr('data-mushedDropdown', item.identify().attr('id') ); // Move items from the submenu to the new dropdown newLI.find('> [data-role="secondaryNavBar"] > li').each( function () { if( $( this ).is('[data-role="navMore"]') ){ return; } var newMenuItem = $('<li/>').addClass('ipsMenu_item'); // If this item itself has a submenu, then add the class to make it work if( $( this ).find('.ipsMenu').length ){ newMenuItem.addClass('ipsMenu_subItems'); } newDropdown.append( newMenuItem.append( $( this ).contents() ).attr('data-originalItem', $( this ).identify().attr('id') ) ); }); // Now newA .attr('data-ipsMenu', '') .attr('data-ipsMenu-appendTo', '#' + self.scope.identify().attr('id') ) .append("<i class='fa fa-caret-down' data-role='mushedCaret'></i>"); newLI.append( newDropdown ); } //-------------- } else { newLI.addClass('ipsMenu_item'); // If we have a dropdown inside of this one, add the sub items class to show the > if( newLI.find('.ipsMenu').length ){ newLI.addClass('ipsMenu_subItems'); } dropdown.append( newLI ); } } else { // Not using sub bars, so put it in the More dropdown self.scope.find('#elNavigationMore_dropdown_menu').append( newLI.addClass('ipsMenu_item') ); if( newLI.find('.ipsMenu').length ){ newLI.addClass('ipsMenu_subItems'); } } // If the menu item is itself a dropdown menu, we need to adjust the appendTo // option for it, otherwise it will try and append it to the now-hidden menu tab. var linkInList = newLI.children('a'); if( linkInList.is('[data-ipsMenu]') ){ linkInList.attr('data-ipsMenu-appendTo', '#' + newLI.identify().attr('id') ); } item.addClass('ipsHide').attr('data-mushed', true); } } else if( item.attr('data-mushed') ) { var mushedParent = null; var mushedItem = null; // If we're in the primary nav bar, our item will be in the secondayr nav bar; otherwise, // the item will be in a dropdown if( !self._usingSubBars ){ mushedParent = self.scope.find('#elNavigationMore_dropdown_menu'); } else if( bar.is('[data-role="primaryNavBar"]') ){ mushedParent = bar.find('> [data-role="navMore"] > [data-role="secondaryNavBar"]'); } else { mushedParent = dropdown; } // If this item has previously been mushed, we can unmush it by moving the contents // back to its original location var mushedItem = mushedParent.find('[data-originalItem="' + item.identify().attr('id') + '"]'); // If the menu item itself is a dropdown, we previously adjusted the appendTo option. // We now need to set that back to the correct ID if( mushedItem.children('a').is('[data-ipsMenu]') ){ mushedItem.children('a').attr('data-ipsMenu-appendTo', '#' + item.identify().attr('id') ); } // If we found the mushed item, move the contents back to the original place if( mushedItem.length ){ item.append( mushedItem.contents() ).removeClass('ipsHide'); } // If we've moved secondary nav items into a dropdown, we need to move them back if( self._usingSubBars && bar.is('[data-role="primaryNavBar"]') ){ var mushedDropdown = self.scope.find('[data-mushedDropdown="' + item.attr('id') + '"]'); var secondaryMenu = item.find('> [data-role="secondaryNavBar"]'); if( mushedDropdown.length ){ // Move each item in the dropdown back to its correct place mushedDropdown.find('> .ipsMenu_item').each( function () { var originalItem = self.scope.find( '#' + $( this ).attr('data-originalItem') ); originalItem.append( $( this ).contents() ); }); // Now remove the dropdown mushedDropdown.remove(); } item.find('[data-role="mushedCaret"]').remove(); } mushedItem.remove(); item.removeAttr('data-mushed'); } sizeIncrement += itemSize; }); // Show/hide the "More" item as needed if( bar.is('[data-role="primaryNavBar"]') ){ if( this._usingSubBars ){ moreItem.toggleClass('ipsHide', bar.find('> [data-role="navMore"] > [data-role="secondaryNavBar"] > li').length <= 1 ); } else { moreItem.toggleClass('ipsHide', !this.scope.find('#elNavigationMore_dropdown_menu > li').length ); } } else { moreItem.toggleClass('ipsHide', dropdown.find('> li').length < 1 ); } this._makeDefaultActive(); }; }); }(jQuery, _)); </script>
Recommended Posts
Archived
This topic is now archived and is closed to further replies.