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

Commit

Permalink
apply many patch from https://github.com/viniromano/paper-dropdown-me…
Browse files Browse the repository at this point in the history 
…nu.git (author by viniromano).

update demo, support polymer 2.x.
modified tests, it's passed.
  • Loading branch information
@wndfly
wndfly committed Jun 29, 2017
1 parent ee8e211 commit 10f1ded
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 33 deletions.
23 changes: 23 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
27 changes: 18 additions & 9 deletions paper-dropdown-menu-light.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)]]">
Expand Down Expand Up @@ -443,6 +444,14 @@
hasContent: {
type: Boolean,
readOnly: true
},

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

Expand Down Expand Up @@ -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);
},

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

/**
Expand All @@ -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);
Expand Down
24 changes: 16 additions & 8 deletions paper-dropdown-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -278,6 +279,13 @@
type: Boolean,
value: true
},
/**
* If true, multiple selections are allowed.
*/
multi: {
type: Boolean,
value: false
}
},

listeners: {
Expand Down Expand Up @@ -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);
},

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

/**
Expand All @@ -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);
Expand Down
20 changes: 12 additions & 8 deletions test/paper-dropdown-menu-light.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Expand All @@ -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);
});
});

Expand All @@ -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.length).to.be.equal(0);
});
});

Expand Down Expand Up @@ -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.label = dropdownMenu.selectedItem.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() {
Expand All @@ -229,4 +233,4 @@
</script>

</body>
</html>
</html>
20 changes: 12 additions & 8 deletions test/paper-dropdown-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
Expand All @@ -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);
});
});

Expand All @@ -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.length).to.be.equal(0);
});
});

Expand Down Expand Up @@ -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.label = dropdownMenu.selectedItem.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() {
Expand All @@ -229,4 +233,4 @@
</script>

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

0 comments on commit 10f1ded

Please sign in to comment.