From 59e7d9b81e051d1d79c7d649eb2b4ec30bd7ff75 Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sat, 21 Nov 2020 11:28:00 +0100 Subject: [PATCH] static: rewrite modal to use shadowroot and import css --- .../administration/application/list.html | 14 ++- passbook/admin/templates/generic/form.html | 16 ++-- passbook/static/static/package-lock.json | 27 +++++- passbook/static/static/package.json | 1 + passbook/static/static/rollup.config.js | 2 + passbook/static/static/src/ModalButton.ts | 89 ++++++++++++------- 6 files changed, 101 insertions(+), 48 deletions(-) diff --git a/passbook/admin/templates/administration/application/list.html b/passbook/admin/templates/administration/application/list.html index 89718d12b..e361d9ea1 100644 --- a/passbook/admin/templates/administration/application/list.html +++ b/passbook/admin/templates/administration/application/list.html @@ -56,8 +56,18 @@ - {% trans 'Edit' %} - {% trans 'Delete' %} + + +
+ + + +
+ {% endfor %} diff --git a/passbook/admin/templates/generic/form.html b/passbook/admin/templates/generic/form.html index f158f9ac7..f94f7f816 100644 --- a/passbook/admin/templates/generic/form.html +++ b/passbook/admin/templates/generic/form.html @@ -30,26 +30,20 @@
-
+ {% include 'partials/form_horizontal.html' with form=form %} {% block beneath_form %} {% endblock %} -
-
-
-
- - {% trans "Cancel" %} -
-
-
-
+ {% endblock %} {% block scripts %} diff --git a/passbook/static/static/package-lock.json b/passbook/static/static/package-lock.json index f282deb1a..4df822a35 100644 --- a/passbook/static/static/package-lock.json +++ b/passbook/static/static/package-lock.json @@ -432,8 +432,7 @@ "picomatch": { "version": "2.2.2", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", - "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", - "dev": true + "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==" }, "randombytes": { "version": "2.1.0", @@ -480,6 +479,30 @@ "rollup-pluginutils": "^2.8.1" } }, + "rollup-plugin-cssimport": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/rollup-plugin-cssimport/-/rollup-plugin-cssimport-1.0.2.tgz", + "integrity": "sha512-HT24rkJN1jUOiVzyAxYkTkh1g+dIMMVTC9qP7KeZolGQh8BDA0nnsbeND9LjNNOmjcZMIlLIqyrtDRjkVeHHFA==", + "requires": { + "@rollup/pluginutils": "^4.0.0" + }, + "dependencies": { + "@rollup/pluginutils": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.1.0.tgz", + "integrity": "sha512-TrBhfJkFxA+ER+ew2U2/fHbebhLT/l/2pRk0hfj9KusXUuRXd2v0R58AfaZK9VXDQ4TogOSEmICVrQAA3zFnHQ==", + "requires": { + "estree-walker": "^2.0.1", + "picomatch": "^2.2.2" + } + }, + "estree-walker": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.1.tgz", + "integrity": "sha512-tF0hv+Yi2Ot1cwj9eYHtxC0jB9bmjacjQs6ZBTj82H8JwUywFuc+7E83NWfNMwHXZc11mjfFcVXPe9gEP4B8dg==" + } + } + }, "rollup-plugin-minify-html-literals": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/rollup-plugin-minify-html-literals/-/rollup-plugin-minify-html-literals-1.2.5.tgz", diff --git a/passbook/static/static/package.json b/passbook/static/static/package.json index b9cfd9d2b..67ae3d0c8 100644 --- a/passbook/static/static/package.json +++ b/passbook/static/static/package.json @@ -13,6 +13,7 @@ "lit-element": "^2.4.0", "lit-html": "^1.3.0", "rollup": "^2.33.2", + "rollup-plugin-cssimport": "^1.0.2", "tslib": "^2.0.3" }, "devDependencies": { diff --git a/passbook/static/static/rollup.config.js b/passbook/static/static/rollup.config.js index 1c47516dc..8d728daa0 100644 --- a/passbook/static/static/rollup.config.js +++ b/passbook/static/static/rollup.config.js @@ -4,6 +4,7 @@ import minifyHTML from 'rollup-plugin-minify-html-literals'; import { terser } from 'rollup-plugin-terser'; import sourcemaps from 'rollup-plugin-sourcemaps'; import typescript from '@rollup/plugin-typescript'; +import cssimport from "rollup-plugin-cssimport"; export default [{ input: './src/main.ts', @@ -15,6 +16,7 @@ export default [{ } ], plugins: [ + cssimport(), typescript(), resolve({browser: true}), commonjs(), diff --git a/passbook/static/static/src/ModalButton.ts b/passbook/static/static/src/ModalButton.ts index 014791204..eb485379e 100644 --- a/passbook/static/static/src/ModalButton.ts +++ b/passbook/static/static/src/ModalButton.ts @@ -1,4 +1,10 @@ -import { customElement, html, LitElement, property } from "lit-element"; +import { customElement, html, LitElement, property, TemplateResult } from "lit-element"; +// @ts-ignore +import ModalBoxStyle from "@patternfly/patternfly/components/ModalBox/modal-box.css"; +// @ts-ignore +import BullseyeStyle from "@patternfly/patternfly/layouts/Bullseye/bullseye.css"; +// @ts-ignore +import BackdropStyle from "@patternfly/patternfly/components/Backdrop/backdrop.css"; const PRIMARY_CLASS = "pf-m-primary"; const SUCCESS_CLASS = "pf-m-success"; @@ -11,48 +17,65 @@ export class ModalButton extends LitElement { @property() href: string = ""; - constructor() { - super(); - this.addEventListener('click', e => this.callAction(e)); + @property() + open: boolean = false; + + static get styles() { + return [ModalBoxStyle, BullseyeStyle, BackdropStyle] } - getModal() { + onClick(e: MouseEvent) { + const request = new Request( + this.href, + ); + fetch(request, { + mode: 'same-origin', + }).then(r => r.text()).then((t) => { + this.querySelector("[slot=modal]")!.innerHTML = t; + // Ensure links close the modal + this.querySelectorAll("[slot=modal] a").forEach(a => { + // Make click on a close the modal + a.addEventListener("click", e => { + this.open = false; + }); + }); + // Ensure input type submit submits the form without reloading the page + this.querySelectorAll("[slot=modal] input[type=submit]").forEach(i => { + i.form?.addEventListener("submit", e => { + e.preventDefault(); + return false; + }); + i.addEventListener("click", e => { + console.log("on submit"); + e.preventDefault(); + i.form?.submit(); + this.open = false; + }); + }); + this.open = true; + }).catch(e => { + console.error(e); + }); + } + + renderModal() { return html`
`; } - callAction(e: MouseEvent) { - e.preventDefault(); - const request = new Request( - this.href, - ); - fetch(request, { - method: "POST", - mode: 'same-origin', - }).then(r => { - // this. - }).catch(() => { - // this.setDone(ERROR_CLASS); - }); + render() { + return html` + this.onClick(e)}> + ${this.open ? this.renderModal() : ""}`; } }