@@ -43,6 +51,16 @@
+
+
+
+
+
+
+
+
diff --git a/lib/iron-flex-layout/.bower.json b/lib/iron-flex-layout/.bower.json
index 98650a25..65338034 100644
--- a/lib/iron-flex-layout/.bower.json
+++ b/lib/iron-flex-layout/.bower.json
@@ -1,6 +1,6 @@
{
"name": "iron-flex-layout",
- "version": "1.0.2",
+ "version": "1.0.3",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
@@ -24,11 +24,11 @@
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
- "_release": "1.0.2",
+ "_release": "1.0.3",
"_resolution": {
"type": "version",
- "tag": "v1.0.2",
- "commit": "50bcecf40ab23caa7c2cd90030555e00c5ba7154"
+ "tag": "v1.0.3",
+ "commit": "e6c2cfec18354973ac03e70dcd8afcc3c72d09b9"
},
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
"_target": "^1.0.0",
diff --git a/lib/iron-flex-layout/bower.json b/lib/iron-flex-layout/bower.json
index 202fbe00..a300d516 100644
--- a/lib/iron-flex-layout/bower.json
+++ b/lib/iron-flex-layout/bower.json
@@ -1,6 +1,6 @@
{
"name": "iron-flex-layout",
- "version": "1.0.2",
+ "version": "1.0.3",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
diff --git a/lib/iron-flex-layout/iron-flex-layout.html b/lib/iron-flex-layout/iron-flex-layout.html
index ed9cd7bb..b7d1f087 100644
--- a/lib/iron-flex-layout/iron-flex-layout.html
+++ b/lib/iron-flex-layout/iron-flex-layout.html
@@ -10,8 +10,14 @@
-
+
+
+
+
+
+
diff --git a/lib/iron-form/iron-form.html b/lib/iron-form/iron-form.html
index 7db72938..7f6f41fa 100644
--- a/lib/iron-form/iron-form.html
+++ b/lib/iron-form/iron-form.html
@@ -164,6 +164,8 @@
* custom components and native elements of the form. If there are elements
* with duplicate names, then their values will get aggregated into an
* array of values.
+ *
+ * @return {!Object}
*/
serialize: function() {
var json = {};
@@ -238,12 +240,11 @@
// Validate all the custom elements.
var validatable;
for (var el, i = 0; el = this._customElements[i], i < this._customElements.length; i++) {
- if (el.required && this._useValue(el)) {
+ if (el.required && !el.disabled) {
validatable = /** @type {{validate: (function() : boolean)}} */ (el);
- // TODO(notwaldorf): IronValidatableBehavior can return undefined if
- // a validator is not set. It probably shouldn't, but in the meantime
- // deal with that scenario.
- valid = !!validatable.validate() && valid;
+ // Some elements may not have correctly defined a validate method.
+ if (validatable.validate)
+ valid = !!validatable.validate() && valid;
}
}
diff --git a/lib/iron-form/test/basic.html b/lib/iron-form/test/basic.html
index 75031962..248431ca 100644
--- a/lib/iron-form/test/basic.html
+++ b/lib/iron-form/test/basic.html
@@ -91,6 +91,15 @@
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Inbox
-
-
-
-
-
-
-
-
-
- [[index]]
- [[item.name]]
-
-
[[item.shortText]]
-
[[item.longText]]
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/lib/iron-list/demo/demo2.html b/lib/iron-list/demo/external-content.html
similarity index 100%
rename from lib/iron-list/demo/demo2.html
rename to lib/iron-list/demo/external-content.html
diff --git a/lib/iron-list/demo/selection.html b/lib/iron-list/demo/selection.html
new file mode 100644
index 00000000..1fa011e5
--- /dev/null
+++ b/lib/iron-list/demo/selection.html
@@ -0,0 +1,259 @@
+
+
+
+
+
+
+
Selection
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Inbox
+
+
+
+
+
+
+
+
+
+
+
+
+ [[index]]
+ [[item.name]]
+
+
[[item.shortText]]
+
+
+
+
+
+
+
+
+
+ Select a contact
+
+
+
+
+ [[item.name]]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/lib/iron-list/iron-list.html b/lib/iron-list/iron-list.html
index d8feb465..1872280c 100644
--- a/lib/iron-list/iron-list.html
+++ b/lib/iron-list/iron-list.html
@@ -76,7 +76,7 @@
By default, elements such as `iron-pages`, `paper-tabs` or `paper-dialog` will trigger
this event automatically. If you hide the list manually (e.g. you use `display: none`)
-you might want to implement `IronResizableBehavior` or fire this event manually right
+you might want to implement `IronResizableBehavior` or fire this event manually right
after the list became visible again. e.g.
document.querySelector('iron-list').fire('resize');
@@ -92,13 +92,16 @@
:host {
display: block;
- will-change: transform;
}
:host(.has-scroller) {
overflow: auto;
}
+ :host(:not(.has-scroller)) {
+ position: relative;
+ }
+
#items {
position: relative;
}
@@ -108,13 +111,20 @@
box-sizing: border-box;
position: absolute;
top: 0;
+ will-change: transform;
}
+
+
+
+
+
@@ -158,12 +168,61 @@
indexAs: {
type: String,
value: 'index'
- }
+ },
+ /**
+ * The name of the variable to add to the binding scope to indicate
+ * if the row is selected.
+ */
+ selectedAs: {
+ type: String,
+ value: 'selected'
+ },
+
+ /**
+ * When true, tapping a row will select the item, placing its data model
+ * in the set of selected items retrievable via the selection property.
+ *
+ * Note that tapping focusable elements within the list item will not
+ * result in selection, since they are presumed to have their * own action.
+ */
+ selectionEnabled: {
+ type: Boolean,
+ value: false
+ },
+
+ /**
+ * When `multiSelection` is false, this is the currently selected item, or `null`
+ * if no item is selected.
+ */
+ selectedItem: {
+ type: Object,
+ notify: true
+ },
+
+ /**
+ * When `multiSelection` is true, this is an array that contains the selected items.
+ */
+ selectedItems: {
+ type: Object,
+ notify: true
+ },
+
+ /**
+ * When `true`, multiple items may be selected at once (in this case,
+ * `selected` is an array of currently selected items). When `false`,
+ * only one item may be selected at a time.
+ */
+ multiSelection: {
+ type: Boolean,
+ value: false
+ }
},
observers: [
- '_itemsChanged(items.*)'
+ '_itemsChanged(items.*)',
+ '_selectionEnabledChanged(selectionEnabled)',
+ '_multiSelectionChanged(multiSelection)'
],
behaviors: [
@@ -177,7 +236,7 @@
/**
* The ratio of hidden tiles that should remain in the scroll direction.
- * Recommended value ≈ 0.5, so it will distribute tiles evely in both directions.
+ * Recommended value ~0.5, so it will distribute tiles evely in both directions.
*/
_ratio: 0.5,
@@ -199,7 +258,7 @@
/**
* The number of tiles in the DOM.
*/
- _physicalCount: DEFAULT_PHYSICAL_COUNT,
+ _physicalCount: 0,
/**
* The k-th tile that is at the top of the scrolling list.
@@ -248,9 +307,14 @@
_physicalIndexForKey: null,
/**
- * The average scroll size
+ * The estimated scroll height based on `_physicalAverage`
+ */
+ _estScrollHeight: 0,
+
+ /**
+ * The scroll height of the dom node
*/
- _scrollSize: 0,
+ _scrollHeight: 0,
/**
* The size of the viewport
@@ -282,7 +346,7 @@
* True if the current item list was rendered for the first time
* after attached.
*/
- _initRendered: false,
+ _itemsRendered: false,
/**
* The bottom of the physical content.
@@ -322,7 +386,7 @@
* The maximum scroll top value.
*/
get _maxScrollTop() {
- return this._scrollSize - this._viewportSize;
+ return this._estScrollHeight - this._viewportSize;
},
/**
@@ -357,7 +421,7 @@
* True if the current list is visible.
*/
get _isVisible() {
- return !!(this.offsetWidth || this.offsetHeight);
+ return this._scroller && Boolean(this._scroller.offsetWidth || this._scroller.offsetHeight);
},
/**
@@ -384,6 +448,16 @@
return this._firstVisibleIndexVal;
},
+ ready: function() {
+ if (IOS_TOUCH_SCROLLING) {
+ this._scrollListener = function() {
+ requestAnimationFrame(this._scrollHandler.bind(this));
+ }.bind(this);
+ } else {
+ this._scrollListener = this._scrollHandler.bind(this);
+ }
+ },
+
/**
* When the element has been attached to the DOM tree.
*/
@@ -399,19 +473,13 @@
this.classList.add('has-scroller');
}
- this.updateViewportBoundaries();
-
if (IOS_TOUCH_SCROLLING) {
this._scroller.style.webkitOverflowScrolling = 'touch';
-
- this._scroller.addEventListener('scroll', function() {
- requestAnimationFrame(this._scrollHandler.bind(this));
- }.bind(this));
- } else {
- this._scroller.addEventListener('scroll', this._scrollHandler.bind(this));
}
- // render the list of items if we haven't rendered them yet
+ this._scroller.addEventListener('scroll', this._scrollListener);
+
+ this.updateViewportBoundaries();
this._render();
},
@@ -419,7 +487,10 @@
* When the element has been removed from the DOM tree.
*/
detached: function() {
- this._initRendered = false;
+ this._itemsRendered = false;
+ if (this._scroller) {
+ this._scroller.removeEventListener('scroll', this._scrollListener);
+ }
},
/**
@@ -645,9 +716,11 @@
* but it also ensures that only one `update` cycle is created.
*/
_render: function() {
- if (this.isAttached && !this._initRendered && this._isVisible && this.items) {
+ var requiresUpdate = this._virtualCount > 0 || this._physicalCount > 0;
+
+ if (this.isAttached && !this._itemsRendered && this._isVisible && requiresUpdate) {
this._update();
- this._initRendered = true;
+ this._itemsRendered = true;
}
},
@@ -657,12 +730,16 @@
_ensureTemplatized: function() {
if (!this.ctor) {
// Template instance props that should be excluded from forwarding
- this._instanceProps = {
- __key__: true
- };
- this._instanceProps[this.as] = true;
- this._instanceProps[this.indexAs] = true;
+ var props = {};
+
+ props.__key__ = true;
+ props[this.as] = true;
+ props[this.indexAs] = true;
+ props[this.selectedAs] = true;
+
+ this._instanceProps = props;
this._userTemplate = Polymer.dom(this).querySelector('template');
+
if (this._userTemplate) {
this.templatize(this._userTemplate);
} else {
@@ -738,10 +815,14 @@
}
},
+ /**
+ * Called when the items have changed. That is, ressignments
+ * to `items`, splices or updates to a single item.
+ */
_itemsChanged: function(change) {
if (change.path === 'items') {
// render the new set
- this._initRendered = false;
+ this._itemsRendered = false;
// update the whole set
this._virtualStartVal = 0;
@@ -755,16 +836,16 @@
// create the initial physical items
if (!this._physicalItems) {
+ this._physicalCount = Math.max(1, Math.min(DEFAULT_PHYSICAL_COUNT, this._virtualCount));
this._physicalItems = this._createPool(this._physicalCount);
this._physicalSizes = new Array(this._physicalCount);
}
this.debounce('refresh', this._render);
-
} else if (change.path === 'items.splices') {
// render the new set
- this._initRendered = false;
+ this._itemsRendered = false;
this._adjustVirtualIndex(change.value.indexSplices);
this._virtualCount = this.items ? this.items.length : 0;
@@ -778,9 +859,15 @@
},
_adjustVirtualIndex: function(splices) {
- for (var i = 0; i < splices.length; i++) {
- var splice = splices[i];
- var idx = splice.index;
+ var i, splice, idx;
+
+ for (i = 0; i < splices.length; i++) {
+ splice = splices[i];
+
+ // deselect removed items
+ splice.removed.forEach(this.$.selector.deselect, this.$.selector);
+
+ idx = splice.index;
// We only need to care about changes happening above the current position
if (idx >= this._virtualStartVal) {
break;
@@ -795,6 +882,10 @@
this._refresh();
},
+ /**
+ * Executes a provided function per every physical index in `itemSet`
+ * `itemSet` default value is equivalent to the entire set of physical indexes.
+ */
_iterateItems: function(fn, itemSet) {
var pidx, vidx, rtn, i;
@@ -830,6 +921,9 @@
}
},
+ /**
+ * Assigns the data models to a given set of items.
+ */
_assignModels: function(itemSet) {
this._iterateItems(function(pidx, vidx) {
var el = this._physicalItems[pidx];
@@ -839,6 +933,7 @@
if (item) {
inst[this.as] = item;
inst.__key__ = this._collection.getKey(item);
+ inst[this.selectedAs] = this.$.selector.isSelected(item);
inst[this.indexAs] = vidx;
el.removeAttribute('hidden');
this._physicalIndexForKey[inst.__key__] = pidx;
@@ -850,6 +945,9 @@
}, itemSet);
},
+ /**
+ * Updates the height for a given set of items.
+ */
_updateMetrics: function() {
var total = 0;
var prevAvgCount = this._physicalAverageCount;
@@ -875,6 +973,9 @@
}
},
+ /**
+ * Updates the position of the physical items.
+ */
_positionItems: function(itemSet) {
this._adjustScrollPosition();
@@ -888,6 +989,9 @@
}, itemSet);
},
+ /**
+ * Adjusts the scroll position when it was overestimated.
+ */
_adjustScrollPosition: function() {
var deltaHeight = this._virtualStartVal === 0 ? this._physicalTop :
Math.min(this._scrollPosition + this._physicalTop, 0);
@@ -902,6 +1006,9 @@
}
},
+ /**
+ * Sets the position of the scroll.
+ */
_resetScrollPosition: function(pos) {
if (this._scroller) {
this._scroller.scrollTop = pos;
@@ -909,11 +1016,21 @@
}
},
- _updateScrollerSize: function() {
- this._scrollSize = (this._physicalBottom +
+ /**
+ * Sets the scroll height, that's the height of the content,
+ */
+ _updateScrollerSize: function(forceUpdate) {
+ this._estScrollHeight = (this._physicalBottom +
Math.max(this._virtualCount - this._physicalCount - this._virtualStartVal, 0) * this._physicalAverage);
- this.$.items.style.height = this._scrollSize + 'px';
+ forceUpdate = forceUpdate || this._scrollHeight === 0;
+ forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
+
+ // amortize height adjustment, so it won't trigger repaints very often
+ if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._optPhysicalSize) {
+ this.$.items.style.height = this._estScrollHeight + 'px';
+ this._scrollHeight = this._estScrollHeight;
+ }
},
/**
@@ -921,12 +1038,14 @@
* of the physical items in the DOM tree.
*
* @method scrollToIndex
+ * @param {number} idx The index of the item
*/
scrollToIndex: function(idx) {
if (typeof idx !== 'number') {
return;
}
+ var itemSet;
var firstVisible = this.firstVisibleIndex;
idx = Math.min(Math.max(idx, 0), this._virtualCount-1);
@@ -957,7 +1076,7 @@
}
// update the scroller size
- this._updateScrollerSize();
+ this._updateScrollerSize(true);
// update the position of the items
this._positionItems();
@@ -965,6 +1084,12 @@
// set the new scroll position
this._resetScrollPosition(this._physicalTop + targetOffsetTop + 1);
+ // increase the pool of physical items if needed
+ if (itemSet = this._increasePoolIfNeeded()) {
+ // set models to the new items
+ this.async(this._update.bind(this, itemSet));
+ }
+
// clear cached visible index
this._firstVisibleIndexVal = null;
},
@@ -983,12 +1108,143 @@
*/
_resizeHandler: function() {
this.debounce('resize', function() {
- if (this._physicalItems && this._isVisible) {
+ this._render();
+ if (this._itemsRendered && this._physicalItems && this._isVisible) {
this._resetAverage();
this.updateViewportBoundaries();
this.scrollToIndex(this.firstVisibleIndex);
}
});
+ },
+
+ _getModelFromItem: function(item) {
+ var key = this._collection.getKey(item);
+ var pidx = this._physicalIndexForKey[key];
+
+ if (pidx !== undefined) {
+ return this._physicalItems[pidx]._templateInstance;
+ }
+ return null;
+ },
+
+ /**
+ * Select the list item at the given index.
+ *
+ * @method selectItem
+ * @param {(Object|number)} item the item object or its index
+ */
+ selectItem: function(item) {
+ if (typeof item === 'number') {
+ item = this.items[item];
+ if (!item) {
+ throw new RangeError('
- not found');
+ }
+ } else {
+ if (this._collection.getKey(item) === undefined) {
+ throw new TypeError('
- should be a valid item');
+ }
+ }
+
+ var model = this._getModelFromItem(item);
+
+ if (!this.multiSelection && this.selectedItem) {
+ this.deselectItem(this.selectedItem);
+ }
+ if (model) {
+ model[this.selectedAs] = true;
+ }
+ this.$.selector.select(item);
+ },
+
+ /**
+ * Deselects the given item list if it is already selected.
+ *
+ * @method deselect
+ * @param {(Object|number)} item the item object or its index
+ */
+ deselectItem: function(item) {
+ if (typeof item === 'number') {
+ item = this.items[item];
+ if (!item) {
+ throw new RangeError('
- not found');
+ }
+ } else {
+ if (this._collection.getKey(item) === undefined) {
+ throw new TypeError('
- should be a valid item');
+ }
+ }
+
+ var model = this._getModelFromItem(item);
+
+ if (model) {
+ model[this.selectedAs] = false;
+ }
+ this.$.selector.deselect(item);
+ },
+
+ /**
+ * Select or deselect a given item depending on whether the item
+ * has already been selected.
+ *
+ * @method toggleSelectionForItem
+ * @param {(Object|number)} item the item object or its index
+ */
+ toggleSelectionForItem: function(item) {
+ var item = typeof item === 'number' ? this.items[item] : item;
+ if (this.$.selector.isSelected(item)) {
+ this.deselectItem(item);
+ } else {
+ this.selectItem(item);
+ }
+ },
+
+ /**
+ * Clears the current selection state of the list.
+ *
+ * @method clearSelection
+ */
+ clearSelection: function() {
+ function unselect(item) {
+ var model = this._getModelFromItem(item);
+ if (model) {
+ model[this.selectedAs] = false;
+ }
+ }
+
+ if (Array.isArray(this.selectedItems)) {
+ this.selectedItems.forEach(unselect, this);
+ } else if (this.selectedItem) {
+ unselect.call(this, this.selectedItem);
+ }
+
+ this.$.selector.clearSelection();
+ },
+
+ /**
+ * Add an event listener to `tap` if `selectionEnabled` is true,
+ * it will remove the listener otherwise.
+ */
+ _selectionEnabledChanged: function(selectionEnabled) {
+ if (selectionEnabled) {
+ this.listen(this, 'tap', '_selectionHandler');
+ } else {
+ this.unlisten(this, 'tap', '_selectionHandler');
+ }
+ },
+
+ /**
+ * Select an item from an event object.
+ */
+ _selectionHandler: function(e) {
+ var model = this.modelForElement(e.target);
+ if (model) {
+ this.toggleSelectionForItem(model[this.as]);
+ }
+ },
+
+ _multiSelectionChanged: function(multiSelection) {
+ this.clearSelection();
+ this.$.selector.multi = multiSelection;
}
});
diff --git a/lib/iron-list/test/basic.html b/lib/iron-list/test/basic.html
index cae4f010..1e07981a 100644
--- a/lib/iron-list/test/basic.html
+++ b/lib/iron-list/test/basic.html
@@ -70,7 +70,7 @@
});
test('check physical item size', function(done) {
- var setSize = list._physicalCount - 1;
+ var setSize = 10;
container.data = buildDataSet(setSize);
flush(function() {
@@ -151,6 +151,28 @@
});
});
+
+ test('reset items', function(done) {
+ list.items = buildDataSet(100);
+
+ flush(function() {
+ var firstItem = getFirstItemFromList(list);
+ assert.equal(firstItem.textContent, '0');
+
+ list.items = null;
+
+ flush(function() {
+ assert.notEqual(getFirstItemFromList(list), firstItem);
+ list.items = buildDataSet(100);
+
+ flush(function() {
+ assert.equal(getFirstItemFromList(list), firstItem);
+ done();
+ });
+ });
+ });
+ });
+
});
diff --git a/lib/iron-list/test/hidden-list.html b/lib/iron-list/test/hidden-list.html
index 57fb5ef8..fa1a6453 100644
--- a/lib/iron-list/test/hidden-list.html
+++ b/lib/iron-list/test/hidden-list.html
@@ -54,20 +54,16 @@
test('resize', function(done) {
list.items = buildDataSet(100);
list.fire('resize');
- flush(function() {
- assert.notEqual(getFirstItemFromList(list).textContent, '0');
-
+
+ assert.notEqual(getFirstItemFromList(list).textContent, '0');
+ Polymer.RenderStatus.whenReady(function() {
container.removeAttribute('hidden');
-
+ assert.notEqual(getFirstItemFromList(list).textContent, '0');
+ list.fire('resize');
flush(function() {
- assert.notEqual(getFirstItemFromList(list).textContent, '0');
-
- list.fire('resize');
-
- flush(function() {
- assert.equal(getFirstItemFromList(list).textContent, '0');
- done();
- });
+ assert.isTrue(list.isAttached);
+ assert.equal(getFirstItemFromList(list).textContent, '0');
+ done();
});
});
});
diff --git a/lib/iron-list/test/index.html b/lib/iron-list/test/index.html
index 16b23e5c..7bdf2251 100644
--- a/lib/iron-list/test/index.html
+++ b/lib/iron-list/test/index.html
@@ -21,7 +21,8 @@
'basic.html',
'mutations.html',
'physical-count.html',
- 'hidden-list.html'
+ 'hidden-list.html',
+ 'selection.html'
]);