Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add multiple selection support #255

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
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
23 changes: 23 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -200,6 +200,29 @@ <h4>You can remove the ripple and the animations</h4>
</template>
</demo-snippet>

<h4>This is a multi paper-dropdown-menu</h4>
<demo-snippet class="centered-demo">
<template>
<paper-dropdown-menu label="Dinosaurs" multi>
<paper-listbox slot="dropdown-content" class="dropdown-content" multi>
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>

<paper-dropdown-menu-light label="Dinosaurs (light)" multi>
<paper-listbox slot="dropdown-content" class="dropdown-content" multi>
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu-light>
</template>
</demo-snippet>

<h4>You can style a paper-dropdown-menu using custom properties</h4>
<demo-snippet class="centered-demo">
<template>
27 changes: 18 additions & 9 deletions paper-dropdown-menu-light.html
Original file line number Diff line number Diff line change
@@ -292,8 +292,9 @@
on-iron-select="_onIronSelect"
on-iron-deselect="_onIronDeselect"
opened="{{opened}}"
close-on-activate
allow-outside-scroll="[[allowOutsideScroll]]">
allow-outside-scroll="[[allowOutsideScroll]]"
multi="[[multi]]"
ignore-select="[[multi]]">
<!-- support hybrid mode: user might be using paper-menu-button 1.x which distributes via <content> -->
<div class="dropdown-trigger" slot="dropdown-trigger">
<label class$="[[_computeLabelClass(noLabelFloat,alwaysFloatLabel,hasContent)]]">
@@ -443,6 +444,14 @@
hasContent: {
type: Boolean,
readOnly: true
},

/**
* If true, multiple selections are allowed.
*/
multi: {
type: Boolean,
value: false
}
},

@@ -510,7 +519,7 @@
* @param {CustomEvent} event An `iron-select` event.
*/
_onIronSelect: function(event) {
this._setSelectedItem(event.detail.item);
this._setSelectedItem(event.detail.item.parentElement.selectedItems);
},

/**
@@ -519,7 +528,7 @@
* @param {CustomEvent} event An `iron-deselect` event.
*/
_onIronDeselect: function(event) {
this._setSelectedItem(null);
this._setSelectedItem(event.detail.item.parentElement.selectedItems);
},

/**
@@ -539,12 +548,12 @@
* @param {Element} selectedItem A selected Element item, with an
* optional `label` property.
*/
_selectedItemChanged: function(selectedItem) {
_selectedItemChanged: function(selectedItems) {
var value = '';
if (!selectedItem) {
value = '';
} else {
value = selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim();
if (selectedItems.length) {
value = selectedItems.map((item) => {
return item && (item.label || item.getAttribute('label') || item.textContent.trim());
}).join(', ');
}

this._setValue(value);
24 changes: 16 additions & 8 deletions paper-dropdown-menu.html
Original file line number Diff line number Diff line change
@@ -97,8 +97,9 @@
on-iron-select="_onIronSelect"
on-iron-deselect="_onIronDeselect"
opened="{{opened}}"
close-on-activate
allow-outside-scroll="[[allowOutsideScroll]]"
multi="[[multi]]"
ignore-select="[[multi]]"
restore-focus-on-close="[[restoreFocusOnClose]]">
<!-- support hybrid mode: user might be using paper-menu-button 1.x which distributes via <content> -->
<div class="dropdown-trigger" slot="dropdown-trigger">
@@ -278,6 +279,13 @@
type: Boolean,
value: true
},
/**
* If true, multiple selections are allowed.
*/
multi: {
type: Boolean,
value: false
}
},

listeners: {
@@ -343,7 +351,7 @@
* @param {CustomEvent} event An `iron-select` event.
*/
_onIronSelect: function(event) {
this._setSelectedItem(event.detail.item);
this._setSelectedItem(event.detail.item.parentElement.selectedItems);
},

/**
@@ -352,7 +360,7 @@
* @param {CustomEvent} event An `iron-deselect` event.
*/
_onIronDeselect: function(event) {
this._setSelectedItem(null);
this._setSelectedItem(event.detail.item.parentElement.selectedItems);
},

/**
@@ -372,12 +380,12 @@
* @param {Element} selectedItem A selected Element item, with an
* optional `label` property.
*/
_selectedItemChanged: function(selectedItem) {
_selectedItemChanged: function(selectedItems) {
var value = '';
if (!selectedItem) {
value = '';
} else {
value = selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim();
if (selectedItems.length) {
value = selectedItems.map((item) => {
return item && (item.label || item.getAttribute('label') || item.textContent.trim());
}).join(', ');
}

this._setValue(value);
20 changes: 12 additions & 8 deletions test/paper-dropdown-menu-light.html
Original file line number Diff line number Diff line change
@@ -115,7 +115,7 @@
MockInteractions.tap(firstItem);

Polymer.Base.async(function() {
expect(dropdownMenu.selectedItem).to.be.equal(firstItem);
expect(dropdownMenu.selectedItem[0]).to.be.equal(firstItem);
done();
});
});
@@ -132,7 +132,7 @@

test('the input area shows the correct selection', function() {
var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1];
expect(dropdownMenu.selectedItem).to.be.equal(secondItem);
expect(dropdownMenu.selectedItem[0]).to.be.equal(secondItem);
});
});

@@ -148,7 +148,7 @@

test('an `iron-deselect` event clears the current selection', function() {
content.selected = null;
expect(dropdownMenu.selectedItem).to.be.equal(null);
expect(dropdownMenu.selectedItem.pop()).to.be.equal(undefined);
});
});

@@ -210,14 +210,18 @@

test('label property', function() {
content.selected = 0;
//Fake a label property since paper-item doesn't have one
dropdownMenu.selectedItem.label = dropdownMenu.selectedItem.getAttribute('label');
expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property');
Polymer.Base.async(function() {
//Fake a label property since paper-item doesn't have one
dropdownMenu.selectedItem[0].label = dropdownMenu.selectedItem[0].getAttribute('label');
expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property');
});
});

test('label attribute', function() {
content.selected = 1;
expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute');
Polymer.Base.async(function() {
expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute');
});
});

test('textContent', function() {
@@ -229,4 +233,4 @@
</script>

</body>
</html>
</html>
20 changes: 12 additions & 8 deletions test/paper-dropdown-menu.html
Original file line number Diff line number Diff line change
@@ -115,7 +115,7 @@
MockInteractions.tap(firstItem);

Polymer.Base.async(function() {
expect(dropdownMenu.selectedItem).to.be.equal(firstItem);
expect(dropdownMenu.selectedItem[0]).to.be.equal(firstItem);
done();
});
});
@@ -132,7 +132,7 @@

test('the input area shows the correct selection', function() {
var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1];
expect(dropdownMenu.selectedItem).to.be.equal(secondItem);
expect(dropdownMenu.selectedItem[0]).to.be.equal(secondItem);
});
});

@@ -148,7 +148,7 @@

test('an `iron-deselect` event clears the current selection', function() {
content.selected = null;
expect(dropdownMenu.selectedItem).to.be.equal(null);
expect(dropdownMenu.selectedItem.pop()).to.be.equal(undefined);
});
});

@@ -210,14 +210,18 @@

test('label property', function() {
content.selected = 0;
//Fake a label property since paper-item doesn't have one
dropdownMenu.selectedItem.label = dropdownMenu.selectedItem.getAttribute('label');
expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property');
Polymer.Base.async(function() {
//Fake a label property since paper-item doesn't have one
dropdownMenu.selectedItem[0].label = dropdownMenu.selectedItem[0].getAttribute('label');
expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label property');
});
});

test('label attribute', function() {
content.selected = 1;
expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute');
Polymer.Base.async(function() {
expect(dropdownMenu.selectedItemLabel).to.be.equal('Foo label attribute');
});
});

test('textContent', function() {
@@ -229,4 +233,4 @@
</script>

</body>
</html>
</html>