add dialog js

This commit is contained in:
Mira Weller
2025-05-16 20:53:00 +02:00
parent f702d44e19
commit c880e427c5
4 changed files with 103 additions and 50 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 %}

View File

@@ -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 || '');
}
*/