Advertisement
Uhuuuyy

my-app.html

Jan 19th, 2024
124
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Go 5.78 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="my-view1.html">
  26. <link rel="lazy-import" href="my-view2.html">
  27. <link rel="lazy-import" href="my-view3.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="view1" href="[[rootPath]]view1">Registrasi</a>
  89.           <a name="view2" href="[[rootPath]]view2">Login</a>
  90.           <a name="view3" href="[[rootPath]]view3">Tentang</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.           <my-view1 name="view1"></my-view1>
  110.           <my-view2 name="view2"></my-view2>
  111.           <my-view3 name="view3"></my-view3>
  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.         };
  139.       }
  140.  
  141.       static get observers() {
  142.         return [
  143.           '_routePageChanged(routeData.page)',
  144.         ];
  145.       }
  146.  
  147.       _routePageChanged(page) {
  148.         // If no page was found in the route data, page will be an empty string.
  149.         // Default to 'view1' in that case.
  150.         this.page = page || 'view1';
  151.  
  152.         // Close a non-persistent drawer when the page & route are changed.
  153.         if (!this.$.drawer.persistent) {
  154.           this.$.drawer.close();
  155.         }
  156.       }
  157.  
  158.       _pageChanged(page) {
  159.         // Load page import on demand. Show 404 page if fails
  160.         const resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
  161.         Polymer.importHref(
  162.             resolvedPageUrl,
  163.             null,
  164.             this._showPage404.bind(this),
  165.             true);
  166.       }
  167.  
  168.       _showPage404() {
  169.         this.page = 'view404';
  170.       }
  171.     }
  172.  
  173.     window.customElements.define(MyApp.is, MyApp);
  174.   </script>
  175. </dom-module>
Tags: beg6
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement