2015-06-19 09:36:51 -07:00
|
|
|
<!--
|
|
|
|
@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
|
|
|
|
-->
|
|
|
|
|
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="iron-selectable.html">
|
|
|
|
|
|
|
|
<script>
|
|
|
|
/** @polymerBehavior Polymer.IronMultiSelectableBehavior */
|
|
|
|
Polymer.IronMultiSelectableBehaviorImpl = {
|
|
|
|
properties: {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* If true, multiple selections are allowed.
|
|
|
|
*/
|
|
|
|
multi: {
|
|
|
|
type: Boolean,
|
|
|
|
value: false,
|
|
|
|
observer: 'multiChanged'
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Gets or sets the selected elements. This is used instead of `selected` when `multi`
|
|
|
|
* is true.
|
|
|
|
*/
|
|
|
|
selectedValues: {
|
|
|
|
type: Array,
|
|
|
|
notify: true
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Returns an array of currently selected items.
|
|
|
|
*/
|
|
|
|
selectedItems: {
|
|
|
|
type: Array,
|
|
|
|
readOnly: true,
|
|
|
|
notify: true
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
observers: [
|
2016-03-14 12:17:57 -07:00
|
|
|
'_updateSelected(selectedValues.splices)'
|
2015-06-19 09:36:51 -07:00
|
|
|
],
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Selects the given value. If the `multi` property is true, then the selected state of the
|
|
|
|
* `value` will be toggled; otherwise the `value` will be selected.
|
|
|
|
*
|
|
|
|
* @method select
|
2016-01-29 19:43:11 -07:00
|
|
|
* @param {string|number} value the value to select.
|
2015-06-19 09:36:51 -07:00
|
|
|
*/
|
|
|
|
select: function(value) {
|
|
|
|
if (this.multi) {
|
|
|
|
if (this.selectedValues) {
|
|
|
|
this._toggleSelected(value);
|
|
|
|
} else {
|
|
|
|
this.selectedValues = [value];
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.selected = value;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
multiChanged: function(multi) {
|
|
|
|
this._selection.multi = multi;
|
|
|
|
},
|
|
|
|
|
2015-12-14 08:43:03 -07:00
|
|
|
get _shouldUpdateSelection() {
|
|
|
|
return this.selected != null ||
|
|
|
|
(this.selectedValues != null && this.selectedValues.length);
|
|
|
|
},
|
|
|
|
|
2016-02-18 11:20:10 -07:00
|
|
|
_updateAttrForSelected: function() {
|
|
|
|
if (!this.multi) {
|
|
|
|
Polymer.IronSelectableBehavior._updateAttrForSelected.apply(this);
|
|
|
|
} else if (this._shouldUpdateSelection) {
|
|
|
|
this.selectedValues = this.selectedItems.map(function(selectedItem) {
|
2016-04-08 20:08:50 -07:00
|
|
|
return this._indexToValue(this.indexOf(selectedItem));
|
2016-02-18 11:20:10 -07:00
|
|
|
}, this).filter(function(unfilteredValue) {
|
|
|
|
return unfilteredValue != null;
|
|
|
|
}, this);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
_updateSelected: function() {
|
|
|
|
if (this.multi) {
|
|
|
|
this._selectMulti(this.selectedValues);
|
|
|
|
} else {
|
|
|
|
this._selectSelected(this.selected);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_selectMulti: function(values) {
|
|
|
|
if (values) {
|
2016-02-18 11:20:10 -07:00
|
|
|
var selectedItems = this._valuesToItems(values);
|
|
|
|
// clear all but the current selected items
|
|
|
|
this._selection.clear(selectedItems);
|
|
|
|
// select only those not selected yet
|
|
|
|
for (var i = 0; i < selectedItems.length; i++) {
|
|
|
|
this._selection.setItemSelected(selectedItems[i], true);
|
2015-06-19 09:36:51 -07:00
|
|
|
}
|
2016-04-08 20:08:50 -07:00
|
|
|
// Check for items, since this array is populated only when attached
|
|
|
|
if (this.fallbackSelection && this.items.length && !this._selection.get().length) {
|
|
|
|
var fallback = this._valueToItem(this.fallbackSelection);
|
|
|
|
if (fallback) {
|
|
|
|
this.selectedValues = [this.fallbackSelection];
|
|
|
|
}
|
|
|
|
}
|
2016-02-18 11:20:10 -07:00
|
|
|
} else {
|
|
|
|
this._selection.clear();
|
2015-06-19 09:36:51 -07:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_selectionChange: function() {
|
|
|
|
var s = this._selection.get();
|
|
|
|
if (this.multi) {
|
|
|
|
this._setSelectedItems(s);
|
|
|
|
} else {
|
|
|
|
this._setSelectedItems([s]);
|
|
|
|
this._setSelectedItem(s);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
_toggleSelected: function(value) {
|
|
|
|
var i = this.selectedValues.indexOf(value);
|
|
|
|
var unselected = i < 0;
|
|
|
|
if (unselected) {
|
2015-09-29 21:10:14 -07:00
|
|
|
this.push('selectedValues',value);
|
2015-06-19 09:36:51 -07:00
|
|
|
} else {
|
2015-09-29 21:10:14 -07:00
|
|
|
this.splice('selectedValues',i,1);
|
2015-06-19 09:36:51 -07:00
|
|
|
}
|
2016-02-18 11:20:10 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
_valuesToItems: function(values) {
|
|
|
|
return (values == null) ? null : values.map(function(value) {
|
|
|
|
return this._valueToItem(value);
|
|
|
|
}, this);
|
2015-06-19 09:36:51 -07:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/** @polymerBehavior */
|
|
|
|
Polymer.IronMultiSelectableBehavior = [
|
|
|
|
Polymer.IronSelectableBehavior,
|
|
|
|
Polymer.IronMultiSelectableBehaviorImpl
|
|
|
|
];
|
|
|
|
|
|
|
|
</script>
|