Hey there, another guide
We are going to see how we can close panels/popovers/action sheet/login screens, etc using the back button on the Android device.
Also, if we are not on the main page, we will navigate there; and if we are there, a toast will display to confirm exiting the app.
Like this:
ScreenRecorderProject60
We need to add the App Capacitor plugin and this script:
<script>
let isExitToastVisible = false;
document.addEventListener('backbutton', function () {
// Login screen:
const loginScreen = Framework7.instance.loginScreen.get();
if (loginScreen && loginScreen.opened) {
loginScreen.close();
return;
}
// Action sheet:
const actionSheet = Framework7.instance.actions.get();
if (actionSheet && actionSheet.opened) {
actionSheet.close();
return;
}
//Popovers:
const popOvers = Framework7.instance.popover.get();
if (popOvers && popOvers.opened) {
popOvers.close();
return;
}
// Modal sheet:
const sheetModal = Framework7.instance.sheet.get();
if (sheetModal && sheetModal.opened) {
sheetModal.close();
return;
}
// Panels:
const panel = Framework7.instance.panel.get();
if (panel && panel.opened) {
panel.close();
return;
}
// Toast confirm:
if (isExitToastVisible) {
Capacitor.Plugins.App.exitApp();
// We can minimize the app too with .minimizeApp().
}
else if (Framework7.instance.views.main.router.url === '/') {
const toast = Framework7.instance.toast.create({
text: 'Press backbutton again to exit',
position: 'bottom',
closeTimeout: 3000,
closeButton: false,
on: {
closed: () => {
isExitToastVisible = false;
},
},
});
toast.open();
isExitToastVisible = true;
}
else {
Framework7.instance.views.main.router.navigate('/', {
animateWithJS: true,
transition: 'f7-parallax',
//You can use another transition
});
}
});
</script>
And that’s all.
If you need another component, for example popup, just go to the docs, see the method and change app.popup.get() to Framework7.instance.popup.get() and you’ll get something like:
const mypopup = Framework7.instance.popup.get();
if (mypopup && mypopup.opened) {
mypopup.close();
return;
}
I hope someone finds this useful 