I know I’m asking too much referring to Framework 7.
The thing is, I’ve been working on a mobile app, and it works as expected, and thanks to this community and this team I’m able to deploy a project I’ve working too hard.
The only observation they made (and can not figure out) is how can I mix F7 behavior with the dmx framework.
What I need:
Back button, closing modal/action sheets/modal sheets/popups/ and then go back to the previous page, and after that (being on the index page) close the app.
Actual behavior
The back button only closes the app.
In other words:
How can include this: https://forum.framework7.io/t/how-to-control-back-button-in-mobile/4398/6
On this (app.js):
// Dom7
var $ = Dom7;
// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
// Init App
var app = new Framework7({
id: 'io.framework7.testapp',
root: '#app',
theme: theme,
on: {
pageMounted: function (page) {
if (window.dmx && dmx.app) {
dmx.app.$parse(page.el);
dmx.app.$update();
}
}
},
routes: window.routes ? window.routes : [],
popup: {
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
}
});
if (document.querySelector('.view-main')) {
var mainView = app.views.create('.view-main');
What I tried:
I’ve read and tried every single topic of the F7 forum, but I think the problem comes in order to mix F7 with dmx on my own.
This attempts to close the app too:
// Init App
var app = new Framework7({
id: 'io.framework7.testapp',
root: '#app',
theme: theme,
on: {
pageMounted: function (page) {
if (window.dmx && dmx.app) {
dmx.app.$parse(page.el);
dmx.app.$update();
}
}
},
routes: window.routes ? window.routes : [],
popup: {
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
},
methods: {
onBackKeyDown: function () {
var leftp = app.panel.left && app.panel.left.opened;
var rightp = app.panel.right && app.panel.right.opened;
if (leftp || rightp) {
app.panel.close();
return false;
} else if ($$('.modal-in').length > 0) {
app.dialog.close();
app.popup.close();
return false;
} else if (app.views.main.router.url == '/') {
navigator.app.exitApp();
} else {
mainView.router.back();
}
}
}
});
if (document.querySelector('.view-main')) {
var mainView = app.views.create('.view-main');
}
