WebCompDev / COMPONENTS

Commit 0a86ccc845c0adfc26b513ce558898729c58dd9d

Authored by Luigi Serra
1 parent c844388d

graph and datalets updates

Inline Side-by-side
Showing 29 changed files with 1371 additions and 175 deletions
bower.json
  View file @0a86ccc
... ... @@ -16,6 +16,7 @@
16 16 "dependencies": {
17 17 "google-map": "GoogleWebComponents/google-map#^1.0.0",
18 18 "paper-fab-transitions": "~0.1.0",
  19 + "paper-scroll-header-panel": "PolymerElements/paper-scroll-header-panel#~1.0.14",
19 20 "polymer": "Polymer/polymer#^1.0.0"
20 21 }
21 22 }
... ...
bower_components/paper-scroll-header-panel/.bower.json
  View file @0a86ccc
1 1 {
2 2 "name": "paper-scroll-header-panel",
3 3 "description": "A header bar with scrolling behavior",
4   - "version": "1.0.8",
  4 + "version": "1.0.14",
5 5 "license": "http://polymer.github.io/LICENSE.txt",
6 6 "private": true,
7 7 "authors": "The Polymer Authors",
... ... @@ -11,20 +11,18 @@
11 11 "layout",
12 12 "responsive"
13 13 ],
14   - "main": [
15   - "paper-scroll-header-panel.html"
16   - ],
  14 + "main": "paper-scroll-header-panel.html",
17 15 "repository": {
18 16 "type": "git",
19 17 "url": "git://github.com/PolymerElements/paper-scroll-header-panel.git"
20 18 },
21 19 "dependencies": {
22 20 "polymer": "Polymer/polymer#^1.0.0",
23   - "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
24 21 "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
25 22 },
26 23 "devDependencies": {
27 24 "paper-styles": "PolymerElements/paper-styles#^1.0.0",
  25 + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
28 26 "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
29 27 "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
30 28 "iron-icons": "PolymerElements/iron-icons#^1.0.0",
... ... @@ -35,14 +33,16 @@
35 33 "web-component-tester": "*",
36 34 "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
37 35 },
  36 + "ignore": [],
38 37 "homepage": "https://github.com/PolymerElements/paper-scroll-header-panel",
39   - "_release": "1.0.8",
  38 + "_release": "1.0.14",
