Primefaces mobile swipe overlaypanel

[shitta]

Hi, I want to have an overlaypanel which appears on the left when the user clicks a button or when the user swipes to the right anywhere on the screen.

I have successfully achieved part of the behavior using the example on the primefaces mobile showcase:

Code: Select all

<pm:content styleClass="jqm-content">
    <p:panelGrid columns="2">
        <p:commandButton id="btn-basic" value="Basic" type="button"/>
    </p:panelGrid>
</pm:content>
 
<p:overlayPanel for="btn-basic" widgetVar="pnl-basic" at="left" showEffect="overlay">
     <h2>Panel Content</h2>
     <p:menu>
         <p:menuitem value="Link 1" url="#" />
         <p:menuitem value="Link 2" url="#" />
         <p:menuitem value="Link 3" url="#" />
     </p:menu>
 </p:overlayPanel>

I am having trouble to manage to show the overlaypanel when the user swipes anywhere on the screen and I was wondering if that is even possible to do with primefaces. Any ideas?

I think it could be done using: <p:ajax event="swiperight" listener=#{bean.method()} update=.../> but I don't know where to include this event to obtain the desired result(swipe anywhere on the screen and get the overlaypanel to show). I tried some options like including it on the pm:page component but that component doesn't support event handling.

I'd be grateful if you people can shed some light over this.

[shitta]

I did it with Jquery:

Code: Select all

          $( "div.ui-page" ).on( "swiperight", swiperightHandler );
	  
	  function swiperightHandler( event ){
		  $("#pagina\\:Menu\\:btnMenu").click();							  
	  }
	});

div.ui-page references the div that encapsulates the pm:page, then "#pagina\\:Menu\\:btnMenu" is the HTML id of the commandbutton.

Basically the button is clicked everytime the user swipes right on the page generating the desired behavior.