imp: Preserve scroll on links actions

flusio · Sep 21, 2022 · 7124f45 · 7124f45
1 parent 7a63d9a
commit 7124f45
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 15 deletions.
diff --git a/src/assets/javascripts/application.js b/src/assets/javascripts/application.js
@@ -49,3 +49,27 @@ function adaptLayoutContentBorderRadius () {
 }
 
 document.addEventListener('turbo:load', adaptLayoutContentBorderRadius);
+
+// Allow to disable scroll on form submission.
+// Submitting forms with a `data-turbo-preserve-scroll` attribute will keep the
+// scroll position at the current position.
+let disableScroll = false;
+
+addEventListener('turbo:submit-start', (event) => {
+    if (event.target.hasAttribute('data-turbo-preserve-scroll')) {
+        disableScroll = true;
+    }
+});
+
+addEventListener('turbo:before-render', (event) => {
+    if (disableScroll) {
+        // As explained on GitHub, `Turbo.navigator.currentVisit.scrolled`
+        // is internal and private attribute: we should NOT access it.
+        // Unfortunately, there is no good alternative yet to maintain the
+        // scroll position. This means we have to be pay double attention when
+        // upgrading Turbo.
+        // Reference: https://github.com/hotwired/turbo/issues/37#issuecomment-979466543
+        Turbo.navigator.currentVisit.scrolled = true;
+        disableScroll = false;
+    }
+});
diff --git a/src/views/links/_link.phtml b/src/views/links/_link.phtml
@@ -194,7 +194,7 @@
                         </div>
 
                         <?php if ($display_mark_as_read): ?>
-                            <form method="post" action="<?= url('mark link as read', ['id' => $link->id, 'from' => $this->safe('from')]) ?>" role="menuitem">
+                            <form data-turbo-preserve-scroll method="post" action="<?= url('mark link as read', ['id' => $link->id, 'from' => $this->safe('from')]) ?>" role="menuitem">
                                 <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
 
                                 <button class="popup__item popup__item--button">
@@ -205,7 +205,7 @@
                         <?php endif; ?>
 
                         <?php if ($display_mark_as_unread): ?>
-                            <form method="post" action="<?= url('mark link as unread', ['id' => $link->id, 'from' => $this->safe('from')]) ?>" role="menuitem">
+                            <form data-turbo-preserve-scroll method="post" action="<?= url('mark link as unread', ['id' => $link->id, 'from' => $this->safe('from')]) ?>" role="menuitem">
                                 <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
 
                                 <button class="popup__item popup__item--button">
@@ -270,7 +270,7 @@
                             <?= _('Remove from the news…') ?>
                         </div>
 
-                        <form method="post" action="<?= url('mark link as read', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
+                        <form data-turbo-preserve-scroll method="post" action="<?= url('mark link as read', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
                             <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
 
                             <button class="popup__item popup__item--button">
@@ -279,7 +279,7 @@
                             </button>
                         </form>
 
-                        <form method="post" action="<?= url('read link later', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
+                        <form data-turbo-preserve-scroll method="post" action="<?= url('read link later', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
                             <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
 
                             <button class="popup__item popup__item--button">
@@ -290,7 +290,7 @@
 
                         <div class="popup__separator"></div>
 
-                        <form method="post" action="<?= url('mark link to never read', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
+                        <form data-turbo-preserve-scroll method="post" action="<?= url('mark link to never read', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
                             <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
 
                             <button class="popup__item popup__item--button">

diff --git a/src/views/links/collections/index.phtml b/src/views/links/collections/index.phtml
@@ -15,7 +15,7 @@
         <?= protect($link->title) ?>
     </p>
 
-    <form method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
+    <form data-turbo-preserve-scroll method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
         <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
         <input type="hidden" name="from" value="<?= $from ?>" />
 

diff --git a/src/views/links/collections/index_adding.phtml b/src/views/links/collections/index_adding.phtml
@@ -15,7 +15,7 @@
         <?= protect($link->title) ?>
     </p>
 
-    <form method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
+    <form data-turbo-preserve-scroll method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
         <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
         <input type="hidden" name="from" value="<?= $from ?>" />
         <input type="hidden" name="mode" value="adding" />

diff --git a/src/views/links/collections/index_news.phtml b/src/views/links/collections/index_news.phtml
@@ -16,7 +16,7 @@
         <?= protect($link->title) ?>
     </p>
 
-    <form method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
+    <form data-turbo-preserve-scroll method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
         <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
 
         <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />

diff --git a/src/views/links/edit.phtml b/src/views/links/edit.phtml
@@ -15,7 +15,7 @@
         <?= protect($link->title) ?>
     </p>
 
-    <form method="post" action="<?= url('update link', ['id' => $link->id]) ?>">
+    <form data-turbo-preserve-scroll method="post" action="<?= url('update link', ['id' => $link->id]) ?>">
         <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
 
         <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
@@ -84,6 +84,7 @@
     </form>
 
     <form
+        data-turbo-preserve-scroll
         class="form--danger"
         method="post"
         action="<?= url('delete link', ['id' => $link->id]) ?>"

diff --git a/src/views/links/repairing/_new.phtml b/src/views/links/repairing/_new.phtml
@@ -8,7 +8,7 @@
             <?= _('You can change the <abbr>URL</abbr> of a link if it’s broken, or if you made a mistake in it.') ?>
         </p>
 
-        <form method="post" action="<?= url('repair link', ['id' => $link->id]) ?>">
+        <form data-turbo-preserve-scroll method="post" action="<?= url('repair link', ['id' => $link->id]) ?>">
             <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
 
             <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />

diff --git a/src/views/links/searches/show.phtml b/src/views/links/searches/show.phtml
@@ -40,7 +40,6 @@
                     required
                     value="<?= $url ?>"
                     autocomplete="off"
-                    autofocus
                     aria-describedby="url-desc"
                 />
 
@@ -201,7 +200,7 @@
 
                     <div class="card__footer card__footer--centered">
                         <?php if ($current_user->isFollowing($feed->id)): ?>
-                            <form method="post" action="<?= url('unfollow collection', ['id' => $feed->id]) ?>">
+                            <form data-turbo-preserve-scroll method="post" action="<?= url('unfollow collection', ['id' => $feed->id]) ?>">
                                 <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
                                 <input type="hidden" name="from" value="<?= $from ?>" />
                                 <button>
@@ -210,7 +209,7 @@
                                 </button>
                             </form>
                         <?php else: ?>
-                            <form method="post" action="<?= url('follow collection', ['id' => $feed->id]) ?>">
+                            <form data-turbo-preserve-scroll method="post" action="<?= url('follow collection', ['id' => $feed->id]) ?>">
                                 <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
                                 <input type="hidden" name="from" value="<?= $from ?>" />
                                 <button>

diff --git a/src/views/links/show.phtml b/src/views/links/show.phtml
@@ -127,6 +127,7 @@
                                     </button>
 
                                     <form
+                                        data-turbo-preserve-scroll
                                         method="post"
                                         action="<?= url('delete message', ['id' => $message->id]) ?>"
                                         data-controller="confirmation"
@@ -155,7 +156,7 @@
         <?php endforeach; ?>
 
         <?php if ($can_comment): ?>
-            <form method="post" action="<?= url('links/create message', ['link_id' => $link->id]) ?>">
+            <form data-turbo-preserve-scroll method="post" action="<?= url('links/create message', ['link_id' => $link->id]) ?>">
                 <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
 
                 <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />

diff --git a/src/views/messages/edit.phtml b/src/views/messages/edit.phtml
@@ -11,7 +11,7 @@
         <h1 id="modal-title"><?= _('Message edition') ?></h1>
     </div>
 
-    <form method="post" action="<?= url('update message', ['id' => $message->id]) ?>">
+    <form data-turbo-preserve-scroll method="post" action="<?= url('update message', ['id' => $message->id]) ?>">
         <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
 
         <input type="hidden" name="csrf" value="<?= $csrf_token ?>" />