web/elements: make ak-spinner-button work with ModalForm

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-03 23:09:52 +02:00
parent 1b63e461cc
commit 1f781eb78a
1 changed files with 8 additions and 18 deletions

View File

@ -12,10 +12,7 @@ export class SpinnerButton extends LitElement {
isRunning = false;
@property()
form?: string;
@property()
callAction: () => void = this.defaultCallAction;
callAction: () => void = () => {};
static get styles(): CSSResult[] {
return [
@ -55,25 +52,18 @@ export class SpinnerButton extends LitElement {
}
defaultCallAction(): void {
if (this.isRunning === true) {
return;
}
if (this.form) {
// Since the form= attribute is only used within a modal button,
// we can assume the form is always two levels up
this.parentElement?.parentElement?.querySelector<HTMLFormElement>(`#${this.form}`)?.dispatchEvent(new Event("submit", {
bubbles: true,
cancelable: true,
}));
}
this.setLoading();
}
render(): TemplateResult {
return html`<button
class="pf-c-button pf-m-progress ${this.classList.toString()}"
@click=${() => this.callAction()}
>
@click=${() => {
if (this.isRunning === true) {
return;
}
this.setLoading();
this.callAction();
}}>
${this.isRunning
? html` <span class="pf-c-button__progress">
<ak-spinner size=${SpinnerSize.Medium}></ak-spinner>