Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- @license
- Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
- This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
- The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
- The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
- Code distributed by Google as part of the polymer project is also
- subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
- -->
- <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/paper-icon-button/paper-icon-button.html">
- <link rel="import" href="my-icons.html">
- <link rel="lazy-import" href="my-view1.html">
- <link rel="lazy-import" href="my-view2.html">
- <link rel="lazy-import" href="my-view3.html">
- <link rel="lazy-import" href="my-view404.html">
- <dom-module id="my-app">
- <template>
- <style>
- :host {
- --app-primary-color: #4285f4;
- --app-secondary-color: black;
- display: block;
- }
- app-drawer-layout:not([narrow]) [drawer-toggle] {
- display: none;
- }
- app-header {
- color: #fff;
- background-color: var(--app-primary-color);
- }
- app-header paper-icon-button {
- --paper-icon-button-ink-color: white;
- }
- .drawer-list {
- margin: 0 20px;
- }
- .drawer-list a {
- display: block;
- padding: 0 16px;
- text-decoration: none;
- color: var(--app-secondary-color);
- line-height: 40px;
- }
- .drawer-list a.iron-selected {
- color: black;
- 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="view1" href="[[rootPath]]view1">Registrasi</a>
- <a name="view2" href="[[rootPath]]view2">Login</a>
- <a name="view3" href="[[rootPath]]view3">Tentang</a>
- </iron-selector>
- </app-drawer>
- <!-- Main content -->
- <app-header-layout has-scrolling-region>
- <app-header slot="header" condenses reveals effects="waterfall">
- <app-toolbar>
- <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
- <div main-title>My App</div>
- </app-toolbar>
- </app-header>
- <iron-pages
- selected="[[page]]"
- attr-for-selected="name"
- fallback-selection="view404"
- role="main">
- <my-view1 name="view1"></my-view1>
- <my-view2 name="view2"></my-view2>
- <my-view3 name="view3"></my-view3>
- <my-view404 name="view404"></my-view404>
- </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 MyApp extends Polymer.Element {
- static get is() { return 'my-app'; }
- static get properties() {
- return {
- page: {
- type: String,
- reflectToAttribute: true,
- observer: '_pageChanged',
- },
- routeData: Object,
- subroute: Object,
- // 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 'view1' in that case.
- this.page = page || 'view1';
- // 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('my-' + page + '.html');
- Polymer.importHref(
- resolvedPageUrl,
- null,
- this._showPage404.bind(this),
- true);
- }
- _showPage404() {
- this.page = 'view404';
- }
- }
- window.customElements.define(MyApp.is, MyApp);
- </script>
- </dom-module>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement