The topbar menu is not opening/expanding, when wrapped by an <h:form

Post Reply
hasantolak
Posts: 8
Joined: 05 Dec 2018, 16:38

11 Jan 2019, 15:45

Hi
I need your help.
The problem is about the topbar of the original Barcelona layout. When the topbar menu is wrapped by an <h:form component, to update for ajax request, except profile menu, the other topbar menu are not opening/expanding. When the <h:form component is removed, it return to work normaly.

Thanks in advance.

aragorn
Posts: 3747
Joined: 29 Jun 2013, 12:38

14 Jan 2019, 09:47

Could you please attach your topbar.xhtml page for us to replicate?

hasantolak
Posts: 8
Joined: 05 Dec 2018, 16:38

14 Jan 2019, 20:10

Hi,
Thanks for your response.
The topbar.xhtml is original page of Barcelona layout from Barcelona-1.0.4.war.
The topbar.xhtml page was not modified.

aragorn
Posts: 3747
Joined: 29 Jun 2013, 12:38

15 Jan 2019, 11:40

Hi,

Which page are you adding h:form on? and where? Could you please attach your page?

Best Regards,

aragorn
Posts: 3747
Joined: 29 Jun 2013, 12:38

15 Jan 2019, 15:30

Please change PrimeFaces.widget.Barcelona code in layout.js with the following PrimeFaces.widget.Barcelona;

Code: Select all

   /** 
 * PrimeFaces Barcelona Layout
 */
