use new dialog for cart expiry notification

src/pretix/static/pretixbase/js/asynctask.js

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

src/pretix/static/pretixbase/js/dialogs.js

@@ -25,21 +25,31 @@ function EL(tagName, attrs) {
     }
     return el;
 }
-var dialog_id = 1;
+
 function ModalDialog(options) {
-    this.id = 'modal-dlg-' + (++dialog_id);
+    this.id = 'modal-dlg-' + (++ModalDialog._next_dialog_id);
-    this.dialogEl = EL('dialog', {class: 'modal-card', 'aria-live': 'polite',
+    this.options = options;
-            'aria-labelledby': this.id + '-title', 'aria-describedby': this.id + '-desc',
+    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 || '');
-}
-    */

src/pretix/static/pretixbase/scss/dialogs.scss

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

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

@@ -21,15 +21,24 @@ var cart = {
     },
 
     show_expiry_notification: function () {
-        $("#cart-extend-modal").removeAttr("hidden");
+        if (cart._notify_dialog) return;
-        $("#cart-extend-modal button").focus();
-        $("body").addClass("has-modal-dialog");
-        cart._expiry_notified = true;
-    },
 
-    hide_expiry_notification: function () {
+        const btn_clicked = function() {
-        $("#cart-extend-modal").attr("hidden", true);
+            cart._notify_dialog.hide();
-        $("body").removeClass("has-modal-dialog");
+            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
+            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 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:"));
+                    : 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);