GreenPolyProducts/polymer-starter-kit
5
0
Fork 0
mirror of https://github.com/Polymer/polymer-starter-kit.git synced 2025-02-25 18:55:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge in app-drawer-migration

Browse Source
This commit is contained in:
Rob Dodson 2016-08-22 12:14:42 -07:00
parent 8b8ba5c33b
commit 141d2b5e1e
73 changed files with 670 additions and 3186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.bowerrc
View File

@ -1,3 +0,0 @@
{
"directory": "app/bower_components"
}

21
.editorconfig
View File

@ -1,21 +0,0 @@
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false

8
.gitignore vendored
View File

@ -1,5 +1,3 @@
node_modules
dist
bower_components
.tmp
.publish/
bower_components/
build/
node_modules/

23
.travis.yml
View File

@ -2,27 +2,18 @@ language: node_js
sudo: required
dist: trusty
addons:
firefox: latest
firefox: '46.0'
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
node_js:
- '0.12'
- '4.2'
- '5.1'
cache:
directories:
- node_modules
- '6'
- '5'
- '4'
before_script:
- 'export DISPLAY=:99.0'
- sh -e /etc/init.d/xvfb start
- sleep 3
- npm i -g bower@1.7.1 gulp@3.9.0 firebase-tools@2.2.0
- bower i
- npm install -g bower polymer-cli
- bower install
script:
- ./travis-runner.sh
env:
global:
- secure: SbcQ7plU7aRGQlaAG2ffMhSvEs84073YSljOQ62DZAjRxgizMhF4xM7H2mPrmac9YRM4IBrQRvBKMMZy3L6OhN8gwpm8o+w2zV+5Q1fwpY9V8bilznnhp1JUY6jrB2l7aLTOFxt/cG+5ABxiupwWz/n+I7BaByYhBiHWntIBgDc528eecRNDYI5R36KWjLO/yr+SdElvyxDlDOdJGaluPvgMItbinFGcE1hYb/Jqrkkw8zpE6CTDmvMOq1aRBWSo9afgh2zDeKc02lTYP/4N0xcn8CqzHF7k5zGWHjN9DR8Ep8Bp1ff/sM7zHGZBqgVhn5WGv305jBQY6eOxiTp5cDP0WVIOjgJeM5rBu9hBQxhZSaMKBPr2B1NYUjIwTVQkBsnR4sr095Ugjg8JCZAmEevf/Ysl4CzQyW3gT+WcEluqjxUuicQWDclH6L/kOVPBJ+Eqdo/LY3G1tpLcc6fsvj4FlVO6LPTrbMyCagwQvnjX3uIdFyuthqtWWrHKQMGx2Ow9suNUi8Hyvk7WboS1Z6jrLIcs1rvXSX8rQmlMR5vJBK3Ejg6fS1OHxn/lrtLhj4lDLB9r/Fcu2PEHT1lcvQqsTa3W+t4Fk1qaShUlBDiwMbZWZgmlf1SdG5OzK1yrPLjTTdRFdqJGgb6TANCdetgczRWynvjIhr5IDMxvfJg=
- xvfb-run polymer test

19
LICENSE.md
View File

@ -1,19 +0,0 @@
# License
Everything in this repo is BSD style license unless otherwise specified.
Copyright (c) 2015 The Polymer Authors. All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.
* Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

27
LICENSE.txt Normal file
View File

@ -0,0 +1,27 @@
// Copyright (c) 2016 The Polymer Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
// * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
// * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

418
README.md
View File

