Commit 0a86ccc845c0adfc26b513ce558898729c58dd9d

Authored by Luigi Serra
1 parent c844388d

graph and datalets updates

Showing 29 changed files with 1371 additions and 175 deletions
bower.json
@@ -16,6 +16,7 @@ @@ -16,6 +16,7 @@
16 "dependencies": { 16 "dependencies": {
17 "google-map": "GoogleWebComponents/google-map#^1.0.0", 17 "google-map": "GoogleWebComponents/google-map#^1.0.0",
18 "paper-fab-transitions": "~0.1.0", 18 "paper-fab-transitions": "~0.1.0",
  19 + "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#~1.0.14",
19 "polymer": "Polymer/polymer#^1.0.0" 20 "polymer": "Polymer/polymer#^1.0.0"
20 } 21 }
21 } 22 }
bower_components/paper-scroll-header-panel/.bower.json
1 { 1 {
2 "name": "paper-scroll-header-panel", 2 "name": "paper-scroll-header-panel",
3 "description": "A header bar with scrolling behavior", 3 "description": "A header bar with scrolling behavior",
4 - "version": "1.0.8", 4 + "version": "1.0.14",
5 "license": "http://polymer.github.io/LICENSE.txt", 5 "license": "http://polymer.github.io/LICENSE.txt",
6 "private": true, 6 "private": true,
7 "authors": "The Polymer Authors", 7 "authors": "The Polymer Authors",
@@ -11,20 +11,18 @@ @@ -11,20 +11,18 @@
11 "layout", 11 "layout",
12 "responsive" 12 "responsive"
13 ], 13 ],
14 - "main": [  
15 - "paper-scroll-header-panel.html"  
16 - ], 14 + "main": "paper-scroll-header-panel.html",
17 "repository": { 15 "repository": {
18 "type": "git", 16 "type": "git",
19 "url": "git://github.com/PolymerElements/paper-scroll-header-panel.git" 17 "url": "git://github.com/PolymerElements/paper-scroll-header-panel.git"
20 }, 18 },
21 "dependencies": { 19 "dependencies": {
22 "polymer": "Polymer/polymer#^1.0.0", 20 "polymer": "Polymer/polymer#^1.0.0",
23 - "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",  
24 "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0" 21 "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
25 }, 22 },
26 "devDependencies": { 23 "devDependencies": {
27 "paper-styles": "PolymerElements/paper-styles#^1.0.0", 24 "paper-styles": "PolymerElements/paper-styles#^1.0.0",
  25 + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
28 "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", 26 "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
29 "iron-media-query": "PolymerElements/iron-media-query#^1.0.0", 27 "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
30 "iron-icons": "PolymerElements/iron-icons#^1.0.0", 28 "iron-icons": "PolymerElements/iron-icons#^1.0.0",
@@ -35,14 +33,16 @@ @@ -35,14 +33,16 @@
35 "web-component-tester": "*", 33 "web-component-tester": "*",
36 "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" 34 "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
37 }, 35 },
  36 + "ignore": [],
38 "homepage": "https://github.com/PolymerElements/paper-scroll-header-panel", 37 "homepage": "https://github.com/PolymerElements/paper-scroll-header-panel",
39 - "_release": "1.0.8", 38 + "_release": "1.0.14",
40 "_resolution": { 39 "_resolution": {
41 "type": "version", 40 "type": "version",
42 - "tag": "v1.0.8",  
43 - "commit": "e1f1823fdf6e496e6ef45340d7cd5664a6a87fc9" 41 + "tag": "v1.0.14",
  42 + "commit": "ec62c5a1d88d4e5f0f3959586ab9633110912c92"
44 }, 43 },
45 "_source": "git://github.com/PolymerElements/paper-scroll-header-panel.git", 44 "_source": "git://github.com/PolymerElements/paper-scroll-header-panel.git",
46 - "_target": "^1.0.0",  
47 - "_originalSource": "PolymerElements/paper-scroll-header-panel" 45 + "_target": "~1.0.14",
  46 + "_originalSource": "PolymerElements/paper-scroll-header-panel",
  47 + "_direct": true
48 } 48 }
49 \ No newline at end of file 49 \ No newline at end of file
bower_components/paper-scroll-header-panel/.travis.yml 0 โ†’ 100755
  1 +language: node_js
  2 +sudo: false
  3 +before_script:
  4 + - npm install web-component-tester
  5 + - npm install bower
  6 + - 'export PATH=$PWD/node_modules/.bin:$PATH'
  7 + - bower install
  8 +env:
  9 + global:
  10 + - secure: XFAsPXpYVWqsvZ5NX0ueW63LYhGN560ZPdFbntpau2vYIiuLKwe5N5y3pjw+zE1aJ+MV/JcW7snvP9mimdBQoKj77PLFqzo6wSozaDeV8Zx7PitkztC3rByn9WDVLO8qmlWGqFfedY24Whd4YIHAbBk7V89vaIFPZToTUm0rlUKlsaBWlhViEeG9YxmHoIUXJoRwq9pZ6enFYGIbritYlvcdMnOmTN8AJXqe2hmFel1TzE+e0z67yJdzEFBfkEgGgTAmBKpwFugFyUupOq9ZeFqoD2rg05xgfmtcUv7wrJei6/XqQ5gwbRFS+1Sbjv9AsY02hKFqmToD8a+IXjnxRB2s3OQOF/GFH70RRUeeQW+VOp9jFUaiSMdTghHhj5uMqEQPT0sxvaB+si9R8+g1cYJLaKgT3HoeJtFjcaDYwKkAiFK0ZWhL84JFbxWRqvnAf3gdgK+UWrs517amVaV0cyBjyzrIPtrgACNzJyON32sZEfuLDAKtDfpHf18rfY/QLRO/D8GjB+aWSDA2FzDe7Lrdfhrfgw/fnHq9A4ohS4swBeW8IUC5imN4Eh3FqB/GjVz6q7H0cfmxMre+b0RFCK74HroFW+or/tG5K+Tw7Z51j7NwLt8YGwyfsUDzUZpQ7jUbnW3y/5HJGHov81LkQPESZP4KxWSEYTwXnWrLKk4=
  11 + - secure: xJhCDzTM2Ud1hx17cjcMDRtI0+IzrZbvY1vYK6OhX//fP1JTatIHOsXvBVFYfHCdutib6zkKaLTi8AF3oBYdZd7BF1c8Pfv1woZtML5hKb9Ti5VdGsino8Hr0IrInCQaqE+VM+C0Jn9xbsYYMCIMvI77L8kM6HY6Qno8S3Iw99mnxZxWIOKlcwCANlOPGNxOQ3wwJITYStSniBWIwS+51yjlWL1KOhRFWi3m8tFa/eGd4dO13jUb00GPRSluzGXevhtXX78niOB53a6GLT1uObx+zsStvDJeH6HEaXzamvQFMIPtwTCIPlM90AYCaktcgrIfJeRzjG8TOsWz/DuISsRKuuZ5N+yUKp8etD1YzgR3CqQq/NqeNp8TgsKwmifLFiOv75kCvKSvDpRvNjeimwW7jI+EzM0VKewdpJGSMywhHCWTEk3qZ0Vajma6OQcV7FjpwUfheSAAs4j6vYy4/EsKcfAQ9S9eEM85yOlM2NdoNgoQsxUNSM0z01wpxP5c70bgsA3eZRSXIdPXXrd4AuyMzN/o9gkxiTSeWASE4r+OqIJfoXDXYbIH+FtGBgJAE1oPbFDolXC6HNb3C2VwsMrEJP5FMHeqy5FNqLiy0cyl4GfxzNFQz/mIPA/QOpZ80UFIfOl8ptPn2tDloV4mO9TRiE0eXHbr4UOoVH677ew=
  12 +node_js: 4
  13 +addons:
  14 + firefox: latest
  15 + apt:
  16 + sources:
  17 + - google-chrome
  18 + packages:
  19 + - google-chrome-stable
  20 +script:
  21 + - xvfb-run wct
  22 + - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
bower_components/paper-scroll-header-panel/CONTRIBUTING.md 0 โ†’ 100755
  1 +
  2 +<!--
  3 +This file is autogenerated based on
  4 +https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
  5 +
  6 +If you edit that file, it will get updated everywhere else.
  7 +If you edit this file, your changes will get overridden :)
  8 +-->
  9 +# Polymer Elements
  10 +## Guide for Contributors
  11 +
  12 +Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
  13 +
  14 +### Filing Issues
  15 +
  16 +**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
  17 +
  18 + 1. **Who will use the feature?** _โ€œAs someone filling out a formโ€ฆโ€_
  19 + 2. **When will they use the feature?** _โ€œWhen I enter an invalid valueโ€ฆโ€_
  20 + 3. **What is the userโ€™s goal?** _โ€œI want to be visually notified that the value needs to be correctedโ€ฆโ€_
  21 +
  22 +**If you are filing an issue to report a bug**, please provide:
  23 +
  24 + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
  25 +
  26 + ```markdown
  27 + The `paper-foo` element causes the page to turn pink when clicked.
  28 +
  29 + ## Expected outcome
  30 +
  31 + The page stays the same color.
  32 +
  33 + ## Actual outcome
  34 +
  35 + The page turns pink.
  36 +
  37 + ## Steps to reproduce
  38 +
  39 + 1. Put a `paper-foo` element in the page.
  40 + 2. Open the page in a web browser.
  41 + 3. Click the `paper-foo` element.
  42 + ```
  43 +
  44 + 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
  45 +
  46 + 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
  47 +
  48 +### Submitting Pull Requests
  49 +
  50 +**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
  51 +
  52 +When submitting pull requests, please provide:
  53 +
  54 + 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
  55 +
  56 + ```markdown
  57 + (For a single issue)
  58 + Fixes #20
  59 +
  60 + (For multiple issues)
  61 + Fixes #32, #40
  62 + ```
  63 +
  64 + 2. **A succinct description of the design** used to fix any related issues. For example:
  65 +
  66 + ```markdown
  67 + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
  68 + ```
  69 +
  70 + 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
  71 +
  72 +If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so donโ€™t be afraid to ask us if you need help with that!
bower_components/paper-scroll-header-panel/README.md
1 -paper-scroll-header-panel  
2 -========================  
3 1
4 -`paper-scroll-header-panel` contains a header section and a content section. The header is initially on the top part of the view but it scrolls away with the rest of the scrollable content. Upon scrolling slightly up at any point, the header scrolls back into view. This saves screen space and allows users to access important controls by easily moving them back to the view. 2 +<!---
5 3
6 -Important: The `paper-scroll-header-panel` will not display if its parent does not have a height. Using layout classes, you can easily make the `paper-scroll-header-panel` fill the screen 4 +This README is automatically generated from the comments in these files:
  5 +paper-scroll-header-panel.html
  6 +
  7 +Edit those files, and our readme bot will duplicate them over here!
  8 +Edit this file, and the bot will squash your changes :)
  9 +
  10 +-->
  11 +
  12 +[![Build Status](https://travis-ci.org/PolymerElements/paper-scroll-header-panel.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-scroll-header-panel)
  13 +
  14 +_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-scroll-header-panel)_
  15 +
  16 +
  17 +##&lt;paper-scroll-header-panel&gt;
  18 +
  19 +
  20 +Material design: [Scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)
  21 +
  22 +`paper-scroll-header-panel` contains a header section and a content section. The
  23 +header is initially on the top part of the view but it scrolls away with the
  24 +rest of the scrollable content. Upon scrolling slightly up at any point, the
  25 +header scrolls back into view. This saves screen space and allows users to
  26 +access important controls by easily moving them back to the view.
  27 +
  28 +__Important:__ The `paper-scroll-header-panel` will not display if its parent does not have a height.
  29 +
  30 +Using [layout classes](https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes) or custom properties, you can easily make the `paper-scroll-header-panel` fill the screen
7 31
8 ```html 32 ```html
9 <body class="fullbleed layout vertical"> 33 <body class="fullbleed layout vertical">
10 <paper-scroll-header-panel class="flex"> 34 <paper-scroll-header-panel class="flex">
11 <paper-toolbar> 35 <paper-toolbar>
12 - Hello World! 36 + <div>Hello World!</div>
13 </paper-toolbar> 37 </paper-toolbar>
14 </paper-scroll-header-panel> 38 </paper-scroll-header-panel>
15 </body> 39 </body>
16 ``` 40 ```
17 -or, if you would prefer to do it in CSS, just give html, body, and `paper-scroll-header-panel` a height of 100%: 41 +
  42 +or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%:
  43 +
18 ```css 44 ```css
19 html, body { 45 html, body {
20 height: 100%; 46 height: 100%;
@@ -24,7 +50,9 @@ paper-scroll-header-panel { @@ -24,7 +50,9 @@ paper-scroll-header-panel {
24 height: 100%; 50 height: 100%;
25 } 51 }
26 ``` 52 ```
27 -`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element that represents a header by adding a `paper-header` class to it. 53 +
  54 +`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
  55 +that represents a header by adding a `paper-header` class to it.
28 56
29 ```html 57 ```html
30 <paper-scroll-header-panel> 58 <paper-scroll-header-panel>
@@ -33,24 +61,15 @@ paper-scroll-header-panel { @@ -33,24 +61,15 @@ paper-scroll-header-panel {
33 </paper-scroll-header-panel> 61 </paper-scroll-header-panel>
34 ``` 62 ```
35 63
36 -### Styling scroll-header-panel: 64 +### Styling
  65 +=======
37 66
38 -To change background for toolbar when it is at its full size: 67 +The following custom properties and mixins are available for styling:
39 68
40 -```css  
41 -paper-scroll-header-panel {  
42 - --paper-scroll-header-panel-full-header: {  
43 - background-color: red;  
44 - };  
45 -}  
46 -``` 69 +Custom property | Description | Default
  70 +----------------|-------------|----------
  71 +--paper-scroll-header-panel-full-header | To change background for toolbar when it is at its full size | {}
  72 +--paper-scroll-header-panel-condensed-header | To change the background for toolbar when it is condensed | {}
  73 +--paper-scroll-header-container | To override or add container styles | {}
47 74
48 -To change the background for toolbar when it is condensed:  
49 75
50 -```css  
51 -paper-scroll-header-panel {  
52 - --paper-scroll-header-panel-condensed-header: {  
53 - background-color: #f4b400;  
54 - };  
55 -}  
56 -```  
bower_components/paper-scroll-header-panel/bower.json
1 { 1 {
2 "name": "paper-scroll-header-panel", 2 "name": "paper-scroll-header-panel",
3 "description": "A header bar with scrolling behavior", 3 "description": "A header bar with scrolling behavior",
4 - "version": "1.0.8", 4 + "version": "1.0.14",
5 "license": "http://polymer.github.io/LICENSE.txt", 5 "license": "http://polymer.github.io/LICENSE.txt",
6 "private": true, 6 "private": true,
7 "authors": "The Polymer Authors", 7 "authors": "The Polymer Authors",
@@ -11,20 +11,18 @@ @@ -11,20 +11,18 @@
11 "layout", 11 "layout",
12 "responsive" 12 "responsive"
13 ], 13 ],
14 - "main": [  
15 - "paper-scroll-header-panel.html"  
16 - ], 14 + "main": "paper-scroll-header-panel.html",
17 "repository": { 15 "repository": {
18 "type": "git", 16 "type": "git",
19 "url": "git://github.com/PolymerElements/paper-scroll-header-panel.git" 17 "url": "git://github.com/PolymerElements/paper-scroll-header-panel.git"
20 }, 18 },
21 "dependencies": { 19 "dependencies": {
22 "polymer": "Polymer/polymer#^1.0.0", 20 "polymer": "Polymer/polymer#^1.0.0",
23 - "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",  
24 "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0" 21 "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
25 }, 22 },
26 "devDependencies": { 23 "devDependencies": {
27 "paper-styles": "PolymerElements/paper-styles#^1.0.0", 24 "paper-styles": "PolymerElements/paper-styles#^1.0.0",
  25 + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
28 "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", 26 "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
29 "iron-media-query": "PolymerElements/iron-media-query#^1.0.0", 27 "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
30 "iron-icons": "PolymerElements/iron-icons#^1.0.0", 28 "iron-icons": "PolymerElements/iron-icons#^1.0.0",
@@ -34,5 +32,6 @@ @@ -34,5 +32,6 @@
34 "test-fixture": "PolymerElements/test-fixture#^1.0.0", 32 "test-fixture": "PolymerElements/test-fixture#^1.0.0",
35 "web-component-tester": "*", 33 "web-component-tester": "*",
36 "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" 34 "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
37 - } 35 + },
  36 + "ignore": []
38 } 37 }
bower_components/paper-scroll-header-panel/demo/drawer-panel.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: Combine with paper-drawer-panel</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 + <link rel="import" href="../../paper-drawer-panel/paper-drawer-panel.html">
  26 +
  27 + <link rel="import" href="sample-content.html">
  28 +
  29 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  30 +
  31 + <style is="custom-style">
  32 +
  33 + paper-scroll-header-panel {
  34 + position: absolute;
  35 + top: 0;
  36 + right: 0;
  37 + bottom: 0;
  38 + left: 0;
  39 + background-color: var(--paper-grey-200, #eee);
  40 + }
  41 +
  42 + paper-toolbar {
  43 + background-color: var(--google-blue-500, #4285f4);
  44 + }
  45 +
  46 + paper-toolbar .title {
  47 + margin: 0 8px;
  48 + }
  49 +
  50 + paper-scroll-header-panel .content {
  51 + padding: 8px;
  52 + }
  53 +
  54 + </style>
  55 +
  56 +</head>
  57 +<body unresolved>
  58 +
  59 +
  60 + <paper-drawer-panel>
  61 + <paper-header-panel drawer>
  62 + <paper-toolbar>Menu</paper-toolbar>
  63 + </paper-header-panel>
  64 +
  65 +
  66 + <paper-scroll-header-panel main>
  67 +
  68 + <paper-toolbar>
  69 +
  70 + <paper-icon-button icon="arrow-back"></paper-icon-button>
  71 + <div class="flex title">Title</div>
  72 + <paper-icon-button icon="search"></paper-icon-button>
  73 + <paper-icon-button icon="more-vert"></paper-icon-button>
  74 +
  75 + </paper-toolbar>
  76 +
  77 + <div class="content">
  78 +
  79 + <sample-content size="100"></sample-content>
  80 +
  81 + </div>
  82 +
  83 + </paper-scroll-header-panel>
  84 +
  85 + </paper-drawer-panel>
  86 +
  87 +
  88 +
  89 +</body>
  90 +</html>
bower_components/paper-scroll-header-panel/demo/hide-header.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: demo3</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 +
  26 + <link rel="import" href="../../paper-styles/color.html">
  27 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  28 + <link rel="import" href="sample-content.html">
  29 +
  30 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  31 +
  32 + <style is="custom-style">
  33 +
  34 + paper-scroll-header-panel {
  35 + position: absolute;
  36 + top: 0;
  37 + right: 0;
  38 + bottom: 0;
  39 + left: 0;
  40 + background-color: var(--paper-grey-200, #eee);
  41 +
  42 + /* background for toolbar when it is at its full size */
  43 + --paper-scroll-header-panel-full-header: {
  44 + background-image: url(images/bg2.jpg);
  45 + background-position: top left;
  46 + };
  47 + }
  48 +
  49 + paper-toolbar {
  50 + background-color: transparent;
  51 + }
  52 +
  53 + paper-icon-button {
  54 + --paper-icon-button-ink-color: white;
  55 + }
  56 +
  57 + .content {
  58 + padding: 8px;
  59 + }
  60 +
  61 + .spacer {
  62 + @apply(--layout-flex);
  63 + }
  64 +
  65 + </style>
  66 +
  67 +</head>
  68 +<body unresolved>
  69 +
  70 + <paper-scroll-header-panel condenses no-reveal no-dissolve>
  71 +
  72 + <paper-toolbar class="tall">
  73 +
  74 + <div class="spacer"></div>
  75 + <paper-icon-button icon="search"></paper-icon-button>
  76 +
  77 + </paper-toolbar>
  78 +
  79 + <div class="content">
  80 +
  81 + <sample-content size="100"></sample-content>
  82 +
  83 + </div>
  84 +
  85 + </paper-scroll-header-panel>
  86 +
  87 +</body>
  88 +</html>
bower_components/paper-scroll-header-panel/demo/images/bg1.jpg 0 โ†’ 100755

55.6 KB

bower_components/paper-scroll-header-panel/demo/images/bg2.jpg

94.8 KB | W: | H:

59.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
bower_components/paper-scroll-header-panel/demo/images/bg3.jpg

78.8 KB | W: | H:

94.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
bower_components/paper-scroll-header-panel/demo/images/bg4.jpg 0 โ†’ 100755

81.6 KB

bower_components/paper-scroll-header-panel/demo/index.html
@@ -22,6 +22,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -22,6 +22,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
22 <link rel="import" href="../../paper-toolbar/paper-toolbar.html"> 22 <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
23 <link rel="import" href="../../iron-icons/iron-icons.html"> 23 <link rel="import" href="../../iron-icons/iron-icons.html">
24 <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> 24 <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 + <link rel="import" href="../../paper-styles/color.html">
  26 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
25 <link rel="import" href="sample-content.html"> 27 <link rel="import" href="sample-content.html">
26 28
27 <link rel="stylesheet" href="../../paper-styles/demo.css"> 29 <link rel="stylesheet" href="../../paper-styles/demo.css">
@@ -38,15 +40,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -38,15 +40,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
38 40
39 /* background for toolbar when it is at its full size */ 41 /* background for toolbar when it is at its full size */
40 --paper-scroll-header-panel-full-header: { 42 --paper-scroll-header-panel-full-header: {
41 - background-image: url(images/bg6.jpg); 43 + background-image: url(images/bg1.jpg);
  44 + background-position: left center;
42 }; 45 };
43 46
44 /* background for toolbar when it is condensed */ 47 /* background for toolbar when it is condensed */
45 --paper-scroll-header-panel-condensed-header: { 48 --paper-scroll-header-panel-condensed-header: {
46 - background-color: var(--paper-deep-orange-500, #ff5722); 49 + background-color: var(--paper-deep-purple-500);
47 }; 50 };
48 } 51 }
49 52
  53 + paper-icon-button {
  54 + --paper-icon-button-ink-color: white;
  55 + }
  56 +
50 paper-toolbar.tall { 57 paper-toolbar.tall {
51 background-color: transparent; 58 background-color: transparent;
52 } 59 }
@@ -63,6 +70,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -63,6 +70,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
63 padding: 8px; 70 padding: 8px;
64 } 71 }
65 72
  73 + .spacer {
  74 + @apply(--layout-flex);
  75 + }
  76 +
66 </style> 77 </style>
67 78
68 </head> 79 </head>
@@ -71,13 +82,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -71,13 +82,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
71 <paper-scroll-header-panel condenses> 82 <paper-scroll-header-panel condenses>
72 83
73 <paper-toolbar class="tall"> 84 <paper-toolbar class="tall">
74 -  
75 <paper-icon-button icon="arrow-back"></paper-icon-button> 85 <paper-icon-button icon="arrow-back"></paper-icon-button>
76 - <div class="flex"></div> 86 + <div class="spacer"></div>
77 <paper-icon-button icon="search"></paper-icon-button> 87 <paper-icon-button icon="search"></paper-icon-button>
78 <paper-icon-button icon="more-vert"></paper-icon-button> 88 <paper-icon-button icon="more-vert"></paper-icon-button>
79 <div class="bottom title">Title</div> 89 <div class="bottom title">Title</div>
80 -  
81 </paper-toolbar> 90 </paper-toolbar>
82 91
83 <div class="content"> 92 <div class="content">
bower_components/paper-scroll-header-panel/demo/keep-header.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: demo1</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 + <link rel="import" href="../../paper-styles/color.html">
  26 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  27 + <link rel="import" href="sample-content.html">
  28 +
  29 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  30 +
  31 + <style is="custom-style">
  32 +
  33 + paper-scroll-header-panel {
  34 + position: absolute;
  35 + top: 0;
  36 + right: 0;
  37 + bottom: 0;
  38 + left: 0;
  39 + background-color: var(--paper-grey-200, #eee);;
  40 + }
  41 +
  42 + paper-toolbar {
  43 + background-color: var(--google-blue-500, #4285f4);
  44 + }
  45 +
  46 + paper-toolbar .title {
  47 + margin: 0 8px;
  48 + }
  49 +
  50 + paper-scroll-header-panel .content {
  51 + padding: 8px;
  52 + }
  53 +
  54 + paper-icon-button {
  55 + --paper-icon-button-ink-color: white;
  56 + }
  57 +
  58 + .spacer {
  59 + @apply(--layout-flex);
  60 + }
  61 + </style>
  62 +
  63 +</head>
  64 +<body unresolved>
  65 +
  66 + <paper-scroll-header-panel fixed>
  67 +
  68 + <paper-toolbar>
  69 +
  70 + <paper-icon-button icon="arrow-back"></paper-icon-button>
  71 + <div class="spacer title">Title</div>
  72 + <paper-icon-button icon="search"></paper-icon-button>
  73 + <paper-icon-button icon="more-vert"></paper-icon-button>
  74 +
  75 + </paper-toolbar>
  76 +
  77 + <div class="content">
  78 +
  79 + <sample-content size="100"></sample-content>
  80 +
  81 + </div>
  82 +
  83 + </paper-scroll-header-panel>
  84 +
  85 +</body>
  86 +</html>
bower_components/paper-scroll-header-panel/demo/toggle-fixed-header.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: demo7</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 + <link rel="import" href="../../iron-media-query/iron-media-query.html">
  26 + <link rel="import" href="../../paper-styles/color.html">
  27 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  28 + <link rel="import" href="sample-content.html">
  29 +
  30 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  31 +
  32 + <style is="custom-style">
  33 +
  34 + paper-scroll-header-panel {
  35 + position: absolute;
  36 + top: 0;
  37 + right: 0;
  38 + bottom: 0;
  39 + left: 0;
  40 + background-color: var(--paper-grey-200, #eee);
  41 +
  42 + /* background for toolbar when it is at its full size */
  43 + --paper-scroll-header-panel-full-header: {
  44 + background-image: url(images/bg2.jpg);
  45 + background-position: left bottom;
  46 + };
  47 +
  48 + /* background for toolbar when it is condensed */
  49 + --paper-scroll-header-panel-condensed-header: {
  50 + background-color: var(--google-yellow-500, #f4b400);
  51 + };
  52 + }
  53 +
  54 + paper-toolbar.tall {
  55 + background-color: transparent;
  56 + }
  57 +
  58 + paper-toolbar.tall .title {
  59 + font-size: 40px;
  60 + margin-left: 60px;
  61 +
  62 + -webkit-transform-origin: left center;
  63 + transform-origin: left center;
  64 + }
  65 +
  66 + paper-icon-button {
  67 + --paper-icon-button-ink-color: white;
  68 + }
  69 +
  70 + .content {
  71 + padding: 8px;
  72 + }
  73 +
  74 + .spacer {
  75 + @apply(--layout-flex);
  76 + }
  77 + </style>
  78 +
  79 +</head>
  80 +<body unresolved>
  81 +
  82 + <paper-scroll-header-panel condenses>
  83 +
  84 + <paper-toolbar class="tall">
  85 +
  86 + <paper-icon-button icon="arrow-back"></paper-icon-button>
  87 + <div class="spacer"></div>
  88 + <paper-icon-button icon="search"></paper-icon-button>
  89 + <paper-icon-button icon="more-vert"></paper-icon-button>
  90 + <div class="bottom indent title">Title</div>
  91 +
  92 + </paper-toolbar>
  93 +
  94 + <div class="content">
  95 +
  96 + <h3>Resize window to toggle between fixed header and scrolled header</h3>
  97 + <sample-content size="100"></sample-content>
  98 +
  99 + </div>
  100 +
  101 + </paper-scroll-header-panel>
  102 +
  103 + <iron-media-query id="mquery" query="min-width: 600px"></iron-media-query>
  104 +
  105 + <script>
  106 +
  107 + // toggle fixed header based on screen size
  108 + var panel = document.querySelector('paper-scroll-header-panel');
  109 + var mquery = document.querySelector('#mquery');
  110 +
  111 + mquery.addEventListener('query-matches-changed', function() {
  112 + panel.fixed = mquery.queryMatches;
  113 + });
  114 +
  115 + panel.fixed = mquery.queryMatches;
  116 +
  117 + // custom transformation: scale header's title
  118 + var title = document.querySelector('.title');
  119 + addEventListener('paper-header-transform', function(e) {
  120 + var d = e.detail;
  121 + var m = d.height - d.condensedHeight;
  122 + var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
  123 +
  124 + Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
  125 + });
  126 +
  127 + </script>
  128 +
  129 +</body>
  130 +</html>
bower_components/paper-scroll-header-panel/demo/transform-header-1.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: Transform header</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 + <link rel="import" href="../../paper-styles/color.html">
  26 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  27 + <link rel="import" href="sample-content.html">
  28 +
  29 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  30 +
  31 +
  32 + <style is="custom-style">
  33 +
  34 + paper-scroll-header-panel {
  35 + position: absolute;
  36 + top: 0;
  37 + right: 0;
  38 + bottom: 0;
  39 + left: 0;
  40 + background-color: var(--paper-grey-200, #eee);
  41 +
  42 + /* background for toolbar when it is at its full size */
  43 + --paper-scroll-header-panel-full-header: {
  44 + background-image: url(images/bg1.jpg);
  45 + background-position: left center;
  46 + };
  47 +
  48 + /* background for toolbar when it is condensed */
  49 + --paper-scroll-header-panel-condensed-header: {
  50 + background-color: var(--paper-deep-purple-500);
  51 + };
  52 + }
  53 +
  54 + paper-icon-button {
  55 + --paper-icon-button-ink-color: white;
  56 + }
  57 +
  58 + paper-toolbar.tall {
  59 + background-color: transparent;
  60 + }
  61 +
  62 + paper-toolbar.tall .title {
  63 + font-size: 40px;
  64 + margin-left: 60px;
  65 +
  66 + -webkit-transform-origin: left center;
  67 + transform-origin: left center;
  68 + }
  69 +
  70 + .content {
  71 + padding: 8px;
  72 + }
  73 +
  74 + .spacer {
  75 + @apply(--layout-flex);
  76 + }
  77 +
  78 + </style>
  79 +
  80 +</head>
  81 +<body unresolved>
  82 +
  83 + <paper-scroll-header-panel condenses>
  84 +
  85 + <paper-toolbar class="tall">
  86 +
  87 + <paper-icon-button icon="arrow-back"></paper-icon-button>
  88 + <div class="spacer"></div>
  89 + <paper-icon-button icon="search"></paper-icon-button>
  90 + <paper-icon-button icon="more-vert"></paper-icon-button>
  91 + <div class="bottom title">Title</div>
  92 +
  93 + </paper-toolbar>
  94 +
  95 + <div class="content">
  96 +
  97 + <sample-content size="100"></sample-content>
  98 +
  99 + </div>
  100 +
  101 + </paper-scroll-header-panel>
  102 +
  103 + <script>
  104 +
  105 + // custom transformation: scale header's title
  106 + var title = document.querySelector('.title');
  107 + addEventListener('paper-header-transform', function(e) {
  108 + var d = e.detail;
  109 + var m = d.height - d.condensedHeight;
  110 + var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
  111 +
  112 + Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
  113 + });
  114 +
  115 + </script>
  116 +
  117 +</body>
  118 +</html>
bower_components/paper-scroll-header-panel/demo/transform-header-2.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: transform header</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 + <link rel="import" href="../../paper-styles/color.html">
  26 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  27 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  28 + <link rel="import" href="sample-content.html">
  29 +
  30 + <style is="custom-style">
  31 +
  32 + paper-scroll-header-panel {
  33 + position: absolute;
  34 + top: 0;
  35 + right: 0;
  36 + bottom: 0;
  37 + left: 0;
  38 + background-color: var(--paper-grey-200, #eee);
  39 + }
  40 +
  41 + paper-toolbar {
  42 + background-color: var(--google-blue-500, #4285f4);
  43 + }
  44 +
  45 + paper-toolbar .title {
  46 + margin-left: 60px;
  47 + }
  48 +
  49 + .content {
  50 + padding: 8px;
  51 + }
  52 +
  53 + .spacer {
  54 + @apply(--layout-flex);
  55 + }
  56 +
  57 + </style>
  58 +
  59 +</head>
  60 +<body unresolved>
  61 +
  62 + <paper-scroll-header-panel condenses>
  63 +
  64 + <paper-toolbar class="tall">
  65 +
  66 + <paper-icon-button icon="arrow-back"></paper-icon-button>
  67 + <div class="spacer"></div>
  68 + <paper-icon-button icon="search"></paper-icon-button>
  69 + <paper-icon-button icon="more-vert"></paper-icon-button>
  70 +
  71 + <div class="bottom title">Title</div>
  72 +
  73 + </paper-toolbar>
  74 +
  75 + <div class="content">
  76 +
  77 + <sample-content size="100"></sample-content>
  78 +
  79 + </div>
  80 +
  81 + </paper-scroll-header-panel>
  82 +
  83 +</body>
  84 +</html>
bower_components/paper-scroll-header-panel/demo/transform-header-3.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: transform header</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 + <link rel="import" href="../../paper-styles/color.html">
  26 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  27 + <link rel="import" href="sample-content.html">
  28 +
  29 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  30 +
  31 + <style is="custom-style">
  32 +
  33 + paper-scroll-header-panel {
  34 + position: absolute;
  35 + top: 0;
  36 + right: 0;
  37 + bottom: 0;
  38 + left: 0;
  39 + background-color: var(--paper-grey-200, #eee);
  40 +
  41 + /* background for toolbar when it is at its full size */
  42 + --paper-scroll-header-panel-full-header: {
  43 + background-image: url(images/bg4.jpg);
  44 + };
  45 +
  46 + /* background for toolbar when it is condensed */
  47 + --paper-scroll-header-panel-condensed-header: {
  48 + background-color: var(--paper-light-blue-600);
  49 + };
  50 + }
  51 +
  52 + paper-icon-button {
  53 + --paper-icon-button-ink-color: white;
  54 + }
  55 +
  56 + paper-toolbar.tall {
  57 + background-color: transparent;
  58 + }
  59 +
  60 + paper-toolbar.tall .title {
  61 + font-size: 40px;
  62 + margin-left: 60px;
  63 +
  64 + -webkit-transform-origin: left center;
  65 + transform-origin: left center;
  66 + }
  67 +
  68 + .content {
  69 + padding: 8px;
  70 + }
  71 +
  72 + .spacer {
  73 + @apply(--layout-flex);
  74 + }
  75 +
  76 + </style>
  77 +
  78 +</head>
  79 +<body unresolved>
  80 +
  81 + <paper-scroll-header-panel condenses>
  82 +
  83 + <paper-toolbar class="tall">
  84 +
  85 + <paper-icon-button icon="arrow-back"></paper-icon-button>
  86 + <div class="spacer"></div>
  87 + <paper-icon-button icon="search"></paper-icon-button>
  88 + <paper-icon-button icon="more-vert"></paper-icon-button>
  89 + <div class="bottom title">Title</div>
  90 +
  91 + </paper-toolbar>
  92 +
  93 + <div class="content">
  94 +
  95 + <sample-content size="100"></sample-content>
  96 +
  97 + </div>
  98 +
  99 + </paper-scroll-header-panel>
  100 +
  101 + <script>
  102 +
  103 + // custom transformation: scale header's title
  104 + var title = document.querySelector('.title');
  105 + addEventListener('paper-header-transform', function(e) {
  106 + var d = e.detail;
  107 + var m = d.height - d.condensedHeight;
  108 + var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
  109 +
  110 + Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
  111 + });
  112 +
  113 + </script>
  114 +
  115 +</body>
  116 +</html>
bower_components/paper-scroll-header-panel/demo/transform-header-4.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: transform header</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  25 + <link rel="import" href="../../paper-styles/color.html">
  26 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  27 + <link rel="import" href="sample-content.html">
  28 +
  29 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  30 +
  31 + <style is="custom-style">
  32 +
  33 + paper-scroll-header-panel {
  34 + position: absolute;
  35 + top: 0;
  36 + right: 0;
  37 + bottom: 0;
  38 + left: 0;
  39 + background-color: var(--paper-grey-200, #eee);
  40 +
  41 + /* background for toolbar when it is at its full size */
  42 + --paper-scroll-header-panel-full-header: {
  43 + background-image: url(images/bg1.jpg);
  44 + };
  45 +
  46 + /* background for toolbar when it is condensed */
  47 + --paper-scroll-header-panel-condensed-header: {
  48 + background-image: url(images/bg4.jpg);
  49 + };
  50 + }
  51 +
  52 + paper-toolbar.tall {
  53 + /* custom toolbar height */
  54 + height: 256px;
  55 + background-color: transparent;
  56 + }
  57 +
  58 + paper-toolbar.tall .title {
  59 + font-size: 40px;
  60 + margin-left: 60px;
  61 + -webkit-transform-origin: left center;
  62 + transform-origin: left center;
  63 + }
  64 +
  65 + paper-icon-button {
  66 + --paper-icon-button-ink-color: white;
  67 + }
  68 +
  69 + .content {
  70 + padding: 8px;
  71 + }
  72 +
  73 + .spacer {
  74 + @apply(--layout-flex);
  75 + }
  76 +
  77 + </style>
  78 +
  79 +</head>
  80 +<body unresolved>
  81 +
  82 + <!-- By default condensedHeaderHeight is 1/3 of the header's height. Here
  83 + we want to set the condensed header's height to be 64px. -->
  84 + <paper-scroll-header-panel condenses header-height="256" condensed-header-height="64">
  85 +
  86 + <paper-toolbar class="tall">
  87 +
  88 + <paper-icon-button icon="arrow-back"></paper-icon-button>
  89 + <div class="spacer"></div>
  90 + <paper-icon-button icon="search"></paper-icon-button>
  91 + <paper-icon-button icon="more-vert"></paper-icon-button>
  92 + <div class="bottom title">Title</div>
  93 +
  94 + </paper-toolbar>
  95 +
  96 + <div class="content">
  97 +
  98 + <sample-content size="100"></sample-content>
  99 +
  100 + </div>
  101 +
  102 + </paper-scroll-header-panel>
  103 +
  104 + <script>
  105 +
  106 + // custom transformation: scale header's title
  107 + var title = document.querySelector('.title');
  108 + addEventListener('paper-header-transform', function(e) {
  109 + var d = e.detail;
  110 + var m = d.height - d.condensedHeight;
  111 + var scale = Math.max(0.75, (m - d.y) / (m / 0.25) + 0.75);
  112 +
  113 + Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
  114 + });
  115 +
  116 + </script>
  117 +
  118 +</body>
  119 +</html>
bower_components/paper-scroll-header-panel/demo/transform-header-5.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: transform header</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  23 + <link rel="import" href="../../iron-icon/iron-icon.html">
  24 + <link rel="import" href="../../iron-icons/iron-icons.html">
  25 + <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  26 + <link rel="import" href="../../paper-styles/color.html">
  27 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  28 + <link rel="import" href="sample-content.html">
  29 +
  30 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  31 +
  32 + <style is="custom-style">
  33 +
  34 + paper-scroll-header-panel {
  35 + position: absolute;
  36 + top: 0;
  37 + right: 0;
  38 + bottom: 0;
  39 + left: 0;
  40 + background-color: var(--paper-grey-200, #eee);
  41 +
  42 + /* background for toolbar when it is at its full size */
  43 + --paper-scroll-header-panel-full-header: {
  44 + background-image: url(images/bg4.jpg);
  45 + };
  46 +
  47 + /* background for toolbar when it is condensed */
  48 + --paper-scroll-header-panel-condensed-header: {
  49 + background-color: var(--paper-light-blue-600);
  50 + };
  51 + }
  52 +
  53 + paper-toolbar {
  54 + /* custom toolbar height */
  55 + height: 256px;
  56 + background-color: transparent;
  57 + overflow: visible;
  58 + }
  59 +
  60 + paper-icon-button {
  61 + margin: 0 8px;
  62 + --paper-icon-button-ink-color: white;
  63 + }
  64 +
  65 + .bottom-text {
  66 + -webkit-transform: translateZ(0);
  67 + transform: translateZ(0);
  68 +
  69 + font-size: 20px;
  70 + padding-bottom: 10px;
  71 + }
  72 +
  73 + .subtitle {
  74 + padding-top: 4px;
  75 + font-size: 16px;
  76 + color: #ccc;
  77 + }
  78 +
  79 + .bookmark {
  80 + position: absolute;
  81 + bottom: -24px;
  82 + right: 24px;
  83 + fill: #4285f4;
  84 + height: 48px;
  85 + width: 48px;
  86 + }
  87 +
  88 + .content {
  89 + padding: 16px 10px 16px 50px;
  90 + }
  91 +
  92 + .indent {
  93 + margin-left: 60px;
  94 + }
  95 +
  96 + .spacer {
  97 + @apply(--layout-flex);
  98 + }
  99 +
  100 + </style>
  101 +
  102 +</head>
  103 +<body unresolved>
  104 +
  105 + <!-- `keepCondensedHeader` makes the condensed header to not scroll away -->
  106 + <paper-scroll-header-panel condenses keep-condensed-header header-height="256" condensed-header-height="140">
  107 +
  108 + <paper-toolbar>
  109 +
  110 + <paper-icon-button icon="arrow-back"></paper-icon-button>
  111 + <div class="spacer"></div>
  112 + <paper-icon-button icon="thumb-up"></paper-icon-button>
  113 + <paper-icon-button icon="mail"></paper-icon-button>
  114 + <div class="bottom indent bottom-text" self-end>
  115 + <div>Lorem ipsum dolor sit amet</div>
  116 + <div class="subtitle">Iisque perfecto dissentiet cum et</div>
  117 + </div>
  118 + <iron-icon class="bottom bookmark" icon="bookmark"></iron-icon>
  119 +
  120 + </paper-toolbar>
  121 +
  122 + <div class="content">
  123 +
  124 + <sample-content size="100"></sample-content>
  125 +
  126 + </div>
  127 +
  128 + </paper-scroll-header-panel>
  129 +
  130 +</body>
  131 +</html>
bower_components/paper-scroll-header-panel/demo/transform-header-6.html 0 โ†’ 100755
  1 +<!doctype html>
  2 +<!--
  3 +@license
  4 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  6 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  7 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  8 +Code distributed by Google as part of the polymer project is also
  9 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  10 +-->
  11 +<html>
  12 +<head>
  13 + <title>paper-scroll-header-panel: transform header</title>
  14 +
  15 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  16 + <meta name="mobile-web-app-capable" content="yes">
  17 + <meta name="apple-mobile-web-app-capable" content="yes">
  18 +
  19 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  20 +
  21 + <link rel="import" href="../paper-scroll-header-panel.html">
  22 + <link rel="import" href="../../iron-icon/iron-icon.html">
  23 + <link rel="import" href="../../iron-icons/iron-icons.html">
  24 + <link rel="import" href="../../iron-icons/av-icons.html">
  25 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  26 + <link rel="import" href="../../paper-input/paper-input.html">
  27 + <link rel="import" href="../../paper-styles/color.html">
  28 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  29 + <link rel="import" href="sample-content.html">
  30 +
  31 + <link rel="stylesheet" href="../../paper-styles/demo.css">
  32 +
  33 +
  34 + <style is="custom-style">
  35 +
  36 + paper-scroll-header-panel {
  37 + position: absolute;
  38 + top: 0;
  39 + right: 0;
  40 + bottom: 0;
  41 + left: 0;
  42 + background-color: var(--paper-grey-200, #eee);
  43 +
  44 + /* background for toolbar when it is at its full size */
  45 + --paper-scroll-header-panel-full-header: {
  46 + background-image: url(images/bg2.jpg);
  47 + };
  48 +
  49 + /* background for toolbar when it is condensed */
  50 + --paper-scroll-header-panel-condensed-header: {
  51 + background-color: transparent;
  52 + };
  53 + }
  54 +
  55 + paper-toolbar {
  56 + background-color: transparent;
  57 + }
  58 +
  59 + .search-box {
  60 + background-color: #fff;
  61 + border: 1px solid #eee;
  62 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  63 + height: 40px;
  64 + }
  65 +
  66 + .search-box iron-icon {
  67 + color: var(--google-grey-700);
  68 + fill: var(--google-grey-700);
  69 + margin: 0 8px;
  70 + }
  71 +
  72 + .search-box input {
  73 + font-size: 20px;
  74 + outline: 0;
  75 + border: none;
  76 + margin-left: 20px;
  77 + }
  78 +
  79 + .content {
  80 + padding: 8px;
  81 + }
  82 +
  83 + .search-box {
  84 + @apply(--layout-flex);
  85 + @apply(--layout-center);
  86 + @apply(--layout-horizontal);
  87 + }
  88 +
  89 + .search-box input {
  90 + @apply(--layout-flex);
  91 + }
  92 +
  93 + </style>
  94 +
  95 +</head>
  96 +<body unresolved>
  97 +
  98 + <!-- Instead of using 1/3 of the header's height, we want to manually set the
  99 + condensed header's height to 64px -->
  100 + <paper-scroll-header-panel condenses condensed-header-height="64">
  101 +
  102 + <paper-toolbar class="medium-tall">
  103 +
  104 + <div class="search-box bottom">
  105 + <iron-icon icon="menu"></iron-icon>
  106 + <input>
  107 + <iron-icon icon="av:mic"></iron-icon>
  108 + </div>
  109 + </paper-toolbar>
  110 +
  111 + <div class="content">
  112 +
  113 + <sample-content size="100"></sample-content>
  114 +
  115 + </div>
  116 +
  117 + </paper-scroll-header-panel>
  118 +
  119 +</body>
  120 +</html>
bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html
@@ -12,6 +12,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -12,6 +12,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html"> 12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
13 13
14 <!-- 14 <!--
  15 +Material design: [Scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)
  16 +
15 `paper-scroll-header-panel` contains a header section and a content section. The 17 `paper-scroll-header-panel` contains a header section and a content section. The
16 header is initially on the top part of the view but it scrolls away with the 18 header is initially on the top part of the view but it scrolls away with the
17 rest of the scrollable content. Upon scrolling slightly up at any point, the 19 rest of the scrollable content. Upon scrolling slightly up at any point, the
@@ -22,53 +24,61 @@ __Important:__ The `paper-scroll-header-panel` will not display if its parent do @@ -22,53 +24,61 @@ __Important:__ The `paper-scroll-header-panel` will not display if its parent do
22 24
23 Using [layout classes](https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes) or custom properties, you can easily make the `paper-scroll-header-panel` fill the screen 25 Using [layout classes](https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes) or custom properties, you can easily make the `paper-scroll-header-panel` fill the screen
24 26
25 - <body class="fullbleed layout vertical">  
26 - <paper-scroll-header-panel class="flex">  
27 - <paper-toolbar>  
28 - <div>Hello World!</div>  
29 - </paper-toolbar>  
30 - </paper-scroll-header-panel>  
31 - </body> 27 +```html
  28 +<body class="fullbleed layout vertical">
  29 + <paper-scroll-header-panel class="flex">
  30 + <paper-toolbar>
  31 + <div>Hello World!</div>
  32 + </paper-toolbar>
  33 + </paper-scroll-header-panel>
  34 +</body>
  35 +```
32 36
33 or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%: 37 or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%:
34 38
35 - html, body {  
36 - height: 100%;  
37 - margin: 0;  
38 - }  
39 - paper-scroll-header-panel {  
40 - height: 100%;  
41 - } 39 +```css
  40 +html, body {
  41 + height: 100%;
  42 + margin: 0;
  43 +}
  44 +paper-scroll-header-panel {
  45 + height: 100%;
  46 +}
  47 +```
42 48
43 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any element 49 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
44 that represents a header by adding a `paper-header` class to it. 50 that represents a header by adding a `paper-header` class to it.
45 51
46 - <paper-scroll-header-panel>  
47 - <paper-toolbar>Header</paper-toolbar>  
48 - <div>Content goes here...</div>  
49 - </paper-scroll-header-panel> 52 +```html
  53 +<paper-scroll-header-panel>
  54 + <paper-toolbar>Header</paper-toolbar>
  55 + <div>Content goes here...</div>
  56 +</paper-scroll-header-panel>
  57 +```
50 58
51 -Styling scroll-header-panel: 59 +### Styling
  60 +=======
52 61
53 -To change background for toolbar when it is at its full size: 62 +The following custom properties and mixins are available for styling:
54 63
55 - paper-scroll-header-panel {  
56 - --paper-scroll-header-panel-full-header: {  
57 - background-color: red;  
58 - };  
59 - }  
60 -  
61 -To change the background for toolbar when it is condensed:  
62 -  
63 - paper-scroll-header-panel {  
64 - --paper-scroll-header-panel-condensed-header: {  
65 - background-color: #f4b400;  
66 - };  
67 - } 64 +Custom property | Description | Default
  65 +----------------|-------------|----------
  66 +--paper-scroll-header-panel-full-header | To change background for toolbar when it is at its full size | {}
  67 +--paper-scroll-header-panel-condensed-header | To change the background for toolbar when it is condensed | {}
  68 +--paper-scroll-header-container | To override or add container styles | {}
68 69
69 @group Paper Element 70 @group Paper Element
70 @element paper-scroll-header-panel 71 @element paper-scroll-header-panel
71 -@demo demo/index.html 72 +@demo demo/transform-header-1.html Transform header 1
  73 +@demo demo/transform-header-2.html Transform header 2
  74 +@demo demo/transform-header-3.html Transform header 3
  75 +@demo demo/transform-header-4.html Transform header 4
  76 +@demo demo/transform-header-5.html Transform header 5
  77 +@demo demo/transform-header-6.html Transform header 6
  78 +@demo demo/keep-header.html Keep header
  79 +@demo demo/hide-header.html Hide header
  80 +@demo demo/toggle-fixed-header.html Toggle fixed header
  81 +@demo demo/drawer-panel.html Combine with paper-drawer-panel
72 @hero hero.svg 82 @hero hero.svg
73 --> 83 -->
74 84
@@ -90,11 +100,12 @@ To change the background for toolbar when it is condensed: @@ -90,11 +100,12 @@ To change the background for toolbar when it is condensed:
90 100
91 -moz-box-sizing: border-box; 101 -moz-box-sizing: border-box;
92 box-sizing: border-box; 102 box-sizing: border-box;
93 -  
94 -webkit-overflow-scrolling: touch; 103 -webkit-overflow-scrolling: touch;
95 104
96 overflow-x: hidden; 105 overflow-x: hidden;
97 overflow-y: auto; 106 overflow-y: auto;
  107 +
  108 + @apply(--paper-scroll-header-container);
98 } 109 }
99 110
100 #headerContainer { 111 #headerContainer {
@@ -155,7 +166,7 @@ To change the background for toolbar when it is condensed: @@ -155,7 +166,7 @@ To change the background for toolbar when it is condensed:
155 166
156 'use strict'; 167 'use strict';
157 168
158 - Polymer({ 169 + Polymer.PaperScrollHeaderPanel = Polymer({
159 170
160 /** 171 /**
161 * Fired when the content has been scrolled. 172 * Fired when the content has been scrolled.
@@ -252,24 +263,17 @@ To change the background for toolbar when it is condensed: @@ -252,24 +263,17 @@ To change the background for toolbar when it is condensed:
252 }, 263 },
253 264
254 /** 265 /**
255 - * The state of the header. The initial value is `HEADER_STATE_EXPANDED`.  
256 - * Depending on the configuration and the `scrollTop` value, 266 + * The state of the header. Depending on the configuration and the `scrollTop` value,
257 * the header state could change to 267 * the header state could change to
258 - * `HEADER_STATE_HIDDEN`, `HEADER_STATE_CONDENSED` and `HEADER_STATE_INTERPOLATED` 268 + * Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED
  269 + * Polymer.PaperScrollHeaderPanel.HEADER_STATE_HIDDEN
  270 + * Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED
  271 + * Polymer.PaperScrollHeaderPanel.HEADER_STATE_INTERPOLATED
259 */ 272 */
260 headerState: { 273 headerState: {
261 type: Number, 274 type: Number,
262 readOnly: true, 275 readOnly: true,
263 - value: 0  
264 - },  
265 -  
266 - _prevScrollTop: {  
267 - type: Number,  
268 - value: 0  
269 - },  
270 -  
271 - _y: {  
272 - type: Number, 276 + notify:true,
273 value: 0 277 value: 0
274 }, 278 },
275 279
@@ -292,43 +296,13 @@ To change the background for toolbar when it is condensed: @@ -292,43 +296,13 @@ To change the background for toolbar when it is condensed:
292 }, 296 },
293 297
294 ready: function() { 298 ready: function() {
295 - this.async(this.measureHeaderHeight, 5);  
296 this._scrollHandler = this._scroll.bind(this); 299 this._scrollHandler = this._scroll.bind(this);
297 this.scroller.addEventListener('scroll', this._scrollHandler); 300 this.scroller.addEventListener('scroll', this._scrollHandler);
298 }, 301 },
299 302
300 - /**  
301 - * The header's initial state  
302 - *  
303 - * @property HEADER_STATE_EXPANDED  
304 - * @type number  
305 - */  
306 - HEADER_STATE_EXPANDED: 0,  
307 -  
308 - /**  
309 - * The header's state when it's hidden.  
310 - *  
311 - * @property HEADER_STATE_HIDDEN  
312 - * @type number  
313 - */  
314 - HEADER_STATE_HIDDEN: 1,  
315 -  
316 - /**  
317 - * The header's state when it's condensed.  
318 - *  
319 - * @property HEADER_STATE_CONDENSED  
320 - * @type number  
321 - */  
322 - HEADER_STATE_CONDENSED: 2,  
323 -  
324 - /**  
325 - * The header's state when its progress is somewhere between  
326 - * the `hidden` and `condensed` state.  
327 - *  
328 - * @property HEADER_STATE_INTERPOLATED  
329 - * @type number  
330 - */  
331 - HEADER_STATE_INTERPOLATED: 3, 303 + attached: function() {
  304 + this.async(this.measureHeaderHeight, 1);
  305 + },
332 306
333 /** 307 /**
334 * Returns the header element. 308 * Returns the header element.
@@ -393,7 +367,7 @@ To change the background for toolbar when it is condensed: @@ -393,7 +367,7 @@ To change the background for toolbar when it is condensed:
393 * @param {boolean} smooth true if the scroll position should be smoothly adjusted. 367 * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
394 */ 368 */
395 scroll: function(top, smooth) { 369 scroll: function(top, smooth) {
396 - // the scroll event will trigger _updateScrollState directly, 370 + // the scroll event will trigger _updateScrollState directly,
397 // However, _updateScrollState relies on the previous `scrollTop` to update the states. 371 // However, _updateScrollState relies on the previous `scrollTop` to update the states.
398 // Calling _updateScrollState will ensure that the states are synced correctly. 372 // Calling _updateScrollState will ensure that the states are synced correctly.
399 373
@@ -439,13 +413,14 @@ To change the background for toolbar when it is condensed: @@ -439,13 +413,14 @@ To change the background for toolbar when it is condensed:
439 * @param {boolean} smooth true if the scroll position should be smoothly adjusted. 413 * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
440 */ 414 */
441 condense: function(smooth) { 415 condense: function(smooth) {
  416 + var ctx = Polymer.PaperScrollHeaderPanel;
442 if (this.condenses && !this.fixed && !this.noReveal) { 417 if (this.condenses && !this.fixed && !this.noReveal) {
443 switch (this.headerState) { 418 switch (this.headerState) {
444 - case this.HEADER_STATE_HIDDEN: 419 + case ctx.HEADER_STATE_HIDDEN:
445 this.scroll(this.scroller.scrollTop - (this._headerMaxDelta - this._headerMargin), smooth); 420 this.scroll(this.scroller.scrollTop - (this._headerMaxDelta - this._headerMargin), smooth);
446 break; 421 break;
447 - case this.HEADER_STATE_EXPANDED:  
448 - case this.HEADER_STATE_INTERPOLATED: 422 + case ctx.HEADER_STATE_EXPANDED:
  423 + case ctx.HEADER_STATE_INTERPOLATED:
449 this.scroll(this._headerMargin, smooth); 424 this.scroll(this._headerMargin, smooth);
450 break; 425 break;
451 } 426 }
@@ -564,22 +539,27 @@ To change the background for toolbar when it is condensed: @@ -564,22 +539,27 @@ To change the background for toolbar when it is condensed:
564 }, 539 },
565 540
566 _updateScrollState: function(scrollTop) { 541 _updateScrollState: function(scrollTop) {
  542 + var ctx = Polymer.PaperScrollHeaderPanel;
567 var deltaScrollTop = scrollTop - this._prevScrollTop; 543 var deltaScrollTop = scrollTop - this._prevScrollTop;
568 var y = Math.max(0, (this.noReveal) ? scrollTop : this._y + deltaScrollTop); 544 var y = Math.max(0, (this.noReveal) ? scrollTop : this._y + deltaScrollTop);
569 545
570 if (y > this._headerMaxDelta) { 546 if (y > this._headerMaxDelta) {
571 y = this._headerMaxDelta; 547 y = this._headerMaxDelta;
572 - this._setHeaderState(this.HEADER_STATE_HIDDEN);  
573 548
574 - } else if (this.condenses && this._prevScrollTop >= scrollTop && scrollTop >= this._headerMargin) { 549 + if (this.keepCondensedHeader) {
  550 + this._setHeaderState(ctx.HEADER_STATE_CONDENSED);
  551 + } else {
  552 + this._setHeaderState(ctx.HEADER_STATE_HIDDEN);
  553 + }
  554 + } else if (this.condenses && scrollTop >= this._headerMargin) {
575 y = Math.max(y, this._headerMargin); 555 y = Math.max(y, this._headerMargin);
576 - this._setHeaderState(this.HEADER_STATE_CONDENSED); 556 + this._setHeaderState(ctx.HEADER_STATE_CONDENSED);
577 557
578 } else if (y === 0) { 558 } else if (y === 0) {
579 - this._setHeaderState(this.HEADER_STATE_EXPANDED); 559 + this._setHeaderState(ctx.HEADER_STATE_EXPANDED);
580 560
581 } else { 561 } else {
582 - this._setHeaderState(this.HEADER_STATE_INTERPOLATED); 562 + this._setHeaderState(ctx.HEADER_STATE_INTERPOLATED);
583 } 563 }
584 564
585 if (!this.fixed && y !== this._y) { 565 if (!this.fixed && y !== this._y) {
@@ -591,6 +571,11 @@ To change the background for toolbar when it is condensed: @@ -591,6 +571,11 @@ To change the background for toolbar when it is condensed:
591 } 571 }
592 }); 572 });
593 573
  574 + Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED = 0;
  575 + Polymer.PaperScrollHeaderPanel.HEADER_STATE_HIDDEN = 1;
  576 + Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED = 2;
  577 + Polymer.PaperScrollHeaderPanel.HEADER_STATE_INTERPOLATED = 3;
  578 +
594 })(); 579 })();
595 580
596 </script> 581 </script>
bower_components/paper-scroll-header-panel/test/basic.html
@@ -58,6 +58,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -58,6 +58,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
58 assert.typeOf(scrollHeaderPanel.scroller, 'object'); 58 assert.typeOf(scrollHeaderPanel.scroller, 'object');
59 assert.equal(scrollHeaderPanel.keepCondensedHeader, false); 59 assert.equal(scrollHeaderPanel.keepCondensedHeader, false);
60 assert.equal(scrollHeaderPanel.keepCondensedHeader, false); 60 assert.equal(scrollHeaderPanel.keepCondensedHeader, false);
  61 +
  62 + scrollHeaderPanel.measureHeaderHeight();
61 assert.equal(scrollHeaderPanel.headerHeight, toolbar.offsetHeight); 63 assert.equal(scrollHeaderPanel.headerHeight, toolbar.offsetHeight);
62 assert.equal(scrollHeaderPanel.condensedHeaderHeight, Math.round(toolbar.offsetHeight * 1/3)); 64 assert.equal(scrollHeaderPanel.condensedHeaderHeight, Math.round(toolbar.offsetHeight * 1/3));
63 }); 65 });
bower_components/paper-scroll-header-panel/test/header-state.html
@@ -28,8 +28,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -28,8 +28,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 <test-fixture id="trivialProgress"> 28 <test-fixture id="trivialProgress">
29 <template> 29 <template>
30 <paper-scroll-header-panel condenses> 30 <paper-scroll-header-panel condenses>
31 - <paper-toolbar class="tall">  
32 - </paper-toolbar> 31 + <paper-toolbar class="tall"></paper-toolbar>
33 <div class="content"> 32 <div class="content">
34 <sample-content size="100"></sample-content> 33 <sample-content size="100"></sample-content>
35 </div> 34 </div>
@@ -45,43 +44,44 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -45,43 +44,44 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
45 setup(function() { 44 setup(function() {
46 scrollHeaderPanel = fixture('trivialProgress'); 45 scrollHeaderPanel = fixture('trivialProgress');
47 toolbar = Polymer.dom(scrollHeaderPanel).querySelector('paper-toolbar'); 46 toolbar = Polymer.dom(scrollHeaderPanel).querySelector('paper-toolbar');
  47 + scrollHeaderPanel.measureHeaderHeight();
  48 + scrollHeaderPanel.scroll(0);
48 }); 49 });
49 50
50 test('HEADER_STATE_EXPANDED', function(done) { 51 test('HEADER_STATE_EXPANDED', function(done) {
51 - assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_EXPANDED); 52 + assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED);
52 53
53 - scrollHeaderPanel.scroller.scrollTop = 1; 54 + scrollHeaderPanel.scroll(1);
54 55
55 flush(function() { 56 flush(function() {
56 - assert.notEqual(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_EXPANDED); 57 + assert.notEqual(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED);
57 done(); 58 done();
58 }); 59 });
59 }); 60 });
60 61
61 test('HEADER_STATE_HIDDEN', function(done) { 62 test('HEADER_STATE_HIDDEN', function(done) {
62 - scrollHeaderPanel.scroller.scrollTop = toolbar.offsetHeight * 2; 63 + scrollHeaderPanel.scroll(toolbar.offsetHeight + 1);
63 64
64 - flush(function() {  
65 - assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_HIDDEN); 65 + //flush(function() {
  66 + assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_HIDDEN);
66 done(); 67 done();
67 - }); 68 + //});
68 }); 69 });
69 70
70 test('HEADER_STATE_CONDENSED', function(done) { 71 test('HEADER_STATE_CONDENSED', function(done) {
71 - scrollHeaderPanel._prevScrollTop = toolbar.offsetHeight * 10;  
72 - scrollHeaderPanel.scroller.scrollTop = toolbar.offsetHeight * 5; 72 + scrollHeaderPanel.scroll(toolbar.offsetHeight - scrollHeaderPanel.condensedHeaderHeight);
73 73
74 - flush(function() {  
75 - assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_CONDENSED);  
76 - done();  
77 - }); 74 + setTimeout(function() {
  75 + assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED);
  76 + done();
  77 + }, 100);
78 }); 78 });
79 79
80 test('HEADER_STATE_INTERPOLATED', function(done) { 80 test('HEADER_STATE_INTERPOLATED', function(done) {
81 - scrollHeaderPanel.scroller.scrollTop = toolbar.offsetHeight * 0.5; 81 + scrollHeaderPanel.scroll(1);
82 82
83 flush(function() { 83 flush(function() {
84 - assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_INTERPOLATED); 84 + assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_INTERPOLATED);
85 done(); 85 done();
86 }); 86 });
87 }); 87 });
bower_components/paper-scroll-header-panel/test/index.html
1 -<!doctype html>  
2 -<!-- 1 +<!DOCTYPE html><!--
3 @license 2 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
@@ -7,9 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS @@ -7,9 +6,7 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS
7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
8 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS 8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
10 --->  
11 -<html>  
12 -<head> 9 +--><html><head>
13 <meta charset="UTF-8"> 10 <meta charset="UTF-8">
14 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 11 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 <title>Tests</title> 12 <title>Tests</title>
@@ -20,8 +17,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -20,8 +17,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
20 WCT.loadSuites([ 17 WCT.loadSuites([
21 'basic.html', 18 'basic.html',
22 'header-state.html', 19 'header-state.html',
23 - 'scroll.html' 20 + 'scroll.html',
  21 + 'basic.html?dom=shadow',
  22 + 'header-state.html?dom=shadow',
  23 + 'scroll.html?dom=shadow'
24 ]); 24 ]);
25 </script> 25 </script>
26 -</body>  
27 -</html> 26 +
  27 +
  28 +</body></html>
