Skip to content

Commit 7124f45

Browse files
marienfressinaudmarienfressinaud
committed
imp: Preserve scroll on links actions
1 parent 7a63d9a commit 7124f45

File tree

10 files changed

+40
-15
lines changed

10 files changed

+40
-15
lines changed

‎src/assets/javascripts/application.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,27 @@ function adaptLayoutContentBorderRadius () {
4949
}
5050

5151
document.addEventListener('turbo:load', adaptLayoutContentBorderRadius);
52+
53+
// Allow to disable scroll on form submission.
54+
// Submitting forms with a `data-turbo-preserve-scroll` attribute will keep the
55+
// scroll position at the current position.
56+
let disableScroll = false;
57+
58+
addEventListener('turbo:submit-start', (event) => {
59+
if (event.target.hasAttribute('data-turbo-preserve-scroll')) {
60+
disableScroll = true;
61+
}
62+
});
63+
64+
addEventListener('turbo:before-render', (event) => {
65+
if (disableScroll) {
66+
// As explained on GitHub, `Turbo.navigator.currentVisit.scrolled`
67+
// is internal and private attribute: we should NOT access it.
68+
// Unfortunately, there is no good alternative yet to maintain the
69+
// scroll position. This means we have to be pay double attention when
70+
// upgrading Turbo.
71+
// Reference: https://github.com/hotwired/turbo/issues/37#issuecomment-979466543
72+
Turbo.navigator.currentVisit.scrolled = true;
73+
disableScroll = false;
74+
}
75+
});

‎src/views/links/_link.phtml

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@
194194
</div>
195195

196196
<?php if ($display_mark_as_read): ?>
197-
<form method="post" action="<?= url('mark link as read', ['id' => $link->id, 'from' => $this->safe('from')]) ?>" role="menuitem">
197+
<form data-turbo-preserve-scroll method="post" action="<?= url('mark link as read', ['id' => $link->id, 'from' => $this->safe('from')]) ?>" role="menuitem">
198198
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
199199

200200
<button class="popup__item popup__item--button">
@@ -205,7 +205,7 @@
205205
<?php endif; ?>
206206

207207
<?php if ($display_mark_as_unread): ?>
208-
<form method="post" action="<?= url('mark link as unread', ['id' => $link->id, 'from' => $this->safe('from')]) ?>" role="menuitem">
208+
<form data-turbo-preserve-scroll method="post" action="<?= url('mark link as unread', ['id' => $link->id, 'from' => $this->safe('from')]) ?>" role="menuitem">
209209
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
210210

211211
<button class="popup__item popup__item--button">
@@ -270,7 +270,7 @@
270270
<?= _('Remove from the news…') ?>
271271
</div>
272272

273-
<form method="post" action="<?= url('mark link as read', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
273+
<form data-turbo-preserve-scroll method="post" action="<?= url('mark link as read', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
274274
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
275275

276276
<button class="popup__item popup__item--button">
@@ -279,7 +279,7 @@
279279
</button>
280280
</form>
281281

282-
<form method="post" action="<?= url('read link later', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
282+
<form data-turbo-preserve-scroll method="post" action="<?= url('read link later', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
283283
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
284284

285285
<button class="popup__item popup__item--button">
@@ -290,7 +290,7 @@
290290

291291
<div class="popup__separator"></div>
292292

293-
<form method="post" action="<?= url('mark link to never read', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
293+
<form data-turbo-preserve-scroll method="post" action="<?= url('mark link to never read', ['id' => $link->id, 'from' => url('news')]) ?>" role="menuitem">
294294
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
295295

296296
<button class="popup__item popup__item--button">

‎src/views/links/collections/index.phtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<?= protect($link->title) ?>
1616
</p>
1717

18-
<form method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
18+
<form data-turbo-preserve-scroll method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
1919
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
2020
<input type="hidden" name="from" value="<?= $from ?>" />
2121

