mirror of
https://github.com/Polymer/polymer-starter-kit.git
synced 2025-02-25 18:55:22 -06:00
Merge branch '3.0-preview'
This commit is contained in:
Russell Bicknell
commit
ce76f80aaa
@ -1,21 +0,0 @@
|
||||
{
|
||||
"extends": ["eslint:recommended", "google"],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6
|
||||
},
|
||||
"env": {
|
||||
"browser": true
|
||||
},
|
||||
"plugins": [
|
||||
"html"
|
||||
],
|
||||
"rules": {
|
||||
"brace-style": "off",
|
||||
"new-cap": ["error", { "capIsNewExceptions": ["Polymer"] }],
|
||||
"no-var": "off",
|
||||
"require-jsdoc": "off"
|
||||
},
|
||||
"globals": {
|
||||
"Polymer": true
|
||||
}
|
||||
}
|
||||
2
.gitattributes
vendored
2
.gitattributes
vendored
@ -1 +1 @@
|
||||
* text=auto
|
||||
* text=auto
|
||||
|
||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,2 @@
|
||||
bower_components/
|
||||
build/
|
||||
node_modules/
|
||||
|
||||
16
.travis.yml
16
.travis.yml
@ -1,23 +1,17 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- "9"
|
||||
- "8"
|
||||
dist: trusty
|
||||
sudo: required
|
||||
addons:
|
||||
firefox: "latest"
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
node_js:
|
||||
- "node"
|
||||
- "6"
|
||||
firefox: latest
|
||||
chrome: stable
|
||||
cache:
|
||||
directories:
|
||||
- node_modules
|
||||
install:
|
||||
- npm install -g polymer-cli
|
||||
- npm install
|
||||
- polymer install
|
||||
before_script:
|
||||
- npm run lint
|
||||
script:
|
||||
|
||||
69
README.md
69
README.md
@ -18,95 +18,61 @@ The PRPL pattern, in a nutshell:
|
||||
* **Pre-cache** components for remaining routes
|
||||
* **Lazy-load** and progressively upgrade next routes on-demand
|
||||
|
||||
### Migrating from Polymer Starter Kit v1?
|
||||
|
||||
[Check out our blog post that covers what's changed in PSK2 and how to migrate!](https://www.polymer-project.org/1.0/blog/2016-08-18-polymer-starter-kit-or-polymer-cli.html)
|
||||
|
||||
### Quickstart
|
||||
|
||||
We've recorded a Polycast to get you up and running with PSK2 fast!
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.youtube.com/watch?v=HgJ0XCyBwzY&list=PLNYkxOF6rcIDdS7HWIC_BYRunV6MHs5xo&index=10">
|
||||
<img src="https://img.youtube.com/vi/HgJ0XCyBwzY/0.jpg" alt="Polymer Starter Kit 2 video">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
### Setup
|
||||
|
||||
##### Prerequisites
|
||||
|
||||
First, install [Polymer CLI](https://github.com/Polymer/polymer-cli) using
|
||||
Install [Polymer CLI](https://github.com/Polymer/polymer-cli) using
|
||||
[npm](https://www.npmjs.com) (we assume you have pre-installed [node.js](https://nodejs.org)).
|
||||
|
||||
npm install -g polymer-cli
|
||||
|
||||
Second, install [Bower](https://bower.io/) using [npm](https://www.npmjs.com)
|
||||
|
||||
npm install -g bower
|
||||
npm install -g polymer-cli@next
|
||||
|
||||
##### Initialize project from template
|
||||
|
||||
mkdir my-app
|
||||
cd my-app
|
||||
polymer init polymer-2-starter-kit
|
||||
polymer init polymer-3-starter-kit
|
||||
|
||||
### Start the development server
|
||||
|
||||
This command serves the app at `http://127.0.0.1:8081` and provides basic URL
|
||||
routing for the app:
|
||||
|
||||
polymer serve
|
||||
npm start
|
||||
|
||||
### Build
|
||||
|
||||
The `polymer build` command builds your Polymer application for production, using build configuration options provided by the command line or in your project's `polymer.json` file.
|
||||
The `npm run build` command builds your Polymer application for production, using build configuration options provided by the command line or in your project's `polymer.json` file.
|
||||
|
||||
You can configure your `polymer.json` file to create multiple builds. This is necessary if you will be serving different builds optimized for different browsers. You can define your own named builds, or use presets. See the documentation on [building your project for production](https://www.polymer-project.org/2.0/toolbox/build-for-production) for more information.
|
||||
You can configure your `polymer.json` file to create multiple builds. This is necessary if you will be serving different builds optimized for different browsers. You can define your own named builds, or use presets. See the documentation on [building your project for production](https://www.polymer-project.org/3.0/toolbox/build-for-production) for more information.
|
||||
|
||||
The Polymer Starter Kit is configured to create three builds using [the three supported presets](https://www.polymer-project.org/2.0/toolbox/build-for-production#build-presets):
|
||||
|
||||
```
|
||||
"builds": [
|
||||
{
|
||||
"preset": "es5-bundled"
|
||||
},
|
||||
{
|
||||
"preset": "es6-bundled"
|
||||
},
|
||||
{
|
||||
"preset": "es6-unbundled"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
Builds will be output to a subdirectory under the `build/` directory as follows:
|
||||
The Polymer Starter Kit is configured to create three builds. These builds will be output to a subdirectory under the `build/` directory as follows:
|
||||
|
||||
```
|
||||
build/
|
||||
es5-bundled/
|
||||
es6-bundled/
|
||||
es6-unbundled/
|
||||
esm-bundled/
|
||||
```
|
||||
|
||||
* `es5-bundled` is a bundled, minified build with a service worker. ES6 code is compiled to ES5 for compatibility with older browsers.
|
||||
* `es6-bundled` is a bundled, minified build with a service worker. ES6 code is served as-is. This build is for browsers that can handle ES6 code - see [building your project for production](https://www.polymer-project.org/2.0/toolbox/build-for-production#compiling) for a list.
|
||||
* `es6-unbundled` is an unbundled, minified build with a service worker. ES6 code is served as-is. This build is for browsers that support HTTP/2 push.
|
||||
* `es6-bundled` is a bundled, minified build with a service worker. ES6 code is served as-is. This build is for browsers that can handle ES6 code - see [building your project for production](https://www.polymer-project.org/3.0/toolbox/build-for-production#compiling) for a list.
|
||||
* `esm-bundled` is a bundled, minified build with a service worker. It uses standard ES module import/export statements for browsers that support them.
|
||||
|
||||
Run `polymer help build` for the full list of available options and optimizations. Also, see the documentation on the [polymer.json specification](https://www.polymer-project.org/2.0/docs/tools/polymer-json) and [building your Polymer application for production](https://www.polymer-project.org/2.0/toolbox/build-for-production).
|
||||
Run `polymer help build` for the full list of available options and optimizations. Also, see the documentation on the [polymer.json specification](https://www.polymer-project.org/3.0/docs/tools/polymer-json) and [building your Polymer application for production](https://www.polymer-project.org/3.0/toolbox/build-for-production).
|
||||
|
||||
### Preview the build
|
||||
|
||||
This command serves your app. Replace `build-folder-name` with the folder name of the build you want to serve.
|
||||
|
||||
polymer serve build/build-folder-name/
|
||||
npm start build/build-folder-name/
|
||||
|
||||
### Run tests
|
||||
|
||||
This command will run [Web Component Tester](https://github.com/Polymer/web-component-tester)
|
||||
against the browsers currently installed on your machine:
|
||||
|
||||
polymer test
|
||||
npm test
|
||||
|
||||
If running Windows you will need to set the following environment variables:
|
||||
|
||||
@ -115,11 +81,6 @@ If running Windows you will need to set the following environment variables:
|
||||
|
||||
Read More here [daffl/launchpad](https://github.com/daffl/launchpad#environment-variables-impacting-local-browsers-detection)
|
||||
|
||||
### Adding a new view
|
||||
---
|
||||
|
||||
You can extend the app by adding more views that will be demand-loaded
|
||||
e.g. based on the route, or to progressively render non-critical sections of the
|
||||
application. Each new demand-loaded fragment should be added to the list of
|
||||
`fragments` in the included `polymer.json` file. This will ensure those
|
||||
components and their dependencies are added to the list of pre-cached components
|
||||
and will be included in the build.
|
||||
Looking for our older PSK2 Polycast or migration blog post? See [the previous README](https://github.com/Polymer/polymer-starter-kit/blob/v3.2.1/README.md).
|
||||
|
||||
26
bower.json
26
bower.json
@ -1,26 +0,0 @@
|
||||
{
|
||||
"name": "polymer-starter-kit",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"license": "https://polymer.github.io/LICENSE.txt",
|
||||
"dependencies": {
|
||||
"app-layout": "PolymerElements/app-layout#^2.0.0",
|
||||
"app-route": "PolymerElements/app-route#^2.0.0",
|
||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
|
||||
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
|
||||
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
|
||||
"iron-pages": "PolymerElements/iron-pages#^2.0.0",
|
||||
"iron-selector": "PolymerElements/iron-selector#^2.0.0",
|
||||
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
|
||||
"polymer": "Polymer/polymer#^2.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"polymer": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"web-component-tester": "Polymer/web-component-tester#^6.0.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
11
index.html
11
index.html
@ -63,7 +63,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
/**
|
||||
* [polymer-root-path]
|
||||
*
|
||||
* By default, we set `Polymer.rootPath` to the server root path (`/`).
|
||||
* Leave this line unchanged if you intend to serve your app from the root
|
||||
* path (e.g., with URLs like `my.domain/` and `my.domain/view1`).
|
||||
*
|
||||
@ -72,29 +71,29 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
* to indicate the path from which you'll be serving, including leading
|
||||
* and trailing slashes (e.g., `/my-app/`).
|
||||
*/
|
||||
window.Polymer = {rootPath: '/'};
|
||||
window.MyAppGlobals = { rootPath: '/' };
|
||||
|
||||
// Load and register pre-caching Service Worker
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', function() {
|
||||
navigator.serviceWorker.register('service-worker.js', {
|
||||
scope: Polymer.rootPath,
|
||||
scope: MyAppGlobals.rootPath
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
|
||||
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
|
||||
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
|
||||
|
||||
<!-- Load your application shell -->
|
||||
<link rel="import" href="src/my-app.html">
|
||||
<script type="module" src="src/my-app.js"></script>
|
||||
|
||||
<!-- Add any global styles for body, document, etc. -->
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Roboto', 'Noto', sans-serif;
|
||||
font-family: "Roboto", "Noto", sans-serif;
|
||||
line-height: 1.5;
|
||||
min-height: 100vh;
|
||||
background-color: #eeeeee;
|
||||
|
||||
13162
package-lock.json
generated
Normal file
13162
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
33
package.json
@ -1,15 +1,34 @@
|
||||
{
|
||||
"name": "polymer-starter-kit",
|
||||
"version": "4.0.0-pre.3",
|
||||
"description": "A starting point for Polymer apps",
|
||||
"author": "The Polymer Authors",
|
||||
"license": "BSD-3-Clause",
|
||||
"devDependencies": {
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-config-google": "^0.7.0",
|
||||
"eslint-plugin-html": "^2.0.0"
|
||||
},
|
||||
"repository": "Polymer/polymer-starter-kit",
|
||||
"scripts": {
|
||||
"lint": "npm run lint:javascript && polymer lint",
|
||||
"lint:javascript": "eslint . --ext js,html --ignore-path .gitignore",
|
||||
"start": "polymer serve",
|
||||
"build": "polymer build",
|
||||
"lint": "polymer lint",
|
||||
"test": "polymer test",
|
||||
"test:integration": "polymer build # test that psk builds without error with the CLI"
|
||||
},
|
||||
"dependencies": {
|
||||
"@polymer/app-layout": "^3.0.0-pre.15",
|
||||
"@polymer/app-route": "^3.0.0-pre.15",
|
||||
"@polymer/iron-flex-layout": "^3.0.0-pre.15",
|
||||
"@polymer/iron-iconset-svg": "^3.0.0-pre.15",
|
||||
"@polymer/iron-media-query": "^3.0.0-pre.15",
|
||||
"@polymer/iron-pages": "^3.0.0-pre.15",
|
||||
"@polymer/iron-selector": "^3.0.0-pre.15",
|
||||
"@polymer/paper-icon-button": "^3.0.0-pre.15",
|
||||
"@polymer/polymer": "^3.0.0",
|
||||
"@webcomponents/webcomponentsjs": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"polymer-cli": "^1.7.1",
|
||||
"wct-browser-legacy": "^1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8.0"
|
||||
}
|
||||
}
|
||||
|
||||
79
polymer.json
79
polymer.json
@ -1,33 +1,74 @@
|
||||
{
|
||||
"entrypoint": "index.html",
|
||||
"shell": "src/my-app.html",
|
||||
"fragments": [
|
||||
"src/my-view1.html",
|
||||
"src/my-view2.html",
|
||||
"src/my-view3.html",
|
||||
"src/my-view404.html"
|
||||
],
|
||||
"shell": "src/my-app.js",
|
||||
"sources": [
|
||||
"images/**/*",
|
||||
"src/**/*"
|
||||
"images/**/*"
|
||||
],
|
||||
"extraDependencies": [
|
||||
"bower_components/webcomponentsjs/*.js",
|
||||
"!bower_components/webcomponentsjs/gulpfile.js",
|
||||
"manifest.json"
|
||||
"manifest.json",
|
||||
"node_modules/@webcomponents/webcomponentsjs/*.js",
|
||||
"!node_modules/@webcomponents/webcomponentsjs/gulpfile.js",
|
||||
"node_modules/@webcomponents/webcomponentsjs/bundles/*.js"
|
||||
],
|
||||
"lint": {
|
||||
"rules": ["polymer-2"]
|
||||
},
|
||||
"builds": [
|
||||
{
|
||||
"preset": "es5-bundled"
|
||||
"name": "esm-bundled",
|
||||
"browserCapabilities": [
|
||||
"es2015",
|
||||
"modules"
|
||||
],
|
||||
"js": {
|
||||
"minify": true
|
||||
},
|
||||
"css": {
|
||||
"minify": true
|
||||
},
|
||||
"html": {
|
||||
"minify": true
|
||||
},
|
||||
"bundle": true,
|
||||
"addServiceWorker": true
|
||||
},
|
||||
{
|
||||
"preset": "es6-bundled"
|
||||
"name": "es6-bundled",
|
||||
"browserCapabilities": [
|
||||
"es2015"
|
||||
],
|
||||
"js": {
|
||||
"minify": true,
|
||||
"transformModulesToAmd": true
|
||||
},
|
||||
"css": {
|
||||
"minify": true
|
||||
},
|
||||
"html": {
|
||||
"minify": true
|
||||
},
|
||||
"bundle": true,
|
||||
"addServiceWorker": true
|
||||
},
|
||||
{
|
||||
"preset": "es6-unbundled"
|
||||
"name": "es5-bundled",
|
||||
"js": {
|
||||
"minify": true,
|
||||
"compile": true,
|
||||
"transformModulesToAmd": true
|
||||
},
|
||||
"css": {
|
||||
"minify": true
|
||||
},
|
||||
"html": {
|
||||
"minify": true
|
||||
},
|
||||
"bundle": true,
|
||||
"addServiceWorker": true
|
||||
}
|
||||
]
|
||||
],
|
||||
"moduleResolution": "node",
|
||||
"npm": true,
|
||||
"lint": {
|
||||
"rules": [
|
||||
"polymer-3"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,8 +8,6 @@
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
/* eslint no-console: ["error", { allow: ["info"] }] */
|
||||
|
||||
console.info(
|
||||
'Service worker disabled for development, will be generated at build time.'
|
||||
);
|
||||
|
||||
175
src/my-app.html
175
src/my-app.html
@ -1,175 +0,0 @@
|
||||
<!--
|
||||
@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">View One</a>
|
||||
<a name="view2" href="[[rootPath]]view2">View Two</a>
|
||||
<a name="view3" href="[[rootPath]]view3">View Three</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 necessary, 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>
|
||||
173
src/my-app.js
Normal file
173
src/my-app.js
Normal file
@ -0,0 +1,173 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
|
||||
import { setPassiveTouchGestures, setRootPath } from '@polymer/polymer/lib/utils/settings.js';
|
||||
import '@polymer/app-layout/app-drawer/app-drawer.js';
|
||||
import '@polymer/app-layout/app-drawer-layout/app-drawer-layout.js';
|
||||
import '@polymer/app-layout/app-header/app-header.js';
|
||||
import '@polymer/app-layout/app-header-layout/app-header-layout.js';
|
||||
import '@polymer/app-layout/app-scroll-effects/app-scroll-effects.js';
|
||||
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
|
||||
import '@polymer/app-route/app-location.js';
|
||||
import '@polymer/app-route/app-route.js';
|
||||
import '@polymer/iron-pages/iron-pages.js';
|
||||
import '@polymer/iron-selector/iron-selector.js';
|
||||
import '@polymer/paper-icon-button/paper-icon-button.js';
|
||||
import './my-icons.js';
|
||||
|
||||
// Gesture events like tap and track generated from touch will not be
|
||||
// preventable, allowing for better scrolling performance.
|
||||
setPassiveTouchGestures(true);
|
||||
|
||||
// Set Polymer's root path to the same value we passed to our service worker
|
||||
// in `index.html`.
|
||||
setRootPath(MyAppGlobals.rootPath);
|
||||
|
||||
class MyApp extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<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">View One</a>
|
||||
<a name="view2" href="[[rootPath]]view2">View Two</a>
|
||||
<a name="view3" href="[[rootPath]]view3">View Three</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" 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>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
page: {
|
||||
type: String,
|
||||
reflectToAttribute: true,
|
||||
observer: '_pageChanged'
|
||||
},
|
||||
routeData: Object,
|
||||
subroute: Object
|
||||
};
|
||||
}
|
||||
|
||||
static get observers() {
|
||||
return [
|
||||
'_routePageChanged(routeData.page)'
|
||||
];
|
||||
}
|
||||
|
||||
_routePageChanged(page) {
|
||||
// Show the corresponding page according to the route.
|
||||
//
|
||||
// If no page was found in the route data, page will be an empty string.
|
||||
// Show 'view1' in that case. And if the page doesn't exist, show 'view404'.
|
||||
if (!page) {
|
||||
this.page = 'view1';
|
||||
} else if (['view1', 'view2', 'view3'].indexOf(page) !== -1) {
|
||||
this.page = page;
|
||||
} else {
|
||||
this.page = 'view404';
|
||||
}
|
||||
|
||||
// Close a non-persistent drawer when the page & route are changed.
|
||||
if (!this.$.drawer.persistent) {
|
||||
this.$.drawer.close();
|
||||
}
|
||||
}
|
||||
|
||||
_pageChanged(page) {
|
||||
// Import the page component on demand.
|
||||
//
|
||||
// Note: `polymer build` doesn't like string concatenation in the import
|
||||
// statement, so break it up.
|
||||
switch (page) {
|
||||
case 'view1':
|
||||
import('./my-view1.js');
|
||||
break;
|
||||
case 'view2':
|
||||
import('./my-view2.js');
|
||||
break;
|
||||
case 'view3':
|
||||
import('./my-view3.js');
|
||||
break;
|
||||
case 'view404':
|
||||
import('./my-view404.js');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('my-app', MyApp);
|
||||
@ -1,30 +0,0 @@
|
||||
<!--
|
||||
@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/iron-iconset-svg/iron-iconset-svg.html">
|
||||
|
||||
<iron-iconset-svg name="my-icons" size="24">
|
||||
<svg>
|
||||
<defs>
|
||||
<g id="arrow-back">
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</g>
|
||||
<g id="menu">
|
||||
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
|
||||
</g>
|
||||
<g id="chevron-right">
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
|
||||
</g>
|
||||
<g id="close">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>
|
||||
32
src/my-icons.js
Normal file
32
src/my-icons.js
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
|
||||
const $_documentContainer = document.createElement('template');
|
||||
$_documentContainer.innerHTML = `<iron-iconset-svg name="my-icons" size="24">
|
||||
<svg>
|
||||
<defs>
|
||||
<g id="arrow-back">
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
|
||||
</g>
|
||||
<g id="menu">
|
||||
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
|
||||
</g>
|
||||
<g id="chevron-right">
|
||||
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
|
||||
</g>
|
||||
<g id="close">
|
||||
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
|
||||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>`;
|
||||
|
||||
document.head.appendChild($_documentContainer.content);
|
||||
@ -1,39 +0,0 @@
|
||||
<!--
|
||||
@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="shared-styles.html">
|
||||
|
||||
<dom-module id="my-view1">
|
||||
<template>
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="circle">1</div>
|
||||
<h1>View One</h1>
|
||||
<p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
|
||||
<p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
class MyView1 extends Polymer.Element {
|
||||
static get is() { return 'my-view1'; }
|
||||
}
|
||||
|
||||
window.customElements.define(MyView1.is, MyView1);
|
||||
</script>
|
||||
</dom-module>
|
||||
35
src/my-view1.js
Normal file
35
src/my-view1.js
Normal file
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
|
||||
import './shared-styles.js';
|
||||
|
||||
class MyView1 extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="circle">1</div>
|
||||
<h1>View One</h1>
|
||||
<p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
|
||||
<p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('my-view1', MyView1);
|
||||
@ -1,39 +0,0 @@
|
||||
<!--
|
||||
@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="shared-styles.html">
|
||||
|
||||
<dom-module id="my-view2">
|
||||
<template>
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="circle">2</div>
|
||||
<h1>View Two</h1>
|
||||
<p>Ea duis bonorum nec, falli paulo aliquid ei eum.</p>
|
||||
<p>Id nam odio natum malorum, tibique copiosae expetenda mel ea.Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.Id nam odio natum malorum, tibique copiosae expetenda mel ea.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
class MyView2 extends Polymer.Element {
|
||||
static get is() { return 'my-view2'; }
|
||||
}
|
||||
|
||||
window.customElements.define(MyView2.is, MyView2);
|
||||
</script>
|
||||
</dom-module>
|
||||
35
src/my-view2.js
Normal file
35
src/my-view2.js
Normal file
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
|
||||
import './shared-styles.js';
|
||||
|
||||
class MyView2 extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="circle">2</div>
|
||||
<h1>View Two</h1>
|
||||
<p>Ea duis bonorum nec, falli paulo aliquid ei eum.</p>
|
||||
<p>Id nam odio natum malorum, tibique copiosae expetenda mel ea.Detracto suavitate repudiandae no eum. Id adhuc minim soluta nam.Id nam odio natum malorum, tibique copiosae expetenda mel ea.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('my-view2', MyView2);
|
||||
@ -1,39 +0,0 @@
|
||||
<!--
|
||||
@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="shared-styles.html">
|
||||
|
||||
<dom-module id="my-view3">
|
||||
<template>
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="circle">3</div>
|
||||
<h1>View Three</h1>
|
||||
<p>Modus commodo minimum eum te, vero utinam assueverit per eu.</p>
|
||||
<p>Ea duis bonorum nec, falli paulo aliquid ei eum.Has at minim mucius aliquam, est id tempor laoreet.Pro saepe pertinax ei, ad pri animal labores suscipiantur.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
class MyView3 extends Polymer.Element {
|
||||
static get is() { return 'my-view3'; }
|
||||
}
|
||||
|
||||
window.customElements.define(MyView3.is, MyView3);
|
||||
</script>
|
||||
</dom-module>
|
||||
35
src/my-view3.js
Normal file
35
src/my-view3.js
Normal file
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
|
||||
import './shared-styles.js';
|
||||
|
||||
class MyView3 extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style include="shared-styles">
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="circle">3</div>
|
||||
<h1>View Three</h1>
|
||||
<p>Modus commodo minimum eum te, vero utinam assueverit per eu.</p>
|
||||
<p>Ea duis bonorum nec, falli paulo aliquid ei eum.Has at minim mucius aliquam, est id tempor laoreet.Pro saepe pertinax ei, ad pri animal labores suscipiantur.</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('my-view3', MyView3);
|
||||
@ -1,40 +0,0 @@
|
||||
<!--
|
||||
@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">
|
||||
|
||||
<dom-module id="my-view404">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Oops you hit a 404. <a href="[[rootPath]]">Head back to home.</a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
class MyView404 extends Polymer.Element {
|
||||
static get is() { return 'my-view404'; }
|
||||
static get properties() {
|
||||
return {
|
||||
// This shouldn't be necessary, but the Analyzer isn't picking up
|
||||
// Polymer.Element#rootPath
|
||||
rootPath: String,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define(MyView404.is, MyView404);
|
||||
</script>
|
||||
</dom-module>
|
||||
29
src/my-view404.js
Normal file
29
src/my-view404.js
Normal file
@ -0,0 +1,29 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
class MyView404 extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Oops you hit a 404. <a href="[[rootPath]]">Head back to home.</a>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('my-view404', MyView404);
|
||||
@ -1,45 +0,0 @@
|
||||
<!--
|
||||
@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">
|
||||
|
||||
<!-- shared styles for all views -->
|
||||
<dom-module id="shared-styles">
|
||||
<template>
|
||||
<style>
|
||||
.card {
|
||||
margin: 24px;
|
||||
padding: 16px;
|
||||
color: #757575;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
font-size: 30px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: #212121;
|
||||
font-size: 22px;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>
|
||||
47
src/shared-styles.js
Normal file
47
src/shared-styles.js
Normal file
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
import '@polymer/polymer/polymer-element.js';
|
||||
|
||||
const $_documentContainer = document.createElement('template');
|
||||
$_documentContainer.innerHTML = `<dom-module id="shared-styles">
|
||||
<template>
|
||||
<style>
|
||||
.card {
|
||||
margin: 24px;
|
||||
padding: 16px;
|
||||
color: #757575;
|
||||
border-radius: 5px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.circle {
|
||||
display: inline-block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
font-size: 30px;
|
||||
line-height: 64px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: #212121;
|
||||
font-size: 22px;
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
</dom-module>`;
|
||||
|
||||
document.head.appendChild($_documentContainer.content);
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
|
||||
* Copyright (c) 2018 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
|
||||
@ -8,22 +8,15 @@
|
||||
* subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
||||
*/
|
||||
|
||||
/* eslint-env node */
|
||||
|
||||
module.exports = {
|
||||
staticFileGlobs: [
|
||||
'bower_components/webcomponentsjs/webcomponents-loader.js',
|
||||
'manifest.json',
|
||||
'src/**/*',
|
||||
'manifest.json'
|
||||
],
|
||||
runtimeCaching: [
|
||||
{
|
||||
urlPattern: /\/bower_components\/webcomponentsjs\/.*.js/,
|
||||
handler: 'fastest',
|
||||
options: {
|
||||
cache: {
|
||||
name: 'webcomponentsjs-polyfills-cache',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
urlPattern: /\/@webcomponents\/webcomponentsjs\//,
|
||||
handler: 'fastest'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"mocha": true
|
||||
},
|
||||
"globals": {
|
||||
"assert": false,
|
||||
"fixture": false,
|
||||
"WCT": false
|
||||
}
|
||||
}
|
||||
@ -16,7 +16,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
<title>Tests</title>
|
||||
|
||||
<script src="../bower_components/web-component-tester/browser.js"></script>
|
||||
<script src="../node_modules/wct-browser-legacy/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
@ -16,11 +16,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
|
||||
<title>my-view1</title>
|
||||
|
||||
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../bower_components/web-component-tester/browser.js"></script>
|
||||
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
|
||||
<script src="../node_modules/wct-browser-legacy/browser.js"></script>
|
||||
|
||||
<!-- Import the element to test -->
|
||||
<link rel="import" href="../src/my-view1.html">
|
||||
<script type="module" src="../src/my-view1.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<test-fixture id="BasicView">
|
||||
@ -29,11 +29,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
<script type="module">
|
||||
suite('my-view1 tests', function() {
|
||||
test('Number in circle should be 1', function() {
|
||||
var myView = fixture('BasicView');
|
||||
var circle = myView.shadowRoot.querySelector('.circle');
|
||||
|
||||
assert.equal(circle.textContent, '1');
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user