Advertisement
Uhuuuyy

my-app.html

Jan 18th, 2024
102
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Go 5.98 KB | Source Code | 0 0
  1. <!--
  2. @license
  3. Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
  4. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5. The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6. The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7. Code distributed by Google as part of the polymer project is also
  8. subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9. -->
  10.  
  11. <link rel="import" href="../bower_components/polymer/polymer-element.html">
  12. <link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
  13. <link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
  14. <link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
  15. <link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
  16. <link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
  17. <link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
  18. <link rel="import" href="../bower_components/app-route/app-location.html">
  19. <link rel="import" href="../bower_components/app-route/app-route.html">
  20. <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
  21. <link rel="import" href="../bower_components/iron-selector/iron-selector.html">
  22. <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
  23. <link rel="import" href="my-icons.html">
  24.  
  25. <link rel="lazy-import" href="login-page.html">
  26. <link rel="lazy-import" href="message-page.html">
  27. <link rel="lazy-import" href="about-page.html">
  28. <link rel="lazy-import" href="my-view404.html">
  29.  
  30. <dom-module id="my-app">
  31.   <template>
  32.     <style>
  33.       :host {
  34.         --app-primary-color: #4285f4;
  35.         --app-secondary-color: black;
  36.  
  37.         display: block;
  38.       }
  39.  
  40.       app-drawer-layout:not([narrow]) [drawer-toggle] {
  41.         display: none;
  42.       }
  43.  
  44.       app-header {
  45.         color: #fff;
  46.         background-color: var(--app-primary-color);
  47.       }
  48.  
  49.       app-header paper-icon-button {
  50.         --paper-icon-button-ink-color: white;
  51.       }
  52.  
  53.       .drawer-list {
  54.         margin: 0 20px;
  55.       }
  56.  
  57.       .drawer-list a {
  58.         display: block;
  59.         padding: 0 16px;
  60.         text-decoration: none;
  61.         color: var(--app-secondary-color);
  62.         line-height: 40px;
  63.       }
  64.  
  65.       .drawer-list a.iron-selected {
  66.         color: black;
  67.         font-weight: bold;
  68.       }
  69.     </style>
  70.  
  71.     <app-location
  72.         route="{{route}}"
  73.         url-space-regex="^[[rootPath]]">
  74.     </app-location>
  75.  
  76.     <app-route
  77.         route="{{route}}"
  78.         pattern="[[rootPath]]:page"
  79.         data="{{routeData}}"
  80.         tail="{{subroute}}">
  81.     </app-route>
  82.  
  83.     <app-drawer-layout fullbleed narrow="{{narrow}}">
  84.       <!-- Drawer content -->
  85.       <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
  86.         <app-toolbar>Menu</app-toolbar>
  87.         <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
  88.           <a name="login-page" href="[[rootPath]]login-page">Login</a>
  89.           <a name="message-page" href="[[rootPath]]message-page">Messages</a>
  90.           <a name="about-page" href="[[rootPath]]about-page">About</a>
  91.         </iron-selector>
  92.       </app-drawer>
  93.  
  94.       <!-- Main content -->
  95.       <app-header-layout has-scrolling-region>
  96.  
  97.         <app-header slot="header" condenses reveals effects="waterfall">
  98.           <app-toolbar>
  99.             <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
  100.             <div main-title>My App</div>
  101.           </app-toolbar>
  102.         </app-header>
  103.  
  104.         <iron-pages
  105.             selected="[[page]]"
  106.             attr-for-selected="name"
  107.             fallback-selection="view404"
  108.             role="main">
  109.           <login-page is-admin="{{isAdmin}}" name="login-page"></login-page>
  110.           <message-page is-admin="{{isAdmin}}" name="message-page"></message-page>
  111.           <about-page name="about-page"></about-page>
  112.           <my-view404 name="view404"></my-view404>
  113.         </iron-pages>
  114.       </app-header-layout>
  115.     </app-drawer-layout>
  116.   </template>
  117.  
  118.   <script>
  119.     // Gesture events like tap and track generated from touch will not be
  120.     // preventable, allowing for better scrolling performance.
  121.     Polymer.setPassiveTouchGestures(true);
  122.  
  123.     class MyApp extends Polymer.Element {
  124.       static get is() { return 'my-app'; }
  125.  
  126.       static get properties() {
  127.         return {
  128.           page: {
  129.             type: String,
  130.             reflectToAttribute: true,
  131.             observer: '_pageChanged',
  132.           },
  133.           routeData: Object,
  134.           subroute: Object,
  135.           // This shouldn't be neccessary, but the Analyzer isn't picking up
  136.           // Polymer.Element#rootPath
  137.           rootPath: String,
  138.           isAdmin: {
  139.             type: Boolean,
  140.             notify: true
  141.           }
  142.         };
  143.       }
  144.  
  145.       static get observers() {
  146.         return [
  147.           '_routePageChanged(routeData.page)',
  148.         ];
  149.       }
  150.  
  151.       _routePageChanged(page) {
  152.         // If no page was found in the route data, page will be an empty string.
  153.         // Default to 'view1' in that case.
  154.         this.page = page || 'login-page';
  155.  
  156.         // Close a non-persistent drawer when the page & route are changed.
  157.         if (!this.$.drawer.persistent) {
  158.           this.$.drawer.close();
  159.         }
  160.       }
  161.  
  162.       _pageChanged(page) {
  163.         // Load page import on demand. Show 404 page if fails
  164.         const resolvedPageUrl = this.resolveUrl(page + '.html');
  165.         Polymer.importHref(
  166.             resolvedPageUrl,
  167.             null,
  168.             this._showPage404.bind(this),
  169.             true);
  170.       }
  171.  
  172.       _showPage404() {
  173.         this.page = 'view404';
  174.       }
  175.     }
  176.  
  177.     window.customElements.define(MyApp.is, MyApp);
  178.   </script>
  179. </dom-module>
Tags: Inter6
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement