some progess with native dialogs

e-valuation · Sep 3, 2023 · a79e7b3 · a79e7b3
1 parent 6edb76f
commit a79e7b3
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 52 deletions.
diff --git a/evap/evaluation/templates/confirmation_modal_template.html b/evap/evaluation/templates/confirmation_modal_template.html
@@ -3,29 +3,25 @@
 <template id="confirmation-modal-template">
     <link rel="stylesheet" href="{% static 'css/evap.css' %}" />
 
-    <div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
-        <div class="modal-dialog" role="document">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title">
-                        <slot name="title"></slot>
-                    </h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+    <dialog>
+        <form method="dialog">
+            <header>
+                <slot name="title"></slot>
+                <button class="btn-close"></button>
+            </header>
+            <section>
+                <div class="mb-4">
+                    <slot name="question"></slot>
                 </div>
-                <div class="modal-body">
-                    <div class="mb-4">
-                        <slot name="question"></slot>
-                    </div>
-                    <div class="modal-submit-group">
-                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
-                        <button type="button" class="btn ms-2" data-confirm="" data-bs-dismiss="modal">
-                            <slot name="action-text"></slot>
-                        </button>
-                    </div>
+                <div class="modal-submit-group">
+                    <button class="btn btn-light">{% trans 'Cancel' %}</button>
+                    <button class="btn ms-2" data-event-type="confirm">
+                        <slot name="action-text"></slot>
+                    </button>
                 </div>
-            </div>
-        </div>
-    </div>
+            </section>
+        </form>
+    </dialog>
 
     <slot name="show-button"></slot>
 </template>
diff --git a/evap/grades/templates/grades_course_view.html b/evap/grades/templates/grades_course_view.html
@@ -40,28 +40,28 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
                                                 {% endblocktrans %}
                                             </span>
                                             <script slot="handler-script">
-                                                const script = document.currentScript;
-                                                setTimeout(async () => {
-                                                    const { CSRF_HEADERS } = await import("{% static 'js/csrf-utils.js' %}");
-                                                    await customElements.whenDefined("confirmation-modal");
-
-                                                    const modal = script.closest("confirmation-modal");
-                                                    modal.confirmButton.addEventListener("click", async () => {
-                                                        const response = await fetch("{% url 'grades:delete_grades' %}", {
-                                                            body: new URLSearchParams({grade_document_id: "{{ grade_document.id }}"}),
-                                                            headers: CSRF_HEADERS,
-                                                            method: "POST",
-                                                        });
-
-                                                        if (response.ok) {
-                                                            const row = modal.closest("tr");
-                                                            // TODO: animate
-                                                            row.remove();
-                                                        } else {
-                                                            window.alert("{% trans 'The server is not responding.' %}");
-                                                        }
-                                                    });
-                                                });
+                                                // const script = document.currentScript;
+                                                // setTimeout(async () => {
+                                                    // const { CSRF_HEADERS } = await import("{% static 'js/csrf-utils.js' %}");
+                                                    // await customElements.whenDefined("confirmation-modal");
+                                                    //
+                                                    // const modal = script.closest("confirmation-modal");
+                                                    // modal.confirmButton.addEventListener("click", async () => {
+                                                    //     const response = await fetch("{% url 'grades:delete_grades' %}", {
+                                                    //         body: new URLSearchParams({grade_document_id: "{{ grade_document.id }}"}),
+                                                    //         headers: CSRF_HEADERS,
+                                                    //         method: "POST",
+                                                    //     });
+                                                    //
+                                                    //     if (response.ok) {
+                                                    //         const row = modal.closest("tr");
+                                                    //         // TODO: animate
+                                                    //         row.remove();
+                                                    //     } else {
+                                                    //         window.alert("{% trans 'The server is not responding.' %}");
+                                                    //     }
+                                                    // });
+                                                // });
                                             </script>
 
                                             <button slot="show-button" type="button" {{ disable_if_archived }} class="btn btn-sm btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Delete' %}">

diff --git a/evap/static/scss/components/_confirmation-modal.scss b/evap/static/scss/components/_confirmation-modal.scss
@@ -1,3 +1,3 @@
-confirmation-modal > :not([slot="show-button"]) {
-  visibility: hidden;
+confirmation-modal:not(.loaded) > :not([slot="show-button"]) {
+  display: none;
 }
diff --git a/evap/static/ts/src/confirmation-modal.ts b/evap/static/ts/src/confirmation-modal.ts
@@ -1,10 +1,8 @@
 import { selectOrError } from "./utils.js";
 
-declare const bootstrap: typeof import("bootstrap");
-
 export class ConfirmationModal extends HTMLElement {
-    bsModal: bootstrap.Modal;
-    confirmButton: HTMLElement;
+    dialog: HTMLDialogElement;
+    form: HTMLFormElement;
 
     constructor() {
         super();
@@ -13,9 +11,18 @@ export class ConfirmationModal extends HTMLElement {
         const shadowRoot = this.attachShadow({ mode: "open" });
         shadowRoot.appendChild(template.cloneNode(true));
 
-        this.bsModal = new bootstrap.Modal(selectOrError(".modal", shadowRoot));
-        this.confirmButton = selectOrError("[data-confirm]", shadowRoot);
+        this.dialog = selectOrError("dialog", shadowRoot);
+        this.form = selectOrError("form[method=dialog]", this.dialog);
+
+        selectOrError("[slot=show-button]", this).addEventListener("click", () => this.dialog.showModal());
+        this.form.addEventListener("submit", event => {
+            if (event.submitter) {
+                if (event.submitter.dataset.eventType === "confirm") {
+                    console.log("CONFIRMING");
+                }
+            }
+        });
 
-        selectOrError("[slot=show-button]", this).addEventListener("click", () => this.bsModal.show());
+        this.classList.add("loaded");
     }
 }