mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-09-20 03:10:11 +00:00
Harvey Tindall
a1612949bf
there is now a border between rows, on light mode a dashed line, on dark a dotted (looks almost solid). Row height has been changed slightly, too. Label and edit icon are back to being first after the username, and the edit button is on the left now. Contact dropdowns now overflow out of the table properly.
92 lines
3.5 KiB
TypeScript
92 lines
3.5 KiB
TypeScript
export interface HiddenInputConf {
|
|
container: HTMLElement;
|
|
onSet: () => void;
|
|
buttonOnLeft?: boolean;
|
|
customContainerHTML?: string;
|
|
input?: string;
|
|
clickAwayShouldSave?: boolean;
|
|
};
|
|
|
|
export class HiddenInputField {
|
|
public static editClass = "ri-edit-line";
|
|
public static saveClass = "ri-check-line";
|
|
|
|
private _c: HiddenInputConf;
|
|
private _input: HTMLInputElement;
|
|
private _content: HTMLElement
|
|
private _toggle: HTMLElement;
|
|
|
|
previous: string;
|
|
|
|
constructor(c: HiddenInputConf) {
|
|
this._c = c;
|
|
if (!(this._c.customContainerHTML)) {
|
|
this._c.customContainerHTML = `<span class="hidden-input-content"></span>`;
|
|
}
|
|
if (!(this._c.input)) {
|
|
this._c.input = `<input type="text" class="field ~neutral @low max-w-24 hidden-input-input">`;
|
|
}
|
|
this._c.container.innerHTML = `
|
|
<div class="flex flex-row gap-2 items-baseline">
|
|
${this._c.buttonOnLeft ? "" : this._c.input}
|
|
${this._c.buttonOnLeft ? "" : this._c.customContainerHTML}
|
|
<i class="hidden-input-toggle"></i>
|
|
${this._c.buttonOnLeft ? this._c.input : ""}
|
|
${this._c.buttonOnLeft ? this._c.customContainerHTML : ""}
|
|
</div>
|
|
`;
|
|
|
|
this._input = this._c.container.querySelector(".hidden-input-input") as HTMLInputElement;
|
|
this._input.classList.add("py-0.5", "px-1", "hidden");
|
|
this._toggle = this._c.container.querySelector(".hidden-input-toggle");
|
|
this._content = this._c.container.querySelector(".hidden-input-content");
|
|
|
|
this._toggle.onclick = () => {
|
|
this.editing = !this.editing;
|
|
};
|
|
|
|
this.setEditing(false, true);
|
|
}
|
|
|
|
// FIXME: not working
|
|
outerClickListener = ((event: Event) => {
|
|
if (!(event.target instanceof HTMLElement && (this._input.contains(event.target) || this._toggle.contains(event.target)))) {
|
|
this.toggle(!(this._c.clickAwayShouldSave));
|
|
}
|
|
}).bind(this);
|
|
|
|
get editing(): boolean { return this._toggle.classList.contains(HiddenInputField.saveClass); }
|
|
set editing(e: boolean) { this.setEditing(e); }
|
|
|
|
setEditing(e: boolean, noEvent: boolean = false, noSave: boolean = false) {
|
|
if (e) {
|
|
document.addEventListener("click", this.outerClickListener);
|
|
this.previous = this.value;
|
|
this._input.value = this.value;
|
|
this._toggle.classList.add(HiddenInputField.saveClass);
|
|
this._toggle.classList.remove(HiddenInputField.editClass);
|
|
this._input.classList.remove("hidden");
|
|
this._content.classList.add("hidden");
|
|
} else {
|
|
document.removeEventListener("click", this.outerClickListener);
|
|
this.value = noSave ? this.previous : this._input.value;
|
|
this._toggle.classList.add(HiddenInputField.editClass);
|
|
this._toggle.classList.remove(HiddenInputField.saveClass);
|
|
// done by set value()
|
|
// this._content.classList.remove("hidden");
|
|
this._input.classList.add("hidden");
|
|
if (this.value != this.previous && !noEvent && !noSave) this._c.onSet()
|
|
}
|
|
}
|
|
|
|
get value(): string { return this._content.textContent; };
|
|
set value(v: string) {
|
|
this._content.textContent = v;
|
|
this._input.value = v;
|
|
if (!v) this._content.classList.add("hidden");
|
|
else this._content.classList.remove("hidden");
|
|
}
|
|
|
|
toggle(noSave: boolean = false) { this.setEditing(!this.editing, false, noSave); }
|
|
}
|