strolch-wc-debounced-input/strolch-wc-debounced-input....

170 lines
5.4 KiB
HTML

<!-- 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: var(--primary-color);
--input-color: var(--primary-text-color);
--regular-color: var(--secondary-text-color);
--disabled-color: darkgrey;
display: block;
--input-padding: 4px;
}
paper-input {
--paper-input-container-color: var(--regular-color);
--paper-input-container-focus-color: var(--focus-color);
--paper-input-container-input-color: var(--input-color);
--paper-input-container-input: {
font-size: 18px;
padding: var(--input-padding);
};
--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"
label="[[label]]"
no-label-float="[[noLabelFloat]]"
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"
},
label: {
type: String
},
noLabelFloat: {
type: Boolean,
value: true
},
disabled: {
type: Boolean,
value: false
}
},
<!-- Observers -->
observeInput: function (newValue, oldValue) {
this.debounce("inputDebounce", function () {
this._setInput(newValue, false);
}, 500);
},
_onFocused: function (event) {
this.$.inputElement.inputElement.select()
},
_onKeyUp: function (event) {
// if enter was pressed
if (event.keyCode === 13) {
this.debounce("inputDebounce", function () {
this._setInput(this.input, true);
}, 200);
}
},
_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
});
},
<!-- Functions -->
onClearTapped: function () {
this.setInputTerm("");
this.cancelDebouncer("inputDebounce");
this._setInput("", false);
},
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>