third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-array-selector.html - Issue 1082403004: Import Polymer 0.8 and several key elements.

Unified Diff: third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-array-selector.html

Issue 1082403004: Import Polymer 0.8 and several key elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Also remove polymer/explainer Created 5 years, 8 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/templatizer-extracted.js ('k') | third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-array-selector-extracted.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-array-selector.html

diff --git a/third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-array-selector.html b/third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-array-selector.html

new file mode 100644

index 0000000000000000000000000000000000000000..b19c82144d4a28a2187f323ed0879f1ca2b36c7d

--- /dev/null

+++ b/third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-array-selector.html

@@ -0,0 +1,61 @@

+<!--

+@license

+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

+--><!--

+Keeping structured data in sync requires that Polymer understand the path

+associations of data being bound. The `x-array-selector` element ensures path

+linkage when selecting specific items from an array (either single or multiple).

+The `items` property accepts an array of user data, and via the `select(item)`

+and `deselect(item)` API, updates the `selected` property which may be bound to

+other parts of the application, and any changes to sub-fields of `selected`

+item(s) will be kept in sync with items in the `items` array. When `multi`

+is false, `selected` is a property representing the last selected item. When

+`multi` is true, `selected` is an array of multiply selected items.

+```html

+<dom-module id="employee-list">

+ <template>

+ <div> Employee list: </div>

+ <template is="x-repeat" id="employeeList" items="{{employees}}">

+ <div>First name: <span>{{item.first}}</span></div>

+ <div>Last name: <span>{{item.last}}</span></div>

+ <button on-click="toggleSelection">Select</button>

+ </template>

+ <x-array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></x-array-selector>

+ <div> Selected employees: </div>

+ <template is="x-repeat" items="{{selected}}">

+ <div>First name: <span>{{item.first}}</span></div>

+ <div>Last name: <span>{{item.last}}</span></div>

+ </template>

+ <script>

+ Polymer({

+ is: 'employee-list',

+ ready: function() {

+ this.employees = [

+ {first: 'Bob', last: 'Smith'},

+ {first: 'Sally', last: 'Johnson'},

+ ...

+ ];

+ },

+ toggleSelection: function(e) {

+ var item = this.$.employeeList.itemForElement(e.target);

+ this.$.selector.select(item);

+ }

+ });

+ </script>

+</dom-module>

+```

+--><html><head></head><body><script src="x-array-selector-extracted.js"></script></body></html>