I guys, I’m having a problem.
I’ve got 2 views:
One: view-init to launch the login/register actions (because I couldn’t force to open login inside a callback)
Second: view-main to launch all the functions for a register user.
Problem:
Panels are showing also when view-init is active.
¿Can you help me?
I’ve got this Code:
<body>
<!-- App root element -->
<div id="app">
<!-- Statusbar overlay -->
<div class="statusbar"></div>
<!-- panels !-->
<div class="panel panel-left panel-cover" data-view=".view-main">
<div class="view panel-view" >
</div>
</div>
<div class="panel panel-right panel-cover" data-view=".view-main">
<div class="view panel-view">
</div>
</div>
<!-- login !-->
<div class="login-screen " id="login-screen">
</div>
<!-- =============================== !-->
<!-- =========== VIEWS ============ !-->
<!-- =============================== !-->
<!-- =========== INIT VIEW ============ !-->
<div class="view view-init" data-url="/" data-name="landing" data-push-state="true">
<div class="page no-navbar no-toolbar no-swipeback">
<a class="item-content item-link login-screen-open" data-login-screen="#login-screen">LOGIN</a>
<a class="item-content item-link login-screen-open" data-login-screen="#registro-screen">REGISTER</a>
</div>
</div>
<!-- =========== INIT VIEW ============ !-->
<!-- =========== MAIN VIEW ============ !-->
<div class="view view-main">
</div>
</div ><!-- id="app" !-->
</body>
And my routes:
// Initialize app and store it to app variable for futher access to its methods
var app = new Framework7({
// App root element
root: '#app',
// App Name
name: 'XXX',
// App id
id: 'XXX.com.{{name}}',
// App Version
version: '1.0.0',
// Extended by Panel component:
panel: {
swipe: 'left',
leftBreakpoint: 768,
rightBreakpoint: 1024,
},
// Extended by Dialog component:
dialog: {
title: 'XXX',
},
// Extended by Statusbar component:
statusbar: {
iosOverlaysWebview: true,
},
clicks: {
externalLinks: '.external',
},
touch: {
tapHold: true,
fastClicks:true,
materialRipple:true,
activeState: true,
},
// Add default routes
routes: [],
// .
});
var f7_routes = [
/**************************************************************
*
* ROUTES: INDEX FUNCTIONS
*
*************************************************************** */
{
path: '/',
url: './index.html',
on: {
pageAfterIn: function (e, page) {
// do something after page gets into the view
console.log("pageAfterIn");
},
pageInit: function (e, page) {
console.log("INDEX pageInit");
}, //pageinit
}, //on
}, // index
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './404.html',
},
];
app.routes.push( f7_routes);
// Init/Create main view
var mainView = app.views.create('.view-main', {
url: '/',
routes: f7_routes
});
var landingView = app.views.create('.view-init', {
url: '/',
routes: [
]
});