CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-16 17:03:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

use new dialog for cart expiry notification

Browse Source
This commit is contained in:
Mira Weller
2025-05-16 20:54:02 +02:00
parent 62ba861cd2
commit ffebfce2b3
4 changed files with 46 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/pretix/static/pretixbase/js/asynctask.js
View File

@@ -254,7 +254,6 @@ $(function () {
function AsyncStatusDialog(options) {
ModalDialog.call(this, Object.assign({
content: [
this.textEl = EL('p', {}),
this.statusEl = EL('p', {}),
this.progressEl = EL('div', {class: 'progress'}, EL('div', {class:'progress-bar progress-bar-success', hidden: ''})),
this.stepsEl = EL('div', {class: 'steps', hidden: ''}, ''),
@@ -265,15 +264,11 @@ AsyncStatusDialog.prototype = Object.create(ModalDialog.prototype);
AsyncStatusDialog.prototype.show = function (title, text, status) {
ModalDialog.prototype.show.call(this);
this.setTitle(title);
this.setText(text);
this.setDescription(text);
this.setStatus(status || gettext('If this takes longer than a few minutes, please contact us.'));
this.setProgress(null);
this.setSteps(null);
}
AsyncStatusDialog.prototype.setText = function (text) {
$(this.textEl).toggle(!!text);
this.textEl.innerText = text;
}
AsyncStatusDialog.prototype.setStatus = function (text) {
this.statusEl.innerText = text;
}

68
src/pretix/static/pretixbase/js/dialogs.js
View File

@@ -25,21 +25,31 @@ function EL(tagName, attrs) {
}
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',
this.id = 'modal-dlg-' + (++ModalDialog._next_dialog_id);
this.options = options;
this.dialogEl = EL('dialog', {class: 'modal-card', id: this.id,
'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)
(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 || '')));
this.descEl = EL('p', {id: this.id + '-desc'}, options.description || ''),
this.contentEl = EL('div', {}, options.content || '')));
}
ModalDialog._next_dialog_id = 1;
ModalDialog.updateBodyClass = function() {
if ($("dialog[open], .modal-wrapper:not([hidden])").length)
$(document.body).addClass('has-modal-dialog');
else
$(document.body).removeClass('has-modal-dialog');
}
ModalDialog.prototype.show = function() {
this.dialogEl.showModal();
ModalDialog.updateBodyClass();
@@ -51,50 +61,16 @@ ModalDialog.prototype.isOpen = function() {
return this.dialogEl.open;
}
ModalDialog.prototype._onClose = function() {
if (this.options.removeOnClose) this.dialogEl.remove();
ModalDialog.updateBodyClass();
}
ModalDialog.prototype.setTitle = function(text) {
this.titleEl.innerText = text;
}
ModalDialog.prototype.setDescription = function(text) {
this.descEl.innerText = text;
this.descEl.style.display = text ? '' : 'none';
}
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 || '');
}
*/

4
src/pretix/static/pretixbase/scss/dialogs.scss
View File

@@ -12,7 +12,9 @@ body.has-modal-dialog .container, body.has-modal-dialog #wrapper {
font-size: 120px;
color: $brand-primary;
}
dialog.modal-card::backdrop {
background: rgba(255, 255, 255, .7);
}
.modal-wrapper {
position: fixed;
top: 0;

36
src/pretix/static/pretixpresale/js/ui/cart.js
View File

@@ -21,15 +21,24 @@ var cart = {
},
show_expiry_notification: function () {
$("#cart-extend-modal").removeAttr("hidden");
$("#cart-extend-modal button").focus();
$("body").addClass("has-modal-dialog");
cart._expiry_notified = true;
},
if (cart._notify_dialog) return;
hide_expiry_notification: function () {
$("#cart-extend-modal").attr("hidden", true);
$("body").removeClass("has-modal-dialog");
const btn_clicked = function() {
cart._notify_dialog.hide();
cart._notify_dialog = null;
$("#cart-extend-form").submit();
};
cart._notify_dialog = new ModalDialog({
icon: 'clock-o',
title: gettext("Please let us know if you're still there"),
description: undefined,
content: EL('p', {},
EL('button', {class: 'btn btn-primary btn-lg', onclick: btn_clicked, autofocus: ''}, gettext('Continue'))
),
removeOnClose: true,
});
cart._notify_dialog.show();
cart._expiry_notified = true;
},
draw_deadline: function () {
@@ -74,9 +83,9 @@ var cart = {
$("#cart-extend-button").toggle(can_extend_cart);
if (can_extend_cart && diff_total_seconds < 45) {
if (!cart._expiry_notified) cart.show_expiry_notification();
$("#cart-extend-modal-desc").text(already_expired
? gettext("Your cart has expired. If you want to continue, please click here:")
: gettext("Your cart is about to expire. If you want to continue, please click here:"));
if (cart._notify_dialog) cart._notify_dialog.setDescription(already_expired
? gettext("Your cart has expired. If you want to continue, please click here:")
: gettext("Your cart is about to expire. If you want to continue, please click here:"));
}
},
@@ -114,11 +123,6 @@ $(function () {
alert(data.message);
});
$("#cart-extend-modal button").click(function() {
cart.hide_expiry_notification();
$("#cart-extend-form").submit();
});
$(".toggle-container").each(function() {
var summary = $(".toggle-summary", this);
var content = $("> :not(.toggle-summary)", this);