diff --git a/src/pretix/static/pretixbase/js/asynctask.js b/src/pretix/static/pretixbase/js/asynctask.js index e10ebbf3e3..d35c29caae 100644 --- a/src/pretix/static/pretixbase/js/asynctask.js +++ b/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; } diff --git a/src/pretix/static/pretixbase/js/dialogs.js b/src/pretix/static/pretixbase/js/dialogs.js index 779f1278b0..cf5321f857 100644 --- a/src/pretix/static/pretixbase/js/dialogs.js +++ b/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.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 || ''); -} - */ \ No newline at end of file diff --git a/src/pretix/static/pretixbase/scss/dialogs.scss b/src/pretix/static/pretixbase/scss/dialogs.scss index 56ef0552c1..97be58c902 100644 --- a/src/pretix/static/pretixbase/scss/dialogs.scss +++ b/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; diff --git a/src/pretix/static/pretixpresale/js/ui/cart.js b/src/pretix/static/pretixpresale/js/ui/cart.js index 18845003d7..c78c74747d 100644 --- a/src/pretix/static/pretixpresale/js/ui/cart.js +++ b/src/pretix/static/pretixpresale/js/ui/cart.js @@ -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);