From c880e427c5eaa708d1a104bb94bb6fc28245368f Mon Sep 17 00:00:00 2001
From: Mira Weller <weller@rami.io>
Date: Fri, 16 May 2025 20:53:00 +0200
Subject: [PATCH] add dialog js

---
 .../control/templates/pretixcontrol/base.html |  21 +---
 .../templates/pretixpresale/fragment_js.html  |   1 +
 .../pretixpresale/fragment_modals.html        |  31 ------
 src/pretix/static/pretixbase/js/dialogs.js    | 100 ++++++++++++++++++
 4 files changed, 103 insertions(+), 50 deletions(-)
 create mode 100644 src/pretix/static/pretixbase/js/dialogs.js

diff --git a/src/pretix/control/templates/pretixcontrol/base.html b/src/pretix/control/templates/pretixcontrol/base.html
index 1801a76faf..67cd8ed834 100644
--- a/src/pretix/control/templates/pretixcontrol/base.html
+++ b/src/pretix/control/templates/pretixcontrol/base.html
@@ -38,6 +38,8 @@
             <script type="text/javascript" src="{% static "pretixcontrol/js/clipboard.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/menu.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/sb-admin-2.js" %}"></script>
+            <script type="text/javascript" src="{% static "pretixbase/js/dialogs.js" %}"></script>
+            <script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
 		    <script type="text/javascript" src="{% static "pretixcontrol/js/ui/main.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/ui/quota.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/ui/rrule.js" %}"></script>
@@ -54,7 +56,6 @@
             <script type="text/javascript" src="{% static "leaflet/leaflet.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/ui/geo.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixbase/js/details.js" %}"></script>
-            <script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
             <script type="text/javascript" src="{% static "sortable/Sortable.js" %}"></script>
             <script type="text/javascript" src="{% static "colorpicker/bootstrap-colorpicker.js" %}"></script>
             <script type="text/javascript" src="{% static "fileupload/jquery.ui.widget.js" %}"></script>
@@ -465,23 +466,5 @@
         </div>
         <div id="ajaxerr" class="modal-wrapper" hidden>
         </div>
-        <div id="loadingmodal" class="modal-wrapper" hidden>
-            <div class="modal-card">
-                <div class="modal-card-icon">
-                    <i class="fa fa-cog big-rotating-icon"></i>
-                </div>
-                <div class="modal-card-content">
-                    <h3></h3>
-                    <p class="text"></p>
-                    <p class="status">{% trans "If this takes longer than a few minutes, please contact us." %}</p>
-                    <div class="progress">
-                        <div class="progress-bar progress-bar-success">
-                        </div>
-                    </div>
-                    <div class="steps">
-                    </div>
-                </div>
-            </div>
-        </div>
 	</body>
 </html>
diff --git a/src/pretix/presale/templates/pretixpresale/fragment_js.html b/src/pretix/presale/templates/pretixpresale/fragment_js.html
index 304452adc2..42a048be78 100644
--- a/src/pretix/presale/templates/pretixpresale/fragment_js.html
+++ b/src/pretix/presale/templates/pretixpresale/fragment_js.html
@@ -10,6 +10,7 @@
     <script type="text/javascript" src="{% static "slider/bootstrap-slider.js" %}"></script>
     <script type="text/javascript" src="{% static "cropper/cropper.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixbase/js/details.js" %}"></script>
+    <script type="text/javascript" src="{% static "pretixbase/js/dialogs.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixcontrol/js/jquery.qrcode.min.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/widget/floatformat.js" %}"></script>
     <script type="text/javascript" src="{% static "pretixpresale/js/ui/questions.js" %}"></script>
diff --git a/src/pretix/presale/templates/pretixpresale/fragment_modals.html b/src/pretix/presale/templates/pretixpresale/fragment_modals.html
index 07a29352c7..db3a9a1fb6 100644
--- a/src/pretix/presale/templates/pretixpresale/fragment_modals.html
+++ b/src/pretix/presale/templates/pretixpresale/fragment_modals.html
@@ -31,37 +31,6 @@
         </div>
     </div>
 </div>
-<div id="loadingmodal" class="modal-wrapper" hidden aria-live="polite" role="dialog"
-        aria-labelledby="loadingmodal-label" aria-describedby="loadingmodal-description">
-    <div class="modal-card">
-        <div class="modal-card-icon">
-            <i class="fa fa-cog big-rotating-icon" aria-hidden="true"></i>
-        </div>
-        <div class="modal-card-content">
-            <h3 id="loadingmodal-label"></h3>
-            <div id="loadingmodal-description">
-                <p class="text"></p>
-                <p class="status">{% trans "If this takes longer than a few minutes, please contact us." %}</p>
-            </div>
-        </div>
-    </div>
-</div>
-<div id="cart-extend-modal" class="modal-wrapper" hidden aria-live="polite" role="dialog"
-        aria-labelledby="cart-extend-modal-title" aria-describedby="cart-extend-modal-desc">
-    <div class="modal-card" id="cart-extend-modal">
-        <div class="modal-card-icon">
-            <i class="fa fa-clock-o big-icon" aria-hidden="true"></i>
-        </div>
-        <div class="modal-card-content">
-            <h3 id="cart-extend-modal-title">{% trans "Please let us know you're still there" %}</h3>
-            <div>
-                <p id="cart-extend-modal-desc">
-                </p>
-                <p><button class="btn btn-lg btn-primary">{% trans "Continue" %}</button></p>
-            </div>
-        </div>
-    </div>
-</div>
 {% if request.organizer and request.organizer.settings.cookie_consent %}
     <script type="text/plain" id="cookie-consent-storage-key">cookie-consent-{{ request.organizer.slug }}</script>
     {% if cookie_consent_from_widget %}
