Wrong behavior on Icarus Active Menu selection

Post Reply
Jorge
Posts: 19
Joined: 21 Sep 2011, 14:00

12 Jun 2017, 14:23

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,
Jorge Campos
--
Eclipse Juno
Primefaces 6.1.RC3
JSF 2.2.8
Apache Tomcat 8.5.14

User avatar
aragorn
Posts: 2638
Joined: 29 Jun 2013, 12:38

13 Jun 2017, 08:03

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
                }
            }
            ...
        });

Jorge
Posts: 19
Joined: 21 Sep 2011, 14:00

13 Jun 2017, 14:38

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,
Jorge Campos
--
Eclipse Juno
Primefaces 6.1.RC3
JSF 2.2.8
Apache Tomcat 8.5.14

User avatar
aragorn
Posts: 2638
Joined: 29 Jun 2013, 12:38

15 Jun 2017, 09:07

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);
                   	 }
                   //**********************************************************************************************
               	 }
            }
            ....
    },

Jorge
Posts: 19
Joined: 21 Sep 2011, 14:00

27 Jun 2017, 14:33

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.
Jorge Campos
--
Eclipse Juno
Primefaces 6.1.RC3
JSF 2.2.8
Apache Tomcat 8.5.14

User avatar
aragorn
Posts: 2638
Joined: 29 Jun 2013, 12:38

29 Jun 2017, 08:06

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

thomascamara
Posts: 2
Joined: 05 Nov 2017, 02:46

05 Nov 2017, 02:49

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,

thomascamara
Posts: 2
Joined: 05 Nov 2017, 02:46

07 Nov 2017, 04:52

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,

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest