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.editing, value => value ? "editing" : null)
.class([this.editing, this.truncate], (editing, truncate) => !editing && truncate ? "truncate" : null)
.onFocus(e => this.onFocus())
.onFocus(e => this.onFocus(e))
.child(
new div()
.innerHTML(this.value)
@ -95,10 +95,10 @@ class EditableLabel extends IgniteElement {
.attribute("contenteditable", this.editing)
.data("placeholder", this.placeholder)
.ref(this.input)
.onBlur(() => this.onBlur())
.onBlur(e => this.onBlur(e))
.on("keydown", (e) => this.onKeyDown(e)),
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" })
);
}
@ -111,7 +111,7 @@ class EditableLabel extends IgniteElement {
}
}
onBlur() {
onBlur(e) {
if (this.editing) {
if (this.stopEditingOnBlur) {
this.editing = false;
@ -121,12 +121,12 @@ class EditableLabel extends IgniteElement {
this.value = this.input.innerHTML;
//Dispatch a native change event
this.dispatchEvent(new Event("change"));
this.dispatchEvent(new CustomEvent("change", { bubbles: true }));
}
}
}
onFocus() {
onFocus(e) {
this.editing = true;
this.input.focus();
this.placeCaretAtEnd(this.input);