static: rewrite modal to use shadowroot and import css

passbook/admin/templates/administration/application/list.html

@@ -56,8 +56,18 @@
                         </span>
                     </td>
                     <td>
-                        <a class="pf-c-button pf-m-secondary" href="{% url 'passbook_admin:application-update' pk=application.pk %}?back={{ request.get_full_path }}">{% trans 'Edit' %}</a>
+                        <pb-modal-button href="{% url 'passbook_admin:application-update' pk=application.pk %}?back={{ request.get_full_path }}">
-                        <a class="pf-c-button pf-m-danger" href="{% url 'passbook_admin:application-delete' pk=application.pk %}?back={{ request.get_full_path }}">{% trans 'Delete' %}</a>
+                            <button slot="trigger" class="pf-c-button pf-m-secondary">
+                                {% trans 'Edit' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
+                        <pb-modal-button href="{% url 'passbook_admin:application-delete' pk=application.pk %}?back={{ request.get_full_path }}">
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
+                                {% trans 'Delete' %}
+                            </button>
+                            <div slot="modal"></div>
+                        </pb-modal-button>
                     </td>
                 </tr>
                 {% endfor %}

passbook/admin/templates/generic/form.html

@@ -30,26 +30,20 @@
         <div class="pf-l-stack__item">
             <div class="pf-c-card">
                 <div class="pf-c-card__body">
-                    <form action="" method="post" class="pf-c-form pf-m-horizontal" enctype="multipart/form-data">
+                    <form id="main-form" action="" method="post" class="pf-c-form pf-m-horizontal" enctype="multipart/form-data">
                         {% include 'partials/form_horizontal.html' with form=form %}
                         {% block beneath_form %}
                         {% endblock %}
-                        <div class="pf-c-form__group pf-m-action">
-                            <div class="pf-c-form__group-control">
-                                <div class="pf-c-form__horizontal-group">
-                                    <div class="pf-c-form__actions">
-                                        <input class="pf-c-button pf-m-primary" type="submit" value="{% block action %}{% endblock %}" />
-                                        <a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
                     </form>
                 </div>
             </div>
         </div>
     </div>
 </section>
+<footer class="pf-c-modal-box__footer">
+    <input class="pf-c-button pf-m-primary" type="submit" form="main-form" value="{% block action %}{% endblock %}" />
+    <a class="pf-c-button pf-m-secondary" href="{% back %}">{% trans "Cancel" %}</a>
+</footer>
 {% endblock %}
 
 {% block scripts %}

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==",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg=="
-      "dev": true
     },
     "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",

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": {

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(),

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() {
+    @property()
-        super();
+    open: boolean = false;
-        this.addEventListener('click', e => this.callAction(e));
+
+    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<HTMLAnchorElement>("[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<HTMLInputElement>("[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`<div class="pf-c-backdrop">
             <div class="pf-l-bullseye">
                 <div class="pf-c-modal-box pf-m-md" role="dialog" aria-modal="true" aria-labelledby="modal-md-title" aria-describedby="modal-md-description">
-                <button class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
+                    <button class="pf-c-button pf-m-plain" type="button" aria-label="Close dialog">
-                    <i class="fas fa-times" aria-hidden="true"></i>
+                        <i class="fas fa-times" aria-hidden="true"></i>
-                </button>
+                    </button>
-
+                    <slot name="modal">
-                <header class="pf-c-modal-box__header">
+                    </slot>
-                    <h1 class="pf-c-modal-box__title" id="modal-md-title">This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
-                </header>
-                <div class="pf-c-modal-box__body">
-                    <p id="modal-md-description">The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-c-modal-box__body"</p>
-                    <p>Form here</p>
-                </div>
-                <footer class="pf-c-modal-box__footer">
-                    <button class="pf-c-button pf-m-primary" type="button">Save</button>
-                    <button class="pf-c-button pf-m-link" type="button">Cancel</button>
-                </footer>
                 </div>
             </div>
         </div>`;
     }
 
-    callAction(e: MouseEvent) {
+    render() {
-        e.preventDefault();
+        return html`
-        const request = new Request(
+            <slot name="trigger" @click=${(e: any) => this.onClick(e)}></slot>
-            this.href,
+            ${this.open ? this.renderModal() : ""}`;
-        );
-        fetch(request, {
-            method: "POST",
-            mode: 'same-origin',
-        }).then(r => {
-            // this.
-        }).catch(() => {
-            // this.setDone(ERROR_CLASS);
-        });
     }
 
 }