@ -1,392 +1,84 @@
![](https://cloud.githubusercontent.com/assets/110953/7877439/6a69d03e-0590-11e5-9fac-c614246606de.png)
## Polymer Starter Kit
# Polymer App Toolbox - Starter Kit
> A starting point for building web applications with Polymer 1.0
[![Build Status](https://travis-ci.org/PolymerElements/polymer-starter-kit.svg?branch=master)](https://travis-ci.org/PolymerElements/polymer-starter-kit)
## Deprecation Warning
This template is a starting point for building apps using a drawer-based
layout. The layout is provided by `app-layout` elements.
Polymer Starter Kit v1.x is deprecated in favor of Polymer Starter Kit 2, which uses Polymer's [PRPL pattern](https://www.polymer-project.org/1.0/toolbox/server), and [app-layout elements](https://github.com/PolymerElements/app-layout).
If you're starting a new project we **strongly** recommend you use Polymer Starter Kit 2.
This template, along with the `polymer-cli` toolchain, also demonstrates use
of the "PRPL pattern" This pattern allows fast first delivery and interaction with
the content at the initial route requested by the user, along with fast subsequent
navigation by pre-caching the remaining components required by the app and
progressively loading them on-demand as the user navigates through the app.
### Included out of the box:
The PRPL pattern, in a nutshell:
* [Polymer](https://www.polymer-project.org/), [Paper](https://elements.polymer-project.org/browse?package=paper-elements), [Iron](https://elements.polymer-project.org/browse?package=iron-elements) and [Neon](https://elements.polymer-project.org/browse?package=neon-elements) elements
* [Material Design](http://www.google.com/design/spec/material-design/introduction.html) layout
* Routing with [Page.js](https://visionmedia.github.io/page.js/)
* Unit testing with [Web Component Tester](https://github.com/Polymer/web-component-tester)
* Optional offline setup through [Platinum](https://elements.polymer-project.org/browse?package=platinum-elements) Service Worker elements
* End-to-end Build Tooling (including [Vulcanize](https://github.com/Polymer/vulcanize))
* [Recipes](/docs/README.md/) for ES2015 support, Polymer performance, using Chrome Dev Editor, Deploying to GitHub Pages, Deploying to Firebase, Mobile Chrome Apps and lint tools.
* **Push** components required for the initial route
* **Render** initial route ASAP
* **Pre-cache** components for remaining routes
* **Lazy-load** and progressively upgrade next routes on-demand
### Tutorials
### Setup
Check out the Polymer Starter Kit tutorials on [polymer-project.org](https://docs-05-dot-polymer-project.appspot.com/1.0/docs/start/psk/set-up.html):
##### Prerequisites
* [Set up the PSK](docs/tutorials/set-up.md)
* [Create a page](docs/tutorials/create-a-page.md)
* [Deploy the PSK to the web](docs/tutorials/deploy.md)
Install [polymer-cli](https://github.com/Polymer/polymer-cli):
## Getting Started
npm install -g polymer-cli
To take advantage of Polymer Starter Kit you need to:
##### Initialize project from template
1. Get a copy of the code.
2. Install the dependencies if you don't already have them.
3. Modify the application to your liking.
4. Deploy your production code.
mkdir my-app
cd my-app
polymer init starter-kit
### Get the code
### Start the development server
[Download](https://github.com/PolymerElements/polymer-starter-kit/releases/tag/v1.4.0) and extract Polymer Starter Kit to where you want to work. The project comes in two flavours - Light and Full.
This command serves the app at `http://localhost:8080` and provides basic URL
routing for the app:
**Beginners**: Try Polymer Starter Kit Light. This doesn't require any extra dependencies nor knowledge of modern front-end tooling. This option is good for prototyping if you haven't build a Polymer app before.
polymer serve --open
**Intermediate - Advanced**: Use the full version of Polymer Starter Kit. This comes with all the build tools you'll need for testing and productionising your app so it's nice and lean. You'll need to run a few extra commands to install the tools we recommend but it's worth it to make sure your final app is super optimised.
:warning: **Important**: Polymer Starter Kit, and Polymer Starter Kit Light, both contain dotfiles (files starting with a `.`). If you're copying the contents of the Starter Kit to a new location make sure you bring along these dotfiles as well! On Mac, [enable showing hidden files](http://ianlunn.co.uk/articles/quickly-showhide-hidden-files-mac-os-x-mavericks/), then try extracting/copying Polymer Starter Kit again. This time the dotfiles needed should be visible so you can copy them over without issues.
### Build
Rob Dodson has a fantastic [PolyCast video](https://www.youtube.com/watch?v=xz-yixRxZN8) available that walks through using Polymer Starter Kit. An [end-to-end with Polymer](https://www.youtube.com/watch?v=1f_Tj_JnStA) and Polymer Starter Kit talk is also available.
This command performs HTML, CSS, and JS minification on the application
dependencies, and generates a service-worker.js file with code to pre-cache the
dependencies based on the entrypoint and fragments specified in `polymer.json`.
The minified files are output to the `build/unbundled` folder, and are suitable
for serving from a HTTP/2+Push compatible server.
### Install dependencies
In addition the command also creates a fallback `build/bundled` folder,
generated using fragment bundling, suitable for serving from non
H2/push-compatible servers or to clients that do not support H2/Push.
#### Quick-start (for experienced users)
polymer build
With Node.js installed, run the following one liner from the root of your Polymer Starter Kit download:
### Preview the build
```sh
npm install -g gulp bower && npm install && bower install
```
This command serves the minified version of the app at `http://localhost:8080`
in an unbundled state, as it would be served by a push-compatible server:
#### Prerequisites (for everyone)
polymer serve build/unbundled
The full starter kit requires the following major dependencies:
This command serves the minified version of the app at `http://localhost:8080`
generated using fragment bundling:
- Node.js, used to run JavaScript tools from the command line.
- npm, the node package manager, installed with Node.js and used to install Node.js packages.
- gulp, a Node.js-based build tool.
- bower, a Node.js-based package manager used to install front-end packages (like Polymer).
- The starter kit gulp build process uses platform specific tools which is handled by node-gyp which is included in node.js. See https://github.com/nodejs/node-gyp/blob/master/README.md for additional platform specific dependencies.
polymer serve build/bundled
**To install dependencies:**
### Run tests
1) Check your Node.js version.
This command will run
[Web Component Tester](https://github.com/Polymer/web-component-tester) against the
browsers currently installed on your machine.
```sh
node --version
```
polymer test
The version should be at or above 0.12.x.
### Adding a new view
2) If you don't have Node.js installed, or you have a lower version, go to [nodejs.org](https://nodejs.org) and click on the big green Install button.
3) Install `gulp` and `bower` globally.
```sh
npm install -g gulp bower
```
This lets you run `gulp` and `bower` from the command line.
4) Install the starter kit's local `npm` and `bower` dependencies.
```sh
cd polymer-starter-kit && npm install && bower install
```
This installs the element sets (Paper, Iron, Platinum) and tools the starter kit requires to build and serve apps.
### Development workflow
#### Serve / watch
```sh
gulp serve
```
This outputs an IP address you can use to locally test and another that can be used on devices connected to your network.
#### Run tests
```sh
gulp test:local
```
This runs the unit tests defined in the `app/test` directory through [web-component-tester](https://github.com/Polymer/web-component-tester).
To run tests Java 7 or higher is required. To update Java go to http://www.oracle.com/technetwork/java/javase/downloads/index.html and download ***JDK*** and install it.
#### Build & Vulcanize
```sh
gulp
```
Build and optimize the current project, ready for deployment. This includes vulcanization, image, script, stylesheet and HTML optimization and minification.
## Application Theming & Styling
Polymer 1.0 introduces a shim for CSS custom properties. We take advantage of this in `app/styles/app-theme.html` to provide theming for your application. You can also find our presets for Material Design breakpoints in this file.
[Read more](https://www.polymer-project.org/1.0/docs/devguide/styling.html) about CSS custom properties.
### Styling
1. ***main.css*** - to define styles that can be applied outside of Polymer's custom CSS properties implementation. Some of the use-cases include defining styles that you want to be applied for a splash screen, styles for your application 'shell' before it gets upgraded using Polymer or critical style blocks that you want parsed before your elements are.
2. ***app-theme.html*** - to provide theming for your application. You can also find our presets for Material Design breakpoints in this file.
3. ***shared-styles.html*** - to share styles between elements and index.html.
4. ***element styles only*** - styles specific to element. These styles should be inside the `<style></style>` inside `template`.
```HTML
<dom-module id="my-list">
<template>
<style>
:host {
display: block;
background-color: yellow;
}
</style>
<ul>
<template is="dom-repeat" items="{{items}}">
<li><span class="paper-font-body1">{{item}}</span></li>
</template>
</ul>
</template>
</dom-module>
```
These style files are located in the [styles folder](app/styles/).
## Unit Testing
Web apps built with Polymer Starter Kit come configured with support for [Web Component Tester](https://github.com/Polymer/web-component-tester) - Polymer's preferred tool for authoring and running unit tests. This makes testing your element based applications a pleasant experience.
[Read more](https://github.com/Polymer/web-component-tester#html-suites) about using Web Component tester.
## Dependency Management
Polymer uses [Bower](http://bower.io) for package management. This makes it easy to keep your elements up to date and versioned. For tooling, we use npm to manage Node.js-based dependencies.
Components installed by Bower live in the `app/bower_components` directory. This location is specified by the `.bowerrc` file. Many projects which follow Yeoman conventions place the `bower_components` directory outside of the `app` directory and then mount it using a server. This causes problems for tools like [Vulcanize](https://github.com/polymer/vulcanize) and [web-component-shards](https://github.com/PolymerLabs/web-component-shards) which rely on relative paths. We've chosen to simplify things and have `bower_components` live inside of `app` to resolve these issues.
## Deploy
### Github Pages
1. Uncomment this line `// app.baseUrl = '/polymer-starter-kit/';` in app.js near the top
2. Change `app.baseUrl = '/polymer-starter-kit/';` to `app.baseUrl = '/your-pathname/';` (ex: if you repo is `github.com/username/bobs-awesome-site` you would change this to `app.baseUrl = '/bobs-awesome-site/';`)
3. Run `gulp build-deploy-gh-pages` from command line
4. To see changes wait 1-2 minutes then load Github pages for your app (ex: https://polymerelements.github.io/polymer-starter-kit/)
[See more details](/docs/deploy-to-github-pages.md/)
### Firebase
[See detailed recipe](/docs/deploy-to-firebase-pretty-urls.md/)
## Service Worker
Polymer Starter Kit offers an optional offline experience thanks to Service Worker and the [Platinum Service Worker elements](https://github.com/PolymerElements/platinum-sw). New to Service Worker? Read the following [introduction](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) to understand how it works.
Our optional offline setup should work well for relatively simple applications. For more complex apps, we recommend learning how Service Worker works so that you can make the most of the Platinum Service Worker element abstractions.
### Enable Service Worker support?
To enable Service Worker support for Polymer Starter Kit project use these 3 steps:
1. Uncomment Service Worker code in index.html
```HTML
<!-- Uncomment next block to enable Service Worker support (1/2) -->
<!--
<paper-toast id="caching-complete"
duration="6000"
text="Caching complete! This app will work offline.">
</paper-toast>
<platinum-sw-register auto-register
clients-claim
skip-waiting
on-service-worker-installed="displayInstalledToast">
<platinum-sw-cache default-cache-strategy="networkFirst"
cache-config-file="cache-config.json">
</platinum-sw-cache>
</platinum-sw-register>
-->
```
2. Uncomment Service Worker code in elements.html
```HTML
<!-- Uncomment next block to enable Service Worker Support (2/2) -->
<!--
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
-->
```
3. Uncomment 'cache-config' in the `runSequence()` section of the 'default' gulp task, like below:
[(gulpfile.js)](https://github.com/PolymerElements/polymer-starter-kit/blob/master/gulpfile.js)
```JavaScript
// Build Production Files, the Default Task
gulp.task('default', ['clean'], function (cb) {
runSequence(
['copy', 'styles'],
'elements',
['images', 'fonts', 'html'],
'vulcanize', 'cache-config',
cb);
});
```
#### Filing bugs in the right place
If you experience an issue with Service Worker support in your application, check the origin of the issue and use the appropriate issue tracker:
* [sw-toolbox](https://github.com/GoogleChrome/sw-toolbox/issues)
* [platinum-sw](https://github.com/PolymerElements/platinum-sw/issues)
* [platinum-push-notifications-manager](https://github.com/PolymerElements/platinum-push-messaging)
* For all other issues, feel free to file them [here](https://github.com/polymerelements/polymer-starter-kit/issues).
#### I get an error message about "Only secure origins are allowed"
Service Workers are only available to "secure origins" (HTTPS sites, basically) in line with a policy to prefer secure origins for powerful new features. However http://localhost is also considered a secure origin, so if you can, developing on localhost is an easy way to avoid this error. For production, your site will need to support HTTPS.
#### How do I debug Service Worker?
If you need to debug the event listener wire-up use `chrome://serviceworker-internals`.
#### What are those buttons on chrome://serviceworker-internals?
This page shows your registered workers and provides some basic operations.
* Unregister: Unregisters the worker.
* Start: Starts the worker. This would happen automatically when you navigate to a page in the worker's scope.
* Stop: Stops the worker.
* Sync: Dispatches a 'sync' event to the worker. If you don't handle this event, nothing will happen.
* Push: Dispatches a 'push' event to the worker. If you don't handle this event, nothing will happen.
* Inspect: Opens the worker in the Inspector.
#### Development flow
In order to guarantee that the latest version of your Service Worker script is being used, follow these instructions:
* After you made changes to your service worker script, close all but one of the tabs pointing to your web application
* Hit shift-reload to bypass the service worker as to ensure that the remaining tab isn't under the control of a service worker
* Hit reload to let the newer version of the Service Worker control the page.
If you find anything to still be stale, you can also try navigating to `chrome:serviceworker-internals` (in Chrome), finding the relevant Service Worker entry for your application and clicking 'Unregister' before refreshing your app. This will (of course) only clear it from the local development machine. If you have already deployed to production then further work will be necessary to remove it from your users' machines.
#### Disable Service Worker support after you enabled it
If for any reason you need to disable Service Worker support after previously enabling it, you can remove it from your Polymer Starter Kit project using these 4 steps:
1. Remove references to the platinum-sw elements from your application [index](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html).
2. Remove the two Platinum Service Worker elements (platinum-sw/..) in [app/elements/elements.html](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html)
3. Remove 'precache' from the list in the 'default' gulp task ([gulpfile.js](https://github.com/PolymerElements/polymer-starter-kit/blob/master/gulpfile.js))
4. Navigate to `chrome://serviceworker-internals` and unregister any Service Workers registered by Polymer Starter Kit for your app just in case there's a copy of it cached.
## Add to home screen banner
If you've enabled Service Worker support, your app becomes eligible to trigger a Chrome [web app install banner](https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/) if you add a `start_url` property to `manifest.json`, and point it to a valid URL. The best practice here is to add a query parameter to that URL, in order to distinguish between the app being launched from the web vs. the homescreen. Simply add this to `manifest.json` and you'll be all set:
"start_url": "/?homescreen=1"
If you are implementing an offline experince using Service Worker, make sure to cache `/?homescreen=1`. For a short explanation, you can refer to [this segment](https://youtu.be/g7f1Az5fxgU?t=1435) from Rob Dodson's talk Building Progressive Web Apps with Polymer. A more in-depth exploration can be found at [Service Workers in Production](https://developers.google.com/web/showcase/case-study/service-workers-iowa#watch-out-for-extra-query-parameters).
## Yeoman support
[generator-polymer](https://github.com/yeoman/generator-polymer/releases) now includes support for Polymer Starter Kit out of the box.
## Frequently Asked Questions
### Where do I customise my application theme?
Theming can be achieved using [CSS Custom properties](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details) via [app/styles/app-theme.html](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/styles/app-theme.html).
You can also use `app/styles/main.css` for pure CSS stylesheets (e.g for global styles), however note that Custom properties will not work there under the shim.
A [Polycast](https://www.youtube.com/watch?v=omASiF85JzI) is also available that walks through theming using Polymer 1.0.
### Where do I configure routes in my application?
This can be done via [`app/elements/routing.html`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/routing.html). We use Page.js for routing and new routes
can be defined in this import. We then toggle which `<iron-pages>` page to display based on the [selected](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/index.html#L105) route.
### Why are we using Page.js rather than a declarative router like `<more-routing>`?
`<more-routing>` (in our opinion) is good, but lacks imperative hooks for getting full control
over the routing in your application. This is one place where a pure JS router shines. We may
at some point switch back to a declarative router when our hook requirements are tackled. That
said, it should be trivial to switch to `<more-routing>` or another declarative router in your
own local setup.
### Where can I find the application layouts from your Google I/O 2015 talk?
App layouts live in a separate repository called [app-layout-templates](https://github.com/PolymerElements/app-layout-templates).
You can select a template and copy over the relevant parts you would like to reuse to Polymer Starter Kit.
You will probably need to change paths to where your Iron and Paper dependencies can be found to get everything working.
This can be done by adding them to the [`elements.html`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/elements/elements.html) import.
### Something has failed during installation. How do I fix this?
Our most commonly reported issue is around system permissions for installing Node.js dependencies.
We recommend following the [fixing npm permissions](https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md)
guide to address any messages around administrator permissions being required. If you use `sudo`
to work around these issues, this guide may also be useful for avoiding that.
If you run into an exception that mentions five optional dependencies failing (or an `EEXIST` error), you
may have run into an npm [bug](https://github.com/npm/npm/issues/6309). We recommend updating to npm 2.11.0+
to work around this. You can do this by opening a Command Prompt/terminal and running `npm install npm@2.11.0 -g`. If you are on Windows,
Node.js (and npm) may have been installed into `C:\Program Files\`. Updating npm by running `npm install npm@2.11.0 -g` will install npm
into `%AppData%\npm`, but your system will still use the npm version. You can avoid this by deleting your older npm from `C:\Program Files\nodejs`
as described [here](https://github.com/npm/npm/issues/6309#issuecomment-67549380).
If you get a browser console error indicating that an element you know you have installed is missing, try deleting the bower_components folder, then run `bower cache clean` followed by `bower install` to reinstall. This can be especially helpful when upgrading from a prior version of the Polymer Starter Kit.
If the issue is to do with a failure somewhere else, you might find that due to a network issue
a dependency failed to correctly install. We recommend running `npm cache clean` and deleting the `node_modules` directory followed by
`npm install` to see if this corrects the problem. If not, please check the [issue tracker](https://github.com/PolymerElements/polymer-starter-kit/issues) in case
there is a workaround or fix already posted.
### I'm having trouble getting Vulcanize to fully build my project on Windows. Help?
Some Windows users have run into trouble with the `elements.html` file in their `dist` folder
not being correctly vulcanized. This can happen if your project is in a folder with a name containing a
space. You can work around this issue by ensuring your path doesn't contain one.
There is also an [in-flight](https://github.com/PolymerElements/polymer-starter-kit/issues/62#issuecomment-108974016) issue
where some are finding they need to disable the `inlineCss` option in our configuration for Vulcanize
to correctly build. We are still investigating this, however for the time-being use the workaround if
you find your builds getting stuck here.
### How do I add new JavaScript files to Starter Kit so they're picked up by the build process?
At the bottom of `app/index.html`, you will find a build block that can be used to include additional
scripts for your app. Build blocks are just normal script tags that are wrapped in a HTML
comment that indicates where to concatenate and minify their final contents to.
Below, we've added in `script2.js` and `script3.js` to this block. The line
`<!-- build:js scripts/app.js -->` specifies that these scripts will be squashed into `scripts/app.js`
during a build.
```html
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<script src="scripts/script2.js"></script>
<script src="scripts/script3.js"></script>
<!-- endbuild-->
```
If you are not using the build-blocks, but still wish for additional files (e.g scripts or stylesheets) to be included in the final `dist` directory, you will need to either copy these files as part of the gulpfile.js build process (see the `copy` task for how to automate this) or manually copy the files.
### I'm finding the installation/tooling here overwhelming. What should I do?
Don't worry! We've got you covered. Polymer Starter Kit tries to offer everything you need to build and optimize your apps for production, which is why we include the tooling we do. We realise however that our tooling setup may not be for everyone.
If you find that you just want the simplest setup possible, we recommend using Polymer Starter Kit light, which is available from the [Releases](https://github.com/PolymerElements/polymer-starter-kit/releases) page. This takes next to no time to setup.
## Licensing
Like other Google projects, Polymer Starter Kit includes Google license headers at the top of several of our source files. Google's open-source licensing requires that this header be kept in place (sorry!), however we acknowledge that you may need to add your own licensing to files you modify. This can be done by appending your own extensions to these headers.
## Contributing
Polymer Starter Kit is a new project and is an ongoing effort by the Web Component community. We welcome your bug reports, PRs for improvements, docs and anything you think would improve the experience for other Polymer developers.
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 have bundles created in the fallback `bundled` build).

4
app/cache-config.json
View File

@ -1,4 +0,0 @@
{
"README": "This is the cache config for the dev server. The service worker cache is disabled, and it is recommended that you leave this as-is. In the dist environment, this file will be auto-generated based on the contents of your dist/ directory.",
"disabled": true
}

41
app/elements/elements.html
View File

@ -1,41 +0,0 @@
<!--
@license
Copyright (c) 2015 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
-->
<!-- Iron elements -->
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<!-- Paper elements -->
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-material/paper-material.html">
<link rel="import" href="../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
<!-- Uncomment next block to enable Service Worker Support (2/2) -->
<!--
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-cache.html">
<link rel="import" href="../bower_components/platinum-sw/platinum-sw-register.html">
-->
<!-- Configure your routes here -->
<link rel="import" href="routing.html">
<!-- Add your elements here -->
<link rel="import" href="../styles/app-theme.html">
<link rel="import" href="../styles/shared-styles.html">
<link rel="import" href="my-greeting/my-greeting.html">
<link rel="import" href="my-list/my-list.html">

50
app/elements/my-greeting/my-greeting.html
View File

@ -1,50 +0,0 @@
<!--
@license
Copyright (c) 2015 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.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<dom-module id="my-greeting">
<template>
<style include="shared-styles">
:host {
display: block;
}
span,
input {
@apply(--paper-font-body2);
}
</style>
<h1 class="page-title" tabindex="-1">{{greeting}}</h1>
<label for="greeting-input">Update text to change the greeting.</label>
<!-- Listens for "input" event and sets greeting to <input>.value -->
<input id="greeting-input" value="{{greeting::input}}">
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-greeting',
properties: {
greeting: {
type: String,
value: 'Welcome!',
notify: true
}
}
});
})();
</script>
</dom-module>

60
app/elements/my-list/my-list.html
View File

@ -1,60 +0,0 @@
<!--
@license
Copyright (c) 2015 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.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<dom-module id="my-list">
<template>
<style>
:host {
display: block;
}
span {
@apply(--paper-font-body1);
}
</style>
<ul>
<template is="dom-repeat" items="{{items}}">
<li><span>{{item}}</span></li>
</template>
</ul>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'my-list',
properties: {
items: {
type: Array,
notify: true
}
},
ready: function() {
this.items = [
'Responsive Web App boilerplate',
'Iron Elements and Paper Elements',
'End-to-end Build Tooling (including Vulcanize)',
'Unit testing with Web Component Tester',
'Routing with Page.js',
'Offline support with the Platinum Service Worker Elements'
];
}
});
})();
</script>
</dom-module>

85
app/elements/routing.html
View File

@ -1,85 +0,0 @@
<!--
@license
Copyright (c) 2015 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
-->
<script src="../bower_components/page/page.js"></script>
<script>
window.addEventListener('WebComponentsReady', function() {
// We use Page.js for routing. This is a Micro
// client-side router inspired by the Express router
// More info: https://visionmedia.github.io/page.js/
// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') { // if production
page.base(app.baseUrl.replace(/\/$/, ''));
}
// Middleware
function scrollToTop(ctx, next) {
app.scrollPageToTop();
next();
}
function closeDrawer(ctx, next) {
app.closeDrawer();
next();
}
function setFocus(selected){
Polymer.dom(document)
.querySelector('section[data-route="' + selected + '"] .focus-target')
.focus();
}
// Routes
page('*', scrollToTop, closeDrawer, function(ctx, next) {
next();
});
page('/', function() {
app.route = 'home';
setFocus(app.route);
});
page(app.baseUrl, function() {
app.route = 'home';
setFocus(app.route);
});
page('/users', function() {
app.route = 'users';
setFocus(app.route);
});
page('/users/:name', function(data) {
app.route = 'user-info';
app.params = data.params;
setFocus(app.route);
});
page('/contact', function() {
app.route = 'contact';
setFocus(app.route);
});
// 404
page('*', function() {
app.$.toast.text = 'Can\'t find: ' + window.location.href + '. Redirected you to Home Page';
app.$.toast.show();
page.redirect(app.baseUrl);
});
// add #! before urls
page({
hashbang: true
});
});
</script>

BIN
app/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 611 B

BIN
app/images/touch/apple-touch-icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

BIN
app/images/touch/chrome-splashscreen-icon-384x384.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
app/images/touch/chrome-touch-icon-192x192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

BIN
app/images/touch/icon-128x128.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.0 KiB

BIN
app/images/touch/icon-512x512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
app/images/touch/icon-72x72.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
app/images/touch/icon-96x96.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.3 KiB

BIN
app/images/touch/ms-icon-144x144.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

BIN
app/images/touch/ms-touch-icon-144x144-precomposed.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.4 KiB

209
app/index.html
View File

@ -1,209 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Polymer Starter Kit">
<title>Polymer Starter Kit</title>
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#2E3AA1">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<paper-drawer-panel id="paperDrawerPanel" responsive-width="840px">
<!-- Drawer Scroll Header Panel -->
<paper-scroll-header-panel drawer fixed>
<!-- Drawer Toolbar -->
<paper-toolbar id="drawerToolbar">
<span class="menu-name">Menu</span>
</paper-toolbar>
<!-- Drawer Content -->
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
<a data-route="users" href="{{baseUrl}}users">
<iron-icon icon="info"></iron-icon>
<span>Users</span>
</a>
<a data-route="contact" href="{{baseUrl}}contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
</paper-menu>
</paper-scroll-header-panel>
<!-- Main Area -->
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar id="mainToolbar" class="tall">
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="space"></span>
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">Polymer Starter Kit</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container">
<div class="bottom-title">The future of the web today</div>
</div>
</paper-toolbar>
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<my-greeting class="focus-target" tabindex="-1"></my-greeting>
<p class="subhead">You now have:</p>
<my-list></my-list>
<p>Looking for more Web App layouts? Check out our <a href="https://github.com/PolymerElements/app-layout-templates">layouts</a> collection. You can also <a href="http://polymerelements.github.io/app-layout-templates/">preview</a> them live.</p>
</paper-material>
<paper-material elevation="1">
<p>This is another card.</p>
</paper-material>
<paper-material elevation="1">
<h2 id="license">License</h2>
<p>Everything in this repo is BSD style license unless otherwise specified.</p>
<p>Copyright (c) 2015 The Polymer Authors. All rights reserved.</p>
<p>Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:</p>
<ul>
<li>Redistributions of source code must retain the above copyright
notice, this list of conditions and the following disclaimer.</li>
<li>Redistributions in binary form must reproduce the above
copyright notice, this list of conditions and the following disclaimer
in the documentation and/or other materials provided with the
distribution.</li>
<li>Neither the name of Google Inc. nor the names of its
contributors may be used to endorse or promote products derived from
this software without specific prior written permission.</li>
</ul>
<p>THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS &quot;AS IS&quot; AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p>
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h1 class="page-title focus-target" tabindex="-1">Users</h1>
<p>This is the users section</p>
<a href$="{{baseUrl}}users/Addy">Addy</a><br>
<a href$="{{baseUrl}}users/Rob">Rob</a><br>
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
<a href$="{{baseUrl}}users/Sam">Sam</a>
</paper-material>
</section>
<section data-route="user-info">
<paper-material elevation="1">
<h1 class="page-title focus-target" tabindex="-1">User: {{params.name}}</h1>
<div>This is {{params.name}}'s section</div>
</paper-material>
</section>
<section data-route="contact">
<paper-material elevation="1">
<h1 class="page-title focus-target" tabindex="-1">Contact</h1>
<p>This is the contact section</p>
</paper-material>
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
<paper-toast id="toast"></paper-toast>
<!-- Uncomment next block to enable Service Worker support (1/2) -->
<!--
<paper-toast id="caching-complete"
duration="6000"
text="Caching complete! This app will work offline.">
</paper-toast>
<platinum-sw-register auto-register
clients-claim
skip-waiting
base-uri="bower_components/platinum-sw/bootstrap"
on-service-worker-installed="displayInstalledToast">
<platinum-sw-cache default-cache-strategy="fastest"
cache-config-file="cache-config.json">
</platinum-sw-cache>
</platinum-sw-register>
-->
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>

40
app/manifest.json
View File

@ -1,40 +0,0 @@
{
"name": "Polymer Starter Kit",
"short_name": "Polymer Starter Kit",
"icons": [{
"src": "images/touch/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
}, {
"src": "images/touch/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
}, {
"src": "images/touch/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
}, {
"src": "images/touch/ms-touch-icon-144x144-precomposed.png",
"sizes": "144x144",
"type": "image/png"
}, {
"src": "images/touch/apple-touch-icon.png",
"sizes": "152x152",
"type": "image/png"
}, {
"src": "images/touch/chrome-touch-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},{
"src": "images/touch/chrome-splashscreen-icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},{
"src": "images/touch/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}],
"background_color": "#3E4EB8",
"display": "standalone",
"theme_color": "#2E3AA1"
}

4
app/robots.txt
View File

@ -1,4 +0,0 @@
# www.robotstxt.org
User-agent: *
Disallow:

82
app/scripts/app.js
View File

@ -1,82 +0,0 @@
/*
@license
Copyright (c) 2015 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
*/
(function(document) {
'use strict';
// Grab a reference to our auto-binding template
// and give it some initial binding values
// Learn more about auto-binding templates at http://goo.gl/Dx1u2g
var app = document.querySelector('#app');
// Sets app default base URL
app.baseUrl = '/';
if (window.location.port === '') { // if production
// Uncomment app.baseURL below and
// set app.baseURL to '/your-pathname/' if running from folder in production
// app.baseUrl = '/polymer-starter-kit/';
}
app.displayInstalledToast = function() {
// Check to make sure caching is actually enabled—it won't be in the dev environment.
if (!Polymer.dom(document).querySelector('platinum-sw-cache').disabled) {
Polymer.dom(document).querySelector('#caching-complete').show();
}
};
// Listen for template bound event to know when bindings
// have resolved and content has been stamped to the page
app.addEventListener('dom-change', function() {
console.log('Our app is ready to rock!');
});
// See https://github.com/Polymer/polymer/issues/1381
window.addEventListener('WebComponentsReady', function() {
// imports are loaded and elements have been registered
});
// Main area's paper-scroll-header-panel custom condensing transformation of
// the appName in the middle-container and the bottom title in the bottom-container.
// The appName is moved to top and shrunk on condensing. The bottom sub title
// is shrunk to nothing on condensing.
window.addEventListener('paper-header-transform', function(e) {
var appName = Polymer.dom(document).querySelector('#mainToolbar .app-name');
var middleContainer = Polymer.dom(document).querySelector('#mainToolbar .middle-container');
var bottomContainer = Polymer.dom(document).querySelector('#mainToolbar .bottom-container');
var detail = e.detail;
var heightDiff = detail.height - detail.condensedHeight;
var yRatio = Math.min(1, detail.y / heightDiff);
// appName max size when condensed. The smaller the number the smaller the condensed size.
var maxMiddleScale = 0.50;
var auxHeight = heightDiff - detail.y;
var auxScale = heightDiff / (1 - maxMiddleScale);
var scaleMiddle = Math.max(maxMiddleScale, auxHeight / auxScale + maxMiddleScale);
var scaleBottom = 1 - yRatio;
// Move/translate middleContainer
Polymer.Base.transform('translate3d(0,' + yRatio * 100 + '%,0)', middleContainer);
// Scale bottomContainer and bottom sub title to nothing and back
Polymer.Base.transform('scale(' + scaleBottom + ') translateZ(0)', bottomContainer);
// Scale middleContainer appName
Polymer.Base.transform('scale(' + scaleMiddle + ') translateZ(0)', appName);
});
// Scroll page to top and expand header
app.scrollPageToTop = function() {
app.$.headerPanelMain.scrollToTop(true);
};
app.closeDrawer = function() {
app.$.paperDrawerPanel.closeDrawer();
};
})(document);

255
app/styles/app-theme.html
View File

@ -1,255 +0,0 @@
<!--
@license
Copyright (c) 2015 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.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/paper-styles/color.html">
<style is="custom-style">
/*
Polymer includes a shim for CSS Custom Properties that we can use for application theming.
Below, you'll find the default palette for the Polymer Starter Kit layout. Feel free to play
with changing the colors used or generate your own palette of colours at MaterialPalette.com.
See https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling-details
for further information on custom CSS properties.
*/
/* Application theme */
:root {
--primary-text-color: var(--paper-grey-900);
--primary-background-color: #ffffff;
--secondary-text-color: #737373;
--disabled-text-color: #9b9b9b;
--divider-color: #dbdbdb;
--primary-color: var(--paper-indigo-500);
--light-primary-color: var(--paper-indigo-100);
--dark-primary-color: var(--paper-indigo-700);
--accent-color: var(--paper-pink-a200);
--light-accent-color: var(--paper-pink-a100);
--dark-accent-color: var(--paper-pink-a400);
/* Components */
/* paper-drawer-panel */
--drawer-menu-color: #ffffff;
--drawer-border-color: 1px solid #ccc;
--drawer-toolbar-border-color: 1px solid rgba(0, 0, 0, 0.22);
/* paper-menu */
--paper-menu-background-color: #fff;
--menu-link-color: #111111;
}
/* General styles */
body {
@apply(--layout-fullbleed);
@apply(--layout-vertical);
}
.space {
@apply(--layout-flex);
}
#drawerToolbar {
color: var(--secondary-text-color);
background-color: var(--drawer-menu-color);
border-bottom: var(--drawer-toolbar-border-color);
}
#drawerToolbar .menu-name {
@apply(--paper-font-title);
}
paper-scroll-header-panel {
height: 100%;
}
paper-menu {
--paper-menu-selected-item: {
color: var(--primary-color);
}
--paper-menu-focused-item-after: {
background: var(--primary-color);
}
}
paper-menu iron-icon {
margin-right: 33px;
opacity: 0.54;
}
paper-menu a {
@apply(--layout-horizontal);
@apply(--layout-center);
text-decoration: none;
color: var(--menu-link-color);
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size: 14px;
font-weight: 400;
line-height: 24px;
min-height: 48px;
padding: 0 16px;
}
#mainToolbar.tall .app-name {
font-size: 40px;
font-weight: 300;
/* Required for main area's paper-scroll-header-panel custom condensing transformation */
-webkit-transform-origin: left center;
transform-origin: left center;
}
#mainToolbar .middle-container,
#mainToolbar .bottom-container {
@apply(--layout-horizontal);
@apply(--layout-center);
}
#mainToolbar .middle-container {
height: 100%;
margin-left: 48px;
}
#mainToolbar:not(.tall) .middle-container {
font-size: 18px;
padding-bottom: 0;
}
#mainToolbar .bottom-container {
@apply(--paper-font-subhead);
margin-left: 48px;
/* Required for main area's paper-scroll-header-panel custom condensing transformation */
-webkit-transform-origin: left center;
transform-origin: left center;
}
/* Height of the scroll area */
.content {
height: 900px;
}
section[data-route="home"] paper-material {
@apply(--paper-font-body2);
}
section[data-route="home"] paper-material .subhead {
@apply(--paper-font-subhead);
}
paper-material {
border-radius: 2px;
height: 100%;
padding: 16px 0 16px 0;
width: calc(98.66% - 16px);
margin: 16px auto;
background: white;
}
#toast .toast-hide-button {
color: #eeff41;
margin: 10px;
}
section[tabindex="-1"]:focus { outline: none; }
/* Breakpoints */
/* Small */
@media (max-width: 600px) {
#drawer .paper-toolbar {
margin-left: 16px;
}
#mainToolbar.tall .app-name {
font-size: 24px;
font-weight: 400;
}
paper-material {
--menu-container-display: none;
width: calc(97.33% - 32px);
padding-left: 16px;
padding-right: 16px;
}
}
/* Tablet+ */
@media (min-width: 601px) {
#drawer.paper-drawer-panel > [drawer] {
border-right: 1px solid rgba(0, 0, 0, 0.14);
}
iron-pages {
padding: 48px 62px;
}
paper-material {
width: calc(98% - 46px);
margin-bottom: 32px;
padding-left: 30px;
padding-right: 30px;
}
}
/* Material Design Adaptive Breakpoints */
/*
Below you'll find CSS media queries based on the breakpoint guidance
published by the Material Design team. You can choose to use, customise
or remove these breakpoints based on your needs.
http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
*/
/* mobile-small */
@media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) { }
/* mobile-large */
@media all and (min-width: 361px) and (orientation: portrait) { }
/* mobile-small-landscape */
@media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
/* mobile-large-landscape */
@media all and (min-width: 481px) and (orientation: landscape) { }
/* tablet-small-landscape */
@media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
/* tablet-large-landscape */
@media all and (min-width: 961px) and (orientation: landscape) { }
/* tablet-small */
@media all and (min-width: 600px) and (orientation: portrait) { }
/* tablet-large */
@media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
/* desktop-x-small-landscape */
@media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
/* desktop-x-small */
@media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
/* desktop-small-landscape */
@media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
/* desktop-small */
@media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
/* desktop-medium-landscape */
@media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
/* desktop-medium */
@media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
/* desktop-large */
@media all and (min-width: 1281px) and (max-width: 1600px) { }
/* desktop-xlarge */
@media all and (min-width: 1601px) and (max-width: 1920px) { }
</style>

25
app/styles/main.css
View File

@ -1,25 +0,0 @@
/*
@license
Copyright (c) 2015 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
*/
body {
background: #fafafa;
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
}
/*
This class is used when we manage the focus start point (like when a new page
is loaded). We typically move the focus start point to the first header in the
page and don't want a focus ring to display. Instead the next time the user
presses tab the focus ring will appear on the nearest, focusable element.
*/
.focus-target {
outline: none;
}

11
app/sw-import.js
View File

@ -1,11 +0,0 @@
/*
@license
Copyright (c) 2015 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
*/
importScripts('bower_components/platinum-sw/service-worker.js');

50
app/test/my-greeting-basic.html
View File

@ -1,50 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
-->
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>my-greeting-basic</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../bower_components/web-component-tester/browser.js"></script>
<!-- Import the element to test -->
<link rel="import" href="../elements/my-greeting/my-greeting.html">
</head>
<body>
<test-fixture id="basic">
<template>
<my-greeting></my-greeting>
</template>
</test-fixture>
<script>
suite('my-greeting tests', function() {
var greeting, header;
setup(function() {
greeting = fixture('basic');
});
test('Welcome!', function() {
header = greeting.$$('h1');
assert.equal(header.textContent, 'Welcome!');
});
});
</script>
</body>
</html>

65
app/test/my-list-basic.html
View File

@ -1,65 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 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
-->
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>my-list-basic</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../bower_components/web-component-tester/browser.js"></script>
<!-- Import the element to test -->
<link rel="import" href="../elements/my-list/my-list.html">
</head>
<body>
<test-fixture id="basic">
<template>
<my-list></my-list>
</template>
</test-fixture>
<script>
suite('my-list tests', function() {
var list, listItems;
setup(function() {
list = fixture('basic');
});
test('Item lengths should be equalled', function(done) {
// Test a property
// TODO: Fix list.items.push('Foo') causing a WeakMap exception
// Invalid value used as weak map key
list.items = [
'Responsive Web App boilerplate',
'Iron Elements and Paper Elements',
'End-to-end Build Tooling (including Vulcanize)',
'Unit testing with Web Component Tester',
'Routing with Page.js',
'Offline support with the Platinum Service Worker Elements'
];
// Data bindings will stamp out new DOM asynchronously
// so wait to check for updates
flush(function() {
listItems = Polymer.dom(list.root).querySelectorAll('li');
assert.equal(list.items.length, listItems.length);
done();
});
})
});
</script>
</body>
</html>

23
bower.json
View File

@ -1,16 +1,23 @@
{
"name": "polymer-starter-kit",
"authors": [
"The Polymer Authors"
],
"private": true,
"dependencies": {
"iron-elements": "PolymerElements/iron-elements#^1.0.10",
"neon-elements": "PolymerElements/neon-elements#^1.0.0",
"page": "visionmedia/page.js#~1.6.4",
"paper-elements": "PolymerElements/paper-elements#^1.0.7",
"platinum-elements": "PolymerElements/platinum-elements#^1.2.0",
"polymer": "Polymer/polymer#^1.4.0"
"app-layout": "PolymerElements/app-layout#^0.10.0",
"app-route": "PolymerElements/app-route#^0.9.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
"iron-localstorage": "PolymerElements/iron-localstorage#^1.0.0",
"iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
"iron-pages": "PolymerElements/iron-pages#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#~1.1.0",
"polymer": "Polymer/polymer#^1.6.0"
},
"devDependencies": {
"web-component-tester": "^4.0.0"
},
"ignore": []
}
}

19
docs/README.md
View File

@ -1,19 +0,0 @@
# Docs
## Tutorials
* [Set up](tutorials/set-up.md)
* [Create a page](tutorials/create-a-page.md)
* [Deploy](tutorials/deploy.md)
## Recipes
* [Add ES2015 (formally ES6) support using Babel](add-es2015-support-babel.md)
* [Polymer Performance Recipe](polymer-perf.md)
* [Use PSK with Chrome Dev Editor](chrome-dev-editor.md)
* [Deploy to Github Pages](deploy-to-github-pages.md)
* [Deploy to Firebase using Pretty URLs](deploy-to-firebase-pretty-urls.md)
* [Deploy to Google App Engine](deploy-to-google-app-engine.md)
* [Use PSK for Mobile Chrome Apps](mobile-chrome-apps.md)
* [Add page transitions with neon-animated-pages](neon-animated-pages.md)
* [Add ESLint support](add-eslint-support.md)

128
docs/add-es2015-support-babel.md
View File

@ -1,128 +0,0 @@
# Add ES2015 support through Babel
Although support for ES2015 (formerly ES6) is improving in modern browsers, the majority do not yet support the full set of features. To benefit from the awesomeness of the new ES2015 syntax while keeping backwards compatibility with Polymer's supported browsers, you'll need to transpile your JS code from ES2015 to ES5
This recipe focuses on adding an ES2015 to ES5 transpile step to Polymer Starter Kit's build pipeline using [BabelJS](https://babeljs.io/).
## Create a transpile gulp task
- Install the gulp Babel, Sourcemap, Crisper plugins and Babel ES2015 preset: `npm install --save-dev gulp-babel gulp-sourcemaps gulp-crisper babel-preset-es2015`
- Add the following gulp task in the `gulpfile.js` file:
```patch
+ // Transpile all JS to ES5.
+ gulp.task('js', function() {
+ return gulp.src(['app/**/*.{js,html}', '!app/bower_components/**/*'])
+ .pipe($.sourcemaps.init())
+ .pipe($.if('*.html', $.crisper({scriptInHead: false}))) // Extract JS from .html files
+ .pipe($.if('*.js', $.babel({
+ presets: ['es2015']
+ })))
+ .pipe($.sourcemaps.write('.'))
+ .pipe(gulp.dest('.tmp/'))
+ .pipe(gulp.dest(dist()));
+ });
```
This task will transpile all JS files and inline JS inside HTML files and also generate sourcemaps. The resulting files are generated in the `.tmp` and the `dist` folders
[Crisper](https://github.com/PolymerLabs/crisper) extracts JavaScript that's inline to HTML files (such as imports). We need this as Babel does not support transpiling HTML files such as `<script>` tags directly
Note: At the time of writing Crisper does not generate the sourcemaps. Your app will work but you won't get sourcemaps for files transformed by Crisper. Relevant issues:
- [ragingwind/gulp-crisper#4](https://github.com/ragingwind/gulp-crisper/issues/4)
- [PolymerLabs/crisper#14](https://github.com/PolymerLabs/crisper/issues/14)
## Integrating the transpile task
Make sure the `js` gulp task is triggered by the common build tasks:
- In the gulp `serve` task, make sure `js` is triggered initially and on HTML and JS files changes:
```patch
- gulp.task('serve', ['styles'], function() {
+ gulp.task('serve', ['styles', 'js'], function() {
...
- gulp.watch(['app/**/*.html', '!app/bower_components/**/*.html'], reload);
+ gulp.watch(['app/**/*.html', '!app/bower_components/**/*.html'], ['js', reload]);
gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
- gulp.watch(['app/scripts/**/*.js'], reload);
+ gulp.watch(['app/scripts/**/*.js'], ['js', reload]);
gulp.watch(['app/images/**/*'], reload);
});
```
- In the `default` task:
```patch
gulp.task('default', ['clean'], function(cb) {
...
runSequence(
['ensureFiles', 'copy', 'styles'],
+ 'js',
'build',
'vulcanize', // 'cache-config',
cb);
});
```
- In the `build` task replace `app` in the paths by `dist` since dist should already contain all JS and HTML files now transpiled.
```patch
// Scan your HTML for assets & optimize them
gulp.task('build', ['images', 'fonts'], function() {
- return gulp.src(['app/**/*.html', '!app/{elements,test,bower_components}/**/*.html'])
+ return gulp.src(['dist/**/*.html', '!dist/{elements,test,bower_components}/**/*.html'])
...
```
## Vulcanize the new files
Need to change the vulcanize command to grab the newly translated files. .tmp has the translated files so will pull from there.
- First need to copy over all `bower_components` so that vulcanize can find the html references it needs:
```patch
+ // Copy all bower_components over to help js task and vulcanize work together
+ gulp.task('bowertotmp', function() {
+ return gulp.src(['app/bower_components/**/*'])
+ .pipe(gulp.dest('.tmp/bower_components/'));
+ });
```
- Add it to the `default` task:
```patch
gulp.task('default', ['clean'], function(cb) {
// Uncomment 'cache-config' if you are going to use service workers.
runSequence(
+ 'bowertotmp',
['ensureFiles', 'copy', 'styles'],
'js',
```
- Finally update `vulcanize` task to point to `.tmp` directory:
```patch
gulp.task('vulcanize', function() {
- return gulp.src('app/elements/elements.html')
+ return gulp.src('.tmp/elements/elements.html')
.pipe($.vulcanize({
stripComments: true,
```
## Optional - When using shadow-dom instead shady-dom
Place this configuration ([Read more](https://www.polymer-project.org/1.0/docs/devguide/settings.html)) in a separate file like `scripts/polymer-settings`
```html
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
```

100
docs/add-eslint-support.md
View File

@ -1,100 +0,0 @@
# Add ESLint support
This recipe helps you to create a task to use [ESLint](http://eslint.org) tool.
## Create `.eslintrc.json` file in the root folder
```
{
"extends": "eslint:recommended",
"rules": {
"no-console": "off"
},
"env": {
"browser": true
},
"plugins": [
"html"
],
"globals": {
"__dirname": false,
"app": false,
"page": false,
"Polymer": false,
"process": false,
"require": false
}
}
```
## Create .eslintignore file in the root folder
```
/app/bower_components/**
/dist/**
```
## Create a lint gulp task
- Install the `gulp-eslint` and `eslint-plugin-html`: `npm install --save-dev gulp-eslint eslint-plugin-html`
- Add the following gulp task in the `gulpfile.js` file:
```patch
+ // Lint JavaScript
+ gulp.task('lint', function() {
+ return gulp.src([
+ 'app/scripts/**/*.js',
+ 'app/elements/**/*.html',
+ 'gulpfile.js'
+ ])
+ .pipe(reload({
+ stream: true,
+ once: true
+ }))
+ .pipe($.eslint())
+ .pipe($.eslint.format())
+ .pipe($.eslint.failAfterError());
+ });
```
This task will check all JS files and JS inside HTML files.
## Integrating the lint task
Make sure the `lint` gulp task is triggered by the common build tasks:
- In the gulp `serve` task, make sure `lint` is triggered initially and on HTML and JS files changes:
```patch
- gulp.task('serve', ['styles'], function() {
+ gulp.task('serve', ['lint', 'styles'], function() {
...
gulp.watch(['app/**/*.html', '!app/bower_components/**/*.html'], reload);
gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
- gulp.watch(['app/scripts/**/*.js'], reload);
+ gulp.watch(['app/scripts/**/*.js'], ['lint', reload]);
gulp.watch(['app/images/**/*'], reload);
});
```
- In the `default` task make sure `lint` is run in parallel to `images`, `fonts` and `html`:
```patch
// Build production files, the default task
gulp.task('default', ['clean'], function(cb) {
// Uncomment 'cache-config' if you are going to use service workers.
runSequence(
['ensureFiles', 'copy', 'styles'],
- ['build'],
+ ['lint', 'build'],
'vulcanize', // 'cache-config',
cb);
});
```

52
docs/chrome-dev-editor.md
View File

@ -1,52 +0,0 @@
# Use Polymer Starter Kit on Chrome Dev Editor
If you are using a Chromebook, one of the few IDE you can use is [Chrome Dev Editor](https://github.com/GoogleChrome/chromedeveditor).
To use the Polymer Starter Kit you have to download the [latest release](https://github.com/PolymerElements/polymer-starter-kit/releases) in the `light` flavor (the additional tools can't be used from CDE).
After downloading the `polymer-starter-kit-light-*.zip` file unpack it in a new folder (for Example `psk-light`) you should have a directory structure like
![psk-light-folder-p1](https://cloud.githubusercontent.com/assets/1431346/9451900/a73ffcf2-4ab1-11e5-8742-e0b5523ba9d5.png)
When the app first opens you'll notice, in the bottom left, that Bower is updating.
![bower updating](https://cloud.githubusercontent.com/assets/1066253/11860260/d837edae-a427-11e5-997e-117caa83bbed.png)
Wait for this process to finish before continuing (it may take a few minutes). When it is complete, you should notice that the `bower_components` directory has moved to `app/bower_components`. This is because CDE is respecting the configuration in our `.bowerrc` file. This is a good thing :)
We can now `Open Folder...` inside CDE and start renaming the file `app/manifest.json` to `app/web-app-manifest.json`, followed by updating the link to it in the file `app/index.html`
![manifest json](https://cloud.githubusercontent.com/assets/1431346/9452182/27e41478-4ab3-11e5-8e40-d7c0f1249feb.png)
*This change is needed because `manifest.json` is interpreted by CDE as a [Chrome Apps Manifest](https://developer.chrome.com/extensions/manifest) and the [web app manifest](https://w3c.github.io/manifest/) is slightly different*
Open `app/elements/routing.html` and add the following code after the last route:
```javascript
page('*', function () {
app.route = 'home';
});
```
After the change, the code will look like the following:
```javascript
...
page('/contact', function () {
app.route = 'contact';
});
page('*', function () {
app.route = 'home';
});
// add #! before urls
page({
hashbang: true
});
...
```
Select `app/index.html` and hit run (or press CTRL+R) to see the application running in the browser.

67
docs/deploy-to-firebase-pretty-urls.md
View File

@ -1,67 +0,0 @@
# Deploy to Firebase using Pretty URLs
Firebase is a very simple and secure way to deploy a Polymer Starter Kit site. You can sign up for a free account and deploy your application in less than 5 minutes.
The instructions below are based on the [Firebase hosting quick start
guide](https://www.firebase.com/docs/hosting/quickstart.html).
1. [Sign up for a Firebase account](https://www.firebase.com/signup/)
1. Install the Firebase command line tools
npm install -g firebase-tools
The `-g` flag instructs `npm` to install the package globally so that you
can use the `firebase` command from any directory. You may need
to install the package with `sudo` privileges.
1. `cd` into your project directory
1. Inititalize the Firebase application
firebase init
Firebase asks you which app you would like to use for hosting. If you just
signed up, you should see one app with a randomly-generated name. You can
use that one. Otherwise go to
[https://www.firebase.com/account](https://www.firebase.com/account) to
create a new app.
1. Firebase asks you the name of your app's public directory. Enter `dist`.
This works because when you run `gulp` to build your application, PSK
builds everything and places it all in `dist`. So `dist` contains
everything your application needs to run.
1. Edit firebase.json, change firebase name, and add `rewrites` section ([see example firebase.json](/docs/firebase.json)).
{
"firebase": "polymer-starter-kit",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [ {
"source": "!{/bower_components,/elements}/**",
"destination": "/index.html"
} ]
}
1. Add `<base href="/">` to `head` near top of index.html, above ``<!-- Place favicon.ico in the `app/` directory -->``
1. Remove `hashbang: true` in routing.html near bottom. The call to `page` should look like this now:
page();
1. Build
gulp
1. Deploy
firebase deploy
The URL to your live site is listed in the output.
You can see a demo of Polymer Starter Kit hosted on Firebase using pretty URLs at https://polymer-starter-kit.firebaseapp.com.

32
docs/deploy-to-github-pages.md
View File

@ -1,32 +0,0 @@
# Deploy to Github Pages
You can deploy to github pages with a couple minor changes to Polymer Starter Kit:
1. Uncomment this line `// app.baseUrl = '/polymer-starter-kit/';` in app.js near the top
```JavaScript
// Sets app default base URL
app.baseUrl = '/';
if (window.location.port === '') { // if production
// Uncomment app.baseURL below and
// set app.baseURL to '/your-pathname/' if running from folder in production
// app.baseUrl = '/polymer-starter-kit/';
}
```
2. Change `app.baseUrl = '/polymer-starter-kit/';` to `app.baseUrl = '/your-pathname/';` (ex: if you repo is `github.com/username/bobs-awesome-site` you would change this to `app.baseUrl = '/bobs-awesome-site/';`)
3. Add this code at the top of `<head>` tag in the [index.html](../app/index.html) to force HTTPS:
```html
<script>'https:'!==window.location.protocol&&(window.location.protocol='https')</script>
```
4. Run `gulp build-deploy-gh-pages` from command line
5. To see changes wait 1-2 minutes then load Github pages for your app (ex: https://polymerelements.github.io/polymer-starter-kit)
### Notes
* When deploying to Github Pages we recommend using hashbangs which is Polymer Starter Kit default.
* This method should work for most hosting providers when using a subfolder.

108
docs/deploy-to-google-app-engine.md
View File

@ -1,108 +0,0 @@
# Deploy to Google App Engine
Google App Engine is a great way to host your Polymer application using Google infrastructure.
[You can sign up for a Google Cloud Platform free account](https://cloud.google.com/).
There are multiple ways to host web app on GCP, but my favorite one is using GAE.
The scripts below are based on the [Using Static Files guide](https://cloud.google.com/appengine/docs/python/gettingstartedpython27/staticfiles) and [Polymer Gmail by @ebidel](https://github.com/ebidel/polymer-gmail) repository.
1. Install the gcloud command line tools
curl https://sdk.cloud.google.com | bash
Detailed instructions can be found [here](https://cloud.google.com/sdk/)
1. Inititalize gcloud
gcloud init
In this step you will be asked to login to your GCP account and set default settings, such as project, zone & region, etc.
1. Create a new GCP project using the [Developers Console](https://console.developers.google.com/home/dashboard)
1. Add `app.yaml` to your project root folder
```yaml
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /bower_components
static_dir: bower_components
secure: always
- url: /images
static_dir: images
secure: always
- url: /(.*).(html|js|json|css)
static_files: \1.\2
upload: (.*)\.(html|js|json|css)
secure: always
- url: /
static_files: index.html
upload: index\.html
http_headers:
Link: '</scripts/app.js>; rel=preload; as=script, </elements/elements.html>; rel=preload; as=document, </styles/main.css>; rel=preload; as=style'
# Access-Control-Allow-Origin: "*"
secure: always
skip_files:
- ^(.*/)?app\.yaml
```
This is the configuration file for the GCP project.
It sets a python runtime environment and static file handlers.
The configuration utilizes GAE HTTP/2 capabilities in order to minimize load time for HTTP/2 compatible browsers.
**Please note**: This also ensures HTTPS; if you wish to use custom domains supporting HTTP only, you will need to remove all the 'secure: always’ entries. If you decide to have custom domains that only use HTTP instead of HTTPS, be aware some Web platform APIs such as service workers and Web app manifests, including some elements that depend on such APIs for their functionality, only work with HTTPS.
1. Add a bash script to build & deploy the application
```sh
#!/usr/bin/env bash
GAE_PROJECT=psk
DEPLOY_VERSION=$1
if [ -z "$DEPLOY_VERSION" ]
then
TAG=`git describe --abbrev=0`
# GAE doesn't allow periods
DEPLOY_VERSION=${TAG//.}
fi
# Build it.
echo "Building $DEPLOY_VERSION"
gulp
cp app.yaml dist/app.yaml
echo "Deploying $DEPLOY_VERSION"
gcloud preview app deploy dist/app.yaml --project $GAE_PROJECT --promote --version $DEPLOY_VERSION
```
You have to set `GAE_PROJECT` variable to your GAE project id.
A deploy version can be provided as a parameter for the script, if not provided the latest git tag will be used.
1. Add execution permission to the script
chmod +x deploy.sh
1. Run the deploy script
Without version argument in order to use the latest git tag
./deploy.sh
Or with a version argument (according to GAE version [limitations](https://cloud.google.com/appengine/docs/python/config/appconfig?hl=en))
./deploy.sh v100
The URL to your live site is listed in the output.
Enjoy!

13
docs/firebase.json
View File

@ -1,13 +0,0 @@
{
"firebase": "polymer-starter-kit",
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [ {
"source": "!{/bower_components,/elements}/**",
"destination": "/index.html"
} ]
}

131
docs/mobile-chrome-apps.md
View File

@ -1,131 +0,0 @@
# Use Polymer Starter Kit for [Mobile Chrome Apps](https://github.com/MobileChromeApps/mobile-chrome-apps)
## Getting started
Polymer Starter Kit could be fully adapted to Mobile Chrome Apps through mobile-friendly features. Mobile Chrome Apps, is based on Apache Cordova, and requires mobile application SDKs such as Android and iOS. so please make sure that installation development tool by following [installation guide](https://github.com/MobileChromeApps/mobile-chrome-apps/blob/master/docs/Installation.md) of Mobile Chrome Apps. And then, You do some further steps to resolve some of restrictions and configurations to use Polymer Starter Kit on Cordova. Looking for a [guide video](https://www.youtube.com/watch?v=-ifgyobPLVg) below to better understand.
[![](https://camo.githubusercontent.com/7c498c4d60113dd1ea072576df897283100428b6/687474703a2f2f696d672e796f75747562652e636f6d2f76692f2d696667796f62504c56672f302e6a7067)](https://www.youtube.com/watch?v=-ifgyobPLVg)
## Download Polymer Starter Kit into your workspace
To download and preparation, follow this [guide of Polymer Starter Kit](https://github.com/PolymerElements/polymer-starter-kit#getting-started). Make sure that install all of dependencies of npm and Bower.
## Create a Cordova project
Create a Cordova project in path `polymer-starter-kit` by following command. `platform` is the path for Cordova project files, `com.your.app` is the project name/id and next following string is the description for your app.
```sh
cca create platform com.your.app "Your Polymer Starter Kit App"
```
If you have no problems while creating a project you will seeing the message of installing successful coming from Cordova and have the tree of the project below.
```sh
└── polymer-starter-kit
└── app
│   ├── elements
│   ├── images
│   ├── index.html
│   ├── manifest.json
│   ├── scripts
│   ├── styles
│   └── test
├── bower.json
├── bower_components
├── docs
├── gulpfile.js
├── node_modules
├── package.json
├── platform
│   ├── config.xml
│   ├── hooks
│   ├── platforms
│   ├── plugins
│   └── www
```
For further informations of Cordova, please visit [corodova document](https://github.com/MobileChromeApps/mobile-chrome-apps/tree/master/docs)
## Configuration
You need to have some changes of configuration to fit for Mobile Chrome Apps as it was mentioned above.
### Configure path for app built by gulp
- Change the path `dist` in `gulpfile.js` from `dist` to `platform/www/app`, then the app built with Polymer Starter Kit will be placed under `platform/www` will be used by Cordova.
```js
var DIST = 'platform/www/app';
```
- Change the path in `platform/www/background.js` into new path
```js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('app/index.html', {
width: 244,
height: 380,
});
});
```
- Add path `/app` to `app.baseURL` in `app/scripts/app.js'. `platform/www` is root path of app that will prevent errors coming from page routing.
```js
app.baseUrl = '/app';
```
### Update gulp tasks
- Using `polybuild(vulcanize + crisper)` task is mandatory because of Chrome Apps doesn't allow inline script blocks according to [CSP](https://developer.chrome.com/apps/contentSecurityPolicy). You should replace current `vulcanize` task with new task below. To do this install `polybuild` first with `npm install --save-dev polybuild` command
```js
// load polybuild
var polybuild = require('polybuild');
// Vulcanize granular configuration
gulp.task('vulcanize', function() {
return gulp.src('app/elements/elements.html')
.pipe(polybuild({maximumCrush: true}))
.pipe($.rename(function(file) {
if (file.extname === '.html') {
file.basename = file.basename.replace('.build', '');
}
}))
.pipe(gulp.dest(dist('elements')))
.pipe($.size({title: 'vulcanize'}));
});
```
### More updates
- Remove useless files generated from Cordova.
```sh
rm platform/www/index.*
```
- To complete first route for `home` you need to put try/catch block into the first route code on starting app, in `app/elements/routing.html`, because Chrome Apps doesn't allow using `history` APIs which related to error message `history.pushState/replaceState is not available in packaged apps`.
```js
try {
page({
hashbang: true
});
} catch (e) {
app.route = 'home';
}
```
- Using `@import` instead of `link` to download external Google robot fonts which is related to `Refused to load the stylesheet` errors. Update code in `bower_components/font-roboto/roboto.html` to using `@import` code below
```
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,700);
```
## Build and run app
After done of above steps. run this command on root path that let you see Chrome Apps built with Polymer Starter Kit.
```sh
gulp && cd platform && cca run chrome
```
or to run on Android emulator or devices
```sh
gulp && cd platform && cca run android
```

122
docs/neon-animated-pages.md
View File

@ -1,122 +0,0 @@
# Add page transitions with neon-animated-pages
This recipe focuses on replacing the "static" `iron-pages` component with `neon-animated-pages` in order to display slick animations when transitioning between pages.
## Update your dependencies
- First thing first, we need to replace the `iron-pages` import in `app/elements/elements.html` with a set of components from the `neon-animation` library, including `neon-animated-pages`:
```patch
- <link rel="import" href="../bower_components/iron-pages/iron-pages.html">
...
+
+ <!-- Neon elements -->
+ <link rel="import" href="../bower_components/neon-animation/neon-animated-pages.html">
+ <link rel="import" href="../bower_components/neon-animation/neon-animatable.html">
+ <link rel="import" href="../bower_components/neon-animation/animations/slide-from-bottom-animation.html">
+ <link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">
+
```
Note the last two imports are actually animations definitions. We are going to use `slide-from-bottom-animation` and `fade-out-animation` as entry and exit animations respectively. Those animations will apply for all page transitions.
If you wish to use different animations, make sure you replace those imports by the ones you need.
## Replace `iron-pages` with `neon-animated-pages`
- Next, we need to remove the `iron-pages` from `app/index.html` and replace it with `neon-animated-pages`:
```patch
- <iron-pages attr-for-selected="data-route" selected="{{route}}">
+ <neon-animated-pages attr-for-selected="data-route" selected="{{route}}" entry-animation="slide-from-bottom-animation" exit-animation="fade-out-animation">
...
- </iron-pages>
+ </neon-animated-pages>
```
This is pretty straightforward, as these elements behave similarly and share a common API, being both based on `Polymer.IronSelectableBehavior`.
- It is then necessary to replace the children `section` of our page selector with `neon-animatable` elements. You should proceed as follows for the contact section/page for example:
```patch
- <section data-route="contact">
+ <neon-animatable data-route="contact">
<paper-material elevation="1">
<h2 class="page-title">Contact</h2>
<p>This is the contact section</p>
</paper-material>
- </section>
+ </neon-animatable>
```
Until now, all the pages of our web application were embedded in `section` tags under our page selector `iron-pages`. Replacing those `section` with the convenience element `neon-animatable` is now mandatory because all children of `neon-animated-pages` are required to implement `Polymer.NeonAnimatableBehavior` in order to be animated.
## Fix the CSS
- In `app/styles/app-theme.html`:
```patch
- section[data-route="home"] paper-material {
+ neon-animatable[data-route="home"] paper-material {
@apply(--paper-font-body2);
}
- section[data-route="home"] paper-material .subhead {
+ neon-animatable[data-route="home"] paper-material .subhead {
@apply(--paper-font-subhead);
}
+ neon-animated-pages {
+ height: 100%;
+ }
+
paper-material {
border-radius: 2px;
- height: 100%;
padding: 16px 0 16px 0;
width: calc(98.66% - 16px);
margin: 16px auto;
background: white;
}
...
/* Tablet+ */
@media (min-width: 601px) {
#drawer.paper-drawer-panel > [drawer] {
border-right: 1px solid rgba(0, 0, 0, 0.14);
}
- iron-pages {
+ neon-animated-pages > * {
padding: 48px 62px;
}
...
```
## Fix the focus management
- In `app/elements/routing.html`:
```patch
function setFocus(selected){
Polymer.dom(document)
- .querySelector('section[data-route="' + selected +'"].focus-target')
+ .querySelector('neon-animatable[data-route="' + selected + '"] .focus-target')
.focus();
}
```
## Going further
This recipe took you through a basic integration of `neon-animated-pages` in Polymer Starter Kit with global and declarative transitions.
However, it doesn't stop there, as `neon-animated-pages` can enable your web application to:
- Have page specific transitions
- Use multiple animations during one transition
- Only animate part of your page or a specific element
- Use complex animations such as cascaded animations or shared element animations (hero animation, ripple animation)
Those features require you to extract every page of your web application in its own web-component.
Once that is done, we recommend you take a look at the following resources to learn how to make the most of the `neon-animated-pages` element:
* [Using neon-animation](https://elements.polymer-project.org/guides/using-neon-animations)
* [Polycasts - Slick web animations](https://www.youtube.com/watch?v=Lwvi1u4XXzc) from Rob Dodson
* [Polycasts - Neon-animated-pages](https://www.youtube.com/watch?v=wMhq1o0DULM) from Rob Dodson

124
docs/polymer-perf.md
View File

@ -1,124 +0,0 @@
### Polymer Performance Recipe
In the following write up we are going to take a look at how to optimize the loading of Web Component enabled websites. The goal here is not to give you a copy and paste approach, but rather to give you the starting components and thought process with how to optimize your web app given your domain constraints.
Current native support for Web Components is limited but growing, with only Chrome and Opera having a “fully" implemented spec. Due to the limited support, using Polymer or any web components in production across more than just Chrome requires you to load a polyfill. As with any polyfill there is a performance tradeoff, in the run time performance, spec compliance, as well as the network cost overhead. Lets dive into a few approaches that you can use to conditionally load the polyfill only when it is required.
In your index.html file, create an HTML Import to load your elements bundle. If Web Components are supported, this element will start loading right away, otherwise it will begin loading as soon as the Web Components polyfills have been loaded and given a chance to scan the page.
Note the use of the `async` attribute on the `link` element. This will ensure that loading the bundle does not block rendering in any way. Also note the `link` element has been given the `id` "bundle," this can be used later to listen for its load event.
```html
<link rel="import" id="bundle" href="/elements/elements.html" async>
```
Next we need to detect if Web Components are supported by the browser. If it _does_ support them, then we can skip loading the polyfills entirely. Otherwise, we'll use JavaScript to asynchronously load the polyfills.
Over in GitHub land @geenlen has cooked up a nifty bit of code to feature detect Web Components support
```js
var webComponentsSupported = ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template'));
```
```js
if (!webComponentsSupported) {
var script = document.createElement('script');
script.onload = finishLazyLoading;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
document.head.appendChild(script);
} else {
finishLazyLoading();
}
```
This bit of code can be placed directly in [`app.js`](https://github.com/PolymerElements/polymer-starter-kit/blob/master/app/scripts/app.js), right under the beginning of the IIFE.
So what is going on here, how does it work? The first thing that this method does is dynamically create a script tag, then assigns a callback when the resource loads, the code then sets the src of the script tag, and then injects the script tag into the head of our document. Once the tag is placed inside of our document, the network request will start and when the resource is fully downloaded the callback will be invoked.
Awesome! So now let’s move onto the logic around `finishLazyLoading`.
```js
function finishLazyLoading() {
var onImportLoaded = function() {
console.log('Elements are upgraded!');
// Kickoff your app logic here!
};
var link = document.querySelector('#bundle');
if (link.import && link.import.readyState === 'complete') {
onImportLoaded();
} else {
link.addEventListener('load', onImportLoaded);
}
}
```
`finishLazyLoading` checks to see if the import has finished loading and calls the `onImportLoaded` handler if it is. `onImportLoaded` is a good place to put your initial application logic because by this point you can be confident that all of your elements are ready. If the import hast not loaded, then we'll setup a listener for the load event of the `link` element and run `onImportLoaded` then.
As an alternative to having the `link` tag for your imports already in the page, you could choose to load them dynamically.
```js
function loadElements(pathToBundle, callback) {
var bundle = document.createElement('link');
bundle.setAttribute('async', true);
bundle.rel = 'import';
bundle.onload = callback;
bundle.href = pathToBundle;
document.head.appendChild(bundle);
}
```
The `loadElements` function uses a similar approach to the one we used to load our polyfills. Note that the user should pass in a callback which will execute once the bundle has finished loading.
For initial page load there is a slight performance tradeoff for going this route in browsers with Web Components support as it means the page must wait on JavaScript to execute before it can begin loading the elements.
However, this approach does open up the possibility for you to only have users download the elements that they need for specific pages in your app, and can be extremely useful for subsequent page loads. Consider for instance an application with an admin panel and a general app view. Given the fact that most users in our made up app do not go to the admin panel too often, there is no need for them to always incur the cost of downloading the admin suite of elements. Instead we will only have users download the "bundle" that they need depending on what page they navigate to.
For example with page.js your router could be structured as follows to optimize page load time, given a few assumptions about how users will be interacting with your app.
```js
page.on('admin', function() {
loadElementBundle('elements/admin.html', renderAdminPane);
});
```
#### Further Thoughts
With Polymer, it is easy to fall into the trap of getting a flash of unstyled content, or a blank page while the polyfill and elements are downloading. The best way to avoid these pitfalls is to use a "loading" screen approach. The simplest of the loading approaches is to create a "splash" screen to display while your elements bundle is downloading. The splash screen can be anything from your logo on a colored background, to a full blown skeleton of what the page will look like once everything has loaded up.
In your index.html, place the markup for your splashscreen in an element with an `id` of "splash".
```html
<div id="splash">
<!-- splash screen markup -->
</div>
```
You can easily modify `onImportLoaded` to remove the splash screen once your bundle has loaded in.
```js
var onImportLoaded = function() {
var splash = document.getElementById('splash');
splash.remove();
console.log('Elements are upgraded!');
// Kickoff your app logic here!
};
```
Hopefully these approaches give you some ideas on how to make your app lightning fast.
We hope to explore further ideas including [application shells](https://github.com/ebidel/polymer-experiments/blob/master/polymersummit/fouc/appshell.html) and being smart about your first meaningful paint in the near future.
--------
Further reading
* [Fast Polymer app loading](https://gist.github.com/ebidel/1ba71473d687d0567bd3) from Eric Bidelman
* [Polymer Perf Patterns](https://www.youtube.com/watch?v=Yr84DpNaMfk) from Eric Bidelman
* [Polymer for the Performance-obsessed](https://aerotwist.com/blog/polymer-for-the-performance-obsessed/) from Paul Lewis

210
docs/tutorials/create-a-page.md
View File

@ -1,210 +0,0 @@
# Create a new page
This Polymer Starter Kit tutorial teaches you how to:
* Create a new menu item in the navigation menu.
* Create content for a new page.
* Route traffic to your new page.
This tutorial assumes you have already completed the
[Set up tutorial](set-up.md).
## Serve the app locally
1. `cd` to the base directory of your project.
1. Start the local development server.
gulp serve
The local development server opens the application in your default
web browser. As you modify your application, the server detects the
modifications, re-builds the application, and reloads your browser
automatically. There is no need to re-load the browser or the application.
## Create a navigation menu item
1. Open `app/index.html` in a text editor.
1. Find the navigation menu.
```
...
<!-- Drawer Content -->
<paper-menu attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
...
```
Each navigation menu item consists of an anchor element (`<a>`) with two
children: `<iron-icon>` and `<span>`.
* `<iron-icon>` displays a single icon.
* `<span>` displays the text next to the icon.
1. Add the following new navigation item to the bottom of the menu.
```
<a data-route="books" href="{{baseUrl}}books">
<iron-icon icon="book"></iron-icon>
<span>Books</span>
</a>
```
Your menu should now look like the following:
```
...
<!-- Drawer Content -->
<paper-menu attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
...
<a data-route="contact" href="{{baseUrl}}contact">
<iron-icon icon="mail"></iron-icon>
<span>Contact</span>
</a>
<a data-route="books" href="{{baseUrl}}books">
<iron-icon icon="book"></iron-icon>
<span>Books</span>
</a>
</paper-menu>
...
```
If you view the app now, you should see your new item in the navigation
menu, but the link does not point to a valid page yet.
## Add content
In the previous section you added a navigation menu item to enable the
user to navigate to a new page. Now, you add the content for that new page.
1. Open `app/index.html` in a text editor and find the main content.
```
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="home">
<paper-material elevation="1">
<my-greeting></my-greeting>
<p class="subhead">You now have:</p>
<my-list></my-list>
...
</paper-material>
</section>
<section data-route="users">
<paper-material elevation="1">
<h2 class="page-title">Users</h2>
<p>This is the users section</p>
<a href$="{{baseUrl}}users/Addy">Addy</a><br>
<a href$="{{baseUrl}}users/Rob">Rob</a><br>
<a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
<a href$="{{baseUrl}}users/Sam">Sam</a>
</paper-material>
</section>
...
```
* The PSK's design pattern for structuring pages is to make each page a
`<section>` element. The `<iron-pages>` element controls which page is
displayed at any given time.
* The `data-route` attribute is an identifier for the routing system.
You'll set that up for your new page in the next section.
* The `<paper-material>` element creates a card which floats on top of the
main content area. If you want to follow the Material Design
specification, all main content should be displayed on top of one of these
cards.
* The `elevation` attribute determines how high a `<paper-material>` element
appears to visually float above the main content area. Experiment by
setting it to values between `0` and `5`.
1. Add the following content to the bottom of the main section area.
```
<section data-route="books">
<paper-material elevation="1">
<p>Hello, World!</p>
</paper-material>
</section>
```
Your code should now look like the following:
```
...
<!-- Main Content -->
<div class="content">
<iron-pages attr-for-selected="data-route" selected="{{route}}">
...
<section data-route="contact">
<paper-material elevation="1">
<h2 class="page-title">Contact</h2>
<p>This is the contact section</p>
</paper-material>
</section>
<section data-route="books">
<paper-material elevation="1">
<p>Hello, World!</p>
</paper-material>
</section>
</iron-pages>
</div>
...
```
You now have content to link your new navigation item to. In the
next section you'll link your navigation item to your new content.
## Route traffic to the new content
In this last tutorial, you make a minor modification to the routing system
so that when a user clicks on the new "Books" navigation menu item, they
get routed properly to your new page.
1. Open `app/elements/routing.html` in a text editor and add the following
code near the bottom of the script, just below the page rule for
`/contact`.
```
page('/books', function () {
app.route = 'books';
});
```
Your script should now look like the following:
```
...
page('/', function () {
app.route = 'home';
});
...
page('/contact', function () {
app.route = 'contact';
});
page('/books', function () {
app.route = 'books';
});
...
```
Your new page is now ready! Open your web browser and view it at
[http://localhost:5000/#!/books](http://localhost:5000/#!/books).
![Example of new page](psk-tutorial-books-page.png)

54
docs/tutorials/deploy.md
View File

@ -1,54 +0,0 @@
# Deploy
This tutorial teaches you how to deploy your Polymer Starter Kit application.
If you have not completed the [Set up tutorial](set-up.md), do so now
before attempting this tutorial.
## Deploy with Firebase (recommended)
Firebase is a very simple and secure way to deploy a PSK site. You can sign
up for a free account and deploy your application in less than 5 minutes.
The instructions below are based on the [Firebase hosting quick start
guide](https://firebase.google.com/docs/hosting/quickstart).
1. [Sign up for a Firebase account](https://firebase.google.com).
1. Install the Firebase command line tools.
npm install -g firebase-tools
The `-g` flag instructs `npm` to install the package globally so that you
can use the `firebase` command from any directory. You may need
to install the package with `sudo` privileges.
1. `cd` into your project directory.
1. Inititalize the Firebase application.
firebase login
firebase init
1. Press `Space` to disable the Database feature. Leave the Hosting feature
enabled. Press `Enter` to confirm your choices.
1. Firebase asks you the name of your app's public directory. Enter `dist`.
This works because when you run `gulp` to build your application, PSK
builds everything and places it all in `dist`. So `dist` contains
everything your application needs to run.
1. When Firebase asks you `Configure as a single-page app
(rewrite all urls to /index.html)?` select `No`.
1. When Firebase asks `File dist/index.html already exists. Overwrite?`
select `No`.
1. Select which app you want to deploy to.
1. Run the following command to deploy.
firebase deploy
1. You can view your site at the URL listed in the output, or by running
`firebase open hosting:site`.

BIN
docs/tutorials/psk-home.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 187 KiB

BIN
docs/tutorials/psk-tutorial-books-page.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 100 KiB

134
docs/tutorials/set-up.md
View File

@ -1,134 +0,0 @@
# Set up
The Polymer Starter Kit is a complete starting point for a Polymer 1.0
application. It includes:
* A [Material Design][md] layout.
* Routing with Page.js.
* Unit testing with [web-component-tester](https://github.com/Polymer/web-component-tester).
* An end-to-end toolchain for build and local development.
Follow the instructions below to install, build, and run the
Polymer Starter Kit (PSK) locally in less than 15 minutes.
## Install the Polymer Starter Kit and dependencies
1. Install [Node.js](https://nodejs.org/) (`node`) version 0.12 or above.
Node.js includes Node Package Manager (`npm`) by default. The PSK
uses `npm` to install and manage tooling.
1. Verify that you're running `node` version 0.12 or above and `npm`
version 2.11 or above.
node -v
v0.12.5
npm -v
2.12.2
1. Install Gulp and Bower.
npm install -g gulp bower
Note: the `-g` flag installs Gulp and Bower globally, so you may need to
execute the script with `sudo` privileges. The reason they are installed
globally is because some scripts in the PSK expect
`gulp` and `bower` to be available from the command line.
1. Download the [latest PSK release](https://github.com/PolymerElements/polymer-starter-kit/releases/latest).
There are two versions of the PSK, a light version (e.g.
`polymer-starter-kit-light-x.x.x.zip`)
and a full version (e.g. `polymer-starter-kit-x.x.x.zip`). Download
the full
version.
1. Unzip the file to a suitable location. After unzipping the file
you should have a directory called `polymer-starter-kit-x.x.x`.
You can rename the directory to something more relevant to your project.
1. `cd` into the base directory of your PSK project.
1. Install the build and toolchain dependencies.
npm install
1. Install the application dependencies.
bower install
## Directory structure
The diagram below is a brief summary of the directories within the PSK.
/
|---app/
| |---elements/
| |---images/
| |---scripts/
| |---styles/
| |---test/
|---docs/
|---dist/
* `app/` is where you store all of your source code and do all of your
development.
* `elements/` is where you keep your custom elements.
* `images/` is for static images.
* `scripts/` is the place for JS scripts.
* `styles/` houses your app's [shared styles][shared styles] and CSS rules.
* `test/` is where you [define tests for your web
components](https://github.com/Polymer/web-component-tester).
* `docs/` contains optional "recipes" (how-to guides) for adding features
to your application or for using optional tools or editors.
* `dist/` is the directory to deploy to production. When you run the
build task, files are prepared for production (HTML imports are
vulcanzied, scripts are minimized, and so on) and output to this directory.
## Initialize Git repository (optional)
Your PSK installment does not contain any version control system. Follow the
instructions below if you want to manage your source code with Git.
1. `cd` into the base directory of your PSK project.
1. Initialize a Git repository.
git init
1. Add and commit all of the files.
git add . && git commit -m "Add Polymer Starter Kit."
## Build and serve
The PSK is ready to be built and ran locally.
1. `cd` into the base directory of your PSK project.
1. Build the app.
gulp
1. Serve the app locally.
gulp serve
The local development server automatically detects file modifications
and re-builds the application. As long as you keep the `gulp serve`
task running there is no need to re-build or re-serve the app while
you develop.
The task above automatically opens up your default web browser and
fetches the locally-hosted application (at `http://localhost:5000`).
![PSK homepage](psk-home.png)
## Next steps
Now that your PSK is up and running, learn how to [add a new page of
content](create-a-page.md), or how to [deploy the app to the
web](deploy.md).
[shared styles]: /1.0/docs/devguide/styling.html#style-modules
[md]: http://www.google.com/design/spec/material-design/introduction.html

289
gulpfile.js
View File

@ -1,289 +0,0 @@
/*
@license
Copyright (c) 2015 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
*/
'use strict';
// Include promise polyfill for node 0.10 compatibility
require('es6-promise').polyfill();
// Include Gulp & tools we'll use
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var del = require('del');
var runSequence = require('run-sequence');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var merge = require('merge-stream');
var path = require('path');
var fs = require('fs');
var glob = require('glob-all');
var historyApiFallback = require('connect-history-api-fallback');
var packageJson = require('./package.json');
var crypto = require('crypto');
var ensureFiles = require('./tasks/ensure-files.js');
// var ghPages = require('gulp-gh-pages');
var AUTOPREFIXER_BROWSERS = [
'ie >= 10',
'ie_mob >= 10',
'ff >= 30',
'chrome >= 34',
'safari >= 7',
'opera >= 23',
'ios >= 7',
'android >= 4.4',
'bb >= 10'
];
var DIST = 'dist';
var dist = function(subpath) {
return !subpath ? DIST : path.join(DIST, subpath);
};
var styleTask = function(stylesPath, srcs) {
return gulp.src(srcs.map(function(src) {
return path.join('app', stylesPath, src);
}))
.pipe($.changed(stylesPath, {extension: '.css'}))
.pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest('.tmp/' + stylesPath))
.pipe($.minifyCss())
.pipe(gulp.dest(dist(stylesPath)))
.pipe($.size({title: stylesPath}));
};
var imageOptimizeTask = function(src, dest) {
return gulp.src(src)
.pipe($.imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest(dest))
.pipe($.size({title: 'images'}));
};
// Compile and automatically prefix stylesheets
gulp.task('styles', function() {
return styleTask('styles', ['**/*.css']);
});
// Ensure that we are not missing required files for the project
// "dot" files are specifically tricky due to them being hidden on
// some systems.
gulp.task('ensureFiles', function(cb) {
var requiredFiles = ['.bowerrc'];
ensureFiles(requiredFiles.map(function(p) {
return path.join(__dirname, p);
}), cb);
});
// Optimize images
gulp.task('images', function() {
return imageOptimizeTask('app/images/**/*', dist('images'));
});
// Copy all files at the root level (app)
gulp.task('copy', function() {
var app = gulp.src([
'app/*',
'!app/test',
'!app/elements',
'!app/bower_components',
'!app/cache-config.json',
'!**/.DS_Store'
], {
dot: true
}).pipe(gulp.dest(dist()));
// Copy over only the bower_components we need
// These are things which cannot be vulcanized
var bower = gulp.src([
'app/bower_components/{webcomponentsjs,platinum-sw,sw-toolbox,promise-polyfill}/**/*'
]).pipe(gulp.dest(dist('bower_components')));
return merge(app, bower)
.pipe($.size({
title: 'copy'
}));
});
// Copy web fonts to dist
gulp.task('fonts', function() {
return gulp.src(['app/fonts/**'])
.pipe(gulp.dest(dist('fonts')))
.pipe($.size({
title: 'fonts'
}));
});
// Scan your HTML for assets & optimize them
gulp.task('build', ['images', 'fonts'], function() {
return gulp.src(['app/**/*.html', '!app/{elements,test,bower_components}/**/*.html'])
.pipe($.useref())
.pipe($.if('*.js', $.uglify({
preserveComments: 'some'
})))
.pipe($.if('*.css', $.minifyCss()))
.pipe($.if('*.html', $.minifyHtml({
quotes: true,
empty: true,
spare: true
})))
.pipe(gulp.dest(dist()))
});
// Vulcanize granular configuration
gulp.task('vulcanize', function() {
return gulp.src('app/elements/elements.html')
.pipe($.vulcanize({
stripComments: true,
inlineCss: true,
inlineScripts: true
}))
.pipe(gulp.dest(dist('elements')))
.pipe($.size({title: 'vulcanize'}));
});
// Generate config data for the <sw-precache-cache> element.
// This include a list of files that should be precached, as well as a (hopefully unique) cache
// id that ensure that multiple PSK projects don't share the same Cache Storage.
// This task does not run by default, but if you are interested in using service worker caching
// in your project, please enable it within the 'default' task.
// See https://github.com/PolymerElements/polymer-starter-kit#enable-service-worker-support
// for more context.
gulp.task('cache-config', function(callback) {
var dir = dist();
var config = {
cacheId: packageJson.name || path.basename(__dirname),
disabled: false
};
glob([
'index.html',
'./',
'bower_components/webcomponentsjs/webcomponents-lite.min.js',
'{elements,scripts,styles}/**/*.*'],
{cwd: dir}, function(error, files) {
if (error) {
callback(error);
} else {
config.precache = files;
var md5 = crypto.createHash('md5');
md5.update(JSON.stringify(config.precache));
config.precacheFingerprint = md5.digest('hex');
var configPath = path.join(dir, 'cache-config.json');
fs.writeFile(configPath, JSON.stringify(config), callback);
}
});
});
// Clean output directory
gulp.task('clean', function() {
return del(['.tmp', dist()]);
});
// Watch files for changes & reload
gulp.task('serve', ['styles'], function() {
browserSync({
port: 5000,
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: {
baseDir: ['.tmp', 'app'],
middleware: [historyApiFallback()]
}
});
gulp.watch(['app/**/*.html', '!app/bower_components/**/*.html'], reload);
gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
gulp.watch(['app/scripts/**/*.js'], reload);
gulp.watch(['app/images/**/*'], reload);
});
// Build and serve the output from the dist build
gulp.task('serve:dist', ['default'], function() {
browserSync({
port: 5001,
notify: false,
logPrefix: 'PSK',
snippetOptions: {
rule: {
match: '<span id="browser-sync-binding"></span>',
fn: function(snippet) {
return snippet;
}
}
},
// Run as an https by uncommenting 'https: true'
// Note: this uses an unsigned certificate which on first access
// will present a certificate warning in the browser.
// https: true,
server: dist(),
middleware: [historyApiFallback()]
});
});
// Build production files, the default task
gulp.task('default', ['clean'], function(cb) {
// Uncomment 'cache-config' if you are going to use service workers.
runSequence(
['ensureFiles', 'copy', 'styles'],
'build',
'vulcanize', // 'cache-config',
cb);
});
// Build then deploy to GitHub pages gh-pages branch
gulp.task('build-deploy-gh-pages', function(cb) {
runSequence(
'default',
'deploy-gh-pages',
cb);
});
// Deploy to GitHub pages gh-pages branch
gulp.task('deploy-gh-pages', function() {
return gulp.src(dist('**/*'))
// Check if running task from Travis CI, if so run using GH_TOKEN
// otherwise run using ghPages defaults.
.pipe($.if(process.env.TRAVIS === 'true', $.ghPages({
remoteUrl: 'https://$GH_TOKEN@github.com/PolymerElements/polymer-starter-kit.git',
silent: true,
branch: 'gh-pages'
}), $.ghPages()));
});
// Load tasks for web-component-tester
// Adds tasks for `gulp test:local` and `gulp test:remote`
require('web-component-tester').gulp.init(gulp);
// Load custom tasks from the `tasks` directory
try {
require('require-dir')('tasks');
} catch (err) {
// Do nothing
}

BIN
images/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
images/manifest/icon-144x144.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
images/manifest/icon-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
images/manifest/icon-48x48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
images/manifest/icon-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
images/manifest/icon-72x72.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

BIN
images/manifest/icon-96x96.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

111
index.html Normal file
View File

@ -0,0 +1,111 @@
<!--
@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
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>My App</title>
<meta name="description" content="My App description">
<link rel="icon" href="/images/favicon.ico">
<!-- See https://goo.gl/OOhYW5 -->
<link rel="manifest" href="/manifest.json">
<!-- See https://goo.gl/qRE0vM -->
<meta name="theme-color" content="#3f51b5">
<!-- Add to homescreen for Chrome on Android. Fallback for manifest.json -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="My App">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="My App">
<!-- Homescreen icons -->
<link rel="apple-touch-icon" href="/images/manifest/icon-48x48.png">
<link rel="apple-touch-icon" sizes="72x72" href="/images/manifest/icon-72x72.png">
<link rel="apple-touch-icon" sizes="96x96" href="/images/manifest/icon-96x96.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/manifest/icon-144x144.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/manifest/icon-192x192.png">
<!-- Tile icon for Windows 8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="/images/manifest/icon-144x144.png">
<meta name="msapplication-TileColor" content="#3f51b5">
<meta name="msapplication-tap-highlight" content="no">
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
<link rel="import" href="/src/my-app.html">
<style>
body {
margin: 0;
font-family: 'Roboto', 'Noto', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eeeeee;
}
</style>
</head>
<body>
<my-app></my-app>
<!-- Built with love using Polymer Starter Kit -->
</body>
</html>

20
manifest.json Normal file
View File

@ -0,0 +1,20 @@
{
"name": "My App",
"short_name": "My App",
"start_url": "/?homescreen=1",
"display": "standalone",
"theme_color": "#3f51b5",
"background_color": "#3f51b5",
"icons": [
{
"src": "images/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

39
package.json
View File

@ -1,39 +0,0 @@
{
"private": true,
"devDependencies": {
"browser-sync": "^2.7.7",
"connect-history-api-fallback": "^1.1.0",
"del": "^2.0.2",
"es6-promise": "^3.1.2",
"glob-all": "^3.0.1",
"gulp": "^3.8.5",
"gulp-autoprefixer": "^3.1.0",
"gulp-cache": "^0.4.0",
"gulp-changed": "^1.0.0",
"gulp-gh-pages": "^0.5.4",
"gulp-html-extract": "^0.1.0",
"gulp-if": "^2.0.0",
"gulp-imagemin": "^2.2.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-minify-html": "^1.0.2",
"gulp-rename": "^1.2.0",
"gulp-replace": "^0.5.4",
"gulp-size": "^2.0.0",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^3.0.5",
"gulp-vulcanize": "^6.0.0",
"merge-stream": "^1.0.0",
"require-dir": "^0.3.0",
"run-sequence": "^1.0.2",
"vulcanize": ">= 1.4.2",
"web-component-tester": "^4.0.0"
},
"scripts": {
"test": "gulp test:local",
"start": "gulp serve"
},
"engines": {
"node": ">=0.10.0"
}
}

19
polymer.json Normal file
View File

@ -0,0 +1,19 @@
{
"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"
],
"sourceGlobs": [
"src/**/*",
"images/**/*",
"bower.json"
],
"includeDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
]
}

10
service-worker.js Normal file
View File

@ -0,0 +1,10 @@
/**
* @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
*/
console.info('Service worker disabled for development, will be generated at build time.');

139
src/my-app.html Normal file
View File

@ -0,0 +1,139 @@
<!--
@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.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">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
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}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer>
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="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>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
}
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
this.page = page || 'view1';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
}
});
</script>
</dom-module>

31
src/my-icons.html Normal file
View File

@ -0,0 +1,31 @@
<!--
@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-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
<iron-iconset-svg name="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>

37
src/my-view1.html Normal file
View File

@ -0,0 +1,37 @@
<!--
@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.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>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>
Polymer({
is: 'my-view1'
});
</script>
</dom-module>

37
src/my-view2.html Normal file
View File

@ -0,0 +1,37 @@
<!--
@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.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>
Polymer({
is: 'my-view2'
});
</script>
</dom-module>

37
src/my-view3.html Normal file
View File

@ -0,0 +1,37 @@
<!--
@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.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>
Polymer({
is: 'my-view3'
});
</script>
</dom-module>

34
wct.conf.js → src/my-view404.html
View File

@ -1,4 +1,4 @@
/**
<!--
@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
@ -6,22 +6,26 @@ 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
*/
var path = require('path');
-->
var ret = {
'suites': ['app/test'],
'webserver': {
'pathMappings': []
}
};
<link rel="import" href="../bower_components/polymer/polymer.html">
var mapping = {};
var rootPath = (__dirname).split(path.sep).slice(-1)[0];
<dom-module id="my-view404">
<template>
<style>
:host {
display: block;
mapping['/components/' + rootPath +
'/app/bower_components'] = 'bower_components';
padding: 10px 20px;
}
</style>
ret.webserver.pathMappings.push(mapping);
Oops you hit a 404. <a href="/">Head back to home.</a>
</template>
module.exports = ret;
<script>
Polymer({
is: 'my-view404'
});
</script>
</dom-module>

47
app/styles/shared-styles.html → src/shared-styles.html
View File

@ -7,32 +7,45 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
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.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">
<!-- shared styles for all elements and index.html -->
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- shared styles for all views -->
<dom-module id="shared-styles">
<template>
<style>
.page-title {
@apply(--paper-font-display2);
.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);
}
.app-menu {
--paper-menu-selected-item: {
color: #fff;
background: var(--light-primary-color);
}
.circle {
display: inline-block;
width: 64px;
height: 64px;
text-align: center;
color: #555;
border-radius: 50%;
background: #ddd;
font-size: 30px;
line-height: 64px;
}
paper-menu a > *, paper-menu paper-item > *, paper-menu paper-icon-item > * {
pointer-events: none;
}
h1 {
margin: 16px 0;
@media (max-width: 600px) {
.page-title {
font-size: 24px!important;
}
color: #212121;
font-size: 22px;
}
</style>
</template>

17
sw-precache-config.js Normal file
View File

@ -0,0 +1,17 @@
/**
* @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
*/
module.exports = {
staticFileGlobs: [
'/index.html',
'/manifest.json',
'/bower_components/webcomponentsjs/webcomponents-lite.min.js'
],
navigateFallback: '/index.html'
};

43
tasks/ensure-files.js
View File

@ -1,43 +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
*/
var fs = require('fs');
/**
* @param {Array<string>} files
* @param {Function} cb
*/
function ensureFiles(files, cb) {
var missingFiles = files.reduce(function(prev, filePath) {
var fileFound = false;
try {
fileFound = fs.statSync(filePath).isFile();
} catch (e) { }
if (!fileFound) {
prev.push(filePath + ' Not Found');
}
return prev;
}, []);
if (missingFiles.length) {
var err = new Error('Missing Required Files\n' + missingFiles.join('\n'));
}
if (cb) {
cb(err);
} else if (err) {
throw err;
}
}
module.exports = ensureFiles;

26
app/test/index.html → test/index.html
View File

@ -1,7 +1,6 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
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
@ -9,29 +8,22 @@ 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
-->
<html>
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Elements Test Runner</title>
<meta charset="UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Tests</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="../bower_components/web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'my-greeting-basic.html',
'my-greeting-basic.html?dom=shadow',
'my-list-basic.html',
'my-list-basic.html?dom=shadow'
'my-view1.html?dom=shady',
'my-view1.html?dom=shadow'
]);
</script>
</body>
</html>

47
test/my-view1.html Normal file
View 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
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>my-view1</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script src="../bower_components/web-component-tester/browser.js"></script>
<!-- Import the element to test -->
<link rel="import" href="../src/my-view1.html">
</head>
<body>
<test-fixture id="basic">
<template>
<my-view1></my-view1>
</template>
</test-fixture>
<script>
suite('my-view1 tests', function() {
var home;
setup(function() {
home = fixture('basic');
});
test('Number in circle should be 1', function() {
var circle = Polymer.dom(home.root).querySelector('.circle');
assert.equal(circle.textContent, '1');
})
});
</script>
</body>
</html>

56
travis-runner.sh
View File

@ -1,56 +0,0 @@
#!/bin/bash -e
set -o pipefail
if [ "$TRAVIS_BRANCH" = "master" ] && [ "$TRAVIS_PULL_REQUEST" = "false" ] && [ "$TRAVIS_NODE_VERSION" = "5.1" ]
then
git config --global user.email "samccone@gmail.com"
git config --global user.name "auto deployer"
# Stamp index.html with the date and time of PSK's deploying
date_value=`date`
sed -i.tmp1 "s/This is another card./This is another card. PSK Deployed on: $date_value/" app/index.html
deploy_ghpages () {
# Deploying to GitHub Pages! (http://polymerelements.github.io/polymer-starter-kit)
echo Deploying to GitHub Pages
sed -i.tmp "s/\/\/ app.baseUrl = '\/polymer-starter-kit/app.baseUrl = '\/polymer-starter-kit/" app/scripts/app.js
sed -i.tmp2 "s/<\/head>/\ \<script>'https:'!==window.location.protocol\&\&(window.location.protocol='https')<\/script>&/g" app/index.html
gulp build-deploy-gh-pages
# Undoing Changes to PSK for GitHub Pages
cp app/scripts/app.js.tmp app/scripts/app.js
rm app/scripts/app.js.tmp
cp app/index.html.tmp2 app/index.html
rm app/index.html.tmp2
}
deploy_firebase () {
# Deploying to Firebase! (https://polymer-starter-kit.firebaseapp.com)
echo Deploying to Firebase
# Making Changes to PSK for Firebase
sed -i.tmp 's/<!-- Chrome for Android theme color -->/<base href="\/">\'$'\n<!-- Chrome for Android theme color -->/g' app/index.html
sed -i.tmp "s/hashbang: true/hashbang: false/" app/elements/routing.html
cp docs/firebase.json firebase.json
# Starting Build Process for Firebase Changes
gulp
# Starting Deploy Process to Firebaseapp.com Server -- polymer-starter-kit.firebaseapp.com
firebase deploy --token "$FIREBASE_TOKEN" -m "Auto Deployed by Travis CI"
# Undoing Changes to PSK for Firebase
cp app/index.html.tmp app/index.html
cp app/elements/routing.html.tmp app/elements/routing.html
rm app/elements/routing.html.tmp
rm app/index.html.tmp
rm firebase.json
}
deploy_ghpages
deploy_firebase
# Revert to orginal index.html and delete temp file
cp app/index.html.tmp1 app/index.html
rm app/index.html.tmp1
elif [ "$TRAVIS_BRANCH" = "master" ] && [ "$TRAVIS_PULL_REQUEST" = "false" ] && [ "$TRAVIS_NODE_VERSION" != "5.1" ]
then
echo "Do Nothing, only deploy with Node 5.1"
else
npm test
fi