From 38e826724fb107292179b9957cb07f03060f19fc Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Wed, 26 Apr 2023 14:43:23 +0200
Subject: [PATCH] Cart: Add sneak-peek preview (#3259)

---
 .../pretixpresale/event/checkout_base.html    |  7 +++++-
 src/pretix/static/pretixbase/js/details.js    |  8 +++++++
 src/pretix/static/pretixpresale/js/ui/main.js | 24 +++++++++++++++++++
 .../static/pretixpresale/scss/main.scss       | 21 ++++++++++++++++
 4 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_base.html b/src/pretix/presale/templates/pretixpresale/event/checkout_base.html
index 303be9cd13..d582371f7b 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_base.html
+++ b/src/pretix/presale/templates/pretixpresale/event/checkout_base.html
@@ -13,7 +13,7 @@
 {% endblock %}
 {% block content %}
 <aside aria-label="{% trans "Your cart" %}">
-    <details class="panel panel-default cart" {% if "open_cart" in request.GET %}open{% endif %}>
+    <details class="panel panel-default cart{% if "open_cart" not in request.GET %} sneak-peek{% endif %}" {% if "open_cart" in request.GET %}open{% endif %}>
         <summary class="panel-heading">
             <h2 class="panel-title">
                 <span>
@@ -32,6 +32,11 @@
                 </span>
             </h2>
         </summary>
+        {% if "open_cart" not in request.GET %}
+        <p class="sneak-peek-trigger">
+            <button type="button" class="btn btn-default">{% trans "Show full cart" %}</button>
+        </p>
+        {% endif %}
         <div>
             <div class="panel-body">
                 {% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event %}
diff --git a/src/pretix/static/pretixbase/js/details.js b/src/pretix/static/pretixbase/js/details.js
index af0fabbac1..3c26717a1d 100644
--- a/src/pretix/static/pretixbase/js/details.js
+++ b/src/pretix/static/pretixbase/js/details.js
@@ -7,6 +7,10 @@ setup_collapsible_details = function (el) {
             return true;
         }
         var $details = $(this).closest("details");
+        if ($details.hasClass('sneak-peek')) {
+            // if sneak-peek is active, needs to be handled differently
+            return true;
+        }
         var isOpen = $details.prop("open");
         var $detailsNotSummary = $details.children(':not(summary)');
         if ($detailsNotSummary.is(':animated')) {
@@ -27,6 +31,10 @@ setup_collapsible_details = function (el) {
         e.preventDefault();
         return false;
     }).keyup(function (event) {
+        if ($details.hasClass('sneak-peek')) {
+            // if sneak-peek is active, needs to be handled differently
+            return true;
+        }
         if (32 == event.keyCode || (13 == event.keyCode && !isOpera)) {
             // Space or Enter is pressed — trigger the `click` event on the `summary` element
             // Opera already seems to trigger the `click` event when Enter is pressed
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js
index 731ad61403..93a5c1d402 100644
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/src/pretix/static/pretixpresale/js/ui/main.js
@@ -288,6 +288,30 @@ $(function () {
 
     $("#ajaxerr").on("click", ".ajaxerr-close", ajaxErrDialog.hide);
 
+    $('details.sneak-peek:not([open])').each(function() {
+        this.open = true;
+        var $elements = $("> :not(summary)", this).show().filter(':not(.sneak-peek-trigger)').attr('aria-hidden', 'true');
+
+        var container = this;
+        var trigger = $('summary, .sneak-peek-trigger button', container);
+        function onclick(e) {
+            e.preventDefault();
+
+            container.addEventListener('transitionend', function() {
+                $(container).removeClass('sneak-peek');
+                container.style.removeProperty('height');
+            }, {once: true});
+            container.style.height = container.scrollHeight + 'px';
+            $('.sneak-peek-trigger', container).fadeOut(function() {
+                $(this).remove();
+            });
+            $elements.removeAttr('aria-hidden');
+
+            trigger.off('click', onclick);
+        }
+        trigger.on('click', onclick);
+    });
+
     // Copy answers
     $(".js-copy-answers").click(function (e) {
         e.preventDefault();
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index da44b46256..078e6e4298 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/src/pretix/static/pretixpresale/scss/main.scss
@@ -398,6 +398,27 @@ details.details-open .panel-heading .collapse-indicator,
     transform: rotate(180deg);
 }
 
+details.sneak-peek {
+    position: relative;
+    height: 11em;
+    overflow: hidden;
+    transition: height .5s;
+}
+.sneak-peek-trigger {
+    display: grid;
+    justify-content: center;
+    align-content: center;
+    width: 100%;
+    height: 4.5em;
+    margin: 0;
+    padding: 15px;
+    background: linear-gradient(0deg, rgba(248,248,248,.9) 44%, rgba(248,248,248,0) 100%);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+}
+
 form.download-btn-form {
     display: inline;
 }