added web interface (WIP)
This commit is contained in:
parent
cde2a37afe
commit
fe563e32ee
21
websrc/.editorconfig
Normal file
21
websrc/.editorconfig
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
# 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
|
||||||
1
websrc/.gitattributes
vendored
Normal file
1
websrc/.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
* text=auto
|
||||||
4
websrc/.gitignore
vendored
Normal file
4
websrc/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
bower_components
|
||||||
|
.tmp
|
||||||
5
websrc/.jscsrc
Normal file
5
websrc/.jscsrc
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"preset": "google",
|
||||||
|
"disallowSpacesInAnonymousFunctionExpression": null,
|
||||||
|
"excludeFiles": ["node_modules/**"]
|
||||||
|
}
|
||||||
24
websrc/.jshintrc
Normal file
24
websrc/.jshintrc
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"node": true,
|
||||||
|
"browser": true,
|
||||||
|
"bitwise": true,
|
||||||
|
"camelcase": true,
|
||||||
|
"curly": true,
|
||||||
|
"eqeqeq": true,
|
||||||
|
"immed": true,
|
||||||
|
"indent": 2,
|
||||||
|
"latedef": true,
|
||||||
|
"noarg": true,
|
||||||
|
"quotmark": "single",
|
||||||
|
"undef": true,
|
||||||
|
"unused": true,
|
||||||
|
"newcap": false,
|
||||||
|
"globals": {
|
||||||
|
"wrap": true,
|
||||||
|
"unwrap": true,
|
||||||
|
"Polymer": true,
|
||||||
|
"Platform": true,
|
||||||
|
"page": true,
|
||||||
|
"app": true
|
||||||
|
}
|
||||||
|
}
|
||||||
19
websrc/LICENSE.md
Normal file
19
websrc/LICENSE.md
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
# 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.
|
||||||
364
websrc/README.md
Normal file
364
websrc/README.md
Normal file
@ -0,0 +1,364 @@
|
|||||||
|
|
||||||
|
## Polymer Starter Kit
|
||||||
|
|
||||||
|
> A starting point for building web applications with Polymer 1.0
|
||||||
|
|
||||||
|
### Included out of the box:
|
||||||
|
|
||||||
|
* [Polymer](http://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))
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
To take advantage of Polymer Starter Kit you need to:
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
### Get the code
|
||||||
|
|
||||||
|
[Download](https://github.com/polymerelements/polymer-starter-kit/releases/latest) and extract Polymer Starter Kit to where you want to work. The project comes in two flavours - Light and Full.
|
||||||
|
|
||||||
|
**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.
|
||||||
|
|
||||||
|
**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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
### Install dependencies
|
||||||
|
|
||||||
|
#### Quick-start (for experienced users)
|
||||||
|
|
||||||
|
With Node.js installed, run the following one liner from the root of your Polymer Starter Kit download:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install -g gulp bower && npm install && bower install
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Prerequisites (for everyone)
|
||||||
|
|
||||||
|
The full starter kit requires the following major dependencies:
|
||||||
|
|
||||||
|
- 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).
|
||||||
|
|
||||||
|
**To install dependencies:**
|
||||||
|
|
||||||
|
1) Check your Node.js version.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
node --version
|
||||||
|
```
|
||||||
|
|
||||||
|
The version should be at or above 0.12.x.
|
||||||
|
|
||||||
|
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 linting as well as 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 shared 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.
|
||||||
|
|
||||||
|
## 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"
|
||||||
|
precache-file="precache.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',
|
||||||
|
['jshint', '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/push-notification-manager/)
|
||||||
|
* 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 user's 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.
|
||||||
|
|
||||||
|
## 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 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.vulcanized.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 your 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.
|
||||||
|
|
||||||
|
### If you require more granular configuration of Vulcanize than polybuild provides you an option by:
|
||||||
|
|
||||||
|
1. Copy code below
|
||||||
|
2. Then replace `gulp.task('vulcanize', function () {...` entire gulp vulcanize task code in `gulpfile.js`
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Vulcanize granular configuration
|
||||||
|
gulp.task('vulcanize', function () {
|
||||||
|
var DEST_DIR = 'dist/elements';
|
||||||
|
return gulp.src('dist/elements/elements.vulcanized.html')
|
||||||
|
.pipe($.vulcanize({
|
||||||
|
stripComments: true,
|
||||||
|
inlineCss: true,
|
||||||
|
inlineScripts: true
|
||||||
|
}))
|
||||||
|
.pipe(gulp.dest(DEST_DIR))
|
||||||
|
.pipe($.size({title: 'vulcanize'}));
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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.
|
||||||
4
websrc/app/cache-config.json
Normal file
4
websrc/app/cache-config.json
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"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
websrc/app/elements/elements.html
Normal file
41
websrc/app/elements/elements.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!--
|
||||||
|
@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/classes/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/paper-styles-classes.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">
|
||||||
44
websrc/app/elements/my-greeting/my-greeting.html
Normal file
44
websrc/app/elements/my-greeting/my-greeting.html
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<!--
|
||||||
|
@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">
|
||||||
|
|
||||||
|
<dom-module id="my-greeting">
|
||||||
|
<template>
|
||||||
|
<style include="shared-styles"></style>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h2 class="page-title"><span>{{greeting}}</span></h2>
|
||||||
|
<span class="paper-font-body2">Update text to change the greeting.</span>
|
||||||
|
<!-- Listens for "input" event and sets greeting to <input>.value -->
|
||||||
|
<input class="paper-font-body2" value="{{greeting::input}}">
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Polymer({
|
||||||
|
is: 'my-greeting',
|
||||||
|
|
||||||
|
properties: {
|
||||||
|
greeting: {
|
||||||
|
type: String,
|
||||||
|
value: 'Welcome!',
|
||||||
|
notify: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</dom-module>
|
||||||
52
websrc/app/elements/my-list/my-list.html
Normal file
52
websrc/app/elements/my-list/my-list.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<!--
|
||||||
|
@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">
|
||||||
|
|
||||||
|
<dom-module id="my-list">
|
||||||
|
<template>
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<ul>
|
||||||
|
<template is="dom-repeat" items="{{items}}">
|
||||||
|
<li><span class="paper-font-body1">{{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>
|
||||||
49
websrc/app/elements/routing.html
Normal file
49
websrc/app/elements/routing.html
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!--
|
||||||
|
@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/
|
||||||
|
|
||||||
|
// Middleware
|
||||||
|
function scrollToTop(ctx, next) {
|
||||||
|
app.scrollPageToTop();
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Routes
|
||||||
|
page('/', scrollToTop, function() {
|
||||||
|
app.route = 'home';
|
||||||
|
});
|
||||||
|
|
||||||
|
page('/users', scrollToTop, function() {
|
||||||
|
app.route = 'users';
|
||||||
|
});
|
||||||
|
|
||||||
|
page('/users/:name', scrollToTop, function(data) {
|
||||||
|
app.route = 'user-info';
|
||||||
|
app.params = data.params;
|
||||||
|
});
|
||||||
|
|
||||||
|
page('/contact', scrollToTop, function() {
|
||||||
|
app.route = 'contact';
|
||||||
|
});
|
||||||
|
|
||||||
|
// add #! before urls
|
||||||
|
page({
|
||||||
|
hashbang: true
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
BIN
websrc/app/favicon.ico
Normal file
BIN
websrc/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 611 B |
BIN
websrc/app/images/touch/apple-touch-icon.png
Normal file
BIN
websrc/app/images/touch/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
websrc/app/images/touch/chrome-splashscreen-icon-384x384.png
Normal file
BIN
websrc/app/images/touch/chrome-splashscreen-icon-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
websrc/app/images/touch/chrome-touch-icon-192x192.png
Normal file
BIN
websrc/app/images/touch/chrome-touch-icon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
websrc/app/images/touch/icon-128x128.png
Normal file
BIN
websrc/app/images/touch/icon-128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
websrc/app/images/touch/ms-icon-144x144.png
Normal file
BIN
websrc/app/images/touch/ms-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
websrc/app/images/touch/ms-touch-icon-144x144-precomposed.png
Normal file
BIN
websrc/app/images/touch/ms-touch-icon-144x144-precomposed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
147
websrc/app/index.html
Normal file
147
websrc/app/index.html
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
<!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="">
|
||||||
|
|
||||||
|
<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 -->
|
||||||
|
|
||||||
|
<!-- will be replaced with elements/elements.vulcanized.html -->
|
||||||
|
<link rel="import" href="elements/elements.html">
|
||||||
|
<!-- endreplace-->
|
||||||
|
|
||||||
|
<!-- For shared styles, shared-styles.html import in elements.html -->
|
||||||
|
<style is="custom-style" include="shared-styles"></style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body unresolved class="fullbleed layout vertical">
|
||||||
|
<span id="browser-sync-binding"></span>
|
||||||
|
<template is="dom-bind" id="app">
|
||||||
|
|
||||||
|
<!-- Main Area -->
|
||||||
|
<paper-scroll-header-panel main condenses keep-condensed-header>
|
||||||
|
|
||||||
|
<!-- Main Toolbar -->
|
||||||
|
<paper-toolbar id="mainToolbar" class="tall">
|
||||||
|
<span class="flex"></span>
|
||||||
|
|
||||||
|
<!-- Toolbar icons -->
|
||||||
|
<paper-icon-button icon="refresh"></paper-icon-button>
|
||||||
|
<paper-icon-button icon="search"></paper-icon-button>
|
||||||
|
|
||||||
|
<!-- Application name -->
|
||||||
|
<div class="middle middle-container center horizontal layout">
|
||||||
|
<div class="app-name">Bitmessage Broadcasts</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Application sub title -->
|
||||||
|
<div class="bottom bottom-container center horizontal layout">
|
||||||
|
<div class="bottom-title paper-font-subhead">Please don't abuse</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</paper-toolbar>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<div class="content">
|
||||||
|
<iron-pages attr-for-selected="data-route" selected="{{route}}">
|
||||||
|
|
||||||
|
<section data-route="home">
|
||||||
|
<iron-ajax
|
||||||
|
auto
|
||||||
|
url="http://localhost:8080/read/BM-GuRLKDhQA5hAhE6PDQpkcvbtt1AuXAdQ"
|
||||||
|
handle-as="json"
|
||||||
|
last-response="{{messages}}"
|
||||||
|
debounce-duration="300"></iron-ajax>
|
||||||
|
<template is="dom-repeat" items="{{messages}}">
|
||||||
|
<paper-material elevation="1">
|
||||||
|
<h1>{{item.received}}</h1>
|
||||||
|
{{item.subject}}
|
||||||
|
<p>{{item.text}}</p>
|
||||||
|
</paper-material>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<paper-material elevation="1">
|
||||||
|
<my-greeting></my-greeting>
|
||||||
|
|
||||||
|
<p class="paper-font-subhead">You now have:</p>
|
||||||
|
<my-list></my-list>
|
||||||
|
|
||||||
|
<p class="paper-font-body2">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>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</iron-pages>
|
||||||
|
</div>
|
||||||
|
</paper-scroll-header-panel>
|
||||||
|
|
||||||
|
<!-- 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="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>
|
||||||
29
websrc/app/manifest.json
Normal file
29
websrc/app/manifest.json
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "Polymer Starter Kit",
|
||||||
|
"short_name": "Polymer Starter Kit",
|
||||||
|
"icons": [{
|
||||||
|
"src": "images/touch/icon-128x128.png",
|
||||||
|
"sizes": "128x128",
|
||||||
|
"type": "image/png"
|
||||||
|
}, {
|
||||||
|
"src": "images/touch/apple-touch-icon.png",
|
||||||
|
"sizes": "152x152",
|
||||||
|
"type": "image/png"
|
||||||
|
}, {
|
||||||
|
"src": "images/touch/ms-touch-icon-144x144-precomposed.png",
|
||||||
|
"sizes": "144x144",
|
||||||
|
"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"
|
||||||
|
}],
|
||||||
|
"start_url": "/?homescreen=1",
|
||||||
|
"background_color": "#3E4EB8",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#2E3AA1"
|
||||||
|
}
|
||||||
4
websrc/app/robots.txt
Normal file
4
websrc/app/robots.txt
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# www.robotstxt.org
|
||||||
|
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
74
websrc/app/scripts/app.js
Normal file
74
websrc/app/scripts/app.js
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
/*
|
||||||
|
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');
|
||||||
|
|
||||||
|
app.displayInstalledToast = function() {
|
||||||
|
// Check to make sure caching is actually enabled—it won't be in the dev environment.
|
||||||
|
if (!document.querySelector('platinum-sw-cache').disabled) {
|
||||||
|
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.
|
||||||
|
addEventListener('paper-header-transform', function(e) {
|
||||||
|
var appName = document.querySelector('#mainToolbar .app-name');
|
||||||
|
var middleContainer = document.querySelector('#mainToolbar .middle-container');
|
||||||
|
var bottomContainer = document.querySelector('#mainToolbar .bottom-container');
|
||||||
|
var detail = e.detail;
|
||||||
|
var heightDiff = detail.height - detail.condensedHeight;
|
||||||
|
var yRatio = Math.min(1, detail.y / heightDiff);
|
||||||
|
var maxMiddleScale = 0.50; // appName max size when condensed. The smaller the number the smaller the condensed size.
|
||||||
|
var scaleMiddle = Math.max(maxMiddleScale, (heightDiff - detail.y) / (heightDiff / (1-maxMiddleScale)) + 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);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close drawer after menu item is selected if drawerPanel is narrow
|
||||||
|
app.onDataRouteClick = function() {
|
||||||
|
var drawerPanel = document.querySelector('#paperDrawerPanel');
|
||||||
|
if (drawerPanel.narrow) {
|
||||||
|
drawerPanel.closeDrawer();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Scroll page to top and expand header
|
||||||
|
app.scrollPageToTop = function() {
|
||||||
|
document.getElementById('mainContainer').scrollTop = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
})(document);
|
||||||
230
websrc/app/styles/app-theme.html
Normal file
230
websrc/app/styles/app-theme.html
Normal file
@ -0,0 +1,230 @@
|
|||||||
|
<!-- Palette generated by Material Palette - materialpalette.com/amber/blue-grey -->
|
||||||
|
<!-- Replace the one that comes in their starter kit -->
|
||||||
|
<!--
|
||||||
|
@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
|
||||||
|
-->
|
||||||
|
|
||||||
|
<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 {
|
||||||
|
--dark-primary-color: #FFA000;
|
||||||
|
--default-primary-color: #FFC107;
|
||||||
|
--light-primary-color: #FFECB3;
|
||||||
|
--text-primary-color: #FFFFFF;
|
||||||
|
--accent-color: #607D8B;
|
||||||
|
--primary-background-color: #FFECB3;
|
||||||
|
--primary-text-color: #212121;
|
||||||
|
--secondary-text-color: #727272;
|
||||||
|
--disabled-text-color: #BDBDBD;
|
||||||
|
--divider-color: #B6B6B6;
|
||||||
|
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
|
||||||
|
/* paper-input */
|
||||||
|
--paper-input-container-color: rgba(255, 255, 255, 0.64);
|
||||||
|
--paper-input-container-focus-color: rgba(255, 255, 255, 1);
|
||||||
|
--paper-input-container-input-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* General styles */
|
||||||
|
|
||||||
|
#drawerToolbar {
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
background-color: var(--drawer-menu-color);
|
||||||
|
border-bottom: var(--drawer-toolbar-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-scroll-header-panel {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-material {
|
||||||
|
border-radius: 2px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px 0 16px 0;
|
||||||
|
width: calc(98.66% - 16px);
|
||||||
|
margin: 16px auto;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-menu iron-icon {
|
||||||
|
margin-right: 33px;
|
||||||
|
opacity: 0.54;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper-menu > .iron-selected {
|
||||||
|
color: var(--default-primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-menu a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--menu-link-color);
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
-webkit-align-items: center;
|
||||||
|
align-items: center;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toolbar.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 {
|
||||||
|
height: 100%;
|
||||||
|
margin-left: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mainToolbar:not(.tall) .middle {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mainToolbar .bottom {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Breakpoints */
|
||||||
|
|
||||||
|
/* Small */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
|
||||||
|
paper-material {
|
||||||
|
--menu-container-display: none;
|
||||||
|
width: calc(97.33% - 32px);
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
paper-toolbar.tall .app-name {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drawer .paper-toolbar {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
min-width: 360px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tablet+ */
|
||||||
|
@media (min-width: 601px) {
|
||||||
|
|
||||||
|
paper-material {
|
||||||
|
width: calc(98% - 46px);
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#drawer.paper-drawer-panel > [drawer] {
|
||||||
|
border-right: 1px solid rgba(0, 0, 0, 0.14);
|
||||||
|
}
|
||||||
|
|
||||||
|
iron-pages {
|
||||||
|
padding: 48px 62px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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>
|
||||||
14
websrc/app/styles/main.css
Normal file
14
websrc/app/styles/main.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/*
|
||||||
|
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;
|
||||||
|
}
|
||||||
16
websrc/app/styles/shared-styles.html
Normal file
16
websrc/app/styles/shared-styles.html
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
<!-- shared styles for all elements and index.html -->
|
||||||
|
<dom-module id="shared-styles">
|
||||||
|
<template>
|
||||||
|
<style>
|
||||||
|
.page-title {
|
||||||
|
@apply(--paper-font-display2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.page-title {
|
||||||
|
font-size: 24px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</template>
|
||||||
|
</dom-module>
|
||||||
10
websrc/app/sw-import.js
Normal file
10
websrc/app/sw-import.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
/*
|
||||||
|
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');
|
||||||
32
websrc/app/test/index.html
Normal file
32
websrc/app/test/index.html
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<!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>Elements Test Runner</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<script src="../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
|
||||||
|
<script src="../../bower_components/web-component-tester/browser.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
WCT.loadSuites(['my-greeting-basic.html', 'my-list-basic.html']);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
52
websrc/app/test/my-greeting-basic.html
Normal file
52
websrc/app/test/my-greeting-basic.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<!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.min.js"></script>
|
||||||
|
<script src="../../bower_components/web-component-tester/browser.js"></script>
|
||||||
|
<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
|
||||||
|
<link rel="import" href="../../bower_components/test-fixture/test-fixture.html">
|
||||||
|
|
||||||
|
<!-- 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.querySelector('h2');
|
||||||
|
assert.equal(header.textContent, 'Welcome!');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
67
websrc/app/test/my-list-basic.html
Normal file
67
websrc/app/test/my-list-basic.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!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.min.js"></script>
|
||||||
|
<script src="../../bower_components/web-component-tester/browser.js"></script>
|
||||||
|
<script src="../../bower_components/test-fixture/test-fixture-mocha.js"></script>
|
||||||
|
<link rel="import" href="../../bower_components/test-fixture/test-fixture.html">
|
||||||
|
|
||||||
|
<!-- 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 = list.querySelectorAll('li');
|
||||||
|
assert.equal(list.items.length, listItems.length);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
websrc/bower.json
Normal file
16
websrc/bower.json
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "polymer-starter-kit",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"polymer": "Polymer/polymer#^1.1.0",
|
||||||
|
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
|
||||||
|
"paper-elements": "PolymerElements/paper-elements#^1.0.1",
|
||||||
|
"platinum-elements": "PolymerElements/platinum-elements#^1.1.0",
|
||||||
|
"neon-elements": "PolymerElements/neon-elements#^1.0.0",
|
||||||
|
"page": "visionmedia/page.js#~1.6.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"web-component-tester": "*",
|
||||||
|
"test-fixture": "PolymerElements/test-fixture#^1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
280
websrc/gulpfile.js
Normal file
280
websrc/gulpfile.js
Normal file
@ -0,0 +1,280 @@
|
|||||||
|
/*
|
||||||
|
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 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');
|
||||||
|
var historyApiFallback = require('connect-history-api-fallback');
|
||||||
|
var packageJson = require('./package.json');
|
||||||
|
var crypto = require('crypto');
|
||||||
|
var polybuild = require('polybuild');
|
||||||
|
|
||||||
|
var AUTOPREFIXER_BROWSERS = [
|
||||||
|
'ie >= 10',
|
||||||
|
'ie_mob >= 10',
|
||||||
|
'ff >= 30',
|
||||||
|
'chrome >= 34',
|
||||||
|
'safari >= 7',
|
||||||
|
'opera >= 23',
|
||||||
|
'ios >= 7',
|
||||||
|
'android >= 4.4',
|
||||||
|
'bb >= 10'
|
||||||
|
];
|
||||||
|
|
||||||
|
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($.cssmin())
|
||||||
|
.pipe(gulp.dest('../src/main/resources/static/' + stylesPath))
|
||||||
|
.pipe($.size({title: stylesPath}));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Compile and automatically prefix stylesheets
|
||||||
|
gulp.task('styles', function () {
|
||||||
|
return styleTask('styles', ['**/*.css']);
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('elements', function () {
|
||||||
|
return styleTask('elements', ['**/*.css']);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Lint JavaScript
|
||||||
|
gulp.task('jshint', function () {
|
||||||
|
return gulp.src([
|
||||||
|
'app/scripts/**/*.js',
|
||||||
|
'app/elements/**/*.js',
|
||||||
|
'app/elements/**/*.html',
|
||||||
|
'gulpfile.js'
|
||||||
|
])
|
||||||
|
.pipe(reload({stream: true, once: true}))
|
||||||
|
.pipe($.jshint.extract()) // Extract JS from .html files
|
||||||
|
.pipe($.jshint())
|
||||||
|
.pipe($.jshint.reporter('jshint-stylish'))
|
||||||
|
.pipe($.if(!browserSync.active, $.jshint.reporter('fail')));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Optimize images
|
||||||
|
gulp.task('images', function () {
|
||||||
|
return gulp.src('app/images/**/*')
|
||||||
|
.pipe($.cache($.imagemin({
|
||||||
|
progressive: true,
|
||||||
|
interlaced: true
|
||||||
|
})))
|
||||||
|
.pipe(gulp.dest('dist/images'))
|
||||||
|
.pipe($.size({title: 'images'}));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Copy all files at the root level (app)
|
||||||
|
gulp.task('copy', function () {
|
||||||
|
var app = gulp.src([
|
||||||
|
'app/*',
|
||||||
|
'!app/test',
|
||||||
|
'!app/cache-config.json'
|
||||||
|
], {
|
||||||
|
dot: true
|
||||||
|
}).pipe(gulp.dest('dist'));
|
||||||
|
|
||||||
|
var bower = gulp.src([
|
||||||
|
'bower_components/**/*'
|
||||||
|
]).pipe(gulp.dest('dist/bower_components'));
|
||||||
|
|
||||||
|
var elements = gulp.src(['app/elements/**/*.html'])
|
||||||
|
.pipe(gulp.dest('dist/elements'));
|
||||||
|
|
||||||
|
var swBootstrap = gulp.src(['bower_components/platinum-sw/bootstrap/*.js'])
|
||||||
|
.pipe(gulp.dest('dist/elements/bootstrap'));
|
||||||
|
|
||||||
|
var swToolbox = gulp.src(['bower_components/sw-toolbox/*.js'])
|
||||||
|
.pipe(gulp.dest('dist/sw-toolbox'));
|
||||||
|
|
||||||
|
var vulcanized = gulp.src(['app/elements/elements.html'])
|
||||||
|
.pipe($.rename('elements.vulcanized.html'))
|
||||||
|
.pipe(gulp.dest('dist/elements'));
|
||||||
|
|
||||||
|
return merge(app, bower, elements, vulcanized, swBootstrap, swToolbox)
|
||||||
|
.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('html', function () {
|
||||||
|
var assets = $.useref.assets({searchPath: ['.tmp', 'app', 'dist']});
|
||||||
|
|
||||||
|
return gulp.src(['app/**/*.html', '!app/{elements,test}/**/*.html'])
|
||||||
|
// Replace path for vulcanized assets
|
||||||
|
.pipe($.if('*.html', $.replace('elements/elements.html', 'elements/elements.vulcanized.html')))
|
||||||
|
.pipe(assets)
|
||||||
|
// Concatenate and minify JavaScript
|
||||||
|
.pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
|
||||||
|
// Concatenate and minify styles
|
||||||
|
// In case you are still using useref build blocks
|
||||||
|
.pipe($.if('*.css', $.cssmin()))
|
||||||
|
.pipe(assets.restore())
|
||||||
|
.pipe($.useref())
|
||||||
|
// Minify any HTML
|
||||||
|
.pipe($.if('*.html', $.minifyHtml({
|
||||||
|
quotes: true,
|
||||||
|
empty: true,
|
||||||
|
spare: true
|
||||||
|
})))
|
||||||
|
// Output files
|
||||||
|
.pipe(gulp.dest('dist'))
|
||||||
|
.pipe($.size({title: 'html'}));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Polybuild will take care of inlining HTML imports,
|
||||||
|
// scripts and CSS for you.
|
||||||
|
gulp.task('vulcanize', function () {
|
||||||
|
return gulp.src('dist/index.html')
|
||||||
|
.pipe(polybuild({maximumCrush: true}))
|
||||||
|
.pipe(gulp.dest('dist/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// If you require more granular configuration of Vulcanize
|
||||||
|
// than polybuild provides, follow instructions from readme at:
|
||||||
|
// https://github.com/PolymerElements/polymer-starter-kit/#if-you-require-more-granular-configuration-of-vulcanize-than-polybuild-provides-you-an-option-by
|
||||||
|
|
||||||
|
// Rename Polybuild's index.build.html to index.html
|
||||||
|
gulp.task('rename-index', function () {
|
||||||
|
gulp.src('dist/index.build.html')
|
||||||
|
.pipe($.rename('index.html'))
|
||||||
|
.pipe(gulp.dest('dist/'));
|
||||||
|
return del(['dist/index.build.html']);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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('{elements,scripts,styles}/**/*.*', {cwd: dir}, function(error, files) {
|
||||||
|
if (error) {
|
||||||
|
callback(error);
|
||||||
|
} else {
|
||||||
|
files.push('index.html', './', 'bower_components/webcomponentsjs/webcomponents-lite.min.js');
|
||||||
|
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 (cb) {
|
||||||
|
del(['.tmp', 'dist'], cb);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Watch files for changes & reload
|
||||||
|
gulp.task('serve', ['styles', 'elements', 'images'], 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() ],
|
||||||
|
routes: {
|
||||||
|
'/bower_components': 'bower_components'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.watch(['app/**/*.html'], reload);
|
||||||
|
gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
|
||||||
|
gulp.watch(['app/elements/**/*.css'], ['elements', reload]);
|
||||||
|
gulp.watch(['app/{scripts,elements}/**/{*.js,*.html}'], ['jshint']);
|
||||||
|
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' after 'rename-index' if you are going to use service workers.
|
||||||
|
runSequence(
|
||||||
|
['copy', 'styles'],
|
||||||
|
'elements',
|
||||||
|
['jshint', 'images', 'fonts', 'html'],
|
||||||
|
'vulcanize','rename-index', // 'cache-config',
|
||||||
|
cb);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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) {}
|
||||||
39
websrc/package.json
Normal file
39
websrc/package.json
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
{
|
||||||
|
"private": true,
|
||||||
|
"devDependencies": {
|
||||||
|
"browser-sync": "^2.7.7",
|
||||||
|
"connect-history-api-fallback": "^1.1.0",
|
||||||
|
"del": "^1.1.1",
|
||||||
|
"glob": "^5.0.6",
|
||||||
|
"gulp": "^3.8.5",
|
||||||
|
"gulp-autoprefixer": "^2.1.0",
|
||||||
|
"gulp-cache": "^0.2.8",
|
||||||
|
"gulp-changed": "^1.0.0",
|
||||||
|
"gulp-cssmin": "^0.1.7",
|
||||||
|
"gulp-if": "^1.2.1",
|
||||||
|
"gulp-imagemin": "^2.2.1",
|
||||||
|
"gulp-jshint": "^1.6.3",
|
||||||
|
"gulp-load-plugins": "^0.10.0",
|
||||||
|
"gulp-minify-html": "^1.0.2",
|
||||||
|
"gulp-rename": "^1.2.0",
|
||||||
|
"gulp-replace": "^0.5.3",
|
||||||
|
"gulp-size": "^1.0.0",
|
||||||
|
"gulp-uglify": "^1.2.0",
|
||||||
|
"gulp-useref": "^1.1.2",
|
||||||
|
"gulp-vulcanize": "^6.0.0",
|
||||||
|
"jshint-stylish": "^2.0.0",
|
||||||
|
"merge-stream": "^0.1.7",
|
||||||
|
"polybuild": "^1.0.5",
|
||||||
|
"require-dir": "^0.3.0",
|
||||||
|
"run-sequence": "^1.0.2",
|
||||||
|
"vulcanize": ">= 1.4.2",
|
||||||
|
"web-component-tester": "^3.1.3"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "gulp test:local",
|
||||||
|
"start": "gulp serve"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=0.10.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
14
websrc/styles/main.css
Normal file
14
websrc/styles/main.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
/*
|
||||||
|
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;
|
||||||
|
}
|
||||||
8
websrc/wct.conf.json
Normal file
8
websrc/wct.conf.json
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"suites": ["app/test"],
|
||||||
|
"webserver": {
|
||||||
|
"pathMappings": [
|
||||||
|
{"/components/polymer-starter-kit/app/bower_components": "bower_components"}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user