diff --git a/src/pretix/static/pretixbase/js/dialogs.js b/src/pretix/static/pretixbase/js/dialogs.js
new file mode 100644
index 0000000000..779f1278b0
--- /dev/null
+++ b/src/pretix/static/pretixbase/js/dialogs.js
@@ -0,0 +1,100 @@
+/*global $,gettext,ngettext */
+function EL(tagName, attrs) {
+    var el = document.createElement(tagName);
+    if (attrs) for(var key in attrs)
+        if (key === 'style' && typeof attrs[key] === 'object') Object.assign(el.style, attrs[key]);
+        else if (key === 'innerHTML') el.innerHTML = attrs[key];
+        else if (key === 'appendTo' && (attrs.appendTo instanceof HTMLElement || attrs.appendTo instanceof ShadowRoot)) attrs.appendTo.append(el);
+        else if (key === 'prependTo' && (attrs.prependTo instanceof HTMLElement || attrs.prependTo instanceof ShadowRoot)) attrs.prependTo.prepend(el);
+        else if (key === 'insertBefore' && attrs.insertBefore instanceof HTMLElement) attrs.insertBefore.before(el);
+        else if (key === 'insertAfter' && attrs.insertAfter instanceof HTMLElement) attrs.insertAfter.after(el);
+        else if (key.startsWith("on")) el.addEventListener(key.substring(2), attrs[key], false);
+		else if (key.startsWith(":")) el[key.substring(1)] = attrs[key];
+		else if (key === 'checked' && 'checked' in el) el.checked = attrs.checked;
+		else if (key === 'selected' && 'selected' in el) el.selected = attrs.selected;
+		else if (key === 'multiple' && 'multiple' in el) el.multiple = attrs.multiple;
+        else el.setAttribute(key, attrs[key]);
+
+    if (arguments[2] instanceof Array)
+        var args = arguments[2], i = 0;
+    else
+        var args = arguments, i = 2;
+    for(;i<args.length;i++){
+        if (args[i] instanceof HTMLElement) el.appendChild(args[i]);
+        else if (args[i]) el.appendChild(document.createTextNode(""+args[i]));
+    }
+    return el;
+}
+var dialog_id = 1;
+function ModalDialog(options) {
+    this.id = 'modal-dlg-' + (++dialog_id);
+    this.dialogEl = EL('dialog', {class: 'modal-card', 'aria-live': 'polite',
+            'aria-labelledby': this.id + '-title', 'aria-describedby': this.id + '-desc',
+            appendTo: document.body, onclose: this._onClose.bind(this)},
+        this.iconEl =
+            (options.icon)
+            ? EL('div', {class: 'modal-card-icon'},
+                EL('i', {'aria-hidden': 'true', class: 'fa fa-' + options.icon + ' ' + (options.rotatingIcon ? 'big-rotating-icon' : 'big-icon')}))
+            : undefined,
+        EL('div', {class: 'modal-card-content'},
+            this.titleEl = EL('h3', {id: this.id + '-title'}, options.title || ''),
+            this.contentEl = EL('div', {id: this.id + '-desc'}, options.content || '')));
+}
+ModalDialog.prototype.show = function() {
+    this.dialogEl.showModal();
+    ModalDialog.updateBodyClass();
+}
+ModalDialog.prototype.hide = function() {
+    this.dialogEl.close();
+}
+ModalDialog.prototype.isOpen = function() {
+    return this.dialogEl.open;
+}
+ModalDialog.prototype._onClose = function() {
+    ModalDialog.updateBodyClass();
+}
+ModalDialog.prototype.setTitle = function(text) {
+    this.titleEl.innerText = text;
+}
+ModalDialog.prototype.setContent = function(text) {
+    this.contentEl.innerText = text;
+}
+ModalDialog.updateBodyClass = function() {
+    if ($("dialog[open], .modal-wrapper:not([hidden])").length)
+        $(document.body).addClass('has-modal-dialog');
+    else
+        $(document.body).removeClass('has-modal-dialog');
+}
+
+
+
+
+
+    /*
+function ModalDialog(options) {
+    this.backdropEl = document.createElement('div');
+    this.backdropEl.className = 'modal-wrapper';
+    this.backdropEl.setAttribute('hidden', 'hidden');
+    this.dialogEl = document.createElement('div');
+    this.dialogEl.className = 'modal-card';
+    this.backdropEl.appendChild(this.dialogEl);
+    if (options.icon) {
+        this.iconEl = document.createElement('div');
+        this.iconEl.className = 'modal-card-icon';
+        this.dialogEl.appendChild(this.iconEl);
+        var icon = document.createElement('i');
+        icon.setAttribute('aria-hidden', 'true');
+        icon.className = 'fa fa-' + options.icon + ' ' + (options.rotatingIcon ? 'big-rotating-icon' : 'big-icon');
+    }
+    this.dialogContentEl = document.createElement('div');
+    this.dialogContentEl.className = 'modal-card-content';
+    this.titleEl = document.createElement('h3');
+    this.dialogContentEl.appendChild(this.titleEl);
+    this.descriptionEl = document.createElement('div');
+    this.dialogContentEl.appendChild(this.descriptionEl);
+    this.backdropEl.appendChild(this.contentEl);
+    document.body.appendChild(this.backdropEl);
+    this.setTitle(options.title || '');
+    this.setDescription(options.description || '');
+}
+    */
\ No newline at end of file