bower_components/paper-scroll-header-panel/test/scroll.html
@@ -27,7 +27,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -27,7 +27,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
27 27
28 <test-fixture id="trivialProgress"> 28 <test-fixture id="trivialProgress">
29 <template> 29 <template>
30 - <paper-scroll-header-panel> 30 + <paper-scroll-header-panel condenses>
31 <paper-toolbar> 31 <paper-toolbar>
32 </paper-toolbar> 32 </paper-toolbar>
33 <div class="content"> 33 <div class="content">
@@ -44,6 +44,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -44,6 +44,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
44 44
45 setup(function() { 45 setup(function() {
46 scrollHeaderPanel = fixture('trivialProgress'); 46 scrollHeaderPanel = fixture('trivialProgress');
  47 + scrollHeaderPanel.measureHeaderHeight();
  48 + });
  49 +
  50 + teardown(function() {
  51 + scrollHeaderPanel.scroll(0);
47 }); 52 });
48 53
49 test('scroll smoothly', function(done) { 54 test('scroll smoothly', function(done) {
@@ -54,6 +59,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -54,6 +59,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
54 if (scrollHeaderPanel.scroller.scrollTop === destination) { 59 if (scrollHeaderPanel.scroller.scrollTop === destination) {
55 assert.notEqual(adjustments, 0); 60 assert.notEqual(adjustments, 0);
56 done(); 61 done();
  62 + return;
57 } 63 }
58 adjustments++; 64 adjustments++;
59 setTimeout(check, 0); 65 setTimeout(check, 0);
@@ -63,18 +69,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -63,18 +69,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
63 }); 69 });
64 70
65 test('condense smoothly', function(done) { 71 test('condense smoothly', function(done) {
66 - scrollHeaderPanel.condenses = true;  
67 -  
68 flush(function() { 72 flush(function() {
69 var destination = 100; 73 var destination = 100;
70 var adjustments = 0; 74 var adjustments = 0;
71 function check() { 75 function check() {
72 - if (scrollHeaderPanel.headerState === scrollHeaderPanel.HEADER_STATE_CONDENSED) { 76 + if (scrollHeaderPanel.headerState === Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED) {
73 assert.notEqual(adjustments, 0); 77 assert.notEqual(adjustments, 0);
74 done(); 78 done();
  79 + return;
75 } 80 }
76 adjustments++; 81 adjustments++;
77 - setTimeout(check, 0); 82 + setTimeout(check, 1);
78 } 83 }
79 scrollHeaderPanel.condense(true); 84 scrollHeaderPanel.condense(true);
80 check(); 85 check();
@@ -82,15 +87,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -82,15 +87,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
82 }); 87 });
83 88
84 test('condense immediately', function(done) { 89 test('condense immediately', function(done) {
85 - scrollHeaderPanel.condenses = true;  
86 -  
87 flush(function() { 90 flush(function() {
88 scrollHeaderPanel.condense(); 91 scrollHeaderPanel.condense();
89 -  
90 - Polymer.Base.async(function() {  
91 - assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_CONDENSED);  
92 - done();  
93 - }, 100); 92 + assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED);
  93 + done();
94 }); 94 });
95 }); 95 });
96 96
@@ -103,6 +103,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN @@ -103,6 +103,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
103 if (scrollHeaderPanel.scroller.scrollTop === 0) { 103 if (scrollHeaderPanel.scroller.scrollTop === 0) {
104 assert.notEqual(adjustments, 0); 104 assert.notEqual(adjustments, 0);
105 done(); 105 done();
  106 + return;
106 } 107 }
107 adjustments++; 108 adjustments++;
108 setTimeout(check, 0); 109 setTimeout(check, 0);
datalets/datasetexplorer-datalet/treemap_tooltip.html 100644 โ†’ 100755
datalets/leafletjs-datalet/leafletjs-datalet.html
@@ -75,7 +75,10 @@ Example: @@ -75,7 +75,10 @@ Example:
75 presentData: function(){ 75 presentData: function(){
76 76
77 var t = this; 77 var t = this;
78 - this._component.map = L.map(this._component.$.leafletjs).setView([0, 0], 13, {reset:true}); 78 + try{
  79 + this._component.map = L.map(this._component.$.leafletjs).setView([0, 0], 13, {reset:true});
  80 + }catch(e){}
  81 +
79 82
80 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 83 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
81 maxZoom: 18, 84 maxZoom: 18,
@@ -111,7 +114,7 @@ Example: @@ -111,7 +114,7 @@ Example:
111 t._component.map._onResize(); 114 t._component.map._onResize();
112 t._component.map.invalidateSize(false); 115 t._component.map.invalidateSize(false);
113 t._component.map.fitBounds(coordinates); 116 t._component.map.fitBounds(coordinates);
114 - }, 1000) 117 + }, 1)
115 } 118 }
116 }; 119 };
117 120
locales/paper-card-ln.js 100644 โ†’ 100755