Dialog JS and CSS

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) */

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 = $('<dialog class="modal-card no-padding no-scroll" closedby="any"><center><i class="fa fa-cog big-rotating-icon"></i></center><iframe height="100" width="100%"></iframe></div>')
+		.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()

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";