Closing menu on second click

Post Reply
Babas007
Posts: 250
Joined: 24 May 2011, 09:42

22 May 2018, 11:54

After several guerilla tests, users expects the menu to close after clicking once again on menu item. Clicking on the "kebab" icon is not intuitive for them (to close it), and once they know about it, they feel like exra effort. I share their opinion

Image

Would it be possible to add that on next version?

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

29 May 2018, 08:20

Could you please try the following Js code?

Code: Select all

<script type="text/javascript">
//<![CDATA[
/** 
 * PrimeFaces Barcelona Layout
 */
PrimeFaces.widget.Barcelona.prototype._bindEvents = function() {
    var $this = this;

    this.tabMenu.find('.menu-button').on('click', function(e) {
        $this.wrapper.removeClass('layout-wrapper-menu-active');
        $this.tabMenuContents.find('.ripple-animate').remove();
        if(!$this.isOverlayMenu()) {
            setTimeout(function() {
                $(window).trigger('resize');
            }, 310);
        }

        e.preventDefault();
    });

    this.tabMenu.find('.menu-pin-button').on('click', function(e) {
        var icon = $(this).children('i');
        if(icon.hasClass('fa-rotate-90'))
            $this._saveMenuState($(this).closest('.layout-tabmenu-content').index());
        else
            $this.clearMenuState();

        $this.tabMenuContents.find('.menu-pin-button').children('i').toggleClass('fa-rotate-90');
        e.preventDefault();
    });

    this.tabMenuNavLinks.on('click', function(e) {
        $this.sidebar.css('overflow','hidden');
        setTimeout(function() {
            $this.sidebar.css('overflow','');
        }, 301);

        var link = $(this);
        link.parent().addClass('active-item').siblings('.active-item').removeClass('active-item');

        var tabContent = $this.tabMenuContents.eq(link.parent().index()),
        isTabContentOpen = tabContent.hasClass('layout-tabmenu-content-active');

        if(isTabContentOpen) 
            $this.wrapper.removeClass('layout-wrapper-menu-active');
        else
            $this.wrapper.addClass('layout-wrapper-menu-active');

        $this.tabMenuContents.find('.ripple-animate').remove();
        $this.tabMenuContents.removeClass('layout-tabmenu-content-active');

        if(!isTabContentOpen) {
            tabContent.addClass('layout-tabmenu-content-active');
            var nanoInContent = tabContent.children('.layout-submenu-content').find('.nano');

            if(nanoInContent.length) {
                nanoInContent.nanoScroller();
            }
        }

        if(!$this.isOverlayMenu()) {
            setTimeout(function() {
                $(window).trigger('resize');
            }, 310);
        }

        var pinbutton = tabContent.find('.menu-pin-button');
        if(pinbutton.length && !pinbutton.children('i').hasClass('fa-rotate-90')) {
            $this._saveMenuState(link.parent().index());
        }

        $(this).siblings('.layout-tabmenu-tooltip').hide();
        e.preventDefault();
    });

    if(!this.isIOS()) {
        this.tabMenuNavLinks.on('mouseenter', function(e) {
            var link = $(this);
            if(!link.parent().hasClass('active-item')||!$this.wrapper.hasClass('layout-wrapper-menu-active')) {
                link.siblings('.layout-tabmenu-tooltip').show();
            }
        })
        .on('mouseleave', function(e) {
            $(this).siblings('.layout-tabmenu-tooltip').hide();
        });
    }

    this.topbarMenuButton.on('click', function(e) {
        $this.topbarMenuClick = true;
        $this.topbarMenu.find('ul').removeClass('fadeInDown fadeOutUp');

        if($this.topbarMenu.hasClass('topbar-menu-visible')) {
            $this.topbarMenu.addClass('fadeOutUp');

            setTimeout(function() {
                $this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
            },500);
        }
        else {
            $this.topbarMenu.addClass('topbar-menu-visible fadeInDown');
        }

        e.preventDefault();
    });

    $this.topbarUsermenuButton.off('click').on('click', function (e) {
        //TODO: Move to CSS
        $this.topbarMenuClick = true;

        if ($this.topbarUserMenu.hasClass('usermenu-active')) {
            $this.topbarUserMenu.removeClass('fadeInDown').addClass('fadeOutUp');

            setTimeout(function () {
                $this.topbarUserMenu.removeClass('usermenu-active fadeOutUp');
            }, 250);
        }
        else {
            $this.topbarUserMenu.addClass('usermenu-active fadeInDown');
        }

        e.preventDefault();
    });

    $this.topbarUserMenu.off('click').on('click', function (e) {
        $this.topbarMenuClick = true;
    });

    $this.usermenuLinks.on('click', function (e) {
        var link = $(this),
        item = link.parent(),
        submenu = link.next();

        $this.usermenuLinkClick = true;
        item.siblings('.menuitem-active').removeClass('menuitem-active').children('ul').slideUp();

        if (item.hasClass('menuitem-active')) {
            item.removeClass('menuitem-active');
            submenu.slideUp();
        }
        else {
            item.addClass('menuitem-active');
            submenu.slideDown();
        }

        if (submenu.length) {
            e.preventDefault();
        }
    });

    this.topbarLinks.on('click', function(e) {
        var link = $(this),
        item = link.parent(),
        submenu = link.next();

        $this.topbarLinkClick = true;

        item.siblings('.active-topmenuitem').removeClass('active-topmenuitem');

        if($this.isDesktop()) {
            if(submenu.length) {
                if(item.hasClass('active-topmenuitem')) {
                    submenu.addClass('fadeOutUp');

                    setTimeout(function() {
                        item.removeClass('active-topmenuitem'),
                        submenu.removeClass('fadeOutUp');
                    },500);
                }
                else {
                    item.addClass('active-topmenuitem');
                    submenu.addClass('fadeInDown');
                }
            }
        }
        else {
            item.children('ul').removeClass('fadeInDown fadeOutUp');
            item.toggleClass('active-topmenuitem');
        } 

        var href = link.attr('href');
        if(href && href !== '#') {
            window.location.href = href;
        }

        e.preventDefault();   
    });

    this.topbarMenu.children('.search-item').on('click', function(e) {
        $this.topbarLinkClick = true;
    });

    this.sidebar.off('click.sidebar').on('click.sidebar', function(e) {
        $this.sidebarClick = true;
    });

    $(document.body).on('click', function() {
        if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
            $this.topbarItems.filter('.active-topmenuitem').removeClass('active-topmenuitem');
            $this.topbarMenu.removeClass('topbar-menu-visible');
        }

        if(!$this.sidebarClick && ($this.isOverlayMenu() || !$this.isDesktop())) {
            $this.wrapper.removeClass('layout-wrapper-menu-active');
        }

        if (!$this.topbarMenuClick && $this.topbarUserMenu.hasClass('usermenu-active')) {
            $this.topbarUserMenu.removeClass('usermenu-active')
        }

        $this.topbarLinkClick = false;
        $this.topbarMenuClick = false;
        $this.sidebarClick = false;
    });
};
//]]>
   </script>

Babas007
Posts: 250
Joined: 24 May 2011, 09:42

14 Jun 2018, 17:15

There is a lot of code, can you point me what you modified please?

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

18 Jun 2018, 08:38

I added comment to show my changes into the following codes.

Code: Select all

<script type="text/javascript">
//<![CDATA[
/** 
 * PrimeFaces Barcelona Layout
 */
PrimeFaces.widget.Barcelona.prototype._bindEvents = function() {
    var $this = this;

    this.tabMenu.find('.menu-button').on('click', function(e) {
        $this.wrapper.removeClass('layout-wrapper-menu-active');
        $this.tabMenuContents.find('.ripple-animate').remove();
        if(!$this.isOverlayMenu()) {
            setTimeout(function() {
                $(window).trigger('resize');
            }, 310);
        }

        e.preventDefault();
    });

    this.tabMenu.find('.menu-pin-button').on('click', function(e) {
        var icon = $(this).children('i');
        if(icon.hasClass('fa-rotate-90'))
            $this._saveMenuState($(this).closest('.layout-tabmenu-content').index());
        else
            $this.clearMenuState();

        $this.tabMenuContents.find('.menu-pin-button').children('i').toggleClass('fa-rotate-90');
        e.preventDefault();
    });

    this.tabMenuNavLinks.on('click', function(e) {
        $this.sidebar.css('overflow','hidden');
        setTimeout(function() {
            $this.sidebar.css('overflow','');
        }, 301);

/******************************** Please use the following codes instead of the old codes in Barcelona ************************/

        var link = $(this);
        link.parent().addClass('active-item').siblings('.active-item').removeClass('active-item');

        var tabContent = $this.tabMenuContents.eq(link.parent().index()),
        isTabContentOpen = tabContent.hasClass('layout-tabmenu-content-active');

        if(isTabContentOpen) 
            $this.wrapper.removeClass('layout-wrapper-menu-active');
        else
            $this.wrapper.addClass('layout-wrapper-menu-active');

        $this.tabMenuContents.find('.ripple-animate').remove();
        $this.tabMenuContents.removeClass('layout-tabmenu-content-active');

        if(!isTabContentOpen) {
            tabContent.addClass('layout-tabmenu-content-active');
            var nanoInContent = tabContent.children('.layout-submenu-content').find('.nano');

            if(nanoInContent.length) {
                nanoInContent.nanoScroller();
            }
        }
        
/*************************************** End *****************************************/

        if(!$this.isOverlayMenu()) {
            setTimeout(function() {
                $(window).trigger('resize');
            }, 310);
        }

        var pinbutton = tabContent.find('.menu-pin-button');
        if(pinbutton.length && !pinbutton.children('i').hasClass('fa-rotate-90')) {
            $this._saveMenuState(link.parent().index());
        }

        $(this).siblings('.layout-tabmenu-tooltip').hide();
        e.preventDefault();
    });

    if(!this.isIOS()) {
        this.tabMenuNavLinks.on('mouseenter', function(e) {
            var link = $(this);
            if(!link.parent().hasClass('active-item')||!$this.wrapper.hasClass('layout-wrapper-menu-active')) {
                link.siblings('.layout-tabmenu-tooltip').show();
            }
        })
        .on('mouseleave', function(e) {
            $(this).siblings('.layout-tabmenu-tooltip').hide();
        });
    }

    this.topbarMenuButton.on('click', function(e) {
        $this.topbarMenuClick = true;
        $this.topbarMenu.find('ul').removeClass('fadeInDown fadeOutUp');

        if($this.topbarMenu.hasClass('topbar-menu-visible')) {
            $this.topbarMenu.addClass('fadeOutUp');

            setTimeout(function() {
                $this.topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
            },500);
        }
        else {
            $this.topbarMenu.addClass('topbar-menu-visible fadeInDown');
        }

        e.preventDefault();
    });

    $this.topbarUsermenuButton.off('click').on('click', function (e) {
        //TODO: Move to CSS
        $this.topbarMenuClick = true;

        if ($this.topbarUserMenu.hasClass('usermenu-active')) {
            $this.topbarUserMenu.removeClass('fadeInDown').addClass('fadeOutUp');

            setTimeout(function () {
                $this.topbarUserMenu.removeClass('usermenu-active fadeOutUp');
            }, 250);
        }
        else {
            $this.topbarUserMenu.addClass('usermenu-active fadeInDown');
        }

        e.preventDefault();
    });

    $this.topbarUserMenu.off('click').on('click', function (e) {
        $this.topbarMenuClick = true;
    });

    $this.usermenuLinks.on('click', function (e) {
        var link = $(this),
        item = link.parent(),
        submenu = link.next();

        $this.usermenuLinkClick = true;
        item.siblings('.menuitem-active').removeClass('menuitem-active').children('ul').slideUp();

        if (item.hasClass('menuitem-active')) {
            item.removeClass('menuitem-active');
            submenu.slideUp();
        }
        else {
            item.addClass('menuitem-active');
            submenu.slideDown();
        }

        if (submenu.length) {
            e.preventDefault();
        }
    });

    this.topbarLinks.on('click', function(e) {
        var link = $(this),
        item = link.parent(),
        submenu = link.next();

        $this.topbarLinkClick = true;

        item.siblings('.active-topmenuitem').removeClass('active-topmenuitem');

        if($this.isDesktop()) {
            if(submenu.length) {
                if(item.hasClass('active-topmenuitem')) {
                    submenu.addClass('fadeOutUp');

                    setTimeout(function() {
                        item.removeClass('active-topmenuitem'),
                        submenu.removeClass('fadeOutUp');
                    },500);
                }
                else {
                    item.addClass('active-topmenuitem');
                    submenu.addClass('fadeInDown');
                }
            }
        }
        else {
            item.children('ul').removeClass('fadeInDown fadeOutUp');
            item.toggleClass('active-topmenuitem');
        } 

        var href = link.attr('href');
        if(href && href !== '#') {
            window.location.href = href;
        }

        e.preventDefault();   
    });

    this.topbarMenu.children('.search-item').on('click', function(e) {
        $this.topbarLinkClick = true;
    });

    this.sidebar.off('click.sidebar').on('click.sidebar', function(e) {
        $this.sidebarClick = true;
    });

    $(document.body).on('click', function() {
        if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
            $this.topbarItems.filter('.active-topmenuitem').removeClass('active-topmenuitem');
            $this.topbarMenu.removeClass('topbar-menu-visible');
        }

        if(!$this.sidebarClick && ($this.isOverlayMenu() || !$this.isDesktop())) {
            $this.wrapper.removeClass('layout-wrapper-menu-active');
        }

        if (!$this.topbarMenuClick && $this.topbarUserMenu.hasClass('usermenu-active')) {
            $this.topbarUserMenu.removeClass('usermenu-active')
        }

        $this.topbarLinkClick = false;
        $this.topbarMenuClick = false;
        $this.sidebarClick = false;
    });
};
//]]>
   </script>

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest