Add common modal support for no-product-selected-error

src/pretix/presale/templates/pretixpresale/base.html

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

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

@@ -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']");

src/pretix/static/pretixpresale/scss/main.scss

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