core.front.core.navBar don't working fine

[BomAle]

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>

 

[bfarber]

@Rikki can you review this?