Skip to content
This repository has been archived by the owner on Dec 28, 2024. It is now read-only.

merge ffu's 0.8 behaviors branch #3

Merged
merged 3 commits into from
Apr 24, 2015
Merged

merge ffu's 0.8 behaviors branch #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d32bd6f
IronSelectableBehavior - single selection only
frankiefu Apr 22, 2015
143c094
update based on sjmiles' comments:
frankiefu Apr 22, 2015
543074a
Merge remote-tracking branch 'origin/0.8-behaviors'
Apr 24, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<style>

iron-selector > * {
padding: 16px;
padding: 8px;
}

.iron-selected {
Expand All @@ -34,7 +34,8 @@
</head>
<body>

<h3>Example 1</h3>
<h3>Basic</h3>

<iron-selector selected="0">
<div>Item 0</div>
<div>Item 1</div>
Expand All @@ -43,7 +44,18 @@ <h3>Example 1</h3>
<div>Item 4</div>
</iron-selector>

<h3>Example 2</h3>
<h3>Multi-select</h3>

<iron-selector multi selected-values='[0,2]'>
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</iron-selector>

<h3>Example</h3>

<iron-selector selected="foo" attr-for-selected="name">
<div name="foo">Foo</div>
<div name="bar">Bar</div>
Expand Down
127 changes: 127 additions & 0 deletions iron-multi-selectable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!--
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: license@? (here and everywhere)

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>

Polymer.IronMultiSelectableBehavior = [
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is the extends keyword when you need it? 🚲

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice specialization of selectable btw 🍺

Polymer.IronSelectableBehavior, {

properties: {

/**
* If true, multiple selections are allowed.
*
* @attribute multi
* @type Boolean
* @default false
*/
multi: {
type: Boolean,
value: false,
observer: 'multiChanged'
},

/**
* Gets or sets the selected elements. This is used instead of `selected` when `multi`
* is true.
*
* @attribute selectedValues
* @type Array
*/
selectedValues: {
type: Array,
notify: true
},

/**
* Returns an array of currently selected items.
*
* @attribute selectedItems
* @type Array
*/
selectedItems: {
type: Array,
readOnly: true,
notify: true
},

},

observers: [
'_updateSelected(attrForSelected, selectedValues)'
],

/**
* 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
* @param {String} value the value to select.
*/
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;
},

_updateSelected: function() {
if (this.multi) {
this._selectMulti(this.selectedValues);
} else {
this._selectSelected(this.selected);
}
},

_selectMulti: function(values) {
this._selection.clear();
if (values) {
for (var i = 0; i < values.length; i++) {
this._selection.setItemSelected(this._valueToItem(values[i]), true);
}
}
},

_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) {
this.selectedValues.push(value);
} else {
this.selectedValues.splice(i, 1);
}
this._selection.setItemSelected(this._valueToItem(value), unselected);
}

}
];

</script>
Loading