mirror of
https://github.com/MarijnDoeve/TijdVoorDeTest.git
synced 2026-07-08 00:20:15 +02:00
feat: replace fetch-based modal forms with Turbo Frames (#181)
Enable @hotwired/turbo with Drive explicitly disabled, then migrate the bo--modal-form Stimulus controller (custom fetch + X-Modal-Request pattern) to a thin bo--modal controller that lets Turbo handle HTTP and DOM swap. Adds frame templates for quiz questions and bank questions; controllers now detect Turbo-Frame header instead of X-Modal-Request.
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
import {Controller} from '@hotwired/stimulus';
|
||||
import {Modal} from 'bootstrap';
|
||||
|
||||
export default class extends Controller {
|
||||
static targets = ['modal', 'frame'];
|
||||
|
||||
open(event) {
|
||||
event.preventDefault();
|
||||
const {src, modalTitle} = event.currentTarget.dataset;
|
||||
if (modalTitle) {
|
||||
const titleEl = this.modalTarget.querySelector('.modal-title');
|
||||
if (titleEl) titleEl.textContent = modalTitle;
|
||||
}
|
||||
this._resetDirty();
|
||||
this.frameTarget.innerHTML = '<div class="modal-body text-center py-4"><div class="spinner-border" role="status"></div></div>';
|
||||
this.frameTarget.removeAttribute('src');
|
||||
this.frameTarget.setAttribute('src', src);
|
||||
Modal.getOrCreateInstance(this.modalTarget).show();
|
||||
}
|
||||
|
||||
frameLoad() {
|
||||
this._bindDirty();
|
||||
}
|
||||
|
||||
frameSubmitEnd(event) {
|
||||
if (event.detail.success) {
|
||||
Modal.getOrCreateInstance(this.modalTarget).hide();
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
_bindDirty() {
|
||||
const modal = Modal.getOrCreateInstance(this.modalTarget);
|
||||
const markDirty = () => {
|
||||
modal._config.backdrop = 'static';
|
||||
modal._config.keyboard = false;
|
||||
};
|
||||
this.frameTarget.addEventListener('input', markDirty, {once: true});
|
||||
this.frameTarget.addEventListener('change', markDirty, {once: true});
|
||||
this.modalTarget.addEventListener('hidden.bs.modal', () => this._resetDirty(), {once: true});
|
||||
}
|
||||
|
||||
_resetDirty() {
|
||||
const modal = Modal.getOrCreateInstance(this.modalTarget);
|
||||
modal._config.backdrop = true;
|
||||
modal._config.keyboard = true;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user