trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

static: make ModalButton work with non-URL content

This commit is contained in:
Jens Langhammer 2020-11-22 21:35:52 +01:00
parent ed72595ae0
commit a10404f34b
3 changed files with 24 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
passbook/static/static/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

2
passbook/static/static/dist/main.js.map vendored
View File

File diff suppressed because one or more lines are too long

20
passbook/static/static/src/elements/ModalButton.ts
View File

@ -16,7 +16,7 @@ import { convertToSlug } from "../utils";
@customElement("pb-modal-button")
export class ModalButton extends LitElement {
@property()
href: string = "";
href?: string;
@property()
open: boolean = false;
@ -48,8 +48,7 @@ export class ModalButton extends LitElement {
});
}
setContent(content: string) {
this.querySelector("[slot=modal]")!.innerHTML = content;
updateHandlers() {
// Ensure links close the modal
this.querySelectorAll<HTMLAnchorElement>("[slot=modal] a").forEach(
(a) => {
@ -85,9 +84,7 @@ export class ModalButton extends LitElement {
e.preventDefault();
let formData = new FormData(form);
fetch(
form.action === window.location.toString()
? this.href
: form.action,
this.href ? this.href : form.action,
{
method: form.method,
body: formData,
@ -98,7 +95,8 @@ export class ModalButton extends LitElement {
})
.then((data) => {
if (data.indexOf("csrfmiddlewaretoken") !== -1) {
this.setContent(data);
this.querySelector("[slot=modal]")!.innerHTML = data;
this.updateHandlers();
} else {
this.open = false;
this.dispatchEvent(
@ -118,19 +116,25 @@ export class ModalButton extends LitElement {
}
onClick(e: MouseEvent) {
if (!this.href) {
this.updateHandlers();
this.open = true;
} else {
const request = new Request(this.href);
fetch(request, {
mode: "same-origin",
})
.then((r) => r.text())
.then((t) => {
this.setContent(t);
this.querySelector("[slot=modal]")!.innerHTML = t;
this.updateHandlers();
this.open = true;
})
.catch((e) => {
console.error(e);
});
}
}
renderModal() {
return html`<div class="pf-c-backdrop">