Add central cookie consent mechanism (#2330)

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

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

@@ -0,0 +1,86 @@
+/*global $ */
+
+$(function () {
+    window.pretix = window.pretix || {};
+
+    var storage_key = $("#cookie-consent-storage-key").text();
+    function update_consent(consent) {
+        if (storage_key) window.localStorage[storage_key] = JSON.stringify(consent);
+        window.pretix.cookie_consent = consent;
+
+        // Event() is not supported by IE11, see ployfill here:
+        // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#polyfill
+        var e = document.createEvent('CustomEvent');
+        e.initCustomEvent('pretix:cookie-consent:change', true, true, consent);
+        document.dispatchEvent(e)
+    }
+
+    if (!storage_key) {
+        update_consent(null);
+        return;
+    }
+
+    var storage_val = window.localStorage[storage_key];
+    var show_dialog = !storage_val;
+    var consent_checkboxes = $("#cookie-consent-details input[type=checkbox][name]");
+    var consent_modal = $("#cookie-consent-modal");
+    if (storage_val) {
+        storage_val = JSON.parse(storage_val);
+        consent_checkboxes.each(function () {
+            if (typeof storage_val[this.name] === "undefined") {
+                // A new cookie type has been added that we haven't asked for yet
+                show_dialog = true;
+            } else if (storage_val[this.name]) {
+                this.checked = true;
+            }
+        })
+    } else {
+        storage_val = {}
+        var consented = $("#cookie-consent-from-widget").text();
+        if (consented) {
+            consented = JSON.parse(consented);
+            consent_checkboxes.each(function () {
+                this.checked = storage_val[this.name] = consented.indexOf(this.name) > -1;
+            })
+            show_dialog = false
+        }
+    }
+    update_consent(storage_val);
+
+    function _set_button_text () {
+        var btn = $("#cookie-consent-button-no");
+        btn.text(
+            consent_checkboxes.filter(":checked").length ?
+            btn.attr("data-detail-text") : 
+            btn.attr("data-summary-text")
+        );
+    }
+
+    if (consent_checkboxes.filter(":checked").length) {
+        $("#cookie-consent-details").prop("open", true).find("> *:not(summary)").show();
+    }
+
+    _set_button_text();
+    if (show_dialog) {
+        // We use .css() instead of .show() because of some weird issue that only occurs in Firefox
+        // and only within the widget.
+        consent_modal.css("display", "block");
+    }
+
+    $("#cookie-consent-button-yes, #cookie-consent-button-no").on("click", function () {
+        consent_modal.hide();
+        var consent = {};
+        var consent_all = this.id == "cookie-consent-button-yes";
+        consent_checkboxes.each(function () {
+            consent[this.name] = this.checked = consent_all || this.checked;
+        });
+        if (consent_all) _set_button_text();
+        update_consent(consent);
+    });
+    consent_checkboxes.on("change", _set_button_text);
+    $("#cookie-consent-reopen").on("click", function (e) {
+        consent_modal.show()
+        e.preventDefault()
+        return true
+    })
+});

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

@@ -218,6 +218,16 @@ $(function () {
         $(this).append(content);
     });
 
+    $("[data-click-to-load]").on("click", function(e) {
+        var target = document.getElementById(this.getAttribute("data-click-to-load"));
+        target.src = this.href;
+        target.focus();
+        e.preventDefault();
+    });
+    $(".overlay-remove").on("click", function() {
+        $(this).closest(".contains-overlay").find(".overlay").fadeOut();
+    });
+
     $("#voucher-box").hide();
     $("#voucher-toggle").show();
     $("#voucher-toggle a").click(function () {

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -132,6 +132,15 @@ a.btn, button.btn {
   }
 }
 
+details {
+  summary .chevron::before {
+    content: $fa-var-caret-right;
+  }
+  &[open] .chevron::before {
+    content: $fa-var-caret-down;
+  }
+}
+
 
 @media(max-width: $screen-xs-max) {
   .nameparts-form-group {

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

@@ -75,6 +75,13 @@ footer nav li:not(:first-child):before {
     width: 1.5em;
     text-align: center;
 }
+footer nav .btn-link {
+    display: inline;
+    padding: 0;
+    margin: 0;
+    font-size: 11px;
+    vertical-align: baseline;
+}
 
 .js-only {
     display: none;
@@ -122,6 +129,29 @@ a:hover .panel-primary > .panel-heading {
     }
 }
 
+.contains-overlay {
+    position: relative;
+}
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $gray-lightest;
+}
+.overlay-centered {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.overlay-centered .overlay-content {
+  max-width: 35em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 body.loading .container {
     -webkit-filter: blur(2px);
     -moz-filter: blur(2px);
@@ -136,7 +166,7 @@ body.loading .container {
     font-size: 120px;
     color: $brand-primary;
 }
-#loadingmodal, #ajaxerr {
+#loadingmodal, #ajaxerr, #cookie-consent-modal {
     position: fixed;
     top: 0;
     left: 0;
@@ -156,9 +186,10 @@ body.loading .container {
 
     .modal-card {
         margin: 50px auto 0;
-        top: 50px;
         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);
@@ -178,10 +209,31 @@ body.loading .container {
             }
         }
     }
+
+    &#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: inherit;
+            }
+            & > summary::-webkit-details-marker {
+                display: inherit;
+            }
+            margin-bottom: 10px;
+        }
+    }
 }
 @media (max-width: 700px) {
-    #loadingmodal, #ajaxerr {
+    #loadingmodal, #ajaxerr, #cookie-consent-modal {
         .modal-card {
+            margin: 25px auto 0;
+            max-height: calc(100vh - 50px - 20px);
             .modal-card-icon {
                 float: none;
                 width: 100%;