Wrong behavior on Icarus Active Menu selection

Forum rules
Please note that response time for technical support is within 3-5 business days.
Jorge
Posts: 25
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

mert.sincan
Posts: 5281
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: 25
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

mert.sincan
Posts: 5281
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: 25
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

mert.sincan
Posts: 5281
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,

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

01 Dec 2017, 14:23

Are you using layout.js from Icarus 1.1.1?

Adameruro
Posts: 1
Joined: 14 Mar 2023, 17:35

15 Mar 2023, 16:19

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;

Post Reply

Return to “Icarus”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests