From 8fcc314f0918431ec24876343c9f32189f9c87cd Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Thu, 16 Dec 2021 13:36:10 +0100
Subject: [PATCH] Add fixed scroll position when navigating calendar views
 (Z#177488) (#2385)

* add fixed scroll position when navigating calendar views

* change from local to sessionStorage

* add check for sessionStorage
---
 .../event/fragment_subevent_calendar.html        |  4 ++--
 .../event/fragment_subevent_calendar_week.html   |  4 ++--
 .../pretixpresale/organizers/calendar.html       |  4 ++--
 .../pretixpresale/organizers/calendar_day.html   |  4 ++--
 .../pretixpresale/organizers/calendar_week.html  |  4 ++--
 src/pretix/static/pretixpresale/js/ui/main.js    | 16 ++++++++++++++--
 6 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html b/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html
index 900f591e6..fc6220d5c 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar.html
@@ -5,7 +5,7 @@
     <ul class="row calendar-nav">
         <li class="col-sm-4 col-xs-2 text-left flip">
             <a href="?{% url_replace request "date" subevent_list.before|date:"Y-m" %}"
-                    class="btn btn-default" aria-label="{% blocktrans with month=subevent_list.before|date:"F Y" %}Show previous month, {{ month }}{% endblocktrans %}">
+                    class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with month=subevent_list.before|date:"F Y" %}Show previous month, {{ month }}{% endblocktrans %}">
                 <span class="fa fa-arrow-left" aria-hidden="true"></span>
                 <span class="hidden-xs">{{ subevent_list.before|date:"F Y" }}</span>
             </a>
@@ -33,7 +33,7 @@
         </li>
         <li class="col-sm-4 col-xs-2 text-right flip">
             <a href="?{% url_replace request "date" subevent_list.after|date:"Y-m" %}"
-                class="btn btn-default" aria-label="{% blocktrans with month=subevent_list.after|date:"F Y" %}Show next month, {{ month }}{% endblocktrans %}">
+                class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with month=subevent_list.after|date:"F Y" %}Show next month, {{ month }}{% endblocktrans %}">
                 <span class="hidden-xs">{{ subevent_list.after|date:"F Y" }}</span>
                 <span class="fa fa-arrow-right" aria-hidden="true"></span>
             </a>
diff --git a/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html b/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html
index a0d567ddb..9590a2c0a 100644
--- a/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html
+++ b/src/pretix/presale/templates/pretixpresale/event/fragment_subevent_calendar_week.html
@@ -5,7 +5,7 @@
     <ul class="row calendar-nav">
         <li class="col-sm-4 col-xs-2 text-left flip">
             <a href="?{% url_replace request "date" subevent_list.before|date:"o-\WW" %}"
-                class="btn btn-default" aria-label="{% blocktrans with week=subevent_list.before|date:subevent_list.week_format %}Show previous week, {{ week }}{% endblocktrans %}">
+                class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with week=subevent_list.before|date:subevent_list.week_format %}Show previous week, {{ week }}{% endblocktrans %}">
                 <span class="fa fa-arrow-left" aria-hidden="true"></span>
                 <span class="hidden-xs">{{ subevent_list.before|date:subevent_list.week_format }}</span>
             </a>
@@ -37,7 +37,7 @@
         </li>
         <li class="col-sm-4 col-xs-2 text-right flip">
             <a href="?{% url_replace request "date" subevent_list.after|date:"o-\WW" %}"
-                class="btn btn-default" aria-label="{% blocktrans with week=subevent_list.after|date:subevent_list.week_format %}Show next week, {{ week }}{% endblocktrans %}">
+                class="btn btn-default" data-save-scrollpos aria-label="{% blocktrans with week=subevent_list.after|date:subevent_list.week_format %}Show next week, {{ week }}{% endblocktrans %}">
                 <span class="hidden-xs">{{ subevent_list.after|date:subevent_list.week_format }}</span>
                 <span class="fa fa-arrow-right" aria-hidden="true"></span>
             </a>
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/calendar.html b/src/pretix/presale/templates/pretixpresale/organizers/calendar.html
index f59cf1f14..801b500f9 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/calendar.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/calendar.html
@@ -38,14 +38,14 @@
             <div class="col-md-5 col-sm-2 col-xs-4 text-right flip">
                 {% if has_before %}
                     <a href="?{% url_replace request "date" before|date:"Y-m" %}"
-                       class="btn btn-default" aria-label="{{ before|date:"F Y" }}">
+                       class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:"F Y" }}">
                         <span class="fa fa-arrow-left" aria-hidden="true"></span>
                         <span class="hidden-sm hidden-xs">{{ before|date:"F Y" }}</span>
                     </a>
                 {% endif %}
                 {% if has_after %}
                     <a href="?{% url_replace request "date" after|date:"Y-m" %}"
-                       class="btn btn-default" aria-label="{{ after|date:"F Y" }}">
+                       class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:"F Y" }}">
                         <span class="fa fa-arrow-right" aria-hidden="true"></span>
                         <span class="hidden-sm hidden-xs">{{ after|date:"F Y" }}</span>
                     </a>
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html b/src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html
index d87767daf..95f18ad02 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/calendar_day.html
@@ -31,14 +31,14 @@
             <div class="col-md-5 col-sm-2 col-xs-4 text-right flip">
                 {% if has_before %}
                     <a href="?{% url_replace request "date" before.date.isoformat %}"
-                       class="btn btn-default" aria-label="{{ before|date:"SHORT_DATE_FORMAT" }}">
+                       class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:"SHORT_DATE_FORMAT" }}">
                         <span class="fa fa-arrow-left" aria-hidden="true"></span>
                         <span class="hidden-sm hidden-xs">{{ before|date:"SHORT_DATE_FORMAT" }}</span>
                     </a>
                 {% endif %}
                 {% if has_after %}
                     <a href="?{% url_replace request "date" after.date.isoformat %}"
-                       class="btn btn-default" aria-label="{{ after|date:"SHORT_DATE_FORMAT" }}">
+                       class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:"SHORT_DATE_FORMAT" }}">
                         <span class="hidden-sm hidden-xs">{{ after|date:"SHORT_DATE_FORMAT" }}</span>
                         <span class="fa fa-arrow-right" aria-hidden="true"></span>
                     </a>
diff --git a/src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html b/src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html
index 001c86376..3613a1dd6 100644
--- a/src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html
+++ b/src/pretix/presale/templates/pretixpresale/organizers/calendar_week.html
@@ -43,14 +43,14 @@
             <div class="col-md-4 col-sm-2 col-xs-4 text-right flip">
                 {% if has_before %}
                     <a href="?{% url_replace request "date" before|date:"o-\WW" %}"
-                       class="btn btn-default" aria-label="{{ before|date:week_format }}">
+                       class="btn btn-default" data-save-scrollpos aria-label="{{ before|date:week_format }}">
                         <span class="fa fa-arrow-left" aria-hidden="true"></span>
                         <span class="hidden-sm hidden-xs">{{ before|date:week_format }}</span>
                     </a>
                 {% endif %}
                 {% if has_after %}
                     <a href="?{% url_replace request "date" after|date:"o-\WW" %}"
-                       class="btn btn-default" aria-label="{{ after|date:week_format }}">
+                       class="btn btn-default" data-save-scrollpos aria-label="{{ after|date:week_format }}">
                         <span class="hidden-sm hidden-xs">{{ after|date:week_format }}</span>
                         <span class="fa fa-arrow-right" aria-hidden="true"></span>
                     </a>
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js
index 72e2977c9..8e3504ead 100644
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/src/pretix/static/pretixpresale/js/ui/main.js
@@ -180,6 +180,12 @@ $(function () {
 
     $("body").removeClass("nojs");
 
+    var scrollpos = sessionStorage ? sessionStorage.getItem('scrollpos') : 0;
+    if (scrollpos) {
+        window.scrollTo(0, scrollpos);
+        sessionStorage.removeItem('scrollpos');
+    }
+
     $(".accordion-radio").click(function() {
         var $input = $("input", this);
         if (!$input.prop("checked")) $input.prop('checked', true).trigger("change");
@@ -321,12 +327,18 @@ $(function () {
             $(this).slideToggle(300).attr("aria-expanded", true);
         });
     }
-
+    if (sessionStorage) {
+        $("[data-save-scrollpos]").click(function () {
+            sessionStorage.setItem('scrollpos', window.scrollY);
+        });
+    }
     $("#monthselform select").change(function () {
-        $(this).closest("form").get(0).submit();
+        if (sessionStorage) sessionStorage.setItem('scrollpos', window.scrollY);
+        this.form.submit();
     });
     $("#monthselform input").on("dp.change", function () {
         if ($(this).data("DateTimePicker")) {  // prevent submit after dp init
+            if (sessionStorage) sessionStorage.setItem('scrollpos', window.scrollY);
             this.form.submit();
         }
     });