Skip to content

Commit

Permalink
Added optional clear button and "No matches" typeahead message.
Browse files Browse the repository at this point in the history 
* Added "No matches" item (with configurable text) for typeaheads.
* Added optional clear button for all combo types.
* Added "Show Clear Button" toggle to demo page.
* Added `paper-toggle-button` to bower dev dependencies.
  • Loading branch information
John Yanarella committed Mar 29, 2016
1 parent 773f124 commit fc7f45f
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 10 deletions.
1 change: 1 addition & 0 deletions bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"paper-item": "PolymerElements/paper-item#^1.0.5"
},
"devDependencies": {
"paper-toggle-button": "PolymerElements/paper-toggle-button#^1.0.11",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "Polymer/web-component-tester#^3.3.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0"
Expand Down
29 changes: 20 additions & 9 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,19 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>radium-combo demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="../radium-combo.html">
<style>body { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; }</style>
<style is="custom-style">
#demo-container {
padding: 0px 2% !important;
height: 100%;
}
#config-container {
padding: 16px 2% !important;
background-color: #efefef;
margin-top: 48px
}
.example-title {
margin-top: 32px;
font-weight: bold;
Expand All @@ -31,7 +37,7 @@
font-weight: bold;
font-size: 14px;
display: inline-block;
margin-top: 48px;
margin-top: 24px;
}
.event-string {
font-style: italic;
Expand All @@ -50,33 +56,38 @@ <h2>radium-combo</h2>
<div class="example-col">
<div class="example-title">Select w/ empty option label</div>
<div class="example-selected">Selected - <span>[[_selected1.label]]</span></div>
<radium-combo options="[[_myoptions]]" value="{{_selected1}}" empty-option-label="--unselect--"
on-option-change="_optionSelected"></radium-combo>
<radium-combo options="[[_myoptions]]" value="{{_selected1}}" show-clear-button="[[_showClearButton]]"
empty-option-label="--unselect--" on-option-change="_optionSelected"></radium-combo>
<div class="example-title">Select w/ initial value</div>
<div class="example-selected">Selected - <span>[[_selected2.label]]</span></div>
<radium-combo options="[[_myoptions]]" value="{{_selected2}}"
<radium-combo options="[[_myoptions]]" value="{{_selected2}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
<div class="example-title">Select w/ no empty value (force selection)</div>
<div class="example-selected">Selected - <span>[[_selected3.label]]</span></div>
<radium-combo options="[[_myoptions]]" include-empty="false" value="{{_selected3}}"
<radium-combo options="[[_myoptions]]" include-empty="false" value="{{_selected3}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
</div>
<div class="example-col" style="margin-left: 3%">
<div class="example-title">Disabled</div>
<div class="example-selected">Selected - <span>[[_selected4.label]]</span></div>
<radium-combo options="[[_myoptions]]" disabled value="{{_selected4}}"
<radium-combo options="[[_myoptions]]" disabled value="{{_selected4}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
<div class="example-title">Typeahead</div>
<div class="example-selected">Selected - <span>[[_selected5.label]]</span></div>
<radium-combo options="[[_myoptions]]" type="typeahead" value="{{_selected5}}"
<radium-combo options="[[_myoptions]]" type="typeahead" value="{{_selected5}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
<div class="example-title">Combobox</div>
<div class="example-selected">Selected - <span>[[_selected6.label]]</span></div>
<radium-combo options="[[_myoptions]]" type="combobox" value="{{_selected6}}"
<radium-combo options="[[_myoptions]]" type="combobox" value="{{_selected6}}" show-clear-button="[[_showClearButton]]"
on-option-change="_optionSelected"></radium-combo>
</div>
</div><br>
<div class="event-label">Option Change Event:</div><div class="event-string">[[_lastEvent]]</div>
<div id="config-container">
<div>
<paper-toggle-button active="{{_showClearButton}}">Show Clear Button</paper-toggle-button>
</div>
<div class="event-label">Option Change Event:</div><div class="event-string">[[_lastEvent]]</div>
</div>
</template>
<script>
app._myoptions = [{label:'Joe', value:'1'}
Expand Down
48 changes: 47 additions & 1 deletion radium-combo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,14 @@
:host([no-label-float]) #dropdown {
margin-top: 36px;
}
#clear-icon {
position: absolute;
right: 24px;
cursor: pointer;
width: 20px;
height: 20px;
padding: 2px;
}
#dropdown-icon {
position: absolute;
right: 0;
Expand All @@ -58,11 +66,12 @@
}
</style>
<template>
<paper-input-container id="input-container" on-click="_dropdownAction" disabled$="[[disabled]]" tabindex="0"
<paper-input-container id="input-container" on-tap="_dropdownAction" disabled$="[[disabled]]" tabindex="0"
no-label-float="[[noLabelFloat]]" on-keydown="_containerKeyHandler">
<label>[[label]]</label>
<input id="input" is="iron-input" type="text" autocomplete="off" on-input="_inputValueChanged" on-blur="_onInputBlur"
on-keydown="_keyHandler" disabled class="paper-input-input"></input>
<iron-icon id="clear-icon" icon="clear" hidden$="[[!_showClearIcon(showClearButton, _inputValue)]]" on-tap="_clearTapped"></iron-icon>
<iron-icon id="dropdown-icon" icon="[[_dropdownIcon()]]"></iron-icon>
</paper-input-container>
<iron-dropdown id="dropdown" on-iron-overlay-closed="_dropdownClosed">
Expand All @@ -73,6 +82,11 @@
<span>[[emptyOptionLabel]]</span>
</paper-item>
</template>
<template is="dom-if" if="[[_checkShowNoMatches(noMatchesLabel, type, _filteredOptions)]]">
<paper-item value="">
<span>[[noMatchesLabel]]</span>
</paper-item>
</template>
<template is="dom-repeat" items="[[_filteredOptions]]">
<paper-item on-down="_selectItem" on-click="_hideDropdown" value="[[item.__value]]">
<span>[[item.__label]]</span>
Expand Down Expand Up @@ -156,6 +170,13 @@
emptyOptionLabel: {
type: String
},
/**
* Placeholder text if no matches (for typeahead).
*/
noMatchesLabel: {
type: String,
value: 'No matches'
},
/**
* The type of selection control
* Choices are:
Expand All @@ -177,10 +198,22 @@
value: 'true',
observer: '_emptyChanged'
},
/**
* Whether or not to include a clear button in the input, allowing the
* user to unselect
*/
showClearButton: {
type: Boolean,
value: false
},
_showEmpty: {
type: Boolean,
value: true
},
_inputValue: {
type: String,
value: ''
},
_optionsInternal: {
type: Array,
value: function() {return [];}
Expand Down Expand Up @@ -279,9 +312,15 @@
_isDropdown: function() {
return (this.type.toLowerCase() !== 'combobox' && this.type.toLowerCase() !== 'typeahead');
},
_showClearIcon: function(showClearButton, inputValue) {
return showClearButton && inputValue && inputValue.length > 0;
},
_checkShowEmpty: function(e, t) {
return (e === true && this._isDropdown);
},
_checkShowNoMatches: function(noMatchesLabel, type, options) {
return (noMatchesLabel && noMatchesLabel.length > 0 && type.toLowerCase() === 'typeahead' && options.length === 0);
},
_dropdownIcon: function() {
if (this._open) {
return 'arrow-drop-up';
Expand Down Expand Up @@ -332,11 +371,17 @@
_dropdownClosed: function() {
this._open = false;
},
_clearTapped: function (e) {
e.stopImmediatePropagation();

this.clearSelection(true);
},
_handleFloatingLabel: function(value) {
this.$['input-container']._inputHasContent = !(!value || value === null || value === '');
},
_inputValueChanged: function(e) {
var input = e.target.value;
this._inputValue = input;
this._handleFloatingLabel(input);
this._filterOptions(input);
// Select the dropdown item based on the current input.
Expand Down Expand Up @@ -490,6 +535,7 @@
},
_setInputValue: function(v) {
this._handleFloatingLabel(v);
this._inputValue = v;
this.$.input.value = v;
},
_setSelectorSelected: function(idx) {
Expand Down

0 comments on commit fc7f45f

Please sign in to comment.