Sub Menu layout side effect (closed)

Post Reply
serenne
Posts: 76
Joined: 21 Jul 2015, 07:43

04 Feb 2019, 00:21

Hi Aragron,

Your solution in previous Post for "keeping all items expanded" work fine for the expanded submenus, but just a small side effect :

before commenting out the line, only the last selected Item had the background and foreground colors changed to highlight it.
Now : when I select one item, previous selected one's stay with the background/foreground colors of the selected item, leading to some strange and disturbing visual aspect ...
How can I have (if possible) the best of the 2 : sub-item stay expanded and only the current selected item Highlighted ?

I add a link to see this :
http://37.187.72.27/Screenshot_menu.png

Kindest regards
Last edited by serenne on 17 Feb 2019, 07:03, edited 1 time in total.

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

04 Feb 2019, 09:37

Hi Serenne,

Please make the following changes;

Code: Select all

$this.deactivateOnlyMenuItems(item); // Please use it instead of $this.deactivateItems(item.siblings(), true); in line 194
full event code;

Code: Select all

...
    this.menulinks.off('click').on('click', function(e) {
            var link = $(this),
            item = link.parent(),
            submenu = item.children('ul'),
            horizontal = $this.isHorizontal() && $this.isDesktop();
            
            if($this.isSlim() && item.parent().hasClass('ultima-menu')) {
                if(item.hasClass('active-menuitem')) {
                    if(submenu.length) {
                        $this.removeMenuitem(item.attr('id'));
                        item.removeClass('active-menuitem');
                        submenu.hide();
                    }
                    
                    if(item.parent().is($this.jq)) {
                        $this.menuActive = false;
                    }
                }
                else {
                    item.addClass('active-menuitem');
                    $this.addMenuitem(item.attr('id'));
                    $this.deactivateItems(item.siblings(), false);
                    submenu.show();

                    $this.updateSubPosOnSlimMenu(submenu, item);
                    
                    if(item.parent().is($this.jq)) {
                        $this.menuActive = true;
                    }
                }
            }
            else {
                if(item.hasClass('active-menuitem')) {
                    if(submenu.length) {
                        $this.removeMenuitem(item.attr('id'));
                        item.removeClass('active-menuitem');
                        
                        if(horizontal) {
                            if(item.parent().is($this.jq)) {
                                $this.menuActive = false;
                            }
                            
                            submenu.hide();
                        }
                        else {
                            submenu.slideUp();
                        }
                    }
                }
                else {
                    $this.addMenuitem(item.attr('id'));
                    
                    if(horizontal) {
                        $this.deactivateItems(item.siblings());
                        item.addClass('active-menuitem');
                        $this.menuActive = true;
                        submenu.show();
                    }
                    else {
                        $this.deactivateOnlyMenuItems(item);
                        $this.activate(item);
                    }
                }
                
                if($this.isSlim()) {
                    var activeParentItem = submenu.parents('.active-menuitem:last');
                    setTimeout(function() {
                        $this.updateSubPosOnSlimMenu(activeParentItem.children('ul'), activeParentItem);
                    }, 350);
                }
            }
            
            if(!horizontal) {
                setTimeout(function() {
                    $(".nano").nanoScroller();
                }, 500);
            }
                                    
            if(submenu.length) {
                e.preventDefault();
            }
        });
...
Then, please add the following method;

Code: Select all

   /** 
 * PrimeFaces Ultima Layout
 */
PrimeFaces.widget.Ultima = PrimeFaces.widget.BaseWidget.extend({
...
    deactivateOnlyMenuItems: function(item) {
        if (this.cfg.stateful) {
            var menucookie = $.cookie('ultima_expandeditems');
            if (menucookie) {                
                this.expandedMenuitems = menucookie.split(',');
                var removedMenuItemIds = [];
                for (var i = 0; i < this.expandedMenuitems.length; i++) {
                    var id = this.expandedMenuitems[i];
                    if (id && id !== item.attr('id')) {
                        var menuitem = $("#" + id.replace(/:/g, "\\:"));
                        if (menuitem.children('ul').length === 0) {
                            menuitem.removeClass('active-menuitem');
                            removedMenuItemIds.push(id);
                        }
                    }
                }

                for (var j = 0; j < removedMenuItemIds.length; j++) {
                    this.removeMenuitem(removedMenuItemIds[j]);
                }
            }
        }
    }
});

serenne
Posts: 76
Joined: 21 Jul 2015, 07:43

17 Feb 2019, 07:03

Thanks !!

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

18 Feb 2019, 11:29

You're welcome!

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest