CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Dialog for cart renewal, async task without page refresh (#5148)

Browse Source 
* async_task: deduplicate response handling code

* extend cart without full page reload

* update dialog markup

* fix error response from CartExtend

* refactor asynctask, make sure waitingDialog.show() re-initializes dialog contents

* add cart expiry notification

* add aria references to other dialogs

* improve error handling

* fix error if max_extend=None

* different message for expiring soon and expired carts

* refactor dialog css

* add classes to further dialog elements

* switch extend-cart-dialog and loadingmodal to <dialog>

* Backport simple_block_tag from Django 5.2

* Use simple_block_tag for {% dialog %} tag

* add alertdialog role

* Update src/pretix/static/pretixbase/scss/_dialogs.scss

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* fix mobile dialog styles not being overwritten

* asynctask dialog: prevent close by escape on chrome

* remove dynamic aria-live from #cart-deadline

dynamic aria-live is generally not well supported and as we have the dialog now anyways, we can remove it

* move continue-button to right

* Update src/pretix/static/pretixpresale/js/ui/cart.js

Co-authored-by: Richard Schreiber <schreiber@rami.io>

* Fix CSS for old-style dialog

* fix heading display/level

* align dialogs at the top as they originally were

* fix </div> from merge-conflict

* fix missing grow for dialog-content

* improve cart-extend-button ui

* do not show cart-extend-dialog onload

* improve message if 0 minutes

* do not save messae in session if ajax_dont_redirect

* add ajax_dont_redirect to async_task_check_url

* improve draw_deadline to only update #cart-deadline if necessary

* add renew-confirmation-message

---------

Co-authored-by: Richard Schreiber <schreiber@rami.io>
Co-authored-by: Raphael Michel <michel@rami.io>
This commit is contained in:
luelista
2025-05-27 07:17:50 +02:00
committed by GitHub
parent fdbcffd5fd
commit 5962536a11
19 changed files with 621 additions and 556 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,11 @@
/*global $,gettext,ngettext */
var cart = {
_deadline: null,
_deadline_interval: null,
_deadline_timeout: null,
_deadline_call: 0,
_time_offset: 0,
_prev_diff_minutes: 0,
_renewed_message: "",
_get_now: function () {
return moment().add(cart._time_offset, 'ms');
@@ -20,7 +22,12 @@ var cart = {
cart._time_offset = server_time - client_time;
},
draw_deadline: function () {
show_expiry_notification: function () {
document.getElementById("dialog-cart-extend").showModal();
cart._expiry_notified = true;
},
draw_deadline: function (renewed="") {
function pad(n, width, z) {
z = z || '0';
n = n + '';
@@ -33,36 +40,73 @@ var cart = {
return;
}
var now = cart._get_now();
var diff_minutes = Math.floor(cart._deadline.diff(now) / 1000 / 60);
var diff_seconds = Math.floor(cart._deadline.diff(now) / 1000 % 60);
if (diff_minutes < 2 || diff_minutes == 5) $("#cart-deadline").get(0).setAttribute("aria-live", "polite");
else $("#cart-deadline").get(0).removeAttribute("aria-live");
var diff_total_seconds = cart._deadline.diff(now) / 1000;
var diff_minutes = Math.floor(diff_total_seconds / 60);
var diff_seconds = Math.floor(diff_total_seconds % 60);
if (diff_minutes < 0) {
$("#cart-deadline").text(gettext("The items in your cart are no longer reserved for you. You can still complete your order as long as they’re available."));
$("#cart-deadline-short").text(
gettext("Cart expired")
);
window.clearInterval(cart._deadline_interval);
if (!cart._deadline_timeout) {
// no timeout => first time draw_deadline is invoked, but cart already expired => do not show dialog
cart._expiry_notified = true;
}
} else {
$("#cart-deadline").text(ngettext(
"The items in your cart are reserved for you for one minute.",
"The items in your cart are reserved for you for {num} minutes.",
diff_minutes
).replace(/\{num\}/g, diff_minutes));
if (diff_minutes !== cart._prev_diff_minutes) {
if (diff_minutes == 0) {
$("#cart-deadline").text(gettext("Your cart is about to expire. If you want to continue, please click here:"))
} else {
$("#cart-deadline").text(
cart._renewed_message + " " +
ngettext(
"The items in your cart are reserved for you for one minute.",
"The items in your cart are reserved for you for {num} minutes.",
diff_minutes
).replace(/\{num\}/g, diff_minutes)
);
}
cart._prev_diff_minutes = diff_minutes;
}
$("#cart-deadline-short").text(
pad(diff_minutes.toString(), 2) + ':' + pad(diff_seconds.toString(), 2)
);
cart._renewed_message = "";
cart._deadline_timeout = window.setTimeout(cart.draw_deadline, 500);
}
var already_expired = diff_total_seconds <= 0;
var can_extend_cart = diff_minutes < 3 && (already_expired || cart._deadline < cart._max_extend);
$("#cart-extend-button").toggle(can_extend_cart);
if (can_extend_cart && diff_total_seconds < 45) {
if (!cart._expiry_notified) cart.show_expiry_notification();
$("#dialog-cart-extend-description").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:"));
}
$("#cart-extend-button").toggle(diff_minutes < 3);
},
init: function () {
"use strict";
cart._deadline = moment($("#cart-deadline").attr("data-expires"));
cart._deadline_interval = window.setInterval(cart.draw_deadline, 500);
cart._calc_offset();
cart.set_deadline(
$("#cart-deadline").attr("data-expires"),
$("#cart-deadline").attr("data-max-expiry-extend")
);
},
set_deadline: function (expiry, max_extend, renewed_message) {
"use strict";
cart._expiry_notified = false;
cart._deadline = moment(expiry);
if (cart._deadline_timeout) {
window.clearTimeout(cart._deadline_timeout);
}
cart._deadline_timeout = null;
cart._max_extend = moment(max_extend);
cart._renewed_message = renewed_message || "";
cart.draw_deadline();
}
};
@@ -74,6 +118,22 @@ $(function () {
cart.init();
}
$("#cart-extend-form").on("pretix:async-task-success", function(e, data) {
if (data.success) {
cart.set_deadline(data.expiry, data.max_expiry_extend, data.message);
var cart_panel_heading = $(this).closest(".panel").find(".panel-heading").get(0);
if (cart_panel_heading) {
cart_panel_heading.focus();
}
} else {
alert(data.message);
}
});
$("#dialog-cart-extend form").submit(function() {
$("#cart-extend-form").submit();
});
$(".toggle-container").each(function() {
var summary = $(".toggle-summary", this);
var content = $("> :not(.toggle-summary)", this);

2
src/pretix/static/pretixpresale/js/ui/main.js
View File

@@ -407,8 +407,6 @@ $(function () {
$("#voucher-toggle").slideUp();
});
$("#ajaxerr").on("click", ".ajaxerr-close", ajaxErrDialog.hide);
// Handlers for "Copy answers from above" buttons
$(".js-copy-answers").click(function (e) {
e.preventDefault();

8
src/pretix/static/pretixpresale/js/ui/sso.js
View File

@@ -4,8 +4,6 @@ $(function () {
var popup_window = null
var popup_check_interval = null
$("#popupmodal").removeAttr("hidden");
$("a[data-open-in-popup-window]").on("click", function (e) {
e.preventDefault()
@@ -22,11 +20,13 @@ $(function () {
"presale-popup",
"scrollbars=yes,resizable=yes,status=yes,location=yes,toolbar=no,menubar=no,width=940,height=620,left=50,top=50"
)
$("body").addClass("has-popup")
$("body").addClass("has-popup has-modal-dialog")
$("#popupmodal").removeAttr("hidden");
popup_check_interval = window.setInterval(function () {
if (popup_window.closed) {
$("body").removeClass("has-popup")
$("body").removeClass("has-popup has-modal-dialog")
$("#popupmodal").attr("hidden", true);
window.clearInterval(popup_check_interval)
}
}, 250)

110
src/pretix/static/pretixpresale/scss/main.scss
View File

@@ -44,6 +44,7 @@ $headings-small-color: $text-muted;
@import "../../bootstrap/scss/_bootstrap_reduced.scss";
@import "../../pretixbase/scss/_theme.scss";
@import "../../pretixbase/scss/_dialogs.scss";
@import "../../lightbox/css/lightbox.scss";
@import "../../cropper/cropper.scss";
@import "../../datetimepicker/_bootstrap-datetimepicker.scss";
@@ -113,7 +114,7 @@ pre {
h1, h2, h3, h4, h5, h6, p, li {
a:not(.btn) {
text-decoration: underline;
}
}
}
a.no-underline:link, nav li a:link {
@@ -277,119 +278,12 @@ a:hover .panel-primary > .panel-heading {
margin-right: auto;
}
body.loading .container {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-ms-filter: blur(2px);
-o-filter: blur(2px);
filter: blur(2px);
}
.big-rotating-icon {
-webkit-animation: fa-spin 8s infinite linear;
animation: fa-spin 8s infinite linear;
font-size: 120px;
color: $brand-primary;
}
#loadingmodal, #ajaxerr, #popupmodal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(255, 255, 255, .7);
opacity: 0;
z-index: 900000;
visibility: hidden;
padding: 10px;
.big-icon {
margin-top: 50px;
font-size: 200px;
color: $brand-primary;
}
&#popupmodal .big-icon {
margin-top: 10px;
font-size: 100px;
color: $brand-primary;
}
.modal-card {
margin: 50px auto 0;
width: 90%;
max-width: 600px;
max-height: calc(100vh - 100px);
overflow-y: auto;
background: white;
border-radius: $border-radius-large;
box-shadow: 0 7px 14px 0 rgba(78, 50, 92, 0.1),0 3px 6px 0 rgba(0,0,0,.07);
padding: 20px;
min-height: 160px;
.modal-card-icon {
float: left;
width: 150px;
text-align: center;
}
.modal-card-content {
margin-left: 160px;
text-align: left;
h3 {
margin-top: 0;
}
}
}
&#cookie-consent-modal {
background: rgba(255, 255, 255, .5);
opacity: 1;
visibility: visible;
display: none;
.modal-card-content {
margin-left: 0;
}
details {
& > summary {
list-style: none;
}
& > summary::-webkit-details-marker,
& > summary::marker {
display: none;
}
margin-bottom: 10px;
}
}
}
@media (max-width: 700px) {
#loadingmodal, #ajaxerr, #popupmodal {
.modal-card {
margin: 25px auto 0;
max-height: calc(100vh - 50px - 20px);
.modal-card-icon {
float: none;
width: 100%;
}
.modal-card-content {
text-align: center;
margin-left: 0;
margin-right: 0;
margin-top: 10px;
}
}
}
}
#ajaxerr {
background: rgba(236, 236, 236, .9);
}
.loading #loadingmodal, .ajaxerr #ajaxerr, .has-popup #popupmodal {
opacity: 1;
visibility: visible;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
.typo-alert span[data-typosuggest] {
text-decoration: underline;