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

Improved editable label, now uses innerHTML instead of raw HTML to solve content editing glitches. Now emulates the change event directly on the value property and more.

Browse Source
This commit is contained in:
Matt Mo 2020-09-20 22:30:57 -07:00
parent 190758180a
commit e019eb9fdf
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
editable-label.js
View File

@ -1,5 +1,6 @@
import { IgniteElement } from "../ignite-html/ignite-element.js"; import { IgniteElement } from "../ignite-html/ignite-element.js";
import { IgniteTemplate, button, ul, slot, span, div } from "../ignite-html/ignite-template.js"; import { IgniteTemplate, button, ul, slot, span, div } from "../ignite-html/ignite-template.js";
import { IgniteProperty } from "../ignite-html/ignite-html.js";
class EditableLabel extends IgniteElement { class EditableLabel extends IgniteElement {
constructor() { constructor() {
@ -14,7 +15,7 @@ class EditableLabel extends IgniteElement {
align-items: center; align-items: center;
} }
mt-editable-label>div:focus { mt-editable-label>div.focus {
border: solid 0.09em #90A4AE; border: solid 0.09em #90A4AE;
padding: 0.2em; padding: 0.2em;
border-radius: 0.3em; border-radius: 0.3em;
@ -49,7 +50,10 @@ class EditableLabel extends IgniteElement {
get properties() { get properties() {
return { return {
editing: false, editing: false,
value: "test", value: new IgniteProperty(null, () => {
//Emulate a change event to support value reflection.
this.dispatchEvent(new Event("change"));
}),
editOnClick: true, editOnClick: true,
multiLine: false, multiLine: false,
saveButton: true, saveButton: true,
@ -60,13 +64,16 @@ class EditableLabel extends IgniteElement {
render() { render() {
return this.template return this.template
.child( .child(
new div(this.value) new div()
.innerHTML(this.value)
.class(this.editing, (value) => { return value ? "focus" : null; })
.attribute("contenteditable", this.editing) .attribute("contenteditable", this.editing)
.ref(this.input) .ref(this.input)
.onClick(() => this.onClick()) .onClick(() => this.onClick())
.onBlur(() => this.onBlur()) .onBlur(() => this.onBlur())
.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())
.style("display", this.editing, true, (value) => { return value && this.saveButton ? null : "none" }) .style("display", this.editing, true, (value) => { return value && this.saveButton ? null : "none" })
); );
} }