OmegaMenu current page highlighting

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
mikic
Posts: 10
Joined: 20 Jul 2016, 14:51

19 Sep 2016, 17:18

Hello,
the Omega preview application has a menu on the left where the current page is highlighted. The highlighting appears to be done automatically by ensuring that the path defined in the outcome parameter of the MenuItem element matches the currently shown page. For example the menu with outcome "/panel" is highlighted when the page being loaded is panel.xhtml.

This approach doesn't work when more than one menu takes you to the same page (with different URL parameters). For example the menus with outcome "test?page=1" and "test?page=2" will both be highlighted when the page being loaded is test.xhtml (regardless of the URL parameters).

How can we customise the behaviour of the selected menu? Is this done in CSS?

Thank you
M
PF 6.0, JSF 2.2, Payara 4.1.1

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

23 Sep 2016, 09:39

We use Js cookie API for menu state. You can see menu state processes in layout.js. When you click a menuitem, JS cookie is added it's id. Then, page is loaded and we get ids in the JS cookie and add active-menuitem class to menuitems that have these ids. Please see;

Code: Select all

     saveMenuState: function() {
        $.cookie('omega_expandeditems', this.expandedMenuitems.join(','), {path: '/'});
    },
    
    clearMenuState: function() {
        $.removeCookie('omega_expandeditems', {path: '/'});
    },
    
    restoreMenuState: function() {
       ...
    }
I couldn't replicate your issue. Can you please attach a screenshot and sample po:menu for me to replicate?

mikic
Posts: 10
Joined: 20 Jul 2016, 14:51

27 Sep 2016, 12:05

Hello,
thank you very much for the explanation! After reviewing my code I realised that some of the component IDs contained characters (e.g. space, +, |) that were breaking the functions you mentioned. Removing these has fixed the issue :)

I have a related question... the highlighting works well when I click on a menu item to display a page, but it does not work well if I right click and open the link in a new tab: the page opening in a new tab will not have the correct menu highlighted. Do you have any suggestions on how this can be resolved?

Cheers
M
PF 6.0, JSF 2.2, Payara 4.1.1

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

10 Oct 2016, 09:42

I 'll work on your issue and get back to you.

mikic
Posts: 10
Joined: 20 Jul 2016, 14:51

29 Aug 2017, 15:08

Hello,
do you have an update on the menu highlighting when a user chooses to open one of the menu items in a new tab?

Thanks
PF 6.0, JSF 2.2, Payara 4.1.1

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

13 Sep 2017, 08:23

Please make the following changes;
- please add the following js codes into template.xhtml or layourt.js;

Code: Select all

<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function () {
        var $this = PF('me');
        if ($this) {
            var pathname = window.location.pathname;
            if (pathname.indexOf('.xhtml') > 0) {
                var activeLink = $this.menulinks.filter('[href^="' + pathname + '"]');
                $this.expandedMenuitems = [];
                $this.clearMenuState();

                var item = activeLink.parent('li');
                $this.addMenuitem(item.attr('id'));
                addParentItems($this, item);
                rc();
            }
        }
    });

    function addParentItems($this, item) {
        if (item && item.length) {
            var parent = item.parents('li:first');
            $this.addMenuitem(parent.attr('id'));
            if (!parent.parent('ul').hasClass('layout-menu')) {
                addParentItems($this, parent);
            } else {
                return;
            }
        }
        return;
    }
    //]]>
</script>
- in sidebar.xhtml

Code: Select all

...
           <div class="menu">
                    
                    <h:form id="menuform">
                        
                           <p:remoteCommand name="rc" update="menuform:omega_menu" />
                        
                           <po:menu id="omega_menu" widgetVar="me">
                            ...

Post Reply

Return to “Omega - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests