Panel problem when click back button on device

[atukilham]

This is a (multiple allowed):

• bug
• enhancement
• feature-discussion (RFC)

I have a problem with panel.
When i open panel, and click back button on device, panel not closed and page was back to previous page.
How to make it just close panel without go to back page.
I was tried with check the body'class in pageBack events, if the body have class .with-panel-left-cover, close the panel and it's work.
But my problem, the page also turn back to previous page.

Help me please..

[valnub]

Hi, can you post a working example on Codepen? Thanks

[ZanderBrown]

Probably related to #150

[valnub]

I was tried with check the body'class in pageBack events, if the body have class .with-panel-left-cover, close the panel and it's work.
But my problem, the page also turn back to previous page.

Did you try event.preventDefault() ?

[atukilham]

@valnub , thanks for reply.
I think my problem same with #150 like @ZanderBrown said.

I use pushState:true,
the problem just with page back clicked on browser or back button on android device, not the framework back button when panel show. I think modal datepicker have same problem like this.

Where i must use event.preventDefault(), can give me an example?
Thanks

[valnub]

Oh, I see you mean the back button of the Android device. I thought you might be able to put that code into the click event listener of Framework7's back button.

Hm, to be honest I don't know how to do this. You'll probably have to mess around with popstate event.

[Deep18]

@atukilham
This is how i did it.
First of all add an id to the left panel div like this
<div id="left_panel" class="panel panel-left panel-cover sidebar">
add an eventlisterner on back button and check for the active class with hasClass function on the listerner.

document.addEventListener("backbutton", onBackKeyDown, false); 

function onBackKeyDown() { 
	
	 if ($$('#left_panel').hasClass( "active" )) 
		{ myApp.closePanel(); 
			return false; 
			} 
			
	else { 
		mainView.router.back();
		} 
		
	return true; 
}

[valnub]

Awesome, thanks for posting your solution!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.