40 39 "_resolution": {
41 40 "type": "version",
42   - "tag": "v1.0.8",
43   - "commit": "e1f1823fdf6e496e6ef45340d7cd5664a6a87fc9"
  41 + "tag": "v1.0.14",
  42 + "commit": "ec62c5a1d88d4e5f0f3959586ab9633110912c92"
44 43 },
45 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 49 \ No newline at end of file
... ...
bower_components/paper-scroll-header-panel/.travis.yml 0 → 100755
  View file @0a86ccc
  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
  View file @0a86ccc
  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
  View file @0a86ccc
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 32 ```html
9 33 <body class="fullbleed layout vertical">
10 34 <paper-scroll-header-panel class="flex">
11 35 <paper-toolbar>
12   - Hello World!
  36 + <div>Hello World!</div>
13 37 </paper-toolbar>
14 38 </paper-scroll-header-panel>
15 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 44 ```css
19 45 html, body {
20 46 height: 100%;
... ... @@ -24,7 +50,9 @@ paper-scroll-header-panel {
24 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 57 ```html
30 58 <paper-scroll-header-panel>
... ... @@ -33,24 +61,15 @@ paper-scroll-header-panel {
33 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
  View file @0a86ccc
1 1 {
2 2 "name": "paper-scroll-header-panel",
3 3 "description": "A header bar with scrolling behavior",
4   - "version": "1.0.8",
  4 + "version": "1.0.14",
5 5 "license": "http://polymer.github.io/LICENSE.txt",
6 6 "private": true,
7 7 "authors": "The Polymer Authors",
... ... @@ -11,20 +11,18 @@
11 11 "layout",
12 12 "responsive"
13 13 ],
14   - "main": [
15   - "paper-scroll-header-panel.html"
16   - ],
  14 + "main": "paper-scroll-header-panel.html",
17 15 "repository": {
18 16 "type": "git",
19 17 "url": "git://github.com/PolymerElements/paper-scroll-header-panel.git"
20 18 },
21 19 "dependencies": {
22 20 "polymer": "Polymer/polymer#^1.0.0",
23   - "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
24 21 "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0"
25 22 },
26 23 "devDependencies": {
27 24 "paper-styles": "PolymerElements/paper-styles#^1.0.0",
  25 + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
28 26 "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
29 27 "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
30 28 "iron-icons": "PolymerElements/iron-icons#^1.0.0",
... ... @@ -34,5 +32,6 @@
34 32 "test-fixture": "PolymerElements/test-fixture#^1.0.0",
35 33 "web-component-tester": "*",
36 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
  View file @0a86ccc
  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
  View file @0a86ccc
  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
View file @0a86ccc

55.6 KB
bower_components/paper-scroll-header-panel/demo/images/bg2.jpg
View file @0a86ccc

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
View file @0a86ccc

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
View file @0a86ccc

81.6 KB
bower_components/paper-scroll-header-panel/demo/index.html
  View file @0a86ccc
... ... @@ -22,6 +22,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
22 22 <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
23 23 <link rel="import" href="../../iron-icons/iron-icons.html">
24 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 27 <link rel="import" href="sample-content.html">
26 28  
27 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 40  
39 41 /* background for toolbar when it is at its full size */
40 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 47 /* background for toolbar when it is condensed */
45 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 57 paper-toolbar.tall {
51 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 70 padding: 8px;
64 71 }
65 72  
  73 + .spacer {
  74 + @apply(--layout-flex);
  75 + }
  76 +
66 77 </style>
67 78  
68 79 </head>
... ... @@ -71,13 +82,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
71 82 <paper-scroll-header-panel condenses>
72 83  
73 84 <paper-toolbar class="tall">
74   -
75 85 <paper-icon-button icon="arrow-back"></paper-icon-button>
76   - <div class="flex"></div>
  86 + <div class="spacer"></div>
77 87 <paper-icon-button icon="search"></paper-icon-button>
78 88 <paper-icon-button icon="more-vert"></paper-icon-button>
79 89 <div class="bottom title">Title</div>
80   -
81 90 </paper-toolbar>
82 91  
83 92 <div class="content">
... ...
bower_components/paper-scroll-header-panel/demo/keep-header.html 0 → 100755
  View file @0a86ccc
  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
  View file @0a86ccc
  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
  View file @0a86ccc
  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
  View file @0a86ccc
  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
  View file @0a86ccc
  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
  View file @0a86ccc
  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
  View file @0a86ccc
  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
  View file @0a86ccc
  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
  View file @0a86ccc
... ... @@ -12,6 +12,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
12 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 17 `paper-scroll-header-panel` contains a header section and a content section. The
16 18 header is initially on the top part of the view but it scrolls away with the
17 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 24  
23 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 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 49 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
44 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 70 @group Paper Element
70 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 82 @hero hero.svg
73 83 -->
74 84  
... ... @@ -90,11 +100,12 @@ To change the background for toolbar when it is condensed:
90 100  
91 101 -moz-box-sizing: border-box;
92 102 box-sizing: border-box;
93   -
94 103 -webkit-overflow-scrolling: touch;
95 104  
96 105 overflow-x: hidden;
97 106 overflow-y: auto;
  107 +
  108 + @apply(--paper-scroll-header-container);
98 109 }
99 110  
100 111 #headerContainer {
... ... @@ -155,7 +166,7 @@ To change the background for toolbar when it is condensed:
155 166  
156 167 'use strict';
157 168  
158   - Polymer({
  169 + Polymer.PaperScrollHeaderPanel = Polymer({
159 170  
160 171 /**
161 172 * Fired when the content has been scrolled.
... ... @@ -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 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 273 headerState: {
261 274 type: Number,
262 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 277 value: 0
274 278 },
275 279  
... ... @@ -292,43 +296,13 @@ To change the background for toolbar when it is condensed:
292 296 },
293 297  
294 298 ready: function() {
295   - this.async(this.measureHeaderHeight, 5);
296 299 this._scrollHandler = this._scroll.bind(this);
297 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 308 * Returns the header element.
... ... @@ -393,7 +367,7 @@ To change the background for toolbar when it is condensed:
393 367 * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
394 368 */
395 369 scroll: function(top, smooth) {
396   - // the scroll event will trigger _updateScrollState directly,
  370 + // the scroll event will trigger _updateScrollState directly,
397 371 // However, _updateScrollState relies on the previous `scrollTop` to update the states.
398 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 413 * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
440 414 */
441 415 condense: function(smooth) {
  416 + var ctx = Polymer.PaperScrollHeaderPanel;
442 417 if (this.condenses && !this.fixed && !this.noReveal) {
443 418 switch (this.headerState) {
444   - case this.HEADER_STATE_HIDDEN:
  419 + case ctx.HEADER_STATE_HIDDEN:
445 420 this.scroll(this.scroller.scrollTop - (this._headerMaxDelta - this._headerMargin), smooth);
446 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 424 this.scroll(this._headerMargin, smooth);
450 425 break;
451 426 }
... ... @@ -564,22 +539,27 @@ To change the background for toolbar when it is condensed:
564 539 },
565 540  
566 541 _updateScrollState: function(scrollTop) {
  542 + var ctx = Polymer.PaperScrollHeaderPanel;
567 543 var deltaScrollTop = scrollTop - this._prevScrollTop;
568 544 var y = Math.max(0, (this.noReveal) ? scrollTop : this._y + deltaScrollTop);
569 545  
570 546 if (y > this._headerMaxDelta) {
571 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 555 y = Math.max(y, this._headerMargin);
576   - this._setHeaderState(this.HEADER_STATE_CONDENSED);
  556 + this._setHeaderState(ctx.HEADER_STATE_CONDENSED);
577 557  
578 558 } else if (y === 0) {
579   - this._setHeaderState(this.HEADER_STATE_EXPANDED);
  559 + this._setHeaderState(ctx.HEADER_STATE_EXPANDED);
580 560  
581 561 } else {
582   - this._setHeaderState(this.HEADER_STATE_INTERPOLATED);
  562 + this._setHeaderState(ctx.HEADER_STATE_INTERPOLATED);
583 563 }
584 564  
585 565 if (!this.fixed && y !== this._y) {
... ... @@ -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 581 </script>
... ...
bower_components/paper-scroll-header-panel/test/basic.html
  View file @0a86ccc
... ... @@ -58,6 +58,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
58 58 assert.typeOf(scrollHeaderPanel.scroller, 'object');
59 59 assert.equal(scrollHeaderPanel.keepCondensedHeader, false);
60 60 assert.equal(scrollHeaderPanel.keepCondensedHeader, false);
  61 +
  62 + scrollHeaderPanel.measureHeaderHeight();
61 63 assert.equal(scrollHeaderPanel.headerHeight, toolbar.offsetHeight);
62 64 assert.equal(scrollHeaderPanel.condensedHeaderHeight, Math.round(toolbar.offsetHeight * 1/3));
63 65 });
... ...
bower_components/paper-scroll-header-panel/test/header-state.html
  View file @0a86ccc
... ... @@ -28,8 +28,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
28 28 <test-fixture id="trivialProgress">
29 29 <template>
30 30 <paper-scroll-header-panel condenses>
31   - <paper-toolbar class="tall">
32   - </paper-toolbar>
  31 + <paper-toolbar class="tall"></paper-toolbar>
33 32 <div class="content">
34 33 <sample-content size="100"></sample-content>
35 34 </div>
... ... @@ -45,43 +44,44 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
45 44 setup(function() {
46 45 scrollHeaderPanel = fixture('trivialProgress');
47 46 toolbar = Polymer.dom(scrollHeaderPanel).querySelector('paper-toolbar');
  47 + scrollHeaderPanel.measureHeaderHeight();
  48 + scrollHeaderPanel.scroll(0);
48 49 });
49 50  
50 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 56 flush(function() {
56   - assert.notEqual(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_EXPANDED);
  57 + assert.notEqual(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED);
57 58 done();
58 59 });
59 60 });
60 61  
61 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 67 done();
67   - });
  68 + //});
68 69 });
69 70  
70 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 80 test('HEADER_STATE_INTERPOLATED', function(done) {
81   - scrollHeaderPanel.scroller.scrollTop = toolbar.offsetHeight * 0.5;
  81 + scrollHeaderPanel.scroll(1);
82 82  
83 83 flush(function() {
84   - assert.equal(scrollHeaderPanel.headerState, scrollHeaderPanel.HEADER_STATE_INTERPOLATED);
  84 + assert.equal(scrollHeaderPanel.headerState, Polymer.PaperScrollHeaderPanel.HEADER_STATE_INTERPOLATED);
85 85 done();
86 86 });
87 87 });
... ...
bower_components/paper-scroll-header-panel/test/index.html
  View file @0a86ccc
1   -<!doctype html>
2   -<!--
  1 +<!DOCTYPE html><!--
3 2 @license
4 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 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 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
8 7 Code distributed by Google as part of the polymer project is also
9 8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
10   --->
11   -<html>
12   -<head>
  9 +--><html><head>
13 10 <meta charset="UTF-8">
14 11 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
15 12 <title>Tests</title>
... ... @@ -20,8 +17,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
20 17 WCT.loadSuites([
21 18 'basic.html',
22 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 25 </script>
26   -</body>
27   -</html>
  26 +
  27 +
  28 +</body></html>
... ...
bower_components/paper-scroll-header-panel/test/scroll.html
  View file @0a86ccc
... ... @@ -27,7 +27,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
27 27  
28 28 <test-fixture id="trivialProgress">
29 29 <template>
30   - <paper-scroll-header-panel>
  30 + <paper-scroll-header-panel condenses>
31 31 <paper-toolbar>
32 32 </paper-toolbar>
33 33 <div class="content">
... ... @@ -44,6 +44,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
44 44  
45 45 setup(function() {
46 46 scrollHeaderPanel = fixture('trivialProgress');
  47 + scrollHeaderPanel.measureHeaderHeight();
  48 + });
  49 +
  50 + teardown(function() {
  51 + scrollHeaderPanel.scroll(0);
47 52 });
48 53  
49 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 59 if (scrollHeaderPanel.scroller.scrollTop === destination) {
55 60 assert.notEqual(adjustments, 0);
56 61 done();
  62 + return;
57 63 }
58 64 adjustments++;
59 65 setTimeout(check, 0);
... ... @@ -63,18 +69,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
63 69 });
64 70  
65 71 test('condense smoothly', function(done) {
66   - scrollHeaderPanel.condenses = true;
67   -
68 72 flush(function() {
69 73 var destination = 100;
70 74 var adjustments = 0;
71 75 function check() {
72   - if (scrollHeaderPanel.headerState === scrollHeaderPanel.HEADER_STATE_CONDENSED) {
  76 + if (scrollHeaderPanel.headerState === Polymer.PaperScrollHeaderPanel.HEADER_STATE_CONDENSED) {
73 77 assert.notEqual(adjustments, 0);
74 78 done();
  79 + return;
75 80 }
76 81 adjustments++;
77   - setTimeout(check, 0);
  82 + setTimeout(check, 1);
78 83 }
79 84 scrollHeaderPanel.condense(true);
80 85 check();
... ... @@ -82,15 +87,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
82 87 });
83 88  
84 89 test('condense immediately', function(done) {
85   - scrollHeaderPanel.condenses = true;
86   -
87 90 flush(function() {
88 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 103 if (scrollHeaderPanel.scroller.scrollTop === 0) {
104 104 assert.notEqual(adjustments, 0);
105 105 done();
  106 + return;
106 107 }
107 108 adjustments++;
108 109 setTimeout(check, 0);
... ...
datalets/datasetexplorer-datalet/treemap_tooltip.html 100644 → 100755
  View file @0a86ccc
datalets/leafletjs-datalet/leafletjs-datalet.html
  View file @0a86ccc
... ... @@ -75,7 +75,10 @@ Example:
75 75 presentData: function(){
76 76  
77 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 83 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
81 84 maxZoom: 18,
... ... @@ -111,7 +114,7 @@ Example:
111 114 t._component.map._onResize();
112 115 t._component.map.invalidateSize(false);
113 116 t._component.map.fitBounds(coordinates);
114   - }, 1000)
  117 + }, 1)
115 118 }
116 119 };
117 120  
... ...
locales/paper-card-ln.js 100644 → 100755
  View file @0a86ccc