From e49ef5009b1d47d3462005f7e495197e8ef84936 Mon Sep 17 00:00:00 2001 From: Mira Weller Date: Wed, 30 Sep 2026 21:17:52 +0200 Subject: [PATCH] Dialog JS and CSS --- .../static/pretixbase/scss/_dialogs.scss | 2 + src/pretix/static/pretixcontrol/js/ui/main.js | 89 +++++++++++++++++++ .../static/pretixcontrol/scss/main.scss | 4 + 3 files changed, 95 insertions(+) diff --git a/src/pretix/static/pretixbase/scss/_dialogs.scss b/src/pretix/static/pretixbase/scss/_dialogs.scss index 1b737812fc..6589e86453 100644 --- a/src/pretix/static/pretixbase/scss/_dialogs.scss +++ b/src/pretix/static/pretixbase/scss/_dialogs.scss @@ -87,6 +87,8 @@ dialog::backdrop { 100% { transform: skewX(0deg); } } +.modal-card.no-padding, .modal-card.no-padding .modal-card-content { padding: 0; } +.modal-card.no-scroll { overflow: hidden; } /* Legacy dialogs (still used for #ajaxerr and #popupmodal) */ diff --git a/src/pretix/static/pretixcontrol/js/ui/main.js b/src/pretix/static/pretixcontrol/js/ui/main.js index 3d15c6cb93..b8f31d7283 100644 --- a/src/pretix/static/pretixcontrol/js/ui/main.js +++ b/src/pretix/static/pretixcontrol/js/ui/main.js @@ -72,6 +72,10 @@ $(document).ajaxError(function (event, jqXHR, settings, thrownError) { }) let form_handlers = function (el) { + // Prevent running multiple times on the same elements + if (el.is('[data-formset-form-handlers-created]')) return + el.find('[data-formset-form]').attr('data-formset-form-handlers-created', 'true') + el.trigger('rescan.areYouSure') el.find('[data-formset]').formset( { @@ -736,6 +740,27 @@ let form_handlers = function (el) { questions_toggle_dependent() questions_init_photos(el) + el.find("[data-iframe-dialog]").on("click", function(e) { + let url; + if (this.tagName === "A" && !this.hasAttribute("data-iframe-dialog-url")) { + url = this.getAttribute("href") + url += (url.includes('?') ? '&' : '?') + 'notify_parent=true' + } else { + url = this.getAttribute("data-iframe-dialog-url") + } + show_iframe_dialog(url, (data) => { + if (this.getAttribute("data-iframe-dialog-target")) { + var $target = findDependency(this.getAttribute("data-iframe-dialog-target"), this) + if ($target.is('select')) { + $target.append(new Option(data.object_str, data.object, false, true)).trigger('change') + } + } + }) + e.preventDefault() + }) +} + +function setup_placeholders() { let lastFocusedInput $(document).on('focusin', 'input, textarea', function (e) { lastFocusedInput = e.target @@ -1079,6 +1104,7 @@ $(function () { setup_basics($('body')) form_handlers($('body')) + setup_placeholders() $(document).trigger('pretix:bind-forms') $('#ajaxerr').on('click', '.ajaxerr-close', ajaxErrDialog.hide) @@ -1121,3 +1147,66 @@ $(function () { return $(this).find('button:not([type=button]), input[type=submit]').length > 0 }).areYouSure({ message: gettext('You have unsaved changes!') }) }) +function show_iframe_dialog(url, callback) { + function messageEvent(e) { + if (e.origin === location.origin && e.data.type === 'pretix:dialog-loaded') { + $dlg.find("iframe").attr("height", Math.min(window.innerHeight - 120, e.data.contentHeight|0)).css("visibility", "visible") + $dlg.find("center").remove() + } + if (e.origin === location.origin && e.data.type === 'pretix:notify-parent') { + $dlg[0].close() + if (!callback(e.data.data)) { + if (e.data.data.messages?.length) { + alert(e.data.data.messages.map(m => m.message).join('\n\n')) + } + } + } + } + var $dlg = $('
') + .css('max-width', '60em') + $dlg.find("iframe").attr("src", url).css("visibility", "hidden").css("border", "0") + window.addEventListener('message', messageEvent) + $dlg.appendTo("body") + $dlg.on('close', function() { + window.removeEventListener('message', messageEvent) + $dlg.remove() + }) + $dlg[0].showModal() +} +function setup_dialog_frame_events() { + var dom_ready = false, parent_responded = false + function notify_dialog_loaded() { + console.log('ready', window.innerWidth, window.innerHeight, $('#page-wrapper > .container-fluid').outerHeight() + 20) + window.parent.postMessage({ + type: 'pretix:dialog-loaded', + contentHeight: $('#page-wrapper > .container-fluid').outerHeight() + 20, + title: document.title, + }, location.origin) + } + window.addEventListener('message', function(e) { + if (e.source === window) return // don't handle messages from ourselves + if (e.origin !== location.origin) return // only handle messages from same origin + + if (e.data.type === 'pretix:dialog-handshake') { + // we are inside an iframe in a dialog + if (!parent_responded) { + window.document.documentElement.classList.add('in-iframe') + if (dom_ready) setTimeout(notify_dialog_loaded, 1) + parent_responded = true + } + } else if (e.data.type === 'pretix:dialog-loading') { + // we are parent to a dialog + e.source.postMessage({ type: 'pretix:dialog-handshake' }) + } + }) + $(function () { + if (parent_responded) setTimeout(notify_dialog_loaded, 1) + dom_ready = true + }) + try { + window.parent.postMessage({ + type: 'pretix:dialog-loading', + }, location.origin) + } catch {} +} +setup_dialog_frame_events() diff --git a/src/pretix/static/pretixcontrol/scss/main.scss b/src/pretix/static/pretixcontrol/scss/main.scss index c4515bb245..cecadb2fb9 100644 --- a/src/pretix/static/pretixcontrol/scss/main.scss +++ b/src/pretix/static/pretixcontrol/scss/main.scss @@ -898,6 +898,10 @@ tbody th { height: auto; } +html.in-iframe body { background: white } +.in-iframe #wrapper > nav.navbar, .in-iframe #page-wrapper > div > footer { display: none; } +.in-iframe #page-wrapper { padding: 0 15px; min-height: 568px; border-left: 0; margin: 0; } + @import "../../pretixbase/scss/_rtl.scss"; @import "../../bootstrap/scss/_rtl.scss"; @import "_rtl.scss";