terbshaeusser/website
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Activity

fix button disabled state

Browse Source 
Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
This commit is contained in:
Tobias Erbshäußer
2026-05-24 09:22:57 +02:00
parent 07b35bfc0b
commit c020592c8d
1 changed files with 21 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/button.ts
+21 -11
View File
@@ -4,6 +4,7 @@ export class TesoftButton extends TesoftComponent {
static observedAttributes = ["disabled", "href", "selected"]; static observedAttributes = ["disabled", "href", "selected"];
private readonly rootDiv: HTMLDivElement; private readonly rootDiv: HTMLDivElement;
private linkOrButton: HTMLElement;
constructor() { constructor() {
super(); super();
@@ -15,33 +16,42 @@ export class TesoftButton extends TesoftComponent {
shadowRoot.appendChild(templateContent.cloneNode(true)); shadowRoot.appendChild(templateContent.cloneNode(true));
this.rootDiv = shadowRoot.querySelector<HTMLDivElement>("div")!; this.rootDiv = shadowRoot.querySelector<HTMLDivElement>("div")!;
this.linkOrButton = shadowRoot.querySelector<HTMLButtonElement>("button")!;
} }
// noinspection JSUnusedGlobalSymbols // noinspection JSUnusedGlobalSymbols
attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) { attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
if (name === "disabled") { if (name === "disabled") {
if (newValue === null) { if (newValue === null) {
this.rootDiv.onclick = null; this.linkOrButton.removeAttribute("disabled");
} else { } else {
this.rootDiv.onclick = (e) => { this.linkOrButton.setAttribute("disabled", "");
e.stopPropagation();
};
} }
} else if (name === "href") { } else if (name === "href") {
this.rootDiv.innerHTML = ""; this.rootDiv.innerHTML = "";
let linkOrButton: HTMLElement;
if (newValue) { if (newValue) {
linkOrButton = document.createElement("a"); this.linkOrButton = document.createElement("a");
(linkOrButton as HTMLAnchorElement).href = newValue; (this.linkOrButton as HTMLAnchorElement).href = newValue;
} else { } else {
linkOrButton = document.createElement("button"); this.linkOrButton = document.createElement("button");
} }
linkOrButton.part = "children"; this.linkOrButton.part = "children";
this.rootDiv.appendChild(linkOrButton); if (this.hasAttribute("disabled")) {
this.linkOrButton.setAttribute("disabled", "");
}
this.rootDiv.appendChild(this.linkOrButton);
const slot = document.createElement("slot"); const slot = document.createElement("slot");
linkOrButton.appendChild(slot); this.linkOrButton.appendChild(slot);
}
}
set disabled(value: string | null) {
if (value === null) {
this.removeAttribute("disabled");
} else {
this.setAttribute("disabled", "");
} }
} }