Framework7 - Async routes

by Maiki Nahara

HTML

<script src="https://unpkg.com/framework7/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/framework7/css/framework7.bundle.min.css">
<div id="app">
  <div class="panel panel-left panel-cover theme-dark">
    <div class="page"></div>
  </div>
  <div class="panel panel-right panel-reveal theme-dark">
    <div class="page"></div>
  </div>
  <div class="view view-main ios-edges">
  </div>
</div>

CSS

#app {

  border: 1px solid gray;
}

JavaScript

var $$ = Dom7;
var app = new Framework7({
  root: '#app',
  theme: 'ios',
  routes: [
    // Async
    {
      path: '/',
      on: {
        pageAfterIn: function test (e, page) {
          let userSS = page.app.smartSelect.get('.smart-select')
          userSS.on('closed', s => {
          	localStorage.setItem('userStatus', s.getValue())
            s.app.dialog.alert('Please refresh browser (f5)')
          })
          userSS.setValue(localStorage.getItem('userStatus'))
        },
      },
      async: function(routeTo, routeFrom, resolve, reject) {
        // Requested route
        console.log(routeTo)
        let isLogged = localStorage.getItem('userStatus') || '-1'
        if (isLogged === '-1') {
          resolve({
            template:
            `<div class="page">
              <div class='page-content'>
                <h1>hi! user status: New install</h1>
                <div class='list'>
                	<ul>
                  	<li>
                      <a class="item-link smart-select smart-select-init">
                        <select name="user-status">
                          <option value="-1" selected>New install</option>
                          <option value="0">Installed - NOT logged</option>
                          <option value="1">Installed - AND logged</option>
                        </select>
                        <div class="item-content">
                          <div class="item-inner">
                            <div class="item-title">Change Status</div>
                          </div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>`
          })
        } else if (isLogged === '0') {
          resolve({
            template:
            `<div class="page">
              <div class='page-content'>
                <h1>hi! user status: Installed - NOT logged</h1>
                <div...