Page 1 of 1

Icarus menu active item highlighting not working correctly

Posted: 26 Sep 2016, 09:51
by matrix
Hello,
we have a question when using the Icarus menu in non-ajax way like in the showcase e.g. on http://www.primefaces.org/icarus/forms.xhtml
When first selecting a menu entry, it is highlighted and thus marked as active.
However, this does not work when selecting the same menu entry again, e.g. when selecting "Forms" from within the Components > Forms page from the showcase.

Is this intended behaviour?
How could it be changed so that the currently selected menu entry is always highlighted?

Re: Icarus menu active item highlighting not working correct

Posted: 06 Oct 2016, 14:14
by mert.sincan
Thanks for the detailed description. Fixed for next version; https://github.com/primefaces/layouts/issues/126

Re: Icarus menu active item highlighting not working correct

Posted: 07 Oct 2016, 09:40
by matrix
Thank you!

Re: Icarus menu active item highlighting not working correct

Posted: 07 Oct 2016, 09:48
by mert.sincan
You're welcome ;) For now, you can change the click event of menulinks in bindEvents method in the layout.js. Please try;

Code: Select all

bindEvents: function() {        
       
        ...

        this.menulinks.on('click',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() {
                        $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);
        });
    
      ...
        
    },