MontoyaTech/ignite-html-material
MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved change event on editable-label to bubble. Cleaned up some code as well.

Browse Source
This commit is contained in:
Matt Mo 2021-01-09 16:26:51 -08:00
parent 5686e4fd75
commit 47e83a4148
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
editable-label.js
View File

@ -87,7 +87,7 @@ class EditableLabel extends IgniteElement {
.class(this.border, value => value ? null : "no-border") .class(this.border, value => value ? null : "no-border")
.class(this.editing, value => value ? "editing" : null) .class(this.editing, value => value ? "editing" : null)
.class([this.editing, this.truncate], (editing, truncate) => !editing && truncate ? "truncate" : null) .class([this.editing, this.truncate], (editing, truncate) => !editing && truncate ? "truncate" : null)
.onFocus(e => this.onFocus()) .onFocus(e => this.onFocus(e))
.child( .child(
new div() new div()
.innerHTML(this.value) .innerHTML(this.value)
@ -95,10 +95,10 @@ class EditableLabel extends IgniteElement {
.attribute("contenteditable", this.editing) .attribute("contenteditable", this.editing)
.data("placeholder", this.placeholder) .data("placeholder", this.placeholder)
.ref(this.input) .ref(this.input)
.onBlur(() => this.onBlur()) .onBlur(e => this.onBlur(e))
.on("keydown", (e) => this.onKeyDown(e)), .on("keydown", (e) => this.onKeyDown(e)),
new button(`<i class="fas fa-check"></i>`) new button(`<i class="fas fa-check"></i>`)
.onClick(() => this.onBlur()) .onClick(e => this.onBlur(e))
.style("display", this.editing, true, (value) => { return value && this.saveButton ? null : "none" }) .style("display", this.editing, true, (value) => { return value && this.saveButton ? null : "none" })
); );
} }
@ -111,7 +111,7 @@ class EditableLabel extends IgniteElement {
} }
} }
onBlur() { onBlur(e) {
if (this.editing) { if (this.editing) {
if (this.stopEditingOnBlur) { if (this.stopEditingOnBlur) {
this.editing = false; this.editing = false;
@ -121,12 +121,12 @@ class EditableLabel extends IgniteElement {
this.value = this.input.innerHTML; this.value = this.input.innerHTML;
//Dispatch a native change event //Dispatch a native change event
this.dispatchEvent(new Event("change")); this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
} }
} }
} }
onFocus() { onFocus(e) {
this.editing = true; this.editing = true;
this.input.focus(); this.input.focus();
this.placeCaretAtEnd(this.input); this.placeCaretAtEnd(this.input);