Cart: Add sneak-peek preview (#3259)

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 %}

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

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();

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