PrimeFaces.widget.Barcelona = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        this._super(cfg);
        this.wrapper = $(document.body).find('.layout-wrapper');
        this.sidebar = this.wrapper.children('.layout-sidebar');
        this.tabMenu = this.jq;
        this.tabMenuNav = this.tabMenu.children('.layout-tabmenu-nav');
        this.tabMenuNavLinks = this.tabMenuNav.find('a');
        this.tabMenuContents = this.tabMenu.find('.layout-tabmenu-content');   
        this.menuActive = false;
        this.sidebarClick = false;
        this.topbarLinkClick = false;
        this.topbarMenuClick = false;

        if ($('#topbar-usermenu').length)
            this.usermenuLinks = $('#topbar-usermenu').find('a');

        this._bindEvents();
        this._restoreMenuState();
    },
    
    _bindEvents: function() {
        var $this = this;
        
        this.tabMenu.find('.menu-button').on('click', function(e) {
            
            //Call user onTabClose callback
            if($this.cfg.onTabClose) {
                var index = $this.tabMenuNav.find('.active-item').index(),
                result = $this.cfg.onTabClose.call($this, index);
                
                if(result === false)
                    return false;
            }
            
            $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),
            index = link.parent().index();
            
            //Call user onTabChange callback
            if($this.cfg.onTabChange) {
                var result = $this.cfg.onTabChange.call($this, index);
                if(result === false)
                    return false;
            }
            
            link.parent().addClass('active-item').siblings('.active-item').removeClass('active-item');
            $this.wrapper.addClass('layout-wrapper-menu-active');
            $this.tabMenuContents.find('.ripple-animate').remove();
            $this.tabMenuContents.removeClass('layout-tabmenu-content-active');
            
            var tabContent = $this.tabMenuContents.eq(link.parent().index());
            tabContent.addClass('layout-tabmenu-content-active'),
            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();
            });
        }

        $(document.body).off('click.topbar-menu', '#topbar-menu-button').on('click.topbar-menu', '#topbar-menu-button', null, function(e) {
            $this.topbarMenuClick = true;
            var topbarMenu = $this.wrapper.find('.topbar .topbar-menu');
            topbarMenu.find('ul').removeClass('fadeInDown fadeOutUp');

            if(topbarMenu.hasClass('topbar-menu-visible')) {
                topbarMenu.addClass('fadeOutUp');
                
                setTimeout(function() {
                    topbarMenu.removeClass('fadeOutUp topbar-menu-visible');
                },500);
            }
            else {
                topbarMenu.addClass('topbar-menu-visible fadeInDown');
            }
                        
            e.preventDefault();
        });

        $(document.body).off('click.topbar-user-button', '#topbar-usermenu-button').on('click.topbar-user-button', '#topbar-usermenu-button', null, function(e) {
            //TODO: Move to CSS
            $this.topbarMenuClick = true;
            
            var topbarUserMenu = $('#topbar-usermenu');

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

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

            e.preventDefault();
        });

        $(document.body).off('click.topbar-user-menu', '#topbar-usermenu').on('click.topbar-user-menu', '#topbar-usermenu', null, function(e) {
            $this.topbarMenuClick = true;
        });

        $(document.body).off('click.usermenu-links', '#topbar-usermenu a').on('click.usermenu-links', '#topbar-usermenu a', null, 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();
            }
        });
                
        $(document.body).off('click.topbar-links', '.topbar-menu li a').on('click.topbar-links', '.topbar-menu li a', null, 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();   
        });
        
        $(document.body).off('click.topbar-menu', '.topbar-menu .search-item').on('click.topbar-menu', '.topbar-menu .search-item', null, function(e) {
            $this.topbarLinkClick = true;
        });
        
        this.sidebar.off('click.sidebar').on('click.sidebar', function(e) {
            $this.sidebarClick = true;
        });
        
        $(document.body).off('click.barcelona').on('click.barcelona', function() {
            if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
                var topbarMenu = $this.wrapper.find('.topbar .topbar-menu');
                topbarMenu.children('li').filter('.active-topmenuitem').removeClass('active-topmenuitem');
                topbarMenu.removeClass('topbar-menu-visible');
            }
            
            if(!$this.sidebarClick && ($this.isOverlayMenu() || !$this.isDesktop())) {
                //Call user onTabClose callback
                if($this.cfg.onTabClose) {
                    var index = $this.tabMenuNav.find('.active-item').index(),
                    result = $this.cfg.onTabClose.call($this, index);
                    
                    if(result === false)
                        return false;
                }
                
                $this.wrapper.removeClass('layout-wrapper-menu-active');
            }
            
            var topbarUserMenu = $('#topbar-usermenu');
            if (!$this.topbarMenuClick && topbarUserMenu.hasClass('usermenu-active')) {
                topbarUserMenu.removeClass('usermenu-active');
            }

            $this.topbarLinkClick = false;
            $this.topbarMenuClick = false;
            $this.sidebarClick = false;
        });
    },
    
    isTablet: function() {
        var width = window.innerWidth;
        return width <= 1024 && width > 640;
    },

    isDesktop: function() {
        return window.innerWidth > 1024;
    },

    isMobile: function() {
        return window.innerWidth <= 640;
    },
    
    isOverlayMenu: function() {
        return this.wrapper.hasClass('layout-overlay-menu');
    },
    
    isIOS: function(e) {
        return ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)));
    },
        
    _saveMenuState: function(index) {
        $.cookie('barcelona_tabmenu_index', index.toString(), {path: '/'});
    },
    
    _restoreMenuState: function() {
        var activeTabMenu = $.cookie('barcelona_tabmenu_index');
        if(activeTabMenu) {
            var tabContents = this.tabMenu.find('.layout-tabmenu-content');
            tabContents.find('.menu-pin-button').children('i').removeClass('fa-rotate-90');
            var index = parseInt(activeTabMenu);
            this.wrapper.addClass('layout-wrapper-menu-active');
            this.tabMenuNavLinks.eq(index).parent('li').addClass('active-item');
            tabContents.eq(index).addClass('layout-tabmenu-content-active');
        }
    },
    
    clearMenuState: function() {
        $.removeCookie('barcelona_tabmenu_index', {path: '/'});
    }
    
});

/* other codes */

hasantolak
Posts: 8
Joined: 05 Dec 2018, 16:38

15 Jan 2019, 19:37

Thanks so much aragorn, İt is working well now.

aragorn
Posts: 3747
Joined: 29 Jun 2013, 12:38

16 Jan 2019, 10:03

Glad to hear, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests