Issue with Menu

[ravihariharan]

Raised an issue https://github.com/primefaces/poseidon/issues/2

## 1) Environment
- version: poseidon-1.0.0

- Affected browsers: Tested in IE , Chrome and Firefox (looks like all browsers )

## 2) Expected behavior
menu-button -- fa-angle-left should always work


...

## 3) Actual behavior
menu-button -- fa-angle-left does not work when there is a button click that has **update="@(form)"**.

..

## 4) Steps to reproduce
Place a button in form

Code: Select all

<p:commandButton value="Ajax Submit" id="ajax"
							action="#{buttonView.buttonAddLabel}"
							update="@(form)"
							styleClass="ui-priority-primary" />

1. Click after place load , Menu working
2. Click on button , Menu not working
3. Click again on the button , Menu working
4. Click again on the button , Menu not working

looks like it works after alternate click.
..

## 5) Sample XHTML
Use the empty.xhtml from poseidon-1.0.0.war

Code: Select all

<ui:define name="content">
		<div class="ui-g">
			<div class="ui-g-12">
				<div class="card">
					<h1>Empty Page</h1>
					<p>Use this page to start from scratch and place your custom
						content.</p>
					<p:button outcome="dashboard" value="Home"
						style="display:inline-block;margin-top:5px" />

					<h:form id="form">
						<p:commandButton value="Ajax Submit" id="ajax"
							action="#{buttonView.buttonAddLabel}" update="@(form)" />
					</h:form>
				</div>
			</div>
		</div>

	</ui:define>

## 6) Sample bean
No change to ButtonView.java from poseidon-1.0.0.war
..

[mert.sincan]

I couldn't replicate this issue with your example code. But, can you make the following change in layout.js?

Code: Select all

/** 
 * PrimeFaces Poseidon Layout
 */
PrimeFaces.widget.Poseidon = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        ...
    },
    
    _bindEvents: function() {
        var $this = this;
        
        this.menuButton.off('click').on('click', function(e) {    // instead of this.menuButton.on('click', function(e) {
        
        });
        
        ...
    },
    
    ...
}

[ravihariharan]

Code: Select all

this.menuButton.off('click', function(e) {

Now the menu does not work on any page.

IE 11.953.143393.0
Chrome 56
Firefox 52

[ravihariharan]

empty.xhtml

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
                
    <ui:define name="title">Empty Page</ui:define>

    <ui:define name="viewname">Empty</ui:define>

    <ui:define name="content">
        <div class="ui-g">
            <div class="ui-g-12">
                <div class="card">
                    <h1>Empty Page</h1>
                    <p>Use this page to start from scratch and place your custom content.</p>
                    <p:button outcome="dashboard" value="Home" style="display:inline-block;margin-top:5px"/>
                    
                    <h:form id="form">
						<p:commandButton value="Ajax Submit" id="ajax"
							action="#{buttonView.buttonAddLabel}" update="@(form)" />
						<p:panel id="addPanel"></p:panel>
					</h:form>
                </div>
            </div>
        </div>
        
    </ui:define>

</ui:composition>

ButtonView.java

Code: Select all

package org.primefaces.poseidon.view.button;

import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

import org.primefaces.component.outputlabel.OutputLabel;

@ManagedBean
@ViewScoped
public class ButtonView {

	public void save(ActionEvent actionEvent) {
		addMessage("Data saved");
	}

	public void update(ActionEvent actionEvent) {
		addMessage("Data updated");
	}

	public void delete(ActionEvent actionEvent) {
		addMessage("Data deleted");
	}

	public void buttonAction(ActionEvent actionEvent) {
		addMessage("Welcome to Primefaces!!");
	}

	public String buttonAddLabel() {
		System.out.println("buttonAddLabel");
		OutputLabel label = new OutputLabel();
		label.setValue("Added From Managed Bean");
		List<UIComponent> children = FacesContext.getCurrentInstance().getViewRoot().findComponent("form:addPanel")
				.getChildren();
		children.clear();
		children.add(label);
		return "";
	}

	public void addMessage(String summary) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, summary, null);
		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}

[ravihariharan]

aragorn , my wild guess is the action method returns a "" to remain on the same page which might cause this issue.
Let me know if you can reproduced the issue with the full code posted above. No other change from the poseidon-1.0.0.war that was download from the site.

[mert.sincan]

Code: Select all

this.menuButton.off('click', function(e) {

Now the menu does not work on any page.

IE 11.953.143393.0
Chrome 56
Firefox 52

Please see my above code;
this.menuButton.off('click').on('click', function(e)

Thanks for the sample, I'll check and get back to you.

[ravihariharan]

Should have copy pasted

This works.

Code: Select all

this.menuButton.off('click').on('click', function(e)

Will this be a official fix or patch ?

[ravihariharan]

Issue exists for

[mert.sincan]

Thanks for the update! I'm working on this issue.

[mert.sincan]

Please remove _bindEvents method in layout.js ,then add the following _bindEvents method;

Code: Select all

    _bindEvents: function() {
        var $this = this;
        
        this.menuButton.off('click').on('click', function(e) {
            $this.menuButton.toggleClass('menu-button-rotate');
            $this.topbarItems.removeClass('topbar-items-visible');
            
            //overlay
            if($this.wrapper.hasClass('menu-layout-overlay')) {
                $this.wrapper.toggleClass('layout-menu-overlay-active');
                
                if($this.wrapper.hasClass('layout-menu-overlay-active')) {
                    $this.enableModal();
                    $this.enableSwipe();
                    $this.closeRightSidebarMenu();
                }
                else {
                    $this.disableModal();
                    $this.disableSwipe();
                }
            }
            //static
            else {
                if($this.isDesktop()) {
                    $this.wrapper.toggleClass('layout-menu-static-inactive')
                }
                else {
                    if($this.wrapper.hasClass('layout-menu-static-active')) {
                        $this.wrapper.removeClass('layout-menu-static-active');
                        $this.disableModal();
                        $this.disableSwipe();
                    }
                    else {
                        $this.wrapper.addClass('layout-menu-static-active');
                        $this.wrapper.removeClass('layout-menu-static-inactive');
                        $this.enableModal();
                        $this.enableSwipe();
                        $this.closeRightSidebarMenu();
                    }
                }
            }
            
            e.preventDefault();
        });
        
        this.topbarMenuButton.off('click').on('click', function(e) {
            $this.topbarMenuClick = true;
            $this.topbarItems.find('ul').removeClass('fadeInDown fadeOutUp');
            
            if($this.wrapper.hasClass('layout-menu-overlay-active')||$this.wrapper.hasClass('layout-menu-static-active')) {
                $this.menuButton.removeClass('menu-button-rotate');
                $this.wrapper.removeClass('layout-menu-overlay-active layout-menu-static-active');
                $this.disableModal();
            }

            if($this.topbarItems.hasClass('topbar-items-visible')) {
                $this.topbarItems.addClass('fadeOutUp');
                
                setTimeout(function() {
                    $this.topbarItems.removeClass('fadeOutUp topbar-items-visible');
                },500);
            }
            else {
                $this.topbarItems.addClass('topbar-items-visible fadeInDown');
            }
            
            $this.closeRightSidebarMenu();
            
            e.preventDefault();
        });
        
        this.menulinks.off('click').on('click', function(e) {
            var link = $(this),
            item = link.parent(),
            submenu = item.children('ul'),
            horizontal = $this.isHorizontal() && $this.isDesktop();
            
            if(horizontal) {
                $this.horizontalMenuClick = true;
                $this.closeRightSidebarMenu();
            }
                                     
            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.deactivateItems(item.siblings(), true);
                    $this.activate(item);
                }
            }
            
            if(!horizontal) {
                setTimeout(function() {
                    $(".nano").nanoScroller();
                }, 500);
            }
                                    
            if(submenu.length) {
                e.preventDefault();
            }
        });
        
        this.menu.find('> li').on('mouseenter', function(e) {    
            if($this.isHorizontal() && $this.isDesktop()) {
                var item = $(this),
                link = item.children('a'),
                submenu = item.children('ul');
                
                if(!item.hasClass('active-menuitem')) {
                    $this.menu.find('.active-menuitem').removeClass('active-menuitem');
                    $this.menu.find('ul:visible').hide();
                    $this.menu.find('.ink').remove();
                    
                    if($this.menuActive) {
                        item.addClass('active-menuitem');
                        item.children('ul').show();
                    }
                }
            }
        });
        
        this.profileButton.off('click').on('click', function(e) {
            var profile = $this.profileMenu.prev('.profile'),
            expanded = profile.hasClass('profile-expanded');
            
            $this.profileMenu.slideToggle();
            $this.profileMenu.prev('.profile').toggleClass('profile-expanded');
            $this.setInlineProfileState(!expanded);
            
            setTimeout(function() {
                $(".nano").nanoScroller();
            }, 500);
            
            e.preventDefault();
        });
        
        this.topbarLinks.off('click').on('click', function(e) {
            var link = $(this),
            item = link.parent(),
            submenu = link.next();
            
            $this.topbarLinkClick = true;

            item.siblings('.active-top-menu').removeClass('active-top-menu');
            if($this.wrapper.hasClass('layout-menu-overlay-active')) {
                $this.menuButton.removeClass('menu-button-rotate');
                $this.wrapper.removeClass('layout-menu-overlay-active');
                $this.disableModal();
            }

            if($this.isDesktop()) {
                if(submenu.length) {
                    if(item.hasClass('active-top-menu')) {
                        submenu.addClass('fadeOutUp');
                        
                        setTimeout(function() {
                            item.removeClass('active-top-menu'),
                            submenu.removeClass('fadeOutUp');
                        },500);
                    }
                    else {
                        item.addClass('active-top-menu');
                        submenu.addClass('fadeInDown');
                    }
                }
            }
            else {
                item.children('ul').removeClass('fadeInDown fadeOutUp');
                item.toggleClass('active-top-menu');
            }   
            
            $this.closeRightSidebarMenu();
            
            if(submenu.length) {
                e.preventDefault(); 
            }
        });
        
        $this.topbarItems.children('.search-item').off('click').on('click', function(e) {
            $this.topbarLinkClick = true;
        });
        
        $(document.body).off('click').on('click', function() {
            if($this.isHorizontal() && !$this.horizontalMenuClick && $this.isDesktop()) {
                $this.menu.find('.active-menuitem').removeClass('active-menuitem');
                $this.menu.find('ul:visible').hide();
                $this.menuActive = false;
            }
            
            if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
                $this.topbarItems.find('.active-top-menu').removeClass('active-top-menu');
            }
            
            if(!$this.topbarMenuClick && !$this.topbarLinkClick) {
                $this.topbarItems.removeClass('topbar-items-visible');
            }
            
            $this.horizontalMenuClick = false;
            $this.topbarLinkClick = false;
            $this.topbarMenuClick = false;
        });
        
        $(function() {
            $this._initRightSidebar();
        });
    },