Ppetr bug

by Maiki Nahara

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.2.0/js/framework7.bundle.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/5.2.0/css/framework7.bundle.css">
<div id="app">
    <div class="panel panel-left panel-cover panel-resizable panel-init">
      <div class="page">
        <div class="page-content">
          <div class="block-title">Left Panel</div>
          <div class="block">
            <p>This is a left side panel. You can close it by clicking outsite or on this link: <a href="#" class="panel-close">close me</a>. You can put here anything, even another isolated view like in <a href="#" data-panel="right" class="panel-open">Right Panel</a></p>
          </div>
          <div class="block-title">Main View Navigation</div>
          <div class="list links-list">
            <ul>
              <li>
                <a href="/inputs/" class="panel-close">Inputs</a>
              </li>
            </ul>
          </div>
          <div class="block">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.</p>
            <p>Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at...

JavaScript

// Dom7
var $$ = Dom7;

// Theme
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
  theme = document.location.search.split('theme=')[1].split('&')[0];
}

function inputsPageInit()
{  
  // Answer type has changed, see if we need
  // to show the multiple choice div
  $$('#quesAnsType').change(function(e) {
  	e.preventDefault()
    e.stopPropagation()
    e.stopImmediatePropagation()
    debugger
    console.log("Answer Type select changed");
    if( this.value == "M" )
    {
      $$("#divMultiple").show();
      $$("#quesAnsA").focus();
    }
    else
    {
      $$("#divMultiple").hide();
      $$("#quesSave").focus();
    }
    return(true);
  })
}

$$(document).on('page:init', function (e, page) {
  // console.log(e.target);
  // e.target = div.page.page-home.page-current
  switch(page.name)
  {
    case "inputs":
      inputsPageInit();
      break;
      
    default:
  }
});

// Init App
var app = new Framework7({
  id: 'io.framework7.testapp',
  root: '#app',
  theme: theme,
  data: function () {
    return {
      user: {
        firstName: 'John',
        lastName: 'Doe',
      },
    };
  },
  methods: {
    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },
  },
  routes: [  // Index page
  {
    path: '/',
    name: 'home',
  },
    {
    path: '/inputs/',
    // Component Object
    component: {
      template: `
<div class="page" data-name="inputs" >
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Form Inputs</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Full Layout / Inline Labels</div>
    <div class="list inline-labels no-hairlines-md">
      <ul>
        <li class="item-content item-input item-input-outline">
    ...