mirror of
https://github.com/pretix/pretix.git
synced 2026-05-15 16:54:00 +00:00
Add common modal support for no-product-selected-error
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
{% load compress %}
|
||||
{% load static %}
|
||||
{% load i18n %}
|
||||
{% load icon %}
|
||||
{% load safelink %}
|
||||
{% load statici18n %}
|
||||
{% load thumb %}
|
||||
@@ -47,6 +48,31 @@
|
||||
<nav id="skip-to-main" role="navigation" aria-label="{% trans "Skip link" context "skip-to-main-nav" %}" class="sr-only on-focus-visible">
|
||||
<p><a href="#content">{% trans "Skip to main content" %}</a></p>
|
||||
</nav>
|
||||
<dialog id="dialog-info" aria-labelledby="dialog-info-label" aria-describedby="dialog-info-description">
|
||||
<div class="modal-card">
|
||||
<div class="modal-card-icon">
|
||||
{% icon "cog big-rotating-icon" %}
|
||||
</div>
|
||||
<div class="modal-card-content">
|
||||
<h2 id="dialog-info-label">Hier die Überschrift</h2>
|
||||
<p id="dialog-info-description">Hier kommt der Text. Danach der Status-Absatz.</p>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<dialog id="dialog-alert" role="alertdialog" aria-labelledby="dialog-alert-label" aria-describedby="dialog-alert-description">
|
||||
<div class="modal-card">
|
||||
<div class="modal-card-icon">
|
||||
{% icon "cog big-rotating-icon" %}
|
||||
</div>
|
||||
<div class="modal-card-content">
|
||||
<h2 id="dialog-alert-label">Hier die Überschrift</h2>
|
||||
<p id="dialog-alert-description"></p>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="text-right">
|
||||
<button class="btn btn-primary">OK</button>
|
||||
</form>
|
||||
</dialog>
|
||||
<header>
|
||||
{% if ie_deprecation_warning %}
|
||||
<div class="old-browser-warning">
|
||||
|
||||
@@ -386,6 +386,33 @@ $(function () {
|
||||
$("body").removeClass("nojs");
|
||||
moment.locale($("body").attr("data-datetimelocale"));
|
||||
|
||||
$(document).on("pretix:alert pretix:info", function (e, detail) {
|
||||
var dialog = document.getElementById("dialog-" + e.type.substring(7));
|
||||
$("#" + dialog.getAttribute("aria-labelledby")).text(detail.label);
|
||||
$("#" + dialog.getAttribute("aria-describedby")).text(detail.description);
|
||||
$(".modal-card-icon .fa", dialog).attr('class', 'fa fa-' + (detail.icon || "exclamation-triangle"));
|
||||
dialog.showModal();
|
||||
});
|
||||
|
||||
$("form:has(#btn-add-to-cart)").on("submit", function(e) {
|
||||
if (
|
||||
(this.classList.contains("has-seating") && this.querySelector("pretix-seating-checkout-button button")) ||
|
||||
this.querySelector("input[type=checkbox]:checked") ||
|
||||
[...this.querySelectorAll(".input-item-count[type=text]")].some(input => input.value && input.value !== "0") // TODO: seating hat noch einen seating-dummy-item-count, das ist Mist!
|
||||
) {
|
||||
// okay, let the submit-event bubble to async-task
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$(document).trigger("pretix:alert", {
|
||||
label: gettext("You have not selected any ticket"),
|
||||
description: gettext("Please tick a checkbox or enter a quantity for one of the ticket types to add to the cart."),
|
||||
icon: 'exclamation',
|
||||
});
|
||||
});
|
||||
|
||||
var scrollpos = sessionStorage ? sessionStorage.getItem('scrollpos') : 0;
|
||||
if (scrollpos) {
|
||||
window.scrollTo(0, scrollpos);
|
||||
@@ -487,33 +514,6 @@ $(function () {
|
||||
this.form.submit();
|
||||
}
|
||||
});
|
||||
var update_cart_form = function () {
|
||||
var is_enabled = $(".product-row input[type=checkbox]:checked, .variations input[type=checkbox]:checked, .product-row input[type=radio]:checked, .variations input[type=radio]:checked").length;
|
||||
if (!is_enabled) {
|
||||
$(".input-item-count").each(function () {
|
||||
if ($(this).val() && $(this).val() !== "0") {
|
||||
is_enabled = true;
|
||||
}
|
||||
});
|
||||
$(".input-seat-selection option").each(function() {
|
||||
if ($(this).val() && $(this).val() !== "" && $(this).prop('selected')) {
|
||||
is_enabled = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (!is_enabled && (!$(".has-seating").length || $("#seating-dummy-item-count").length)) {
|
||||
$("#btn-add-to-cart").prop("disabled", !is_enabled).popover({
|
||||
'content': function () { return gettext("Please enter a quantity for one of the ticket types.") },
|
||||
'placement': 'top',
|
||||
'trigger': 'hover focus'
|
||||
});
|
||||
} else {
|
||||
$("#btn-add-to-cart").prop("disabled", false).popover("destroy")
|
||||
}
|
||||
};
|
||||
update_cart_form();
|
||||
$(".product-row input[type=checkbox], .variations input[type=checkbox], .product-row input[type=radio], .variations input[type=radio], .input-item-count, .input-seat-selection")
|
||||
.on("change mouseup keyup", update_cart_form);
|
||||
|
||||
$(".table-calendar td.has-events").click(function () {
|
||||
var $grid = $(this).closest("[role='grid']");
|
||||
|
||||
@@ -374,6 +374,47 @@ body.loading .container {
|
||||
-webkit-transition: opacity .5s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
#dialog-info, #dialog-alert {
|
||||
border: none;
|
||||
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;
|
||||
|
||||
|
||||
max-width: 32em;
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow-y: auto;
|
||||
|
||||
|
||||
&::backdrop {
|
||||
background: rgba(255, 255, 255, .7);
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.modal-card-icon {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
color: $brand-primary;
|
||||
font-size: 120px;
|
||||
}
|
||||
.modal-card-content {
|
||||
text-align: left;
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
font-size: 1.25em;
|
||||
font-weight: bold;
|
||||
color: $brand-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.typo-alert span[data-typosuggest] {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
|
||||
Reference in New Issue
Block a user