Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
better support on multi-selection, allow to use selected to set
Browse files Browse the repository at this point in the history 
selections
  • Loading branch information
@frankiefu
frankiefu committed Jul 16, 2013
1 parent fdd023a commit ab736e7
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 28 deletions.
21 changes: 17 additions & 4 deletions polymer-selector/index.html
View file
Expand Up @@ -26,20 +26,33 @@
</style>
</head>
<body>
<polymer-selector>
<polymer-selector id="selector1" selected="0">
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</polymer-selector>
<h2>Multi-select</h2>
<polymer-selector multi>
<polymer-selector id="selector2" multi>
<div>Item 0</div>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
</polymer-selector>

<script>
document.addEventListener('WebComponentsReady', function() {
document.querySelector('#selector2').selected = [1, 3];

/* document.querySelector('#selector1').addEventListener('polymer-select', function(e) {
console.log('polymer-select1', e.detail.isSelected, e.detail.item);
});
document.querySelector('#selector2').addEventListener('polymer-select', function(e) {
console.log('polymer-select2', e.detail.isSelected, e.detail.item);
}); */
});
</script>
</body>
</html>
114 changes: 90 additions & 24 deletions polymer-selector/polymer-selector.html
View file
Expand Up @@ -9,13 +9,13 @@
*/
/**
* polymer-selector is used to display a list of elements that can be selected.
* The attribute "selected" indicates which element is being selected.
* Tapping on the element to change selection would fire "polymer-activate"
* event.
* The attribute "selected" indicates which item element is being selected.
* Tapping on the item element would fire "polymer-activate" event. And use
* "polymer-select" event to listen for selection changes.
*
* Example:
*
* <polymer-selector selected="0" on-polymer-activate="activateAction">
* <polymer-selector selected="0">
* <div>Item 1</div>
* <div>Item 2</div>
* <div>Item 3</div>
Expand All @@ -39,11 +39,19 @@
* @class polymer-selector
*/
/**
* Fired when an element is selected via tap.
* Fired when selection changes.
*
* @event activate
* @event polymer-select
* @param {Object} detail
* @param {Object} detail.item the selected element
* @param {boolean} isSelected
* @param {Object} detail.item the item element
*/
/**
* Fired when an item element is tapped.
*
* @event polymer-activate
* @param {Object} detail
* @param {Object} detail.item the item element
*/
-->
<link rel="import" href="polymer-selection.html">
Expand All @@ -57,10 +65,10 @@
<script>
Polymer('polymer-selector', {
/**
* Gets or sets the selected element. Default is to use the index
* of the currently selected element.
* Gets or sets the selected element. Default to use the index
* of the item element.
*
* If you want a specific attribute value of the selected element to be
* If you want a specific attribute value of the element to be
* used instead of index, set "valueattr" to that attribute name.
*
* Example:
Expand All @@ -71,8 +79,20 @@
* <div label="zot"></div>
* </polymer-selector>
*
* In multi-selection this should be an array of values.
*
* Example:
*
* <polymer-selector id="selector" valueattr="label" multi>
* <div label="foo"></div>
* <div label="bar"></div>
* <div label="zot"></div>
* </polymer-selector>
*
* this.$.selector.selected = ['foo', 'zot'];
*
* @attribute selected
* @type string
* @type string or array
* @default null
*/
selected: null,
Expand Down Expand Up @@ -110,7 +130,15 @@
*/
setectedProperty: 'active',
/**
* Returns the model associated with the selected element.
* In single selection this returns the currently selected element.
*
* @attribute selectedItem
* @type Object
* @default null
*/
selectedItem: null,
/**
* Returns the model associated with the selectedItem.
*
* @attribute selectedModel
* @type Object
Expand All @@ -127,10 +155,34 @@
return this.$.selection.getSelection();
},
selectedChanged: function() {
this.valueToSelection(this.selected);
if (this.multi) {
if (!Array.isArray(this.selected) &&
this.selected !== null && this.selected !== undefined) {
this.selected = [this.selected];
return;
}
this.clearSelection();
this.selected && this.selected.forEach(function(s) {
this.valueToSelection(s);
}.bind(this));
} else {
this.valueToSelection(this.selected);
}
},
clearSelection: function() {
if (this.multi) {
this.selection.slice().forEach(function(s) {
this.$.selection.setItemSelected(s, false);
}.bind(this));
} else {
this.$.selection.setItemSelected(this.selection, false);
}
this.selectedItem = null;
this.$.selection.clear();
},
valueToSelection: function(value) {
var item = this.items[this.valueToIndex(value)];
var item = (value === null || value === undefined) ?
null : this.items[this.valueToIndex(value)];
this.selectedItem = item;
this.$.selection.select(item);
},
Expand Down Expand Up @@ -158,32 +210,46 @@
// events fired from <polymer-selection> object
selectionSelect: function(e, detail) {
if (detail.item) {
if (this.selectedClass) {
detail.item.classList.toggle(this.selectedClass, detail.isSelected);
}
if (this.setectedProperty) {
detail.item[this.setectedProperty] = detail.isSelected;
}
this.applySelection(detail.item, detail.isSelected)
}
},
applySelection: function(item, isSelected) {
if (this.selectedClass) {
item.classList.toggle(this.selectedClass, isSelected);
}
if (this.setectedProperty) {
item[this.setectedProperty] = isSelected;
}
},
// event fired from host
activateHandler: function(e) {
if (!this.notap) {
var i = this.findDistributedTarget(e.target, this.items);
if (i >= 0) {
var selected = this.valueForNode(this.items[i]) || i;
var item = this.items[i];
var selected = this.valueForNode(item) || i;
if (this.multi) {
this.valueToSelection(selected);
if (this.selected) {
this.valueToSelection(selected);
var si = this.selected.indexOf(selected);
if (si >= 0) {
this.selected.splice(si, 1);
} else {
this.selected.push(selected);
}
} else {
this.selected = [selected];
}
} else {
this.selected = selected;
}
this.asyncFire('polymer-activate', {item: this.items[i]});
this.asyncFire('polymer-activate', {item: item});
}
}
},
findDistributedTarget: function(target, nodes) {
// find first ancestor of target (including itself) that
// is in inNodes, if any
// is in nodes, if any
while (target && target != this) {
var i = Array.prototype.indexOf.call(nodes, target);
if (i >= 0) {
Expand Down

0 comments on commit ab736e7

Please sign in to comment.