Framework7 Starter

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.1.1/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.1.1/css/framework7.bundle.css">
<!-- App root element -->
<div id="app">
  <!-- Statusbar overlay -->
  <div class="statusbar"></div>

  <!-- Left Panel with Reveal effect 
  <div class="panel panel-left panel-reveal">
    <div class="content-block">
      <p><a href="#" class="panel-close">Close me</a></p>
      <p><a href="#" data-panel="right" class="panel-close">Open Right Panel</a></p>
    </div>
  </div>
  <!-- Your main view, should have "view-main" class -->
  <div class="view view-main">
    <!-- Initial Page, "data-name" contains page name -->
    <div data-name="home" class="page">

      <!-- Top Navbar -->
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Awesome App</div>
        </div>
      </div>

      <!-- Bottom Toolbar -->
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <!-- Toolbar links -->
          <a href="#" class="link">Link 1</a>
          <a href="#" class="link">Link 2</a>
        </div>
      </div>

      <!-- Scrollable page content -->
      <div class="page-content">
        <div class="list">
          <ul>
            <li>
              <a href="/list2/" class="item-link item-content">
                <div class="item-media">
                  <i class="icon my-icon"></i>
                </div>
                <div class="item-inner">
                  <div class="item-title">
                    List element title
                  </div>
                  <div class="item-after">
                    List element label
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

// Dom7
var $$ = Dom7;
// Framework7 App main instance
window.app = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'ios', // Automatic theme detection
  panel: {
    //swipeNoFollow: false,
    //swipe: 'none',
    //swipeActiveArea: 250
  },
  view: {
    stackPages: false,
    //iosPageLoadDelay: 0,
    //mdSwipeBack: true,
    //iosSwipeBack: false,
    iosSwipeBackActiveArea: 200,
    //iosSwipeBackAnimateOpacity: false,
    //iosSwipeBackAnimateShadow: false,
    //removeElements: false
  },
  // App root data
  data: function() {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  // App root methods
  methods: {
    helloWorld: function() {
      app.dialog.alert('Hello World!');
    },
  },
  // App routes
  routes: []
});

// Init/Create main view
var mainView = app.views.create('.view-main', {
  url: '/'
});

let failCount = 3

function getData(params) {
  return new Promise((resolve, reject) => {
    app.request.get('backend-url.com', params,
      function(res) {
        resolve(res)
      },
      function(err) {
        failCount--
        console.log(failCount)
        failCount ? getData({foo:'bar'}) : alert('try manual button')
        reject(err)
      })
  })
}
console.log(app)

getData({
  foo: 'bar'
})