generator-polymer-init-vaadin-elements-app/app/templates/src/vaadin-elements-app.html

Progressive web application template with Polymer App Toolbox and Vaadin Elements

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/vaadin-lumo-styles/icons.html">
<link rel="import" href="../bower_components/vaadin-button/vaadin-button.html">
<link rel="import" href="shared-styles.html">

<link rel="lazy-import" href="employee-list.html">
<link rel="lazy-import" href="employee-new.html">
<link rel="lazy-import" href="404.html">

<dom-module id="<%= elementName %>">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
      }
      app-drawer-layout:not([narrow]) [drawer-toggle] {
        display: none;
      }
      app-header {
        color: var(--lumo-base-color);
        background-color: var(--lumo-primary-color);
      }
      app-header vaadin-button {
        color: var(--lumo-base-color);
      }
      .drawer-list {
        margin: var(--lumo-space-tall-m);
      }
      .drawer-list a {
        display: block;
        padding: 0 var(--lumo-space-m);
        color: var(--lumo-secondary-text-color);
        line-height: var(--lumo-size-m);
        text-decoration: none;
      }
      .drawer-list a.iron-selected {
        color: var(--lumo-body-text-color);
        font-weight: bold;
      }
    </style>

    <app-location
        route="{{route}}"
        url-space-regex="^[[rootPath]]">
    </app-location>

    <app-route
        route="{{route}}"
        pattern="[[rootPath]]:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>

    <app-drawer-layout fullbleed narrow="{{narrow}}">
      <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="employee-list" href="employee-list">Employee list</a>
          <a name="employee-new" href="employee-new">New employee</a>
        </iron-selector>
      </app-drawer>

      <!-- Main content -->
      <app-header-layout has-scrolling-region>

        <app-header slot="header" condenses reveals effects="waterfall">
          <app-toolbar>
            <vaadin-button theme="icon" aria-label="Toggle menu" drawer-toggle>
              <iron-icon icon="lumo:menu"></iron-icon>
            </vaadin-button>
            <div main-title><%= name %></div>
          </app-toolbar>
        </app-header>

        <iron-pages
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="404"
            role="main">
          <employee-list name="employee-list"></employee-list>
          <employee-new name="employee-new"></employee-new>
          <app-404 name="404"></app-404>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>
  </template>

  <script>
    // Gesture events like tap and track generated from touch will not be
    // preventable, allowing for better scrolling performance.
    Polymer.setPassiveTouchGestures(true);

    class <%= elementClass %> extends Polymer.Element {
      static get is() {
        return '<%= elementName %>';
      }

      static get properties() {
        return {
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged',
          },
          routeData: Object,
          subroute: String,
          // This shouldn't be neccessary, but the Analyzer isn't picking up
          // Polymer.Element#rootPath
          rootPath: String,
        };
      }

      static get observers() {
        return [
          '_routePageChanged(routeData.page)',
        ];
      }

      _routePageChanged(page) {
        // If no page was found in the route data, page will be an empty string.
        // Default to 'employee-list' in that case.
        this.page = page || 'employee-list';
        // Close a non-persistent drawer when the page & route are changed.
        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      }

      _pageChanged(page) {
        // Load page import on demand. Show 404 page if fails
        const resolvedPageUrl = this.resolveUrl(page + '.html');
        Polymer.importHref(
          resolvedPageUrl,
          null,
          this._showPage404.bind(this),
          true
        );
      }

      _showPage404() {
        this.page = '404';
      }

      _drawerToggle() {
        this.$.drawer.toggle();
      }
    }
    window.customElements.define(<%= elementClass %>.is, <%= elementClass %>);
  </script>
</dom-module>