third_party/polymer/v0_8/components-chromium/polymer/polymer.html - Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed.

Unified Diff: third_party/polymer/v0_8/components-chromium/polymer/polymer.html

Issue 1162563004: Upgrade to 1.0 and switch clients to dom-repeat where needed. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fix a layout import and remove the gzipped webanimation in reproduce.sh Created 5 years, 7 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/index.html ('k') | third_party/polymer/v0_8/components-chromium/polymer/polymer.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/polymer.html

diff --git a/third_party/polymer/v0_8/components-chromium/polymer/polymer.html b/third_party/polymer/v0_8/components-chromium/polymer/polymer.html

index 6e9cb404922b6cac1853162bdb75cf532cf2be6b..1fea2685f1094cdd46e3d93f07f63068d9be4b59 100644

--- a/third_party/polymer/v0_8/components-chromium/polymer/polymer.html

+++ b/third_party/polymer/v0_8/components-chromium/polymer/polymer.html

@@ -1,56 +1,4 @@

-<html><head><meta charset="UTF-8"><!--

-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>

-```

---><!--

+<!--

@license

This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

@@ -59,172 +7,6 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI

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

--><!--

-**THIS ELEMENT IS EXPERIMENTAL. API AND NAME SUBJECT TO CHANGE.**

-The `x-repeat` element is a custom `HTMLTemplateElement` type extension that

-automatically stamps and binds one instance of template content to each object

-in a user-provided array. `x-repeat` accepts an `items` property, and one

-instance of the template is stamped for each item into the DOM at the location

-of the `x-repeat` element. The `item` property will be set on each instance's

-binding scope, thus templates should bind to sub-properties of `item`.

-Example:

-```html

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

- <template>

- <div> Employee list: </div>

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

- <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'},

- ...

- ];

- }

- });

- </script>

-</dom-module>

-```

-Notifications for changes to items sub-properties will be forwarded to template

-instances, which will update via the normal structured data notification system.

-Mutations to the `items` array itself (`push`, `pop`, `splice`, `shift`,

-`unshift`) are observed via `Array.observe` (where supported, or an

-shim of this API on unsupported browsers), and template instances are kept in

-sync with the data in the array.

-A view-specific filter/sort may be applied to each `x-repeat` by supplying a

-`filter` and/or `sort` property. This may be a string that names a function on

-the host, or a function may be assigned to the property directly. The functions

-should implemented following the standard `Array` filter/sort API.

-In order to re-run the filter or sort functions based on changes to sub-fields

-of `items`, the `observe` property may be set as a space-separated list of

-`item` sub-fields that should cause a re-filter/sort when modified.

-For example, for an `x-repeat` with a filter of the following:

-```js

-isEngineer: function(item) {

- return item.type == 'engineer' || item.manager.type == 'engineer';

-```

-Then the `observe` property should be configured as follows:

-```html

-<template is="x-repeat" items="{{employees}}"

- filter="isEngineer" observe="type manager.type">

-```

---><!--

-**THIS ELEMENT IS EXPERIMENTAL. API AND NAME SUBJECT TO CHANGE.**

-Polymer's binding features are only available within templates that are managed

-by Polymer. As such, these features are available in templates used to define

-Polymer elements, for example, but not for elements placed directly in the main

-document.

-In order to use Polymer bindings without defining a new custom element, elements

-utilizing bindings may be wrapped with the `x-autobind` template extension.

-This template will immediately stamp itself into the main document and bind

-elements to the template itself as the binding scope.

-```html

-<!doctype html>

-<html>

-<head>

- <meta charset="utf-8">

- <script src="components/webcomponentsjs/webcomponents-lite.js"></script>

- <link rel="import" href="components/polymer/polymer.html">

- <link rel="import" href="components/core-ajax/core-ajax.html">

-</head>

-<body>

- <template is="x-autobind">

- <core-ajax url="http://..." lastresponse="{{data}}"></core-ajax>

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

- <div><span>{{item.first}}</span> <span>{{item.last}}</span></div>

- </template>

-</body>

-</html>

-```

---><!--

-The `x-style` extension of the native `<style>` element allows defining styles

-in the main document that can take advantage of several special features of

-Polymer's styling system:

-* Document styles defined in an `x-style` will be shimmed to ensure they do

-not leak into local DOM when running on browsers without non-native Shadow DOM.

-* Shadow DOM-specific `/deep/` and `::shadow` combinators will be shimmed on

-browsers without non-native Shadow DOM.

-* Custom properties used by Polymer's experimental shim for cross-scope styling

-may be defined in an `x-style`.

-Example:

-```html

-<!doctype html>

-<html>

-<head>

- <script src="components/webcomponentsjs/webcomponents-lite.js"></script>

- <link rel="import" href="components/polymer/polymer.html">

- <style is="x-style">

- /* Will be prevented from affecting local DOM of Polymer elements */

- * {

- box-sizing: border-box;

- }

- /* Can use /deep/ and ::shadow combinators */

- body /deep/ .my-special-view::shadow #thing-inside {

- background: yellow;

- }

- /* Custom properties that inherit down the document tree may be defined */

- body {

- --my-toolbar-title-color: green;

- }

- </style>

-</head>

-<body>

- ...

-</body>

-</html>

-```

-Note, all features of `x-style` are available when defining styles as part of Polymer elements (e.g. `<style>` elements within `<dom-module>`'s used for defining Polymer elements. The `x-style` extension should only be used for defining document styles, outside of a custom element's local DOM.

---><!--

@license

This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt

@@ -232,5 +14,6 @@ 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

---></head><body>

-<script src="polymer.js"></script></body></html>

+--><html><head><link rel="import" href="polymer-mini.html">

+</head><body><script src="polymer-extracted.js"></script></body></html>