WebCompDev / COMPONENTS

Commit a53fbbed96fcc8f0b7c558dcaa21da58c57b1264

Authored by Renato De Donato
1 parent 0549043e

select-dataset new interface

Inline Side-by-side
Showing 63 changed files with 3886 additions and 886 deletions
bower_components/iron-list/.bower.json 100755 โ†’ 100644
  View file @a53fbbe
... ... @@ -7,43 +7,52 @@
7 7 "list",
8 8 "virtual-list"
9 9 ],
10   - "version": "1.1.5",
  10 + "version": "1.2.8",
11 11 "homepage": "https://github.com/PolymerElements/iron-list",
12 12 "authors": [
13 13 "The Polymer Authors"
14 14 ],
  15 + "repository": {
  16 + "type": "git",
  17 + "url": "git://github.com/PolymerElements/iron-list"
  18 + },
15 19 "main": "iron-list.html",
16 20 "license": "http://polymer.github.io/LICENSE.txt",
17 21 "ignore": [],
18 22 "dependencies": {
19 23 "polymer": "Polymer/polymer#^1.1.0",
20   - "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0"
  24 + "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
  25 + "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
  26 + "iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
21 27 },
22 28 "devDependencies": {
  29 + "app-layout": "PolymerLabs/app-layout#master",
23 30 "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
24 31 "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
25   - "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#^1.0.0",
  32 + "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
  33 + "iron-icon": "polymerelements/iron-icon#^1.0.0",
  34 + "iron-icons": "polymerelements/iron-icons#^1.0.0",
  35 + "iron-scroll-threshold": "polymerelements/iron-scroll-threshold#^1.0.0",
  36 + "iron-image": "polymerelements/iron-image#^1.0.0",
26 37 "paper-menu": "polymerelements/paper-menu#^1.0.0",
27 38 "paper-item": "polymerelements/paper-item#^1.0.0",
28 39 "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
29 40 "paper-button": "polymerelements/paper-button#^1.0.0",
30   - "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
31   - "iron-icon": "polymerelements/iron-icon#^1.0.0",
32   - "iron-icons": "polymerelements/iron-icons#^1.0.0",
33 41 "paper-badge": "polymerelements/paper-badge#^1.0.0",
34   - "paper-toolbar": "polymerelements/paper-toolbar#^1.0.0",
  42 + "paper-spinner": "polymerelements/paper-spinner#^1.0.0",
35 43 "test-fixture": "polymerelements/test-fixture#^1.0.0",
36 44 "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
37 45 "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
38   - "web-component-tester": "*"
  46 + "web-component-tester": "^4.0.0"
39 47 },
40   - "_release": "1.1.5",
  48 + "_release": "1.2.8",
41 49 "_resolution": {
42 50 "type": "version",
43   - "tag": "v1.1.5",
44   - "commit": "c6bf7caf1745cc3bed0769d41ac405476ef981b8"
  51 + "tag": "v1.2.8",
  52 + "commit": "4d974edf5c2eca5646846910efcc0bacbbff647f"
45 53 },
46 54 "_source": "git://github.com/PolymerElements/iron-list.git",
47   - "_target": "^1.0.0",
48   - "_originalSource": "PolymerElements/iron-list"
  55 + "_target": "~1.2.8",
  56 + "_originalSource": "PolymerElements/iron-list",
  57 + "_direct": true
49 58 }
50 59 \ No newline at end of file
... ...
bower_components/iron-list/.gitignore 100755 โ†’ 100644
  View file @a53fbbe
bower_components/iron-list/.travis.yml 0 โ†’ 100644
  View file @a53fbbe
  1 +language: node_js
  2 +sudo: false
  3 +before_script:
  4 + - npm install -g bower polylint web-component-tester
  5 + - bower install
  6 + - polylint
  7 +env:
  8 + global:
  9 + - secure: qC9ustzA7LUlOLi34bsHNYQRkTMd8/KLNTXGGscSgWmSTb2bgyngdWOuIjA6qVvfaHrB/CygMiy17QJn0IeKD18yfGJHu17vYxDy4WW628An3C3VIgXO4F4+LzyDFuoHfK3eQYHrBKh6M8JvG6CVU/QYdOrzuwDtcOkZIEA72N8rj5bROcPygmHZsa/0cjz7Q29lseiI1qpPxcQPMADoJfD4BvnMD7kyJJTkLyq4UDySaWmC8GT6C8PIXeZI8uLQFOc47TQqFnGJg3H6luQoOC5wQ3uv4gBWbek5pY/GAXieDNvuXAdi7cvRziCuW4oG+cYg8NYZCBI7VkMcYhEA7wNzhhcb+OPt5eOgV0YPZjyVRhXktc+ikRQYi2UU9ig66UlJFMRuNcz9al6AAKa4La5Msalv8dJnLc896qebs9eWTN5uAn4QvOJ3KHtuBNppJtJVDi1GLdIWDZgad0paklGyyln0FRwBiQauiOsuvynJBk2H97f/45l95ExEpTNPzpu3rVXkSd5xF8UYzFvw0Fb1gYQa3kNKM10leHQvr+WfQ9t1xfpGpCkPC1YOVFS9HSipBLKGmeFkl3Xa+bMSF+lrEPSHMNTN02Tq1FfIJGOlHTeRhahLldWw0REZZ5xXyzdGa8HKt7gA0aktrkYbFbJNjciN68I+bGqMt3U2KZw=
  10 + - secure: vj29+8qXACt2RY0sK0Qk1Mf8XM5pgDDeJBqzoSyNxGAYL08BQAHQvXNv/2qWfSfA4b1HxleERsN2X4+b3mOAyWpKDAOcOABptpdI3qAQsZFOC1Qslz/vqHQBqIphZhiaxd1nVg02xJgrCt6Pk3sW8k7mj2cSH0q9JorWTch3fBWq4pLtzm0b/XEgyw2AbSAM0KUj18BCg9u0hJzrI+kVpenzegdrT3oNU3LYFSz2BgfMKKsuRtaJsMbnlfBhUKNUgfwp9FenvnztGWE3h+ZCK/1zUf0FsedH6s3OWF7U6dALv4AQlgwBKH8TmwVz82bvFpHaqCjy9bhrWbW/kYG+UYCeDg2C1DOAyjr4E42iIiGB/1QKTKCuGplVf2dzYxmozOcJGf7qa440WMfuHSccp5DWH++nEDnjrog1m1uw3GltQuSpJo6LkegwP5R0jHkZxx6K7ssaJWi3VEmwItenecsxvJTDUPn9sR1CQwID82XEc3qCapzXNZIM9UGty9dir79MFmF2oOMzKZhOD9cRt+DLm3s5btM5Nn52bDDw9rZ5XtNY9rFBChszCqZeA/S4v6Iogw8LS9uliLtcY6J8wA7m9bH0ZTjZ1cSXqXsgwovGOprPyggRsmJHD8IQqjBxsslq8/IsPoh7H9ZBSipwROXVjDDYTwsCyf9Nn5/mS2c=
  11 + - CXX=g++-4.8
  12 +node_js: stable
  13 +addons:
  14 + firefox: latest
  15 + apt:
  16 + sources:
  17 + - google-chrome
  18 + - ubuntu-toolchain-r-test
  19 + packages:
  20 + - google-chrome-stable
  21 + - g++-4.8
  22 + sauce_connect: true
  23 +script:
  24 + - "xvfb-run -s '-screen 0 1024x768x24' wct"
  25 + - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
