Compare commits

...

6 Commits

2 changed files with 37 additions and 27 deletions

View File

@ -1,7 +1,7 @@
{
"name": "strolch-wc-debounced-input",
"description": "Strolch WebComponent Debounced Input",
"version": "0.1.0",
"version": "0.1.6",
"authors": [
"Robert von Burg"
],
@ -13,13 +13,13 @@
"private": true,
"repository": {
"type": "git",
"url": "git@github.com:4treesCH/strolch-wc-debounced-input.git"
"url": "git@github.com:strolch-li/strolch-wc-debounced-input.git"
},
"license": "https://github.com/4treesCH/strolch-wc-debounced-input/blob/master/LICENSE",
"homepage": "https://github.com/4treesCH/strolch-wc-debounced-input",
"license": "https://github.com/strolch-li/strolch-wc-debounced-input/blob/master/LICENSE",
"homepage": "https://github.com/strolch-li/strolch-wc-debounced-input",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.11.3",
"polymer": "Polymer/polymer#^1.12.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.13",
"iron-icons": "PolymerElements/iron-icons#^1.2.1",

View File

@ -8,19 +8,22 @@
<!-- Style -->
<style is="custom-style">
:host {
--focus-color: white;
--regular-color: lightgrey;
--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(--focus-color);
--paper-input-container-input-color: var(--input-color);
--paper-input-container-input: {
font-size: 18px;
padding: 4px;
padding: var(--input-padding);
};
--paper-input-container-underline-disabled: {
border-bottom-style: solid;
@ -52,7 +55,8 @@
<!-- Content -->
<paper-input id="inputElement"
no-label-float
label="[[label]]"
no-label-float="[[noLabelFloat]]"
placeholder="[[placeholder]]"
value="{{input}}"
disabled$="[[disabled]]"
@ -97,6 +101,13 @@
type: String,
value: "search"
},
label: {
type: String
},
noLabelFloat: {
type: Boolean,
value: true
},
disabled: {
type: Boolean,
value: false
@ -106,14 +117,7 @@
<!-- Observers -->
observeInput: function (newValue, oldValue) {
this.debounce("inputDebounce", function () {
// 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: false
});
this._setInput(newValue, false);
}, 500);
},
@ -124,21 +128,27 @@
// if enter was pressed
if (event.keyCode === 13) {
this.debounce("inputDebounce", function () {
// save the previous value so it may be reset
this.set("prevDebouncedInput", this.debouncedInput);
// set the debounced input after delay
this.set("debouncedInput", this.input);
this.fire('strolch-wc-debounced-input-changed', {
input: this.input,
enterPressed: true
});
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 (event) {
onClearTapped: function () {
this.setInputTerm("");
this.cancelDebouncer("inputDebounce");
this._setInput("", false);
},
undoLastInput: function () {
// apply the last debounced input