refs #1837 : update - library for layout / template

Needlworks · Dec 5, 2016 · 987a7a8 · 987a7a8
1 parent 0eecad5
commit 987a7a8
Show file tree

Hide file tree

Showing 82 changed files with 1,571 additions and 764 deletions.
diff --git a/resources/script/polymer/app-layout/.bower.json b/resources/script/polymer/app-layout/.bower.json
@@ -1,54 +1,54 @@
 {
   "name": "app-layout",
-  "version": "0.10.2",
+  "version": "0.10.6",
   "description": "A set of layout elements for your app",
   "authors": [
     "The Polymer Authors"
   ],
-  "private": true,
+  "license": "https://polymer.github.io/LICENSE.txt",
   "homepage": "https://github.com/PolymerElements/app-layout",
   "repository": {
     "type": "git",
     "url": "git://github.com/PolymerElements/app-layout"
   },
   "main": "app-layout.html",
-  "license": "http://polymer.github.io/LICENSE.txt",
-  "ignore": [],
   "dependencies": {
-    "polymer": "polymer/polymer#^1.6.0",
-    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
-    "iron-media-query": "polymerelements/iron-media-query#^1.0.0",
-    "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
-    "iron-scroll-target-behavior": "polymerelements/iron-scroll-target-behavior#^1.0.0"
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
+    "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
+    "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
+    "iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0",
+    "polymer": "Polymer/polymer#^1.6.0"
   },
   "devDependencies": {
-    "font-roboto": "polymerelements/font-roboto#^1.0.0",
-    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
-    "iron-icon": "polymerelements/iron-icon#^1.0.0",
-    "iron-icons": "polymerelements/iron-icons#^1.0.0",
-    "iron-list": "polymerelements/iron-list#^1.0.0",
-    "iron-pages": "polymerelements/iron-pages#^1.0.0",
-    "iron-scroll-threshold": "polymerelements/iron-scroll-threshold#^1.0.0",
-    "paper-card": "polymerelements/paper-card#^1.0.0",
-    "paper-fab": "polymerelements/paper-fab#^1.0.0",
-    "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
-    "paper-item": "polymerelements/paper-item#^1.0.0",
-    "paper-menu": "polymerelements/paper-menu#^1.0.0",
-    "paper-tabs": "polymerelements/paper-tabs#^1.0.0",
-    "paper-progress": "polymerelements/paper-progress#~1.0.2",
-    "paper-styles": "polymerelements/paper-styles#^1.0.0",
-    "paper-spinner": "polymerelements/paper-spinner#^1.0.0",
-    "test-fixture": "polymerelements/test-fixture#^1.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
-    "web-component-tester": "^4.0.0"
+    "font-roboto": "PolymerElements/font-roboto#^1.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
+    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
+    "iron-list": "PolymerElements/iron-list#^1.0.0",
+    "iron-pages": "PolymerElements/iron-pages#^1.0.0",
+    "iron-scroll-threshold": "PolymerElements/iron-scroll-threshold#^1.0.0",
+    "paper-card": "PolymerElements/paper-card#^1.0.0",
+    "paper-fab": "PolymerElements/paper-fab#^1.0.0",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "paper-menu": "PolymerElements/paper-menu#^1.0.0",
+    "paper-progress": "PolymerElements/paper-progress#~1.0.2",
+    "paper-spinner": "PolymerElements/paper-spinner#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "paper-tabs": "PolymerElements/paper-tabs#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "^4.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "_release": "0.10.2",
+  "ignore": [],
+  "private": true,
+  "_release": "0.10.6",
   "_resolution": {
     "type": "version",
-    "tag": "v0.10.2",
-    "commit": "65311d2e5447b5f82018d01dc308c216cecd9d71"
+    "tag": "v0.10.6",
+    "commit": "0d8311c582c2e83d7443b3952752abcd6354fe33"
   },
-  "_source": "git://github.com/polymerelements/app-layout.git",
+  "_source": "https://github.com/polymerelements/app-layout.git",
   "_target": "^0.10.1",
   "_originalSource": "polymerelements/app-layout"
 }
diff --git a/resources/script/polymer/app-layout/.travis.yml b/resources/script/polymer/app-layout/.travis.yml
@@ -1,22 +1,23 @@
 language: node_js
 sudo: required
 dist: trusty
-node_js: stable
+node_js: '6'
 addons:
-  sauce_connect: true
-  firefox: '46.0'
+  firefox: latest
   apt:
     sources:
-    - google-chrome
+      - google-chrome
     packages:
-    - google-chrome-stable
+      - google-chrome-stable
 before_script:
-- npm install -g bower polylint web-component-tester
-- bower install
+  - npm install -g bower polylint web-component-tester
+  - bower install
 script:
-- xvfb-run wct
-- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s 'default'; fi
+  - xvfb-run wct
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
 env:
   global:
-  - secure: aLLRRtzSz/QImXYAEO7lBZcmp8xhXH28J6HONXOboy8H2eQmie0kAG8EIL1EYw1OMomAwawvh9BMJqhJHiLg23h6+asXdEaYefF+QDKIKh11dCZFUPJ71DAwKOLQpL+3D4iV/Wmndr4dIEGASCUdPufoBbmG1ZVY5dGkQYG8TO7mAOwzCciPNRaHws5fkMhWbm+tzWCDrIoMOWKDBZiAk4Rm7pXQ7c+Vnr07R0qrWlsCuiaMMc9J34q0bqrzmnV+EWjqKHXzhv1hJEbKHvO73cJorwtdpkeqLi1UsdkDCBuA8soxLSicCcpFe7eMkpr9WrbuJZ5QOEVlq+qb3aW9tH5wABiXSL4K8J7otvaXgRIaTg6i5pRGrivmNAOS6YXzT7oQAdmfFxHSpUr4OeV3Nvm9Ik7p8sOLHMGj4Eo00djjPtbO9MutF3CBLvYuEmdfa0BRXe3WqeJdaCVyYiMAPG7lYqz+aNAl6O4qAVRLMzXIRl/+vF2cso/rG7SsZORSuMk34NZhdXiHlBI+e5lyNrdrCyirukZmTd5rLiyEfbO9ty8BgxQ5MlomEXoZM3GYgFKgViYiMFQ8QuaGBUJBdeyo0IJiqp7ohcbUZq46XOXz//5hOOcp4ddgMNNjyIqjGmBJff0+oYalhJXK56UivTAXhoiXDLIQXHsJ3rUexcE=
-  - secure: TqRTXbcw5+a/XY/pb3rh8a/PkbLluNZKdN9FI/ZfHOVJu1xWCQSPUcI8XNmnPks/SVz8aCSWpPi4dh6oa8k1FXo7Q0lQ+2wAdfe7imnqoj6YIt0guHbe/YWGZoUmzuptSgufygzKGRh37oZx8fOH9bMb0vyMxCTZs4PcTeaqhmRQRHfVK/W2dyDRnSuHior5niKnboLXXR+XitcT3k+0S/jUGUwice0BivjHPpB9CNgm2lChRX3tHIru4iE3XW5U4+8Eg4SulLXd8DybQ3hzMIEmapPU7T/EO/xpIe1hIfVbJBY0LB4Ri5GGCK00OEDEcHSSJmubJ4usn2jitAyfztXg8BLEg8d/1BSTmAF+l7gUKgqhJ968Prc09EUdnyBPwRmnt1sPcZpDaDZuegg+y5Gx3qmWuqDAVSsHw08BbtK37ppHFRwswtRUMFOQKuOQXM74uI10BOWshONGitqKNYFvXniZxqO7Ezc/LSAfxSn278ews/KRNl/elGLgOtw92cJPXw515h56FvWb7gc1cm5WtJir2NwX7KlhHU3IPoDYq3QDKKQ63sPmUGPhCBAtfBGRDd5Os1MbcoyChpMr4osxHv03PNvQPY5hKjg2mUnb5QwMpJiEPs70CLXdx8Q7psX56RKjDHunFpXf5M4/SQIEmVFVi2PLoUymWlpvdBc=
+    - secure: >-
+        aLLRRtzSz/QImXYAEO7lBZcmp8xhXH28J6HONXOboy8H2eQmie0kAG8EIL1EYw1OMomAwawvh9BMJqhJHiLg23h6+asXdEaYefF+QDKIKh11dCZFUPJ71DAwKOLQpL+3D4iV/Wmndr4dIEGASCUdPufoBbmG1ZVY5dGkQYG8TO7mAOwzCciPNRaHws5fkMhWbm+tzWCDrIoMOWKDBZiAk4Rm7pXQ7c+Vnr07R0qrWlsCuiaMMc9J34q0bqrzmnV+EWjqKHXzhv1hJEbKHvO73cJorwtdpkeqLi1UsdkDCBuA8soxLSicCcpFe7eMkpr9WrbuJZ5QOEVlq+qb3aW9tH5wABiXSL4K8J7otvaXgRIaTg6i5pRGrivmNAOS6YXzT7oQAdmfFxHSpUr4OeV3Nvm9Ik7p8sOLHMGj4Eo00djjPtbO9MutF3CBLvYuEmdfa0BRXe3WqeJdaCVyYiMAPG7lYqz+aNAl6O4qAVRLMzXIRl/+vF2cso/rG7SsZORSuMk34NZhdXiHlBI+e5lyNrdrCyirukZmTd5rLiyEfbO9ty8BgxQ5MlomEXoZM3GYgFKgViYiMFQ8QuaGBUJBdeyo0IJiqp7ohcbUZq46XOXz//5hOOcp4ddgMNNjyIqjGmBJff0+oYalhJXK56UivTAXhoiXDLIQXHsJ3rUexcE=
+    - secure: >-
+        TqRTXbcw5+a/XY/pb3rh8a/PkbLluNZKdN9FI/ZfHOVJu1xWCQSPUcI8XNmnPks/SVz8aCSWpPi4dh6oa8k1FXo7Q0lQ+2wAdfe7imnqoj6YIt0guHbe/YWGZoUmzuptSgufygzKGRh37oZx8fOH9bMb0vyMxCTZs4PcTeaqhmRQRHfVK/W2dyDRnSuHior5niKnboLXXR+XitcT3k+0S/jUGUwice0BivjHPpB9CNgm2lChRX3tHIru4iE3XW5U4+8Eg4SulLXd8DybQ3hzMIEmapPU7T/EO/xpIe1hIfVbJBY0LB4Ri5GGCK00OEDEcHSSJmubJ4usn2jitAyfztXg8BLEg8d/1BSTmAF+l7gUKgqhJ968Prc09EUdnyBPwRmnt1sPcZpDaDZuegg+y5Gx3qmWuqDAVSsHw08BbtK37ppHFRwswtRUMFOQKuOQXM74uI10BOWshONGitqKNYFvXniZxqO7Ezc/LSAfxSn278ews/KRNl/elGLgOtw92cJPXw515h56FvWb7gc1cm5WtJir2NwX7KlhHU3IPoDYq3QDKKQ63sPmUGPhCBAtfBGRDd5Os1MbcoyChpMr4osxHv03PNvQPY5hKjg2mUnb5QwMpJiEPs70CLXdx8Q7psX56RKjDHunFpXf5M4/SQIEmVFVi2PLoUymWlpvdBc=
diff --git a/resources/script/polymer/app-layout/README.md b/resources/script/polymer/app-layout/README.md
@@ -1,8 +1,76 @@
-# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout)
-
+# App Layout [![Build Status](https://travis-ci.org/PolymerElements/app-layout.svg?branch=master)](https://travis-ci.org/PolymerElements/app-layout) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/PolymerElements/app-layout)
 
 [<img src="https://app-layout-assets.appspot.com/assets/docs/app-layout.png" width="300" height="210">](https://polymerelements.github.io/app-layout/)
 
+<!---
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
+    <link rel="import" href="app-drawer/app-drawer.html">
+    <link rel="import" href="app-header/app-header.html">
+    <link rel="import" href="app-toolbar/app-toolbar.html">
+    <link rel="import" href="demo/sample-content.html">
+    <link rel="import" href="../iron-icons/iron-icons.html">
+    <link rel="import" href="../paper-icon-button/paper-icon-button.html">
+    <link rel="import" href="../paper-progress/paper-progress.html">
+    <style is="custom-style">
+      body {
+        margin: 0;
+        font-family: 'Roboto', 'Noto', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background: #f1f1f1;
+      }
+      app-toolbar {
+        background-color: #4285f4;
+        color: #fff;
+      }
+      paper-icon-button + [main-title] {
+        margin-left: 24px;
+      }
+      paper-progress {
+        display: block;
+        width: 100%;
+        --paper-progress-active-color: rgba(255, 255, 255, 0.5);
+        --paper-progress-container-color: transparent;
+      }
+      app-header {
+        @apply(--layout-fixed-top);
+        color: #fff;
+        --app-header-background-rear-layer: {
+          background-color: #ef6c00;
+        };
+      }
+      app-drawer {
+        --app-drawer-scrim-background: rgba(0, 0, 100, 0.8);
+        --app-drawer-content-container: {
+          background-color: #B0BEC5;
+        }
+      }
+      sample-content {
+        padding-top: 64px;
+      }
+    </style>
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<app-header reveals>
+  <app-toolbar>
+    <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
+    <div main-title>My app</div>
+    <paper-icon-button icon="delete"></paper-icon-button>
+    <paper-icon-button icon="search"></paper-icon-button>
+    <paper-icon-button icon="close"></paper-icon-button>
+    <paper-progress value="10" indeterminate bottom-item></paper-progress>
+  </app-toolbar>
+</app-header>
+<app-drawer id="drawer" swipe-open></app-drawer>
+<sample-content size="10"></sample-content>
+```
+
 https://polymerelements.github.io/app-layout/
 
 For additional documentation, please check out [Responsive app layout](https://www.polymer-project.org/1.0/toolbox/app-layout).

diff --git a/resources/script/polymer/app-layout/app-box/README.md b/resources/script/polymer/app-layout/app-box/README.md
@@ -10,9 +10,10 @@ rate than the foreground.
 </app-box>
 ```
 
-Notice the `background` attribute in the `img` element; this attribute specifies that that image is used as the background.
-By adding the background to the light dom, you can compose backgrounds that can change dynamically.
-Alternatively, the mixin `--app-box-background-front-layer` allows to style the background. For example:
+Notice the `background` attribute in the `img` element; this attribute specifies that that
+image is used as the background. By adding the background to the light dom, you can compose
+backgrounds that can change dynamically. Alternatively, the mixin `--app-box-background-front-layer`
+ allows to style the background. For example:
 
 ```css
   .parallaxAppBox {
@@ -30,14 +31,39 @@ Finally, app-box can have content inside. For example:
 </app-box>
 ```
 
-## Scroll effects
+#### Importing the effects
 
-Effect name | Description
-----------------|-------------
-`parallax-background` | A parallax effect
+To use the scroll effects, you must explicitly import them in addition to `app-box`:
+
+```html
+<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
+```
+
+#### List of effects
+
+* **parallax-background**
+A simple parallax effect that vertically translates the backgrounds based on a fraction
+of the scroll position. For example:
+
+```css
+app-header {
+  --app-header-background-front-layer: {
+    background-image: url(...);
+  };
+}
+```
+```html
+<app-header style="height: 300px;" effects="parallax-background">
+  <app-toolbar>App name</app-toolbar>
+</app-header>
+```
+
+The fraction determines how far the background moves relative to the scroll position.
+This value can be assigned via the `scalar` config value and it is typically a value
+between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.
 
 ## Styling
 
 Mixin | Description | Default
 ----------------|-------------|----------
-`--app-box-background-front-layer` | Applies to the front layer of the background | {}
+`--app-box-background-front-layer` | Applies to the front layer of the background | {}
diff --git a/resources/script/polymer/app-layout/app-box/app-box.html b/resources/script/polymer/app-layout/app-box/app-box.html
@@ -24,9 +24,10 @@
 </app-box>
 ```
 
-Notice the `background` attribute in the `img` element; this attribute specifies that that image is used as the background.
-By adding the background to the light dom, you can compose backgrounds that can change dynamically.
-Alternatively, the mixin `--app-box-background-front-layer` allows to style the background. For example:
+Notice the `background` attribute in the `img` element; this attribute specifies that that
+image is used as the background. By adding the background to the light dom, you can compose
+backgrounds that can change dynamically. Alternatively, the mixin `--app-box-background-front-layer`
+allows to style the background. For example:
 
 ```css
   .parallaxAppBox {
@@ -44,11 +45,36 @@ <h2>Sub title</h2>
 </app-box>
 ```
 
-## Scroll effects
+#### Importing the effects
 
-Effect name | Description
-----------------|-------------
-`parallax-background` | A parallax effect
+To use the scroll effects, you must explicitly import them in addition to `app-box`:
+
+```html
+<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
+```
+
+#### List of effects
+
+* **parallax-background**
+A simple parallax effect that vertically translates the backgrounds based on a fraction
+of the scroll position. For example:
+
+```css
+app-header {
+  --app-header-background-front-layer: {
+    background-image: url(...);
+  };
+}
+```
+```html
+<app-header style="height: 300px;" effects="parallax-background">
+  <app-toolbar>App name</app-toolbar>
+</app-header>
+```
+
+The fraction determines how far the background moves relative to the scroll position.
+This value can be assigned via the `scalar` config value and it is typically a value
+between 0 and 1 inclusive. If `scalar=0`, the background doesn't move away from the header.
 
 ## Styling
 
@@ -67,31 +93,24 @@ <h2>Sub title</h2>
     <style>
       :host {
         position: relative;
-
         display: block;
       }
 
       #background {
         @apply(--layout-fit);
-
         overflow: hidden;
-
         height: 100%;
       }
 
       #backgroundFrontLayer {
         min-height: 100%;
-
         pointer-events: none;
-
         background-size: cover;
-
         @apply(--app-box-background-front-layer);
       }
 
       #contentContainer {
         position: relative;
-
         width: 100%;
         height: 100%;
       }