Framework7 Starter

by Maiki Nahara

HTML

<script src="https://unpkg.com/[email protected]/js/framework7.bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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 class="page" data-name="home">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title sliding">My App</div>
        </div>
      </div>
      <!-- Toolbar-->
      <div class="toolbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#" class="link1">Left Link</a>
          <a href="#" class="link2">Right Link</a>
        </div>
      </div>
      <!-- Scrollable page content-->
      <div class="page-content">
        <div class="block block-strong debug">
          <div class="button button-outline">
 Click here to init smartselects first of all        
          </div>
        </div>
        <div class='list display-none'>
          <ul>
          <li>
            <a class="item-link no-chevron smart-select" id="smart-select-1">
              <select name="especialidade">
                <option value="2">test</option>
              </select>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">With handler on Opened</div>
                </div>
              </div>
            </a>
          </li>
          <li>
            <a class="item-link no-chevron smart-select" id="smart-select-2">
              <select name="especialidade">
                <option value="2">test</option>
              </select>
              <div class="item-content">
                <div class="item-inner">
                  <div class="item-title">With handler on Open</div>
                </div>
              </div>
          ...

CSS

.display-none {
  display: none;
}

JavaScript

var $$ = Dom7;

var app = new Framework7({
  root: '#app',
  theme: 'auto',
    on: {
    init () {
    	console.log('app init')
    },
    pageInit: function () {
      console.log('Page initialized');
    },
  }
});

var viewMain = app.views.create('.view-main');

//counters
var counter = 0;
var counter2 = 0;

//init smartselect
$$(document).on('click','.button',function(){
	Dom7('.display-none').removeClass('display-none')
  app.utils.nextTick(() => {
  	debugger
    const smart = app.smartSelect.create({
   el: '#smart-select-1',
   openIn: 'sheet',
   sheetCloseLinkText: 'Fechar',
   closeOnSelect: true,
   on: {
     opened: function (a) {
     	if(counter > 0){
        a.close();
        //this.close() gives me the same problem
        counter = 0;
      } else {
       	counter = 1;
      }
    }
  }
});

  const smart2 = app.smartSelect.create({
    el: '#smart-select-2',
    openIn: 'sheet',
    sheetCloseLinkText: 'Fechar',
    closeOnSelect: true,
    on: {
      open: function (a) {
        app.toast.show({
          position: 'center',
          text:'reached here',
          closeTimeout: 1000,
        })/*
        if(counter2 > 0){
          counter2 = 0;
          a.close();
          //this.close() gives me the same problem
        } else {
          counter2 = 1;
        }*/
      }
    }
  });
  })
})