mirror of
https://github.com/pretix/pretix.git
synced 2026-05-16 17:03:58 +00:00
add dialog js
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
100
src/pretix/static/pretixbase/js/dialogs.js
Normal file
100
src/pretix/static/pretixbase/js/dialogs.js
Normal 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 || '');
|
||||
}
|
||||
*/
|
||||
Reference in New Issue
Block a user