Panel events in a template file

Questions
1

I have 2 side panels defined in my app.f7.html template:

     <!-- Left panel with reveal effect-->
    <div class="panel panel-left panel-reveal theme-dark panel-init">
      <div class="view view-init" data-url="/settings/"></div>
    </div>

    <!-- Right panel with cover effect-->
    <div class="panel panel-right panel-cover theme-dark">
      <div class="view view-init" data-url="/quickmenu/"></div>
    </div>

each of these have a seperate template in teh pages folder (settings.f7.html and quickmenu.f7.html)

how can I catch the open event of the panel in the template? (or any other panel event for that matter)?

This does not work:

 <script>
      export default {
    on: {
      panelOpen(event) {
        console.log("hi panelOpen");
      }
    }
      };
    </script>

If I place this in the app.f7.html it works, but I need to know how to catch it in the panel’s template.

2 
<div class="panel panel-left panel-reveal theme-dark panel-init" @panel:open="onPanelOpen">

and your component must have onPanelOpen method in methods

3

Thanks for the reply.

In the mean time I figured it out using routable panels and routable tabs.

Each panel and tab is now a separate component and in there I get all the panel and tab related events using the ‘on’ property which I find much cleaner.

My folder structure for my project is now as such:

src
|  + js
|  |   + app.js
|  |   + routes.js
|  + templates
|  |   + pages
|  |    |    + home.f7.html  
|  |   + panels
|  |    |    + left.f7.html
|  |    |    + right.f7.html
|  |   + tabs
|  |    |    + one.f7.html
|  |    |    + two.f7.html
|  |    |    + three.f7.html
|  |   + app.f7.html
|  + index.html

Routes.js:

import Home from '../templates/pages/home.f7.html';
import TabOne from '../templates/tabs/one.f7.html';
import TabTwo from '../templates/tabs/two.f7.html';
import TabThree from '../templates/tabs/three.f7.html';

import PanelLeft from '../templates/panels/left.f7.html';
import PanelRight from '../templates/panels/right.f7.html';

import NotFoundPage from '../templates/pages/404.f7.html';

var routes = [
  {
    path: '/',
    component: Home,
    tabs: [
      {
        path: '/',
        id: 'tab-1',
        component: TabOne
      },
      {
        path: '/two/',
        id: 'tab-2',
        component: TabTwo
      },
      {
        path: '/three/',
        id: 'tab-3',
        component: TabThree,
      },
    ],
  },
  {
    path: '/panel/left/',
    panel: {
      component: PanelLeft,
    }
  },
  {
    path: '/panel/right/',
    panel: {
      component: PanelRight
    }
  },
  {
    path: '(.*)',
    component: NotFoundPage,
   },
];

export default routes;

index.html

<body>
  <!-- main app component will be auto injected -->
  <div id="app" class="theme-dark"></div>
  <!-- built script files will be auto injected -->
</body>

app.f7.html

<template>
  <div id="app">
    <!-- Statusbar -->
    <div class="statusbar"></div>

    <!-- Main view -->
    <div class="view view-main view-init" id="view-main" data-url="/"></div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
    },
    on: {
      panelOpen(panel) {
        console.log("panelOpen in app"); console.log(panel);
      }
    }
  }
</script>

home.f7.html

<template>
  <div class="page">
    <!-- Top Navbar -->
    <div class="navbar navbar-large">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <a href="/panel/left/" class="link icon-only" data-panel="left">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title sliding">MyApp</div>
        <div class="right">
          <a href="/panel/right/" class="link icon-only" data-panel="right">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
        </div>
        <div class="title-large">
          <div class="title-large-text">MyApp</div>
        </div>
      </div>
    </div>

    <div class="toolbar tabbar toolbar-bottom">
      <div class="toolbar-inner">
        <!-- additional "data-route-tab-id" must match to tab's ID in the specified routes -->
        <a href="/" class="tab-link" data-route-tab-id="tab-1">Tab 1</a>
        <a href="/two/" class="tab-link" data-route-tab-id="tab-2">Tab 2</a>
        <a href="/three/" class="tab-link" data-route-tab-id="tab-3">Tab 3</a>
      </div>
    </div>

    <!-- Additional "tabs-routable" is required on tabs -->
    <div class="tabs tabs-routable">
      <div class="tab" id="tab-1"></div>
      <div class="tab" id="tab-2"></div>
      <div class="tab" id="tab-3"></div>
    </div>

  </div>
</template>

left.f7.html

<template>
  <div class="panel panel-left panel-cover theme-dark">
    <div class="page" data-name="left-panel">
      <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">Left panel</div>
        </div>
      </div>
      <div class="page-content">
        
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    on: {
      panelOpen(panel) {
        console.log("panelOpen in left panel template"); 
        console.log(panel);
      }
    }
  };

</script>
1 Like