‎src/views/links/collections/index_adding.phtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<?= protect($link->title) ?>
1616
</p>
1717

18-
<form method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
18+
<form data-turbo-preserve-scroll method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
1919
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
2020
<input type="hidden" name="from" value="<?= $from ?>" />
2121
<input type="hidden" name="mode" value="adding" />

‎src/views/links/collections/index_news.phtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<?= protect($link->title) ?>
1717
</p>
1818

19-
<form method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
19+
<form data-turbo-preserve-scroll method="post" action="<?= url('update link collections', ['id' => $link->id]) ?>">
2020
<?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
2121

2222
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />

‎src/views/links/edit.phtml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<?= protect($link->title) ?>
1616
</p>
1717

18-
<form method="post" action="<?= url('update link', ['id' => $link->id]) ?>">
18+
<form data-turbo-preserve-scroll method="post" action="<?= url('update link', ['id' => $link->id]) ?>">
1919
<?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
2020

2121
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
@@ -84,6 +84,7 @@
8484
</form>
8585

8686
<form
87+
data-turbo-preserve-scroll
8788
class="form--danger"
8889
method="post"
8990
action="<?= url('delete link', ['id' => $link->id]) ?>"

‎src/views/links/repairing/_new.phtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<?= _('You can change the <abbr>URL</abbr> of a link if it’s broken, or if you made a mistake in it.') ?>
99
</p>
1010

11-
<form method="post" action="<?= url('repair link', ['id' => $link->id]) ?>">
11+
<form data-turbo-preserve-scroll method="post" action="<?= url('repair link', ['id' => $link->id]) ?>">
1212
<?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
1313

1414
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />

‎src/views/links/searches/show.phtml

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
required
4141
value="<?= $url ?>"
4242
autocomplete="off"
43-
autofocus
4443
aria-describedby="url-desc"
4544
/>
4645

@@ -201,7 +200,7 @@
201200

202201
<div class="card__footer card__footer--centered">
203202
<?php if ($current_user->isFollowing($feed->id)): ?>
204-
<form method="post" action="<?= url('unfollow collection', ['id' => $feed->id]) ?>">
203+
<form data-turbo-preserve-scroll method="post" action="<?= url('unfollow collection', ['id' => $feed->id]) ?>">
205204
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
206205
<input type="hidden" name="from" value="<?= $from ?>" />
207206
<button>
@@ -210,7 +209,7 @@
210209
</button>
211210
</form>
212211
<?php else: ?>
213-
<form method="post" action="<?= url('follow collection', ['id' => $feed->id]) ?>">
212+
<form data-turbo-preserve-scroll method="post" action="<?= url('follow collection', ['id' => $feed->id]) ?>">
214213
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />
215214
<input type="hidden" name="from" value="<?= $from ?>" />
216215
<button>

‎src/views/links/show.phtml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@
127127
</button>
128128

129129
<form
130+
data-turbo-preserve-scroll
130131
method="post"
131132
action="<?= url('delete message', ['id' => $message->id]) ?>"
132133
data-controller="confirmation"
@@ -155,7 +156,7 @@
155156
<?php endforeach; ?>
156157

157158
<?php if ($can_comment): ?>
158-
<form method="post" action="<?= url('links/create message', ['link_id' => $link->id]) ?>">
159+
<form data-turbo-preserve-scroll method="post" action="<?= url('links/create message', ['link_id' => $link->id]) ?>">
159160
<?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
160161

161162
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />

‎src/views/messages/edit.phtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<h1 id="modal-title"><?= _('Message edition') ?></h1>
1212
</div>
1313

14-
<form method="post" action="<?= url('update message', ['id' => $message->id]) ?>">
14+
<form data-turbo-preserve-scroll method="post" action="<?= url('update message', ['id' => $message->id]) ?>">
1515
<?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>
1616

1717
<input type="hidden" name="csrf" value="<?= $csrf_token ?>" />

0 commit comments

Comments
 (0)