Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(4)

Unified Diff: third_party/polymer/v0_8/components/polymer/src/lib/template/x-repeat.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
Index: third_party/polymer/v0_8/components/polymer/src/lib/template/x-repeat.html
diff --git a/third_party/polymer/v0_8/components/polymer/src/lib/template/x-repeat.html b/third_party/polymer/v0_8/components/polymer/src/lib/template/x-repeat.html
deleted file mode 100644
index c5842688435a422632b89374760eef4f4459c9da..0000000000000000000000000000000000000000
--- a/third_party/polymer/v0_8/components/polymer/src/lib/template/x-repeat.html
+++ /dev/null
@@ -1,546 +0,0 @@
-<!--
-@license
-Copyright (c) 2015 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
--->
-
-<!--
-
-**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>
-
- </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">
-```
-
--->
-
-<link rel="import" href="templatizer.html">
-<link rel="import" href="../array-observe.html">
-<link rel="import" href="../collection.html">
-
-<script>
-
- Polymer({
-
- is: 'x-repeat',
- extends: 'template',
-
- properties: {
-
- /**
- * An array containing items determining how many instances of the template
- * to stamp and that that each template instance should bind to.
- */
- items: {
- type: Array
- },
-
- /**
- * A function that should determine the sort order of the items. This
- * property should either be provided as a string, indicating a method
- * name on the element's host, or else be an actual function. The
- * function should match the sort function passed to `Array.sort`.
- * Using a sort function has no effect on the underlying `items` array.
- */
- sort: {
- type: Function,
- observer: '_sortChanged'
- },
-
- /**
- * A function that can be used to filter items out of the view. This
- * property should either be provided as a string, indicating a method
- * name on the element's host, or else be an actual function. The
- * function should match the sort function passed to `Array.filter`.
- * Using a filter function has no effect on the underlying `items` array.
- */
- filter: {
- type: Function,
- observer: '_filterChanged'
- },
-
- /**
- * When using a `filter` or `sort` function, the `observe` property
- * should be set to a space-separated list of the names of item
- * sub-fields that should trigger a re-sort or re-filter when changed.
- * These should generally be fields of `item` that the sort or filter
- * function depends on.
- */
- observe: {
- type: String,
- observer: '_observeChanged'
- },
-
- /**
- * When using a `filter` or `sort` function, the `delay` property
- * determines a debounce time after a change to observed item
- * properties that must pass before the filter or sort is re-run.
- * This is useful in rate-limiting shuffing of the view when
- * item changes may be frequent.
- */
- delay: Number
- },
-
- behaviors: [
- Polymer.Templatizer
- ],
-
- observers: [
- '_itemsChanged(items.*)'
- ],
-
- created: function() {
- this.boundCollectionObserver = this.render.bind(this);
- },
-
- ready: function() {
- // Templatizing (generating the instance constructor) needs to wait
- // until attached, since it may not have its template content handed
- // back to it until then, following its host template stamping
- if (!this.ctor) {
- this.templatize(this);
- }
- },
-
- _sortChanged: function() {
- var dataHost = this._getRootDataHost();
- this._sortFn = this.sort && (typeof this.sort == 'function' ?
- this.sort : dataHost[this.sort].bind(this.host));
- if (this.items) {
- this.debounce('render', this.render);
- }
- },
-
- _filterChanged: function() {
- var dataHost = this._getRootDataHost();
- this._filterFn = this.filter && (typeof this.filter == 'function' ?
- this.filter : dataHost[this.filter].bind(this.host));
- if (this.items) {
- this.debounce('render', this.render);
- }
- },
-
- _observeChanged: function() {
- this._observePaths = this.observe &&
- this.observe.replace('.*', '.').split(' ');
- },
-
- _itemsChanged: function(change) {
- if (change.path == 'items') {
- this._unobserveCollection();
- if (change.value) {
- this._observeCollection(change.value);
- this.debounce('render', this.render);
- }
- } else {
- this._forwardItemPath(change.path, change.value);
- this._checkObservedPaths(change.path);
- }
- },
-
- _checkObservedPaths: function(path) {
- if (this._observePaths && path.indexOf('items.') === 0) {
- path = path.substring(path.indexOf('.', 6) + 1);
- var paths = this._observePaths;
- for (var i=0; i<paths.length; i++) {
- if (path.indexOf(paths[i]) === 0) {
- this.debounce('render', this.render, this.delay);
- return;
- }
- }
- }
- },
-
- _observeCollection: function(items) {
- this.collection = Array.isArray(items) ? Polymer.Collection.get(items) : items;
- this.collection.observe(this.boundCollectionObserver);
- },
-
- _unobserveCollection: function() {
- if (this.collection) {
- this.collection.unobserve(this.boundCollectionObserver);
- }
- },
-
- render: function(splices) {
- this.flushDebouncer('render');
- var c = this.collection;
- if (splices) {
- if (this._sortFn || splices[0].index == null) {
- this._applySplicesViewSort(splices);
- } else {
- this._applySplicesArraySort(splices);
- }
- } else {
- this._sortAndFilter();
- }
- var rowForKey = this._rowForKey = {};
- var keys = this._orderedKeys;
- // Assign items and keys
- this.rows = this.rows || [];
- for (var i=0; i<keys.length; i++) {
- var key = keys[i];
- var item = c.getItem(key);
- var row = this.rows[i];
- rowForKey[key] = i;
- if (!row) {
- this.rows.push(row = this._insertRow(i, null, item));
- }
- row.item = item;
- row.key = key;
- row.index = i;
- }
- // Remove extra
- for (; i<this.rows.length; i++) {
- this._detachRow(i);
- }
- this.rows.splice(keys.length, this.rows.length-keys.length);
- },
-
- _sortAndFilter: function() {
- var c = this.collection;
- this._orderedKeys = c.getKeys();
- // Filter
- if (this._filterFn) {
- this._orderedKeys = this._orderedKeys.filter(function(a) {
- return this._filterFn(c.getItem(a));
- }, this);
- }
- // Sort
- if (this._sortFn) {
- this._orderedKeys.sort(function(a, b) {
- return this._sortFn(c.getItem(a), c.getItem(b));
- }.bind(this));
- }
- },
-
- _keySort: function(a, b) {
- return this.collection.getKey(a) - this.collection.getKey(b);
- },
-
- _applySplicesViewSort: function(splices) {
- var c = this.collection;
- var keys = this._orderedKeys;
- var rows = this.rows;
- var removedRows = [];
- var addedKeys = [];
- var pool = [];
- var sortFn = this._sortFn || this._keySort.bind(this);
- splices.forEach(function(s) {
- // Collect all removed row idx's
- for (var i=0; i<s.removed.length; i++) {
- var idx = this._rowForKey[s.removed[i]];
- if (idx != null) {
- removedRows.push(idx);
- }
- }
- // Collect all added keys
- for (i=0; i<s.added.length; i++) {
- addedKeys.push(s.added[i]);
- }
- }, this);
- if (removedRows.length) {
- // Sort removed rows idx's
- removedRows.sort();
- // Remove keys and pool rows (backwards, so we don't invalidate rowForKey)
- for (i=removedRows.length-1; i>=0 ; i--) {
- var idx = removedRows[i];
- pool.push(this._detachRow(idx));
- rows.splice(idx, 1);
- keys.splice(idx, 1);
- }
- }
- if (addedKeys.length) {
- // Filter added keys
- if (this._filterFn) {
- addedKeys = addedKeys.filter(function(a) {
- return this._filterFn(c.getItem(a));
- }, this);
- }
- // Sort added keys
- addedKeys.sort(function(a, b) {
- return this.sortFn(c.getItem(a), c.getItem(b));
- }, this);
- // Insert new rows using sort (from pool or newly created)
- var start = 0;
- for (i=0; i<addedKeys.length; i++) {
- start = this._insertRowIntoViewSort(start, addedKeys[i], pool);
- }
- }
- },
-
- _insertRowIntoViewSort: function(start, key, pool) {
- var c = this.collection;
- var item = c.getItem(key);
- var end = this.rows.length - 1;
- var idx = -1;
- var sortFn = this._sortFn || this._keySort.bind(this);
- // Binary search for insertion point
- while (start <= end) {
- var mid = (start + end) >> 1;
- var midKey = this._orderedKeys[mid];
- var cmp = sortFn(c.getItem(midKey), item);
- if (cmp < 0) {
- start = mid + 1;
- } else if (cmp > 0) {
- end = mid - 1;
- } else {
- idx = mid;
- break;
- }
- }
- if (idx < 0) {
- idx = end + 1;
- }
- // Insert key & row at insertion point
- this._orderedKeys.splice(idx, 0, key);
- this.rows.splice(idx, 0, this._insertRow(idx, pool));
- return idx;
- },
-
- _applySplicesArraySort: function(splices) {
- var keys = this._orderedKeys;
- var pool = [];
- splices.forEach(function(s) {
- // Remove & pool rows first, to ensure we can fully reuse removed rows
- for (var i=0; i<s.removed.length; i++) {
- pool.push(this._detachRow(s.index + i));
- }
- this.rows.splice(s.index, s.removed.length);
- }, this);
- var c = this.collection;
- var filterDelta = 0;
- splices.forEach(function(s) {
- // Filter added keys
- var addedKeys = s.added;
- if (this._filterFn) {
- addedKeys = addedKeys.filter(function(a) {
- return this._filterFn(c.getItem(a));
- }, this);
- filterDelta += (s.added.length - addedKeys.length);
- }
- var idx = s.index - filterDelta;
- // Apply splices to keys
- var args = [idx, s.removed.length].concat(addedKeys);
- keys.splice.apply(keys, args);
- // Insert new rows (from pool or newly created)
- var addedRows = [];
- for (i=0; i<s.added.length; i++) {
- addedRows.push(this._insertRow(idx + i, pool));
- }
- args = [s.index, 0].concat(addedRows);
- this.rows.splice.apply(this.rows, args);
- }, this);
- },
-
- _detachRow: function(idx) {
- var row = this.rows[idx];
- var parentNode = Polymer.dom(this).parentNode;
- for (var i=0; i<row._children.length; i++) {
- var el = row._children[i];
- Polymer.dom(row.root).appendChild(el);
- }
- return row;
- },
-
- _insertRow: function(idx, pool, item) {
- var row = (pool && pool.pop()) || this._generateRow(idx, item);
- var beforeRow = this.rows[idx];
- var beforeNode = beforeRow ? beforeRow._children[0] : this;
- var parentNode = Polymer.dom(this).parentNode;
- Polymer.dom(parentNode).insertBefore(row.root, beforeNode);
- return row;
- },
-
- _generateRow: function(idx, item) {
- var row = this.stamp({
- index: idx,
- key: this.collection.getKey(item),
- item: item
- });
- // each row is a document fragment which is lost when we appendChild,
- // so we have to track each child individually
- var children = [];
- for (var n = row.root.firstChild; n; n=n.nextSibling) {
- children.push(n);
- n._templateInstance = row;
- }
- // Since archetype overrides Base/HTMLElement, Safari complains
- // when accessing `children`
- row._children = children;
- return row;
- },
-
- // Implements extension point from Templatizer mixin
- _getStampedChildren: function() {
- var children = [];
- if (this.rows) {
- for (var i=0; i<this.rows.length; i++) {
- var c = this.rows[i]._children;
- for (var j=0; j<c.length; j++)
- children.push(c[j]);
- }
- }
- return children;
- },
-
- // Implements extension point from Templatizer
- // Called as a side effect of a template instance path change, responsible
- // for notifying items.<key-for-row>.<path> change up to host
- _forwardInstancePath: function(row, root, subPath, value) {
- if (root == 'item') {
- this.notifyPath('items.' + row.key + '.' + subPath, value);
- }
- },
-
- // Implements extension point from Templatizer mixin
- // Called as side-effect of a host property change, responsible for
- // notifying parent.<prop> path change on each row
- _forwardParentProp: function(prop, value) {
- if (this.rows) {
- this.rows.forEach(function(row) {
- row.parent[prop] = value;
- row.notifyPath('parent.' + prop, value, true);
- }, this);
- }
- },
-
- // Implements extension point from Templatizer
- // Called as side-effect of a host path change, responsible for
- // notifying parent.<path> path change on each row
- _forwardParentPath: function(path, value) {
- if (this.rows) {
- this.rows.forEach(function(row) {
- row.notifyPath('parent.' + path, value, true);
- }, this);
- }
- },
-
- // Called as a side effect of a host items.<key>.<path> path change,
- // responsible for notifying item.<path> changes to row for key
- _forwardItemPath: function(path, value) {
- if (this._rowForKey) {
- // 'items.'.length == 6
- var dot = path.indexOf('.', 6);
- var key = path.substring(6, dot < 0 ? path.length : dot);
- var idx = this._rowForKey[key];
- var row = this.rows[idx];
- if (row) {
- if (dot >= 0) {
- path = 'item.' + path.substring(dot+1);
- row.notifyPath(path, value, true);
- } else {
- row.item = value;
- }
- }
- }
- },
-
- _instanceForElement: function(el) {
- while (el && !el._templateInstance) {
- el = el.parentNode;
- }
- return el && el._templateInstance;
- },
-
- /**
- * Returns the item associated with a given element stamped by
- * this `x-repeat`.
- */
- itemForElement: function(el) {
- var instance = this._instanceForElement(el);
- return instance && instance.item;
- },
-
- /**
- * Returns the `Polymer.Collection` key associated with a given
- * element stamped by this `x-repeat`.
- */
- keyForElement: function(el) {
- var instance = this._instanceForElement(el);
- return instance && instance.key;
- },
-
- /**
- * Returns the index in `items` associated with a given element
- * stamped by this `x-repeat`.
- */
- indexForElement: function(el) {
- var instance = this._instanceForElement(el);
- return this.rows.indexOf(instance);
- }
-
- });
-
-
-</script>

Powered by Google App Engine
This is Rietveld 408576698