2018-09-07 14:25:55 +02:00
|
|
|
<!-- Components -->
|
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<link rel="import" href="../paper-input/paper-input.html">
|
|
|
|
<link rel="import" href="../iron-icon/iron-icon.html">
|
|
|
|
|
|
|
|
<dom-module id="strolch-wc-debounced-input">
|
|
|
|
<template>
|
|
|
|
<!-- Style -->
|
|
|
|
<style is="custom-style">
|
|
|
|
:host {
|
|
|
|
--focus-color: white;
|
|
|
|
--regular-color: lightgrey;
|
|
|
|
--disabled-color: darkgrey;
|
|
|
|
display: block;
|
2022-05-06 11:35:53 +02:00
|
|
|
|
|
|
|
--input-padding: 4px;
|
2018-09-07 14:25:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
paper-input {
|
|
|
|
--paper-input-container-color: var(--regular-color);
|
|
|
|
--paper-input-container-focus-color: var(--focus-color);
|
|
|
|
--paper-input-container-input-color: var(--focus-color);
|
|
|
|
--paper-input-container-input: {
|
|
|
|
font-size: 18px;
|
2022-05-06 11:35:53 +02:00
|
|
|
padding: var(--input-padding);
|
2018-09-07 14:25:55 +02:00
|
|
|
};
|
|
|
|
--paper-input-container-underline-disabled: {
|
|
|
|
border-bottom-style: solid;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
paper-input::shadow input::-ms-clear {
|
|
|
|
display: none;
|
|
|
|
width: 0;
|
|
|
|
height: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
paper-input iron-icon {
|
|
|
|
padding: 4px;
|
|
|
|
}
|
|
|
|
|
|
|
|
paper-input:not([focused]) iron-icon {
|
|
|
|
color: var(--regular-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
paper-input[focused] iron-icon {
|
|
|
|
color: var(--focus-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
#clear {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<!-- Content -->
|
|
|
|
<paper-input id="inputElement"
|
2022-05-06 11:35:53 +02:00
|
|
|
label="[[label]]"
|
|
|
|
no-label-float="[[noLabelFloat]]"
|
2018-09-07 14:25:55 +02:00
|
|
|
placeholder="[[placeholder]]"
|
|
|
|
value="{{input}}"
|
|
|
|
disabled$="[[disabled]]"
|
|
|
|
on-focus="_onFocused"
|
|
|
|
on-keyup="_onKeyUp"
|
|
|
|
autofocus="[[autofocus]]">
|
|
|
|
<template is="dom-if" if="[[isEmptyString(input)]]">
|
|
|
|
<iron-icon suffix icon="[[suffixIcon]]"></iron-icon>
|
|
|
|
</template>
|
|
|
|
<template is="dom-if" if="[[!isEmptyString(input)]]">
|
|
|
|
<iron-icon suffix icon="clear" id="clear" on-tap="onClearTapped"></iron-icon>
|
|
|
|
</template>
|
|
|
|
</paper-input>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
Polymer({
|
|
|
|
<!-- Settings -->
|
|
|
|
is: "strolch-wc-debounced-input",
|
|
|
|
|
|
|
|
<!-- Properties -->
|
|
|
|
properties: {
|
|
|
|
placeholder: {
|
|
|
|
type: String,
|
|
|
|
value: ""
|
|
|
|
},
|
|
|
|
input: {
|
|
|
|
type: String,
|
|
|
|
value: "",
|
|
|
|
observer: "observeInput"
|
|
|
|
},
|
|
|
|
debouncedInput: {
|
|
|
|
type: String,
|
|
|
|
value: "",
|
|
|
|
notify: true
|
|
|
|
},
|
|
|
|
prevDebouncedInput: {
|
|
|
|
type: String,
|
|
|
|
value: ""
|
|
|
|
},
|
|
|
|
suffixIcon: {
|
|
|
|
type: String,
|
|
|
|
value: "search"
|
|
|
|
},
|
2022-05-06 11:35:53 +02:00
|
|
|
label: {
|
|
|
|
type: String
|
|
|
|
},
|
|
|
|
noLabelFloat: {
|
|
|
|
type: Boolean,
|
|
|
|
value: true
|
|
|
|
},
|
2018-09-07 14:25:55 +02:00
|
|
|
disabled: {
|
|
|
|
type: Boolean,
|
|
|
|
value: false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
<!-- Observers -->
|
|
|
|
observeInput: function (newValue, oldValue) {
|
|
|
|
this.debounce("inputDebounce", function () {
|
2022-04-20 09:37:52 +02:00
|
|
|
this._setInput(newValue, false);
|
2018-09-07 14:25:55 +02:00
|
|
|
}, 500);
|
|
|
|
},
|
|
|
|
|
|
|
|
_onFocused: function (event) {
|
|
|
|
this.$.inputElement.inputElement.select()
|
|
|
|
},
|
|
|
|
_onKeyUp: function (event) {
|
|
|
|
// if enter was pressed
|
|
|
|
if (event.keyCode === 13) {
|
|
|
|
this.debounce("inputDebounce", function () {
|
2022-04-20 09:37:52 +02:00
|
|
|
this._setInput(this.input, true);
|
2018-09-07 14:25:55 +02:00
|
|
|
}, 200);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2022-04-20 09:37:52 +02:00
|
|
|
_setInput: function (newValue, enterPressed) {
|
|
|
|
// save the previous value so it may be reset
|
|
|
|
this.set("prevDebouncedInput", this.debouncedInput);
|
|
|
|
// set the debounced input after delay
|
|
|
|
this.set("debouncedInput", newValue);
|
|
|
|
this.fire('strolch-wc-debounced-input-changed', {
|
|
|
|
input: newValue,
|
|
|
|
enterPressed: enterPressed
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2018-09-07 14:25:55 +02:00
|
|
|
<!-- Functions -->
|
2022-04-20 09:37:52 +02:00
|
|
|
onClearTapped: function () {
|
2018-09-07 14:25:55 +02:00
|
|
|
this.setInputTerm("");
|
2022-04-20 09:37:52 +02:00
|
|
|
this.cancelDebouncer("inputDebounce");
|
|
|
|
this._setInput("", false);
|
2018-09-07 14:25:55 +02:00
|
|
|
},
|
|
|
|
undoLastInput: function () {
|
|
|
|
// apply the last debounced input
|
|
|
|
this.setInputTerm(this.prevDebouncedInput);
|
|
|
|
},
|
|
|
|
setInputTerm: function (inputTerm) {
|
|
|
|
this.set("input", inputTerm);
|
|
|
|
},
|
|
|
|
isEmptyString: function (string) {
|
|
|
|
return (!string || string.length == 0 || !string.trim());
|
|
|
|
},
|
|
|
|
|
|
|
|
focus: function () {
|
|
|
|
this.$.inputElement.focus();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</dom-module>
|