Skip to content

Commit a79e7b3

Browse files
niklasmohrinniklasmohrin
committed
some progess with native dialogs
1 parent 6edb76f commit a79e7b3

File tree

4 files changed

+55
-52
lines changed

4 files changed

+55
-52
lines changed

‎evap/evaluation/templates/confirmation_modal_template.html

+17-21
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,25 @@
33
<template id="confirmation-modal-template">
44
<link rel="stylesheet" href="{% static 'css/evap.css' %}" />
55

6-
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
7-
<div class="modal-dialog" role="document">
8-
<div class="modal-content">
9-
<div class="modal-header">
10-
<h5 class="modal-title">
11-
<slot name="title"></slot>
12-
</h5>
13-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
6+
<dialog>
7+
<form method="dialog">
8+
<header>
9+
<slot name="title"></slot>
10+
<button class="btn-close"></button>
11+
</header>
12+
<section>
13+
<div class="mb-4">
14+
<slot name="question"></slot>
1415
</div>
15-
<div class="modal-body">
16-
<div class="mb-4">
17-
<slot name="question"></slot>
18-
</div>
19-
<div class="modal-submit-group">
20-
<button type="button" class="btn btn-light" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
21-
<button type="button" class="btn ms-2" data-confirm="" data-bs-dismiss="modal">
22-
<slot name="action-text"></slot>
23-
</button>
24-
</div>
16+
<div class="modal-submit-group">
17+
<button class="btn btn-light">{% trans 'Cancel' %}</button>
18+
<button class="btn ms-2" data-event-type="confirm">
19+
<slot name="action-text"></slot>
20+
</button>
2521
</div>
26-
</div>
27-
</div>
28-
</div>
22+
</section>
23+
</form>
24+
</dialog>
2925

3026
<slot name="show-button"></slot>
3127
</template>

‎evap/grades/templates/grades_course_view.html

+22-22
Original file line numberDiff line numberDiff line change
@@ -40,28 +40,28 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
4040
{% endblocktrans %}
4141
</span>
4242
<script slot="handler-script">
43-
const script = document.currentScript;
44-
setTimeout(async () => {
45-
const { CSRF_HEADERS } = await import("{% static 'js/csrf-utils.js' %}");
46-
await customElements.whenDefined("confirmation-modal");
47-
48-
const modal = script.closest("confirmation-modal");
49-
modal.confirmButton.addEventListener("click", async () => {
50-
const response = await fetch("{% url 'grades:delete_grades' %}", {
51-
body: new URLSearchParams({grade_document_id: "{{ grade_document.id }}"}),
52-
headers: CSRF_HEADERS,
53-
method: "POST",
54-
});
55-
56-
if (response.ok) {
57-
const row = modal.closest("tr");
58-
// TODO: animate
59-
row.remove();
60-
} else {
61-
window.alert("{% trans 'The server is not responding.' %}");
62-
}
63-
});
64-
});
43+
// const script = document.currentScript;
44+
// setTimeout(async () => {
45+
// const { CSRF_HEADERS } = await import("{% static 'js/csrf-utils.js' %}");
46+
// await customElements.whenDefined("confirmation-modal");
47+
//
48+
// const modal = script.closest("confirmation-modal");
49+
// modal.confirmButton.addEventListener("click", async () => {
50+
// const response = await fetch("{% url 'grades:delete_grades' %}", {
51+
// body: new URLSearchParams({grade_document_id: "{{ grade_document.id }}"}),
52+
// headers: CSRF_HEADERS,
53+
// method: "POST",
54+
// });
55+
//
56+
// if (response.ok) {
57+
// const row = modal.closest("tr");
58+
// // TODO: animate
59+
// row.remove();
60+
// } else {
61+
// window.alert("{% trans 'The server is not responding.' %}");
62+
// }
63+
// });
64+
// });
6565
</script>
6666

6767
<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' %}">

‎evap/static/scss/components/_confirmation-modal.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
confirmation-modal > :not([slot="show-button"]) {
2-
visibility: hidden;
1+
confirmation-modal:not(.loaded) > :not([slot="show-button"]) {
2+
display: none;
33
}

‎evap/static/ts/src/confirmation-modal.ts

+14-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { selectOrError } from "./utils.js";
22

3-
declare const bootstrap: typeof import("bootstrap");
4-
53
export class ConfirmationModal extends HTMLElement {
6-
bsModal: bootstrap.Modal;
7-
confirmButton: HTMLElement;
4+
dialog: HTMLDialogElement;
5+
form: HTMLFormElement;
86

97
constructor() {
108
super();
@@ -13,9 +11,18 @@ export class ConfirmationModal extends HTMLElement {
1311
const shadowRoot = this.attachShadow({ mode: "open" });
1412
shadowRoot.appendChild(template.cloneNode(true));
1513

16-
this.bsModal = new bootstrap.Modal(selectOrError(".modal", shadowRoot));
17-
this.confirmButton = selectOrError("[data-confirm]", shadowRoot);
14+
this.dialog = selectOrError("dialog", shadowRoot);
15+
this.form = selectOrError("form[method=dialog]", this.dialog);
16+
17+
selectOrError("[slot=show-button]", this).addEventListener("click", () => this.dialog.showModal());
18+
this.form.addEventListener("submit", event => {
19+
if (event.submitter) {
20+
if (event.submitter.dataset.eventType === "confirm") {
21+
console.log("CONFIRMING");
22+
}
23+
}
24+
});
1825

19-
selectOrError("[slot=show-button]", this).addEventListener("click", () => this.bsModal.show());
26+
this.classList.add("loaded");
2027
}
2128
}

0 commit comments

Comments
 (0)