Index: third_party/polymer/components-chromium/core-list/core-list.html |
diff --git a/third_party/polymer/components-chromium/core-list/core-list.html b/third_party/polymer/components-chromium/core-list/core-list.html |
deleted file mode 100644 |
index 6491eff96b0c349c128dbad63c0e55df37521f1a..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/components-chromium/core-list/core-list.html |
+++ /dev/null |
@@ -1,175 +0,0 @@ |
-<!-- |
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
-Code distributed by Google as part of the polymer project is also |
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
---><!-- |
-`core-list` displays a virtual, 'infinite' list. The template inside the |
-`core-list` element represents the DOM to create for each list item. The |
-`data` property specifies an array of list item data. |
- |
-For performance reasons, not every item in the list is rendered at once; instead |
-a small subset of actual template elements (enough to fill the viewport) are |
-rendered and reused as the user scrolls. As such, it is important that all |
-state of the list template be bound to the model driving it, since the view |
-may be reused with a new model at any time. Particularly, any state that |
-may change as the result of a user interaction with the list item must be |
-bound to the model to avoid view state inconsistency. |
- |
-### Template model |
- |
-List item templates should bind to template models of the following structure: |
- |
- { |
- index: 0, // data index for this item |
- selected: false, // selection state for this item |
- model: { // user data corresponding to data[index] |
- /* user item data */ |
- } |
- } |
- |
-For example, given the following data array: |
- |
- [ |
- {name: 'Bob', checked: true}, |
- {name: 'Tim', checked: false}, |
- ... |
- ] |
- |
-The following code would render the list (note the `name` and `checked` |
-properties are bound from the `model` object provided to the template |
-scope): |
- |
- <core-list data="{{data}}"> |
- <template> |
- <div class="row {{ {selected: selected} | tokenList }}"> |
- List row: {{index}}, User data from model: {{model.name}} |
- <input type="checkbox" checked="{{model.checked}}"> |
- </div> |
- </template> |
- </core-list> |
- |
-### Selection |
- |
-By default, the list supports selection via tapping. Styling selected items |
-should be done via binding to the `selected` property of each model (see examples |
-above. The data model for the selected item (for single-selection) or array of |
-models (for multi-selection) is published to the `selection` property. |
- |
-### Grouping **(experimental)** |
- |
-`core-list` supports showing dividers between groups of data by setting the |
-`groups` property to an array containing group information. An element with |
-a `divider` attribute set should be supplied a the top level of the template |
-next to the template item to provide the divider template. The template model |
-contains extra fields when `groups` is used, as follows: |
- |
- { |
- index: 0, // data index for this item |
- groupIndex: 0, // group index for this item |
- groupItemIndex: 0, // index within group for this item |
- selected: false, // selection state for this item |
- model: { // user data corresponding to data[index] |
- /* user item data */ |
- }, |
- groupModel: { // user group data corresponding to groups[index] |
- /* user group data */ |
- } |
- } |
- |
-Groups may be specified one of two ways (users should choose the data format |
-that closest matches their source data, to avoid the performance impact of |
-needing totransform data to fit the required structure): |
- |
-1. Flat data array - In this scenario, the `data` array is provided as |
-a flat list of models. Group lengths are determined by the `length` property |
-on each group object, with the `data` property providing user-specified group |
-data, typically for binding to dividers. For example: |
- |
- data = [ |
- { name: 'Adam' }, |
- { name: 'Alex' }, |
- { name: 'Bob' }, |
- { name: 'Chuck' }, |
- { name: 'Cathy' }, |
- ... |
- ]; |
- |
- groups = [ |
- { length: 2, data: { letter: 'A' } }, |
- { length: 1, data: { letter: 'B' } }, |
- { length: 2, data: { letter: 'C' } }, |
- ... |
- ]; |
- |
- <core-list data="{{data}}" groups="{{groups}}"> |
- <template> |
- <div divider class="divider">{{groupModel.letter}}</div> |
- <div class="item">{{model.name}}</div> |
- </template> |
- </core-list> |
- |
-2. Nested data array - In this scenario, the `data` array is a nested |
-array of arrays of models, where each array determines the length of the |
-group, and the `groups` models provide the user-specified data directly. |
-For example: |
- |
- data = [ |
- [ { name: 'Adam' }, { name: 'Alex' } ], |
- [ { name: 'Bob' } ], |
- [ { name: 'Chuck' }, { name: 'Cathy' } ], |
- ... |
- ]; |
- |
- groups = [ |
- { letter: 'A' }, |
- { letter: 'B' }, |
- { letter: 'C' }, |
- ... |
- ]; |
- |
- <core-list data="{{data}}" groups="{{groups}}"> |
- <template> |
- <div divider class="divider">{{groupModel.letter}}</div> |
- <div class="item">{{model.name}}</div> |
- </template> |
- </core-list> |
- |
-### Grid layout **(experimental)** |
- |
-`core-list` supports a grid layout in addition to linear layout by setting |
-the `grid` attribute. In this case, the list template item must have both fixed |
-width and height (e.g. via CSS), with the desired width of each grid item |
-specified by the `width` attribute. Based on this, the number of items |
-per row are determined automatically based on the size of the list viewport. |
- |
-### Non-native scrollers **(experimental)** |
- |
-By default, core-list assumes the `scrollTarget` (if set) is a native scrollable |
-element (e.g. `overflow:auto` or `overflow:y`) that fires the `scroll` event and |
-whose scroll position can be read/set via the `scrollTop` property. |
-`core-list` provides experimental support for setting `scrollTarget` |
-to a custom scroller element (e.g. a JS-based scroller) as long as it provides |
-the following abstract API: |
- |
- - `getScrollTop()` - returns the current scroll position |
- - `setScrollTop(y)` - sets the current scroll position |
- - Fires a `scroll` event indicating when the scroll position has changed |
- |
-@group Polymer Core Elements |
-@element core-list |
---><html><head><link rel="import" href="../polymer/polymer.html"> |
-<link rel="import" href="../core-selection/core-selection.html"> |
-<link rel="import" href="../core-resizable/core-resizable.html"> |
- |
-</head><body><polymer-element name="core-list" tabindex="-1" assetpath=""> |
-<template> |
- <core-selection id="selection" multi="{{multi}}" on-core-select="{{selectedHandler}}"></core-selection> |
- <link rel="stylesheet" href="core-list.css"> |
- <div id="viewport" class="core-list-viewport"><content></content></div> |
-</template> |
- |
-</polymer-element> |
-<script charset="utf-8" src="core-list-extracted.js"></script></body></html> |