... ...
bower_components/iron-list/CONTRIBUTING.md 0 โ†’ 100644
  View file @a53fbbe
  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 +You can however override the jsbin link with one that's customized to this
  10 +specific element:
  11 +
  12 +jsbin=https://jsbin.com/cagaye/edit?html,output
  13 +-->
  14 +# Polymer Elements
  15 +## Guide for Contributors
  16 +
  17 +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:
  18 +
  19 +### Filing Issues
  20 +
  21 +**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:
  22 +
  23 + 1. **Who will use the feature?** _โ€œAs someone filling out a formโ€ฆโ€_
  24 + 2. **When will they use the feature?** _โ€œWhen I enter an invalid valueโ€ฆโ€_
  25 + 3. **What is the userโ€™s goal?** _โ€œI want to be visually notified that the value needs to be correctedโ€ฆโ€_
  26 +
  27 +**If you are filing an issue to report a bug**, please provide:
  28 +
  29 + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
  30 +
  31 + ```markdown
  32 + The `paper-foo` element causes the page to turn pink when clicked.
  33 +
  34 + ## Expected outcome
  35 +
  36 + The page stays the same color.
  37 +
  38 + ## Actual outcome
  39 +
  40 + The page turns pink.
  41 +
  42 + ## Steps to reproduce
  43 +
  44 + 1. Put a `paper-foo` element in the page.
  45 + 2. Open the page in a web browser.
  46 + 3. Click the `paper-foo` element.
  47 + ```
  48 +
  49 + 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: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
  50 +
  51 + 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
  52 +
  53 +### Submitting Pull Requests
  54 +
  55 +**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.
  56 +
  57 +When submitting pull requests, please provide:
  58 +
  59 + 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
  60 +
  61 + ```markdown
  62 + (For a single issue)
  63 + Fixes #20
  64 +
  65 + (For multiple issues)
  66 + Fixes #32, fixes #40
  67 + ```
  68 +
  69 + 2. **A succinct description of the design** used to fix any related issues. For example:
  70 +
  71 + ```markdown
  72 + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
  73 + ```
  74 +
  75 + 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.
  76 +
  77 +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/iron-list/README.md 100755 โ†’ 100644
  View file @a53fbbe
1   -iron-list
2   -========================
3 1  
4   -`iron-list` displays a virtual, *'infinite'* list. The template inside
  2 +<!---
  3 +
  4 +This README is automatically generated from the comments in these files:
  5 +iron-list.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 +The bot does some handling of markdown. Please file a bug if it does the wrong
  11 +thing! https://github.com/PolymerLabs/tedium/issues
  12 +
  13 +-->
  14 +
  15 +[![Build status](https://travis-ci.org/PolymerElements/iron-list.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-list)
  16 +
  17 +_[Demo and API docs](https://elements.polymer-project.org/elements/iron-list)_
  18 +
  19 +
  20 +##&lt;iron-list&gt;
  21 +
  22 +`iron-list` displays a virtual, 'infinite' list. The template inside
5 23 the iron-list element represents the DOM to create for each list item.
6 24 The `items` property specifies an array of list item data.
7 25  
... ... @@ -13,7 +31,7 @@ be reused with a new model at any time. Particularly, any state that may change
13 31 as the result of a user interaction with the list item must be bound to the model
14 32 to avoid view state inconsistency.
15 33  
16   -__Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling to an
  34 +__Important:__ `iron-list` must either be explicitly sized, or delegate scrolling to an
17 35 explicitly sized parent. By "explicitly sized", we mean it either has an explicit
18 36 CSS `height` property set via a class or inline style, or else is sized by other
19 37 layout means (e.g. the `flex` or `fit` classes).
... ... @@ -24,10 +42,10 @@ List item templates should bind to template models of the following structure:
24 42  
25 43 ```js
26 44 {
27   - index: 0, // data index for this item
28   - item: { // user data corresponding to items[index]
29   - /* user item data */
30   - }
  45 + index: 0, // index in the item array
  46 + selected: false, // true if the current item is selected
  47 + tabIndex: -1, // a dynamically generated tabIndex for focus management
  48 + item: {} // user data corresponding to items[index]
31 49 }
32 50 ```
33 51  
... ... @@ -56,30 +74,33 @@ bound from the model object provided to the template scope):
56 74 <iron-list items="[[data]]" as="item">
57 75 <template>
58 76 <div>
59   - Name: <span>[[item.name]]</span>
  77 + Name: [[item.name]]
60 78 </div>
61 79 </template>
62 80 </iron-list>
63 81 </template>
64 82 ```
65 83  
66   -### Resizing
  84 +### Accessibility
67 85  
68   -`iron-list` lays out the items when it recives a notification via the `iron-resize` event.
69   -This event is fired by any element that implements `IronResizableBehavior`.
  86 +`iron-list` automatically manages the focus state for the items. It also provides
  87 +a `tabIndex` property within the template scope that can be used for keyboard navigation.
  88 +For example, users can press the up and down keys to move to previous and next
  89 +items in the list:
70 90  
71   -By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
72   -this event automatically. If you hide the list manually (e.g. you use `display: none`)
73   -you might want to implement `IronResizableBehavior` or fire this event manually right
74   -after the list became visible again. e.g.
75   -
76   -```js
77   -document.querySelector('iron-list').fire('iron-resize');
  91 +```html
  92 +<iron-list items="[[data]]" as="item">
  93 + <template>
  94 + <div tabindex$="[[tabIndex]]">
  95 + Name: [[item.name]]
  96 + </div>
  97 + </template>
  98 +</iron-list>
78 99 ```
79 100  
80 101 ### Styling
81 102  
82   -Use the `--iron-list-items-container` mixin to style the container of items, e.g.
  103 +You can use the `--iron-list-items-container` mixin to style the container of items:
83 104  
84 105 ```css
85 106 iron-list {
... ... @@ -89,8 +110,30 @@ iron-list {
89 110 }
90 111 ```
91 112  
  113 +### Resizing
  114 +
  115 +`iron-list` lays out the items when it receives a notification via the `iron-resize` event.
  116 +This event is fired by any element that implements `IronResizableBehavior`.
  117 +
  118 +By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
  119 +this event automatically. If you hide the list manually (e.g. you use `display: none`)
  120 +you might want to implement `IronResizableBehavior` or fire this event manually right
  121 +after the list became visible again. For example:
  122 +
  123 +```js
  124 +document.querySelector('iron-list').fire('iron-resize');
  125 +```
  126 +
92 127 ### When should `<iron-list>` be used?
93 128  
94   -`iron-list` should be used when a page has significantly more DOM nodes than the ones visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at the time. This is why we refer to it as a `virtual` list. In this case, a `dom-repeat` will still create 500 nodes which could slow down the web app, but `iron-list` will only create 20.
  129 +`iron-list` should be used when a page has significantly more DOM nodes than the ones
  130 +visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at the time.
  131 +This is why we refer to it as a `virtual` list. In this case, a `dom-repeat` will still
  132 +create 500 nodes which could slow down the web app, but `iron-list` will only create 20.
  133 +
  134 +However, having an `iron-list` does not mean that you can load all the data at once.
  135 +Say, you have a million records in the database, you want to split the data into pages
  136 +so you can bring a page at the time. The page could contain 500 items, and iron-list
  137 +will only render 20.
  138 +
95 139  
96   -However, having an `iron-list` does not mean that you can load all the data at once. Say, you have a million records in the database, you want to split the data into pages so you can bring a page at the time. The page could contain 500 items, and iron-list will only render 20.
... ...
bower_components/iron-list/bower.json 100755 โ†’ 100644
  View file @a53fbbe
... ... @@ -7,34 +7,42 @@
7 7 "list",
8 8 "virtual-list"
9 9 ],
10   - "version": "1.1.5",
  10 + "version": "1.2.8",
11 11 "homepage": "https://github.com/PolymerElements/iron-list",
12 12 "authors": [
13 13 "The Polymer Authors"
14 14 ],
  15 + "repository": {
  16 + "type": "git",
  17 + "url": "git://github.com/PolymerElements/iron-list"
  18 + },
15 19 "main": "iron-list.html",
16 20 "license": "http://polymer.github.io/LICENSE.txt",
17 21 "ignore": [],
18 22 "dependencies": {
19 23 "polymer": "Polymer/polymer#^1.1.0",
20   - "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0"
  24 + "iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
  25 + "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
  26 + "iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
21 27 },
22 28 "devDependencies": {
  29 + "app-layout": "PolymerLabs/app-layout#master",
23 30 "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
24 31 "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
25   - "paper-scroll-header-panel": "polymerelements/paper-scroll-header-panel#^1.0.0",
  32 + "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
  33 + "iron-icon": "polymerelements/iron-icon#^1.0.0",
  34 + "iron-icons": "polymerelements/iron-icons#^1.0.0",
  35 + "iron-scroll-threshold": "polymerelements/iron-scroll-threshold#^1.0.0",
  36 + "iron-image": "polymerelements/iron-image#^1.0.0",
26 37 "paper-menu": "polymerelements/paper-menu#^1.0.0",
27 38 "paper-item": "polymerelements/paper-item#^1.0.0",
28 39 "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
29 40 "paper-button": "polymerelements/paper-button#^1.0.0",
30   - "iron-ajax": "polymerelements/iron-ajax#^1.0.0",
31   - "iron-icon": "polymerelements/iron-icon#^1.0.0",
32   - "iron-icons": "polymerelements/iron-icons#^1.0.0",
33 41 "paper-badge": "polymerelements/paper-badge#^1.0.0",
34   - "paper-toolbar": "polymerelements/paper-toolbar#^1.0.0",
  42 + "paper-spinner": "polymerelements/paper-spinner#^1.0.0",
35 43 "test-fixture": "polymerelements/test-fixture#^1.0.0",
36 44 "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
37 45 "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
38   - "web-component-tester": "*"
  46 + "web-component-tester": "^4.0.0"
39 47 }
40 48 }
... ...
bower_components/iron-list/demo/basic.html 0 โ†’ 100644
  View file @a53fbbe
  1 +<!--
  2 +@license
  3 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 +Code distributed by Google as part of the polymer project is also
  8 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 +-->
  10 +
  11 +<!doctype html>
  12 +<html>
  13 +<head>
  14 +
  15 + <title>iron-list demo</title>
  16 +
  17 + <meta charset="utf-8">
  18 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
  19 + <meta name="mobile-web-app-capable" content="yes">
  20 + <meta name="apple-mobile-web-app-capable" content="yes">
  21 +
  22 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  23 +
  24 + <link rel="import" href="../../polymer/polymer.html">
  25 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  26 + <link rel="import" href="../../iron-ajax/iron-ajax.html">
  27 + <link rel="import" href="../iron-list.html">
  28 +
  29 + <style is="custom-style">
  30 +
  31 + iron-list {
  32 + @apply(--layout-fit);
  33 + }
  34 +
  35 + .item {
  36 + padding: 10px;
  37 + border-bottom: 1px solid #ccc;
  38 + }
  39 +
  40 + </style>
  41 +
  42 +</head>
  43 +<body unresolved>
  44 +
  45 + <template is="dom-bind">
  46 + <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
  47 +
  48 + <iron-list items="[[data]]" as="item">
  49 + <template>
  50 + <div class="item">
  51 + <b>#[[index]] - [[item.name]]</b>
  52 + <p>[[item.longText]]</p>
  53 + </div>
  54 + </template>
  55 + </iron-list>
  56 +
  57 + </template>
  58 +
  59 +</body>
  60 +</html>
... ...
bower_components/iron-list/demo/collapse.html 100755 โ†’ 100644
  View file @a53fbbe
... ... @@ -15,7 +15,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
15 15 <title>Collapsable items using iron-list</title>
16 16  
17 17 <meta charset="utf-8">
18   - <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  18 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
19 19 <meta name="mobile-web-app-capable" content="yes">
20 20 <meta name="apple-mobile-web-app-capable" content="yes">
21 21  
... ... @@ -23,13 +23,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
23 23  
24 24 <link rel="import" href="../../polymer/polymer.html">
25 25 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
26   - <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
27   - <link rel="import" href="../../paper-scroll-header-panel/paper-scroll-header-panel.html">
  26 + <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
28 27 <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  28 + <link rel="import" href="../../paper-styles/color.html">
  29 + <link rel="import" href="../../paper-styles/typography.html">
29 30 <link rel="import" href="../../iron-ajax/iron-ajax.html">
30 31 <link rel="import" href="../../iron-icons/iron-icons.html">
  32 + <link rel="import" href="../../iron-image/iron-image.html">
31 33 <link rel="import" href="../iron-list.html">
32 34  
  35 + <style>
  36 + body {
  37 + background-color: #eee;
  38 + margin: 0;
  39 + padding: 0;
  40 + }
  41 + </style>
33 42 </head>
34 43 <body unresolved>
35 44  
... ... @@ -37,26 +46,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
37 46 <template>
38 47 <style>
39 48 :host {
40   - @apply(--layout-fit);
41   - @apply(--layout-vertical);
  49 + display: block;
42 50 @apply(--paper-font-common-base);
43 51 }
44 52  
45   - paper-toolbar {
46   - background: var(--google-green-700);
47   - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  53 + app-toolbar {
  54 + background-color: var(--google-green-700);
  55 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
48 56 font-weight: bold;
  57 + color: white;
49 58 z-index: 1;
  59 + position: fixed;
  60 + top: 0;
  61 + left: 0;
  62 + right: 0;
50 63 }
51 64  
52   - paper-toolbar paper-icon-button {
  65 + app-toolbar paper-icon-button {
53 66 --paper-icon-button-ink-color: white;
54 67 }
55 68  
56 69 iron-list {
57   - background-color: var(--paper-grey-200, #eee);
58   - padding-top: 1px;
59   - padding-bottom: 16px;
  70 + padding-top: 64px;
60 71 --iron-list-items-container: {
61 72 max-width: 800px;
62 73 margin: auto;
... ... @@ -71,16 +82,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
71 82 padding: 20px;
72 83 background-color: white;
73 84 border: 1px solid #ddd;
74   -
75 85 cursor: pointer;
76 86 margin-bottom: 10px;
77 87 }
78 88  
79   - .item:focus {
80   - outline: 0;
81   - border-color: #666;
82   - }
83   -
84 89 .avatar {
85 90 height: 40px;
86 91 width: 40px;
... ... @@ -125,59 +130,76 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
125 130 .item.expanded:hover .longText::after {
126 131 content: ' [โ€“]';
127 132 }
  133 +
  134 + .spacer {
  135 + @apply(--layout-flex);
  136 + }
  137 +
  138 + @media (max-width: 460px) {
  139 + paper-toolbar .bottom.title {
  140 + font-size: 14px;
  141 + }
  142 + }
128 143 </style>
  144 +
129 145 <iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>
130   - <paper-toolbar>
131   - <paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
132   - <div class="flex"></div>
133   - <paper-icon-button icon="search" alt="Search"></paper-icon-button>
134   - <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
135   - <div class="bottom title">Collapsable items using iron-list</div>
136   - </paper-toolbar>
137   - <iron-list id="list" items="[[items]]" as="item">
138   - <template>
139   - <div on-tap="_collapseExpand">
140   - <div class$="[[getClassForItem(item, item.expanded)]]" tabindex="0">
141   - <img class="avatar" src="[[item.image]]">
142   - <div class="pad">
143   - <div class="primary">[[item.name]]</div>
144   - <div class="shortText">[[item.shortText]]</div>
145   - <div class="longText">[[item.longText]]</div>
146   - </div>
147   - <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
  146 +
  147 + <app-toolbar>
  148 + <div title>Collapsable items</div>
  149 + <paper-icon-button icon="search" alt="Search"></paper-icon-button>
  150 + <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
  151 + </app-toolbar>
  152 +
  153 + <iron-list id="list" items="[[items]]" as="item" selection-enabled multi-selection>
  154 + <template>
  155 + <div>
  156 + <div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
  157 + <iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
  158 + <div class="pad">
  159 + <div class="primary">[[item.name]]</div>
  160 + <div class="shortText">[[item.shortText]]</div>
  161 + <div class="longText">[[item.longText]]</div>
148 162 </div>
  163 + <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
149 164 </div>
150   - </template>
151   - </iron-list>
  165 + </div>
  166 + </template>
  167 + </iron-list>
  168 +
152 169 </template>
  170 +
153 171 <script>
154   - HTMLImports.whenReady(function() {
  172 +
  173 + HTMLImports.whenReady(function() {
  174 +
155 175 Polymer({
156 176 is: 'x-collapse',
  177 +
157 178 properties: {
  179 +
158 180 items: {
159 181 type: Array
160 182 }
161   - },
162 183  
163   - _collapseExpand: function(e) {
164   - var list = this.$.list;
165   - var index = e.model.index;
166   - var isExpanded = list.items[index].expanded;
  184 + },
167 185  
168   - list.set('items.' + index + '.expanded', !isExpanded);
169   - list.updateSizeForItem(e.model.index);
  186 + attached: function() {
  187 + // Use the document element
  188 + this.$.list.scrollTarget = this.ownerDocument.documentElement;
170 189 },
171 190  
172 191 iconForItem: function(item) {
173 192 return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
174 193 },
175 194  
176   - getClassForItem: function(item, expanded) {
177   - return expanded ? 'item expanded' : 'item';
  195 + getClassForItem: function(item, selected) {
  196 + return selected ? 'item expanded' : 'item';
178 197 }
  198 +
179 199 });
  200 +
180 201 });
  202 +
181 203 </script>
182 204 </dom-module>
183 205  
... ...
bower_components/iron-list/demo/data/contacts.json 100755 โ†’ 100644
  View file @a53fbbe
bower_components/iron-list/demo/index.html 100755 โ†’ 100644
  View file @a53fbbe
... ... @@ -9,13 +9,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
9 9 -->
10 10  
11 11 <!doctype html>
12   -<html>
  12 +<html id="html">
13 13 <head>
14 14  
15   - <title>iron-list and paper-scroll-header-panel demo</title>
  15 + <title>iron-list demo</title>
16 16  
17 17 <meta charset="utf-8">
18   - <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  18 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
19 19 <meta name="mobile-web-app-capable" content="yes">
20 20 <meta name="apple-mobile-web-app-capable" content="yes">
21 21  
... ... @@ -23,52 +23,77 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
23 23  
24 24 <link rel="import" href="../../polymer/polymer.html">
25 25 <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
26   - <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
27   - <link rel="import" href="../../paper-scroll-header-panel/paper-scroll-header-panel.html">
  26 + <link rel="import" href="../../app-layout/app-header/app-header.html">
  27 + <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
  28 + <link rel="import" href="../../app-layout/app-scroll-effects/app-scroll-effects.html">
28 29 <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
29 30 <link rel="import" href="../../iron-ajax/iron-ajax.html">
30 31 <link rel="import" href="../../iron-icons/iron-icons.html">
  32 + <link rel="import" href="../../iron-image/iron-image.html">
31 33 <link rel="import" href="../iron-list.html">
32 34  
33 35 <style is="custom-style">
  36 + body {
  37 + @apply(--layout-fullbleed);
  38 + font-family: 'Roboto', 'Noto', sans-serif;
  39 + background-color: #eee;
  40 + }
34 41  
35   - paper-scroll-header-panel {
36   - @apply(--layout-fit);
37   - @apply(--layout-vertical);
38   - @apply(--paper-font-common-base);
  42 + app-header {
  43 + position: fixed;
  44 + top: 0;
  45 + left: 0;
  46 + right: 0;
  47 + z-index: 1;
  48 + background-color: #0b8043;
  49 + color: white;
  50 + --app-header-background-front-layer: {
  51 + background-color: #4285f4;
  52 + };
39 53 }
40 54  
41   - paper-toolbar.tall .title {
42   - font-size: 40px;
43   - margin-left: 60px;
  55 + app-header paper-icon-button {
  56 + --paper-icon-button-ink-color: white;
  57 + }
44 58  
45   - -webkit-transform-origin: left center;
46   - transform-origin: left center;
47   - overflow: visible;
  59 + [title] {
  60 + font-weight: 400;
  61 + margin: 0 0 0 50px;
48 62 }
49 63  
50   - paper-toolbar paper-icon-button {
51   - --paper-icon-button-ink-color: white;
  64 + [condensed-title] {
  65 + font-weight: 400;
  66 + margin-left: 30px;
  67 + }
  68 +
  69 + [condensed-title] i {
  70 + font-style: normal;
  71 + font-weight: 100;
  72 + }
  73 +
  74 + app-toolbar.tall {
  75 + height: 148px;
52 76 }
53 77  
54 78 iron-list {
55   - background-color: var(--paper-grey-200, #eee);
  79 + padding-top: 148px;
  80 + margin-top: 64px;
56 81 padding-bottom: 16px;
57 82 }
58 83  
59 84 .item {
60 85 @apply(--layout-horizontal);
61   -
62   - margin: 16px 16px 0 16px;
63 86 padding: 20px;
64 87 border-radius: 8px;
65 88 background-color: white;
66 89 border: 1px solid #ddd;
  90 + max-width: 800px;
  91 + margin: 16px auto 0 auto;
67 92 }
68 93  
69 94 .item:focus {
70 95 outline: 0;
71   - border-color: #666;
  96 + border-color: #333;
72 97 }
73 98  
74 99 .avatar {
... ... @@ -98,6 +123,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
98 123 color: gray;
99 124 }
100 125  
  126 + .spacer {
  127 + @apply(--layout-flex);
  128 + }
  129 +
101 130 </style>
102 131  
103 132 </head>
... ... @@ -106,47 +135,35 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
106 135 <template is="dom-bind">
107 136 <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
108 137  
109   - <paper-scroll-header-panel class="fit" condenses keep-condensed-header>
110   - <paper-toolbar class="tall">
111   - <paper-icon-button icon="arrow-back" alt="Back"></paper-icon-button>
112   - <div class="flex"></div>
113   - <paper-icon-button icon="search" alt="Search"></paper-icon-button>
114   - <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
115   - <div class="bottom title">iron-list</div>
116   - </paper-toolbar>
117   - <iron-list items="[[data]]" as="item">
  138 + <app-header condenses fixed effects="resize-title blend-background waterfall">
  139 + <app-toolbar>
  140 + <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
  141 + <h4 condensed-title>iron-list <i>&mdash; Demo</i></h4>
  142 + <paper-icon-button icon="search"></paper-icon-button>
  143 + <paper-icon-button icon="more-vert"></paper-icon-button>
  144 + </app-toolbar>
  145 + <app-toolbar class="tall">
  146 + <h1 title>iron-list</h1>
  147 + </app-toolbar>
  148 + </app-header>
  149 +
  150 + <!-- iron-list using the document scroll -->
  151 + <iron-list items="[[data]]" as="item" scroll-target="html">
118 152 <template>
119 153 <div>
120   - <div class="item">
121   - <img class="avatar" src="[[item.image]]">
  154 + <div class="item" tabindex$="[[tabIndex]]">
  155 + <iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
122 156 <div class="pad">
123   - <div class="primary">[[item.name]]</div>
  157 + <div class="primary">[[item.name]] [[index]]</div>
124 158 <div class="secondary">[[item.shortText]]</div>
125 159 <div class="secondary dim">[[item.longText]]</div>
126 160 </div>
127   - <iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
128 161 </div>
129 162 </div>
130 163 </template>
131 164 </iron-list>
132   - </paper-scroll-header-panel>
133   - </template>
134 165  
135   - <script>
136   -
137   - document.querySelector('template[is=dom-bind]').iconForItem = function(item) {
138   - return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
139   - };
140   -
141   - document.addEventListener('paper-header-transform', function(event) {
142   - var title = this.querySelector('.title');
143   - var detail = event.detail;
144   - var deltaHeight = detail.height - detail.condensedHeight;
145   - var scale = Math.max(0.6, (deltaHeight - detail.y) / (deltaHeight / 0.4) + 0.6);
146   -
147   - Polymer.Base.transform('scale(' + scale + ') translateZ(0)', title);
148   - });
  166 + </template>
149 167  
150   - </script>
151 168 </body>
152 169 </html>
... ...
bower_components/iron-list/demo/scroll-threshold.html 0 โ†’ 100644
  View file @a53fbbe
  1 +<!--
  2 +@license
  3 +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  4 +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  5 +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  6 +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  7 +Code distributed by Google as part of the polymer project is also
  8 +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  9 +-->
  10 +
  11 +<!doctype html>
  12 +<html id="html">
  13 +<head>
  14 +
  15 + <title>Load data using iron-scroll-threshold</title>
  16 +
  17 + <meta charset="utf-8">
  18 + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
  19 + <meta name="mobile-web-app-capable" content="yes">
  20 + <meta name="apple-mobile-web-app-capable" content="yes">
  21 +
  22 + <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  23 +
  24 + <link rel="import" href="../../polymer/polymer.html">
  25 + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  26 + <link rel="import" href="../../iron-scroll-threshold/iron-scroll-threshold.html">
  27 + <link rel="import" href="../../paper-styles/color.html">
  28 + <link rel="import" href="../../paper-styles/typography.html">
  29 + <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
  30 + <link rel="import" href="../../paper-spinner/paper-spinner.html">
  31 + <link rel="import" href="../../iron-ajax/iron-ajax.html">
  32 + <link rel="import" href="../../iron-icons/iron-icons.html">
  33 + <link rel="import" href="../iron-list.html">
  34 +
  35 + <style is="custom-style">
  36 +
  37 + body {
  38 + @apply(--paper-font-common-base);
  39 + margin: 0;
  40 + padding: 0;
  41 + background-color: #eee;
  42 + }
  43 +
  44 + app-toolbar {
  45 + position: fixed;
  46 + top: 0;
  47 + left: 0;
  48 + right: 0;
  49 + background: #F57C00;
  50 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  51 + color: white;
  52 + z-index: 1;
  53 + font-weight: bold;
  54 + }
  55 +
  56 + .loadingIndicator {
  57 + text-align: center;
  58 + height: 40px;
  59 + }
  60 +
  61 + .loadingIndicator paper-spinner {
  62 + width: 20px;
  63 + height: 20px;
  64 + margin-right: 10px;
  65 + }
  66 +
  67 + iron-list {
  68 + padding-top: 64px;
  69 + padding-bottom: 16px;
  70 + --iron-list-items-container: {
  71 + max-width: 800px;
  72 + margin: auto;
  73 + margin-top: 60px;
  74 + margin-bottom: 10px;
  75 + };
  76 + }
  77 +
  78 + .personItem {
  79 + @apply(--layout-horizontal);
  80 +
  81 + margin: 16px 16px 0 16px;
  82 + padding: 20px;
  83 + border-radius: 8px;
  84 + background-color: white;
  85 + border: 1px solid #ddd;
  86 + }
  87 +
  88 + .pad {
  89 + padding: 0 16px;
  90 + @apply(--layout-flex);
  91 + @apply(--layout-vertical);
  92 + }
  93 +
  94 + .primary {
  95 + font-size: 16px;
  96 + font-weight: bold;
  97 + }
  98 +
  99 + .secondary {
  100 + font-size: 14px;
  101 + }
  102 +
  103 + .dim {
  104 + color: gray;
  105 + }
  106 +
  107 + .spacer {
  108 + @apply(--layout-flex);
  109 + }
  110 +
  111 + .index {
  112 + width: 30px;
  113 + }
  114 +
  115 + </style>
  116 +
  117 +</head>
  118 +<body unresolved>
  119 +
  120 + <template is="dom-bind" id="app">
  121 +
  122 + <iron-ajax id="ajax"
  123 + url="http://www.filltext.com/"
  124 + params='{"rows": "20", "delay": 1, "fname":"{firstName}", "lname": "{lastName}", "address": "{streetAddress}",
  125 + "city": "{city}", "state": "{usState|abb}", "zip": "{zip}", "business": "{business}", "index": "{index}"}'
  126 + handle-as="json"
  127 + loading="{{loadingPeople}}"
  128 + on-response="_didRespond">
  129 + </iron-ajax>
  130 +
  131 + <app-toolbar>
  132 + <div title>Load data using iron-scroll-threshold</div>
  133 + </app-toolbar>
  134 +
  135 + <iron-list id="list" items="[]" as="person" scroll-target="html">
  136 + <template>
  137 + <div>
  138 + <div class="personItem" tabindex$="[[tabIndex]]">
  139 + <div class="pad">
  140 + <div class="primary">[[person.fname]] [[person.lname]]</div>
  141 + <div class="secondary">[[person.address]] [[person.city]]</div>
  142 + <div class="secondary">[[person.city]], [[person.state]] [[person.zip]]</div>
  143 + <div class="secondary dim">[[person.business]]</div>
  144 + </div>
  145 + <iron-icon icon$="[[_iconForPerson(person)]]"></iron-icon>
  146 + </div>
  147 + </div>
  148 + </template>
  149 + </iron-list>
  150 +
  151 + <div class="loadingIndicator">
  152 + <paper-spinner active="{{loadingPeople}}"></paper-spinner> Fetching data
  153 + </div>
  154 +
  155 + <!-- this element will load more data when the user scrolls down and reached the lower threshold -->
  156 + <iron-scroll-threshold id="scrollTheshold"
  157 + lower-threshold="500"
  158 + on-lower-threshold="_loadMoreData"
  159 + scroll-target="html">
  160 + </iron-scroll-threshold>
  161 +
  162 + </template>
  163 +
  164 + <script>
  165 +
  166 + (function(scope) {
  167 +
  168 + scope._iconForPerson = function(person) {
  169 + return person.integer < 50 ? 'star-border' : 'star';
  170 + };
  171 +
  172 + scope._loadMoreData = function() {
  173 + scope.$.ajax.generateRequest();
  174 + };
  175 +
  176 + scope._didRespond = function(e) {
  177 + var people = e.detail.response;
  178 +
  179 + people.forEach(function(person) {
  180 + scope.$.list.push('items', person);
  181 + });
  182 + // Clear the lower threshold so we can load more data when the user scrolls down again.
  183 + scope.$.scrollTheshold.clearTriggers();
  184 + };
  185 +
  186 + })(document.querySelector('#app'));
  187 +
  188 + </script>
  189 +
  190 +</body>
  191 +</html>
... ...
bower_components/iron-list/demo/selection.html 100755 โ†’ 100644
  View file @a53fbbe
... ... @@ -12,7 +12,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
12 12 <html>
13 13 <head>
14 14  
15   - <title>Selection</title>
  15 + <title>Select contacts</title>
16 16  
17 17 <meta charset="utf-8">
18 18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
... ... @@ -27,7 +27,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
27 27 <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
28 28 <link rel="import" href="../../iron-icon/iron-icon.html">
29 29 <link rel="import" href="../../iron-icons/iron-icons.html">
30   - <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  30 + <link rel="import" href="../../paper-styles/color.html">
  31 + <link rel="import" href="../../paper-styles/typography.html">
  32 + <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
31 33 <link rel="import" href="../../paper-menu/paper-menu.html">
32 34 <link rel="import" href="../../paper-item/paper-item.html">
33 35 <link rel="import" href="../../paper-badge/paper-badge.html">
... ... @@ -36,27 +38,32 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
36 38 <dom-module id="x-app">
37 39  
38 40 <style>
39   -
40 41 :host {
41 42 @apply(--layout-fit);
42 43 @apply(--layout-vertical);
43 44 @apply(--paper-font-common-base);
44   -
45   - display: block;
46 45 font-family: sans-serif;
47 46 }
48 47  
49   - .toolbar {
  48 + app-toolbar {
50 49 background: var(--paper-pink-500);
51   - box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
52   - font-weight: bold;
  50 + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
  51 + color: white;
  52 + z-index: 1;
  53 + color: white;
  54 + --paper-toolbar-title: {
  55 + font-size: 16px;
  56 + line-height: 16px;
  57 + font-weight: bold;
  58 + margin-left: 0;
  59 + };
53 60 }
54 61  
55   - .toolbar paper-icon-button {
  62 + app-toolbar paper-icon-button {
56 63 --paper-icon-button-ink-color: white;
57 64 }
58 65  
59   - #itemsList,
  66 + #itemsList,
60 67 #selectedItemsList {
61 68 @apply(--layout-flex);
62 69 }
... ... @@ -78,8 +85,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
78 85 color: var(--paper-blue-600);
79 86 }
80 87  
81   - .item.selected:not(:focus) {
82   - background-color: var(--google-grey-100);
  88 + .item.selected {
  89 + background-color: var(--google-grey-300);
  90 + border-bottom: 1px solid #ccc;
83 91 }
84 92  
85 93 .avatar {
... ... @@ -87,7 +95,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
87 95 width: 40px;
88 96 border-radius: 20px;
89 97 box-sizing: border-box;
90   - background-color: #DDD;
  98 + background-color: #ddd;
91 99 }
92 100  
93 101 .pad {
... ... @@ -135,11 +143,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
135 143 position: relative;
136 144 }
137 145  
138   - paper-item:focus {
139   - outline: 0;
140   - background-color: #ddd;
141   - }
142   -
143 146 paper-item:hover::after {
144 147 content: "๏ผ";
145 148 width: 16px;
... ... @@ -164,48 +167,56 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
164 167 line-height: 50px;
165 168 }
166 169  
  170 + .twoColumns {
  171 + @apply(--layout-flex);
  172 + @apply(--layout-horizontal);
  173 + overflow: hidden;
  174 + }
  175 +
  176 + #starredView {
  177 + @apply(--layout-vertical);
  178 + }
  179 +
167 180 </style>
168 181  
169 182 <template>
170 183 <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
171 184  
172   - <paper-toolbar class="toolbar">
173   - <div class="flex">Inbox</div>
174   - <div style="position: relative;">
  185 + <app-toolbar>
  186 + <div title>Selection using iron-list</div>
  187 + <div>
175 188 <paper-icon-button icon="icons:star" alt="Starred" on-tap="_toggleStarredView"></paper-icon-button>
176 189 <paper-badge label$="[[selectedItems.length]]"></paper-badge>
177 190 </div>
178   - </paper-toolbar>
179   - <div class="flex horizontal layout">
180   - <div class="flex vertical layout">
181   - <!-- Main List for the items -->
182   - <iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
183   - <template>
184   - <div>
185   - <div tabindex="0" aria-label$="[[_getAriaLabel(item, selected)]]" class$="[[_computedClass(selected)]]">
186   - <img class="avatar" src="[[item.image]]">
187   - <div class="pad">
188   - <div class="primary">
189   - <span>[[index]]</span>
190   - <span>[[item.name]]</span>
191   - </div>
192   - <div class="secondary dim">[[item.shortText]]</div>
  191 + </app-toolbar>
  192 +
  193 + <div class="twoColumns">
  194 + <!-- Main List for the items -->
  195 + <iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
  196 + <template>
  197 + <div>
  198 + <div tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]">
  199 + <img class="avatar" src="[[item.image]]">
  200 + <div class="pad">
  201 + <div class="primary">
  202 + [[item.name]]
193 203 </div>
194   - <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
  204 + <div class="secondary dim">[[item.shortText]]</div>
195 205 </div>
196   - <div class="border"></div>
  206 + <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
197 207 </div>
198   - </template>
199   - </iron-list>
200   - </div>
201   - <div id="starredView" class="vertical layout" hidden$="[[!showSelection]]">
  208 + <div class="border"></div>
  209 + </div>
  210 + </template>
  211 + </iron-list>
  212 + <div id="starredView" hidden$="[[!showSelection]]">
202 213 <template is="dom-if" if="[[!selectedItems.length]]">
203 214 <div class="noSelection">Select a contact</div>
204 215 </template>
205 216 <!-- List for the selected items -->
206 217 <iron-list id="selectedItemsList" items="[[selectedItems]]" hidden$="[[!selectedItems.length]]">
207 218 <template>
208   - <paper-item on-tap="_unselect" tabindex="0">[[item.name]]</paper-item>
  219 + <paper-item tabindex$="[[tabIndex]]" on-tap="_unselect" aria-label$="Deselect [[item.name]]">[[item.name]]</paper-item>
209 220 </template>
210 221 </iron-list>
211 222 </div>
... ... @@ -255,10 +266,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
255 266  
256 267 _showSelectionChanged: function() {
257 268 this.$.selectedItemsList.fire('resize');
258   - },
259   -
260   - _getAriaLabel: function(item, selected) {
261   - return selected ? 'Deselect ' + item.name : 'Select ' + item.name;
262 269 }
263 270 });
264 271  
... ... @@ -267,6 +274,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
267 274 </script>
268 275  
269 276 </head>
  277 +<style is="custom-style">
  278 + body {
  279 + @apply(--layout-fullbleed);
  280 + }
  281 +</style>
270 282 <body unresolved>
271 283  
272 284 <x-app></x-app>
... ...
bower_components/iron-list/index.html 100755 โ†’ 100644
  View file @a53fbbe
bower_components/iron-list/iron-list.html 100755 โ†’ 100644
  View file @a53fbbe
... ... @@ -10,6 +10,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
10 10  
11 11 <link rel="import" href="../polymer/polymer.html">
12 12 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  13 +<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
  14 +<link rel="import" href="../iron-scroll-target-behavior/iron-scroll-target-behavior.html">
13 15  
14 16 <!--
15 17  
... ... @@ -25,7 +27,7 @@ be reused with a new model at any time. Particularly, any state that may change
25 27 as the result of a user interaction with the list item must be bound to the model
26 28 to avoid view state inconsistency.
27 29  
28   -__Important:__ `iron-list` must ether be explicitly sized, or delegate scrolling to an
  30 +__Important:__ `iron-list` must either be explicitly sized, or delegate scrolling to an
29 31 explicitly sized parent. By "explicitly sized", we mean it either has an explicit
30 32 CSS `height` property set via a class or inline style, or else is sized by other
31 33 layout means (e.g. the `flex` or `fit` classes).
... ... @@ -34,12 +36,14 @@ layout means (e.g. the `flex` or `fit` classes).
34 36  
35 37 List item templates should bind to template models of the following structure:
36 38  
37   - {
38   - index: 0, // data index for this item
39   - item: { // user data corresponding to items[index]
40   - /* user item data */
41   - }
42   - }
  39 +```js
  40 +{
  41 + index: 0, // index in the item array
  42 + selected: false, // true if the current item is selected
  43 + tabIndex: -1, // a dynamically generated tabIndex for focus management
  44 + item: {} // user data corresponding to items[index]
  45 +}
  46 +```
43 47  
44 48 Alternatively, you can change the property name used as data index by changing the
45 49 `indexAs` property. The `as` property defines the name of the variable to add to the binding
... ... @@ -49,54 +53,93 @@ For example, given the following `data` array:
49 53  
50 54 ##### data.json
51 55  
52   - [
53   - {"name": "Bob"},
54   - {"name": "Tim"},
55   - {"name": "Mike"}
56   - ]
  56 +```js
  57 +[
  58 + {"name": "Bob"},
  59 + {"name": "Tim"},
  60 + {"name": "Mike"}
  61 +]
  62 +```
57 63  
58 64 The following code would render the list (note the name and checked properties are
59 65 bound from the model object provided to the template scope):
60 66  
61   - <template is="dom-bind">
62   - <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
63   - <iron-list items="[[data]]" as="item">
64   - <template>
65   - <div>
66   - Name: <span>[[item.name]]</span>
67   - </div>
68   - </template>
69   - </iron-list>
  67 +```html
  68 +<template is="dom-bind">
  69 + <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
  70 + <iron-list items="[[data]]" as="item">
  71 + <template>
  72 + <div>
  73 + Name: [[item.name]]
  74 + </div>
70 75 </template>
  76 + </iron-list>
  77 +</template>
  78 +```
  79 +
  80 +### Accessibility
  81 +
  82 +`iron-list` automatically manages the focus state for the items. It also provides
  83 +a `tabIndex` property within the template scope that can be used for keyboard navigation.
  84 +For example, users can press the up and down keys to move to previous and next
  85 +items in the list:
  86 +
  87 +```html
  88 +<iron-list items="[[data]]" as="item">
  89 + <template>
  90 + <div tabindex$="[[tabIndex]]">
  91 + Name: [[item.name]]
  92 + </div>
  93 + </template>
  94 +</iron-list>
  95 +```
71 96  
72 97 ### Styling
73 98  
74   -Use the `--iron-list-items-container` mixin to style the container of items, e.g.
  99 +You can use the `--iron-list-items-container` mixin to style the container of items:
75 100  
76   - iron-list {
77   - --iron-list-items-container: {
78   - margin: auto;
79   - };
80   - }
  101 +```css
  102 +iron-list {
  103 + --iron-list-items-container: {
  104 + margin: auto;
  105 + };
  106 +}
  107 +```
81 108  
82 109 ### Resizing
83 110  
84   -`iron-list` lays out the items when it recives a notification via the `iron-resize` event.
  111 +`iron-list` lays out the items when it receives a notification via the `iron-resize` event.
85 112 This event is fired by any element that implements `IronResizableBehavior`.
86 113  
87 114 By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
88 115 this event automatically. If you hide the list manually (e.g. you use `display: none`)
89 116 you might want to implement `IronResizableBehavior` or fire this event manually right
90   -after the list became visible again. e.g.
  117 +after the list became visible again. For example:
91 118  
92   - document.querySelector('iron-list').fire('iron-resize');
  119 +```js
  120 +document.querySelector('iron-list').fire('iron-resize');
  121 +```
93 122  
  123 +### When should `<iron-list>` be used?
  124 +
  125 +`iron-list` should be used when a page has significantly more DOM nodes than the ones
  126 +visible on the screen. e.g. the page has 500 nodes, but only 20 are visible at the time.
  127 +This is why we refer to it as a `virtual` list. In this case, a `dom-repeat` will still
  128 +create 500 nodes which could slow down the web app, but `iron-list` will only create 20.
  129 +
  130 +However, having an `iron-list` does not mean that you can load all the data at once.
  131 +Say, you have a million records in the database, you want to split the data into pages
  132 +so you can bring a page at the time. The page could contain 500 items, and iron-list
  133 +will only render 20.
94 134  
95 135 @group Iron Element
96 136 @element iron-list
97   -@demo demo/index.html Simple list
98   -@demo demo/selection.html Selection of items
  137 +@demo demo/index.html List of cards
  138 +@demo demo/selection.html Items selection
99 139 @demo demo/collapse.html Collapsable items
  140 +@demo demo/scroll-threshold.html Scroll thesholds
  141 +@demo demo/basic.html Basic list
  142 +
100 143 -->
101 144  
102 145 <dom-module id="iron-list">
... ... @@ -104,14 +147,13 @@ after the list became visible again. e.g.
104 147 <style>
105 148 :host {
106 149 display: block;
  150 + position: relative;
107 151 }
108 152  
109   - :host(.has-scroller) {
110   - overflow: auto;
111   - }
112   -
113   - :host(:not(.has-scroller)) {
114   - position: relative;
  153 + @media only screen and (-webkit-max-device-pixel-ratio: 1) {
  154 + :host {
  155 + will-change: transform;
  156 + }
115 157 }
116 158  
117 159 #items {
... ... @@ -145,8 +187,9 @@ after the list became visible again. e.g.
145 187  
146 188 var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
147 189 var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
148   - var DEFAULT_PHYSICAL_COUNT = 20;
  190 + var DEFAULT_PHYSICAL_COUNT = 3;
149 191 var MAX_PHYSICAL_COUNT = 500;
  192 + var HIDDEN_Y = '-10000px';
150 193  
151 194 Polymer({
152 195  
... ... @@ -232,16 +275,21 @@ after the list became visible again. e.g.
232 275 observers: [
233 276 '_itemsChanged(items.*)',
234 277 '_selectionEnabledChanged(selectionEnabled)',
235   - '_multiSelectionChanged(multiSelection)'
  278 + '_multiSelectionChanged(multiSelection)',
  279 + '_setOverflow(scrollTarget)'
236 280 ],
237 281  
238 282 behaviors: [
239 283 Polymer.Templatizer,
240   - Polymer.IronResizableBehavior
  284 + Polymer.IronResizableBehavior,
  285 + Polymer.IronA11yKeysBehavior,
  286 + Polymer.IronScrollTargetBehavior
241 287 ],
242 288  
243   - listeners: {
244   - 'iron-resize': '_resizeHandler'
  289 + keyBindings: {
  290 + 'up': '_didMoveUp',
  291 + 'down': '_didMoveDown',
  292 + 'enter': '_didEnter'
245 293 },
246 294  
247 295 /**
... ... @@ -251,13 +299,7 @@ after the list became visible again. e.g.
251 299 _ratio: 0.5,
252 300  
253 301 /**
254   - * The element that controls the scroll
255   - * @type {?Element}
256   - */
257   - _scroller: null,
258   -
259   - /**
260   - * The padding-top value of the `scroller` element
  302 + * The padding-top value for the list.
261 303 */
262 304 _scrollerPaddingTop: 0,
263 305  
... ... @@ -267,27 +309,12 @@ after the list became visible again. e.g.
267 309 _scrollPosition: 0,
268 310  
269 311 /**
270   - * The number of tiles in the DOM.
271   - */
272   - _physicalCount: 0,
273   -
274   - /**
275   - * The k-th tile that is at the top of the scrolling list.
276   - */
277   - _physicalStart: 0,
278   -
279   - /**
280   - * The k-th tile that is at the bottom of the scrolling list.
281   - */
282   - _physicalEnd: 0,
283   -
284   - /**
285 312 * The sum of the heights of all the tiles in the DOM.
286 313 */
287 314 _physicalSize: 0,
288 315  
289 316 /**
290   - * The average `offsetHeight` of the tiles observed till now.
  317 + * The average `F` of the tiles observed till now.
291 318 */
292 319 _physicalAverage: 0,
293 320  
... ... @@ -308,11 +335,6 @@ after the list became visible again. e.g.
308 335 _virtualCount: 0,
309 336  
310 337 /**
311   - * The n-th item rendered in the `_physicalStart` tile.
312   - */
313   - _virtualStartVal: 0,
314   -
315   - /**
316 338 * A map between an item key and its physical item index
317 339 */
318 340 _physicalIndexForKey: null,
... ... @@ -328,7 +350,7 @@ after the list became visible again. e.g.
328 350 _scrollHeight: 0,
329 351  
330 352 /**
331   - * The size of the viewport
  353 + * The height of the list. This is referred as the viewport in the context of list.
332 354 */
333 355 _viewportSize: 0,
334 356  
... ... @@ -345,13 +367,20 @@ after the list became visible again. e.g.
345 367 _physicalSizes: null,
346 368  
347 369 /**
348   - * A cached value for the visible index.
  370 + * A cached value for the first visible index.
349 371 * See `firstVisibleIndex`
350 372 * @type {?number}
351 373 */
352 374 _firstVisibleIndexVal: null,
353 375  
354 376 /**
  377 + * A cached value for the last visible index.
  378 + * See `lastVisibleIndex`
  379 + * @type {?number}
  380 + */
  381 + _lastVisibleIndexVal: null,
  382 +
  383 + /**
355 384 * A Polymer collection for the items.
356 385 * @type {?Polymer.Collection}
357 386 */
... ... @@ -364,6 +393,38 @@ after the list became visible again. e.g.
364 393 _itemsRendered: false,
365 394  
366 395 /**
  396 + * The page that is currently rendered.
  397 + */
  398 + _lastPage: null,
  399 +
  400 + /**
  401 + * The max number of pages to render. One page is equivalent to the height of the list.
  402 + */
  403 + _maxPages: 3,
  404 +
  405 + /**
  406 + * The currently focused physical item.
  407 + */
  408 + _focusedItem: null,
  409 +
  410 + /**
  411 + * The index of the `_focusedItem`.
  412 + */
  413 + _focusedIndex: -1,
  414 +
  415 + /**
  416 + * The the item that is focused if it is moved offscreen.
  417 + * @private {?TemplatizerNode}
  418 + */
  419 + _offscreenFocusedItem: null,
  420 +
  421 + /**
  422 + * The item that backfills the `_offscreenFocusedItem` in the physical items
  423 + * list when that item is moved offscreen.
  424 + */
  425 + _focusBackfillItem: null,
  426 +
  427 + /**
367 428 * The bottom of the physical content.
368 429 */
369 430 get _physicalBottom() {
... ... @@ -381,7 +442,21 @@ after the list became visible again. e.g.
381 442 * The n-th item rendered in the last physical item.
382 443 */
383 444 get _virtualEnd() {
384   - return this._virtualStartVal + this._physicalCount - 1;
  445 + return this._virtualStart + this._physicalCount - 1;
  446 + },
  447 +
  448 + /**
  449 + * The height of the physical content that isn't on the screen.
  450 + */
  451 + get _hiddenContentSize() {
  452 + return this._physicalSize - this._viewportSize;
  453 + },
  454 +
  455 + /**
  456 + * The maximum scroll top value.
  457 + */
  458 + get _maxScrollTop() {
  459 + return this._estScrollHeight - this._viewportSize + this._scrollerPaddingTop;
385 460 },
386 461  
387 462 /**
... ... @@ -397,35 +472,53 @@ after the list became visible again. e.g.
397 472 },
398 473  
399 474 /**
400   - * The height of the physical content that isn't on the screen.
  475 + * The n-th item rendered in the `_physicalStart` tile.
401 476 */
402   - get _hiddenContentSize() {
403   - return this._physicalSize - this._viewportSize;
  477 + _virtualStartVal: 0,
  478 +
  479 + set _virtualStart(val) {
  480 + this._virtualStartVal = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));
  481 + },
  482 +
  483 + get _virtualStart() {
  484 + return this._virtualStartVal || 0;
404 485 },
405 486  
406 487 /**
407   - * The maximum scroll top value.
  488 + * The k-th tile that is at the top of the scrolling list.
408 489 */
409   - get _maxScrollTop() {
410   - return this._estScrollHeight - this._viewportSize;
  490 + _physicalStartVal: 0,
  491 +
  492 + set _physicalStart(val) {
  493 + this._physicalStartVal = val % this._physicalCount;
  494 + if (this._physicalStartVal < 0) {
  495 + this._physicalStartVal = this._physicalCount + this._physicalStartVal;
  496 + }
  497 + this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
  498 + },
  499 +
  500 + get _physicalStart() {
  501 + return this._physicalStartVal || 0;
411 502 },
412 503  
413 504 /**
414   - * Sets the n-th item rendered in `_physicalStart`
  505 + * The number of tiles in the DOM.
415 506 */
416   - set _virtualStart(val) {
417   - // clamp the value so that _minVirtualStart <= val <= _maxVirtualStart
418   - this._virtualStartVal = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));
419   - this._physicalStart = this._virtualStartVal % this._physicalCount;
  507 + _physicalCountVal: 0,
  508 +
  509 + set _physicalCount(val) {
  510 + this._physicalCountVal = val;
420 511 this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
421 512 },
422 513  
  514 + get _physicalCount() {
  515 + return this._physicalCountVal;
  516 + },
  517 +
423 518 /**
424   - * Gets the n-th item rendered in `_physicalStart`
  519 + * The k-th tile that is at the bottom of the scrolling list.
425 520 */
426   - get _virtualStart() {
427   - return this._virtualStartVal;
428   - },
  521 + _physicalEnd: 0,
429 522  
430 523 /**
431 524 * An optimal physical size such that we will have enough physical items
... ... @@ -435,14 +528,14 @@ after the list became visible again. e.g.
435 528 * to a viewport of physical items above and below the user's viewport.
436 529 */
437 530 get _optPhysicalSize() {
438   - return this._viewportSize * 3;
  531 + return this._viewportSize * this._maxPages;
439 532 },
440 533  
441 534 /**
442 535 * True if the current list is visible.
443 536 */
444 537 get _isVisible() {
445   - return this._scroller && Boolean(this._scroller.offsetWidth || this._scroller.offsetHeight);
  538 + return this.scrollTarget && Boolean(this.scrollTarget.offsetWidth || this.scrollTarget.offsetHeight);
446 539 },
447 540  
448 541 /**
... ... @@ -451,68 +544,67 @@ after the list became visible again. e.g.
451 544 * @type {number}
452 545 */
453 546 get firstVisibleIndex() {
454   - var physicalOffset;
455   -
456 547 if (this._firstVisibleIndexVal === null) {
457   - physicalOffset = this._physicalTop;
  548 + var physicalOffset = this._physicalTop + this._scrollerPaddingTop;
458 549  
459 550 this._firstVisibleIndexVal = this._iterateItems(
460 551 function(pidx, vidx) {
461 552 physicalOffset += this._physicalSizes[pidx];
462   -
463 553 if (physicalOffset > this._scrollPosition) {
464 554 return vidx;
465 555 }
466 556 }) || 0;
467 557 }
468   -
469 558 return this._firstVisibleIndexVal;
470 559 },
471 560  
472   - ready: function() {
473   - if (IOS_TOUCH_SCROLLING) {
474   - this._scrollListener = function() {
475   - requestAnimationFrame(this._scrollHandler.bind(this));
476   - }.bind(this);
477   - } else {
478   - this._scrollListener = this._scrollHandler.bind(this);
479   - }
480   - },
481   -
482 561 /**
483   - * When the element has been attached to the DOM tree.
  562 + * Gets the index of the last visible item in the viewport.
  563 + *
  564 + * @type {number}
484 565 */
485   - attached: function() {
486   - // delegate to the parent's scroller
487   - // e.g. paper-scroll-header-panel
488   - var el = Polymer.dom(this);
  566 + get lastVisibleIndex() {
  567 + if (this._lastVisibleIndexVal === null) {
  568 + var physicalOffset = this._physicalTop;
489 569  
490   - var parentNode = /** @type {?{scroller: ?Element}} */ (el.parentNode);
491   - if (parentNode && parentNode.scroller) {
492   - this._scroller = parentNode.scroller;
493   - } else {
494   - this._scroller = this;
495   - this.classList.add('has-scroller');
496   - }
  570 + this._iterateItems(function(pidx, vidx) {
  571 + physicalOffset += this._physicalSizes[pidx];
497 572  
498   - if (IOS_TOUCH_SCROLLING) {
499   - this._scroller.style.webkitOverflowScrolling = 'touch';
  573 + if (physicalOffset <= this._scrollBottom) {
  574 + this._lastVisibleIndexVal = vidx;
  575 + }
  576 + });
500 577 }
  578 + return this._lastVisibleIndexVal;
  579 + },
  580 +
  581 + get _defaultScrollTarget() {
  582 + return this;
  583 + },
501 584  
502   - this._scroller.addEventListener('scroll', this._scrollListener);
  585 + ready: function() {
  586 + this.addEventListener('focus', this._didFocus.bind(this), true);
  587 + },
503 588  
  589