Framework7 Starter

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.0.5/js/framework7.bundle.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/4.0.5/css/framework7.bundle.css">
<!-- App root element -->
<div id="app">
  <!-- Statusbar overlay -->
  <div class="statusbar"></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="block row">
          <div class="col-33"><a href="#" class="button button-fill pb-standalone">Auto slide</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript

// Dom7
var $$ = Dom7;
// Framework7 App main instance
var app = new Framework7({
  root: '#app', // App root element
  id: 'io.framework7.testapp', // App bundle ID
  name: 'Framework7', // App name
  theme: 'auto', // Automatic theme detection
  // 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: '/'
});

/*=== Default standalone ===*/
var myPhotoBrowserStandalone = null

//Open photo browser on click
$$('.pb-standalone').on('click', function() {
  createPhotoBrowserStandalone()
  myPhotoBrowserStandalone.open();
  var myInterval = setInterval(function() {
    $$('.photo-browser-next').click()
    myPhotoBrowserStandalone.on('closed', function() {
      clearInterval(myInterval)
      myPhotoBrowserStandalone.destroy()
    })
  }, 1000)
});

function createPhotoBrowserStandalone() {
  myPhotoBrowserStandalone = app.photoBrowser.create({
    photos: [
      'https://cdn.framework7.io/placeholder/sports-1024x1024-1.jpg',
      'https://cdn.framework7.io/placeholder/sports-1024x1024-2.jpg',
      'https://cdn.framework7.io/placeholder/sports-1024x1024-3.jpg',
    ],
    on: {
    reachEnd: function () {
      debugger
    },
    init: function () {
debugger
}
}
  });
  myPhotoBrowserStandalone.on('reachEnd', () => {
  debugger
  })
}