Page 1 of 2

Wrong behavior on Icarus Active Menu selection

Posted: 12 Jun 2017, 14:23
by Jorge
Hi,

We bought the Icarus Template and we noted an wrong behavior on the active menu link.

The problem is when you select an menu item in the expanded menu let's say Components -> Forms, then you retract the menu so it shows only icons without the text, then you click in another option lets say Dashboard (with the menu retracted). The menu will collapse and the active link remains in Components -> Forms instead of Dashboard.

This happens in the Icarus Live Preview page.

Best regards,

Re: Wrong behavior on Icarus Active Menu selection

Posted: 13 Jun 2017, 08:03
by mert.sincan
Fixed for next version;
https://github.com/primefaces/icarus/issues/8

Please try it after removing the following line in layout.js;

Code: Select all

bindEvents: function() {        
        ...
        this.menulinks.off('click.menuLinks').on('click.menuLinks',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent(),
            hasSubmenuContainer = menuitemLink.next().is('ul'),
            isActive = menuitem.hasClass('active-menu-parent');
            
            if($this.menubar.width() < 60) {
                $this.toggleMenu();
                
                if(!isActive) {
                    //setTimeout(function() { PLEASE REMOVE TIMEOUT
                        $this.activateMenuitem(menuitem);
                    //}, 300);  // Please remove this line
                }
            }
            ...
        });

Re: Wrong behavior on Icarus Active Menu selection

Posted: 13 Jun 2017, 14:38
by Jorge
Hi @Aragorn.

The code you mention is a bit different from the one we have here (we are in the version 1.1 of Icarus Template). I manage to find out the code you asked to remove (setTimeout). Now it is working, although not very smooth mainly with the submenu itens (a rapid close behavior for the sub items make it a bit strange). We can live with that tough, just a heads up to you guys.

Here is the code of the bindEvents in the layout.js file that we have (with the code commented as you asked):

Code: Select all

bindEvents: function() {        
    var $this = this;
    
    this.sidebarNav.nanoScroller({flash: true});
    
    this.slimToggleButton.on('click', function(e) {
        $this.toggleMenu();
        e.preventDefault();
    });
    
    this.menulinks.on('click',function(e) {
        var menuitemLink = $(this),
        menuitem = menuitemLink.parent();
        
        if($this.menubar.width() < 60) {
            $this.toggleMenu();
            
            if(!menuitem.hasClass('active-menu-parent')) {
                //setTimeout(function() {
                    $this.activateMenuitem(menuitem);
                //}, 300);
            }
        }
        else {
            if(menuitem.hasClass('active-menu-parent'))
                $this.deactivateMenuitem(menuitem);
            else
                $this.activateMenuitem(menuitem);
        }

        if(menuitemLink.next().is('ul')) {
            e.preventDefault();
        }

        $this.saveMenuState();    
        
        setTimeout(function() {
            $(".nano").nanoScroller();
        }, 750);
    });
    
    //remove transitions on IOS
    if(this.isIOS()) {
        this.menubar.find('a').addClass('notransition');
    }
    
    //workaround for firefox bug of not resetting scrolltop
    if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
        $(window).on('resize', function() {
            $this.menubarElement.scrollTop = 0;
        });
    }
    
    $(document.body).on('click', function(e) {
        if(!$this.topbarLinkClick && $this.topbarItems) {
            $this.topbarItems.filter('.active').removeClass('active').children().removeClass('active-link');
            $this.profileImage.parent().removeClass('active');
        }
        $this.topbarLinkClick = false;
        
    });
    
    $(function() {
        $this.topbarItems = $('#top-bar').find('> .top-menu > .top-bar-icon');
        $this.topbarLinks = $this.topbarItems.find('> a');
        $this.topbarLinks.on('click', function(e) {
            $this.topbarLinkClick = true;
            var link = $(this),
            item = link.parent(),
            submenu = item.children('ul');
            
            item.siblings('.active').removeClass('active');
            $this.profileImage.parent().removeClass('active');
            
            if(submenu.length) {
                submenu.addClass('');
                item.toggleClass('active');
                link.toggleClass('active-link');
                e.preventDefault();
            }
        });
        
        $this.profileImage = $('#profile-image');
        $this.profileImageMobile = $('#profile-image-mobile');
        
        $this.profileImage.on('click', function(e) {
            $this.topbarLinkClick = true;
            var link = $(this);
            
            $this.topbarItems.filter('.active').removeClass('active').children().removeClass('active-link');
            
            link.parent().toggleClass('active');
            e.preventDefault();
        });
        
        $this.profileImageMobile.on('click', function(e) {
            $this.topbarLinkClick = true;
            var link = $(this);
            
            $this.topbarItems.filter('.active').removeClass('active').children().removeClass('active-link');
            
            link.parent().toggleClass('active');
            e.preventDefault();
        });
    });
}
Thanks for the help.
Cheers,

Re: Wrong behavior on Icarus Active Menu selection

Posted: 15 Jun 2017, 09:07
by mert.sincan
Please try;

Code: Select all

bindEvents: function() {        
        ...
        
        this.menulinks.off('click.menuLinks').on('click.menuLinks',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent(),
            hasSubmenuContainer = menuitemLink.next().is('ul'),
            isActive = menuitem.hasClass('active-menu-parent');

            if($this.menubar.width() < 60) {
                $this.toggleMenu();
                
                if(!isActive) {
                    //*************************************** Please make the following changes ****************
                    	var href = menuitemLink.attr('href');
                    	if(href && href != "#") {
                        	$this.activateMenuitem(menuitem);
                    	}
                    	else {
                        	setTimeout(function() {
                            		$this.activateMenuitem(menuitem);
                       		}, 300);
                   	 }
                   //**********************************************************************************************
               	 }
            }
            ....
    },

Re: Wrong behavior on Icarus Active Menu selection

Posted: 27 Jun 2017, 14:33
by Jorge
Hi @aragorn

Thank you for your reply again.

Please note that the version of the layout.js file we have in the bind section (in my previous post, it is the complete code for the bind) does not have such binding this.menulinks.off('click.menuLinks').on('click.menuLinks',function(e), therefore I can't change what you asked.

I can't also add this whole section also because I believe it is not complete right (you added a "...." before the close curly braces of the function)?

So would you provide a link where we can download such updated file please?

As I mentioned before we are in Icarus 1.1 version.

Thank you.

Re: Wrong behavior on Icarus Active Menu selection

Posted: 29 Jun 2017, 08:06
by mert.sincan
I attached the above codes according to 1.1.1 version.
So would you provide a link where we can download such updated file please?
- We'll release new version in the next week. I think you can update the files. Icarus 1.1.1 fixes; https://github.com/primefaces/icarus/mi ... 1?closed=1

Re: Wrong behavior on Icarus Active Menu selection

Posted: 05 Nov 2017, 02:49
by thomascamara
Is this issue fixed already? I tried to apply the code changes mentioned in this post but it didn't work.

I have 3 sub-menus with 5-6 items each, and it totally loses itself.

Please see my layout.jsf piece of code:

Code: Select all

this.menulinks.off('click.menuLinks').on('click.menuLinks',function(e) {
            var menuitemLink = $(this),
            menuitem = menuitemLink.parent(),
            hasSubmenuContainer = menuitemLink.next().is('ul'),
            isActive = menuitem.hasClass('active-menu-parent');

            if($this.menubar.width() < 60) {
                $this.toggleMenu();
                
                if(!isActive) {
                	var href = menuitemLink.attr('href');
                	if(href && href != "#") {
                    	$this.activateMenuitem(menuitem);
                	}
                	else {
                    	setTimeout(function() {
                        		$this.activateMenuitem(menuitem);
                   		}, 300);
                	}
                }
            }
            else if(hasSubmenuContainer) {
                if(isActive)
                    $this.deactivateMenuitem(menuitem);
                else
                    $this.activateMenuitem(menuitem);
            }
            else if(!isActive) {
                $this.activateMenuitem(menuitem);
            }

            if(hasSubmenuContainer) {
                e.preventDefault();
            }

            $this.saveMenuState();    
            
            setTimeout(function() {
                $(".nano").nanoScroller();
            }, 750);
        });
Thanks,

Re: Wrong behavior on Icarus Active Menu selection

Posted: 07 Nov 2017, 04:52
by thomascamara
By the way, I've updated Icarus to the last version but sub-menus are still lost.

Apparently the sub-menus are losing the active one when the same menu has more than 3 sub-menus.

My application has:

8 Menus and:

Menu 5 = 2 sub-menus
Menu 6 = 5 sub-menus
Menu 7 = 7 sub-menus

Thanks,

Re: Wrong behavior on Icarus Active Menu selection

Posted: 01 Dec 2017, 14:23
by cagatay.civici
Are you using layout.js from Icarus 1.1.1?

-

Posted: 15 Mar 2023, 16:19
by Adameruro
I use this code to highlight current page in the menu bar, but would like to exclude the home page. How do I do that?

/ ================================================ /
/ how to highlight current page /
/ ================================================ /
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:visited,
ul.rMenu li.current_page_item
color: #ffffff important;
background: #34597F important;