Extract Scroll Storage controller

assets/controllers/scroll_storage_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  static values = { entryId: Number };
+
+  connect() {
+    window.scrollTo({
+      top: window.innerHeight * localStorage[`wallabag.article.${this.entryIdValue}.percent`],
+      behavior: 'smooth',
+    });
+  }
+
+  saveScroll() {
+    const scrollPercent = window.scrollY / window.innerHeight;
+    const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
+
+    localStorage[`wallabag.article.${this.entryIdValue}.percent`] = scrollPercentRounded;
+  }
+}

assets/index.js

@@ -23,7 +23,7 @@ import '@fontsource/oswald';
 
 /* Tools */
 import {
-  savePercent, retrievePercent, initPreviewText,
+  initPreviewText,
 } from './js/tools';
 
 /* Import shortcuts */
@@ -34,7 +34,7 @@ import './js/shortcuts/entry';
 import './scss/index.scss';
 
 /* ==========================================================================
- Annotations & Remember position
+ Annotations
  ========================================================================== */
 
 $(document).ready(() => {
@@ -70,20 +70,6 @@ $(document).ready(() => {
     app.start().then(() => {
       app.annotations.load({ entry: x.entryId });
     });
-
-    $(window).scroll(() => {
-      const scrollTop = $(window).scrollTop();
-      const docHeight = $(document).height();
-      const scrollPercent = (scrollTop) / (docHeight);
-      const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
-      savePercent(x.entryId, scrollPercentRounded);
-    });
-
-    retrievePercent(x.entryId);
-
-    $(window).resize(() => {
-      retrievePercent(x.entryId, true);
-    });
   }
 
   document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {

assets/js/tools.js

@@ -1,36 +1,5 @@
 import $ from 'jquery';
 
-function supportsLocalStorage() {
-  try {
-    return 'localStorage' in window && window.localStorage !== null;
-  } catch (e) {
-    return false;
-  }
-}
-
-function savePercent(id, percent) {
-  if (!supportsLocalStorage()) { return false; }
-  localStorage[`wallabag.article.${id}.percent`] = percent;
-  return true;
-}
-
-function retrievePercent(id, resized) {
-  if (!supportsLocalStorage()) { return false; }
-
-  const bheight = $(document).height();
-  const percent = localStorage[`wallabag.article.${id}.percent`];
-  const scroll = bheight * percent;
-
-  if (!resized) {
-    window.scrollTo({
-      top: scroll,
-      behavior: 'smooth',
-    });
-  }
-
-  return true;
-}
-
 function initPreviewText() {
   // no display if preview_text not available
   if ($('div').is('#preview-article')) {
@@ -48,7 +17,5 @@ function initPreviewText() {
 }
 
 export {
-  savePercent,
-  retrievePercent,
   initPreviewText,
 };

templates/Entry/entry.html.twig

@@ -260,7 +260,7 @@
 {% endblock %}
 
 {% block content %}
-    <div id="article" class="article">
+    <div id="article" class="article" data-controller="scroll-storage" data-scroll-storage-entry-id-value="{{ entry.id }}" data-action="scroll@window->scroll-storage#saveScroll">
         <header class="mbm">
             <h1>
                 <span{% if entry.language is defined and entry.language is not null %} lang="{{ entry.getHTMLLanguage() }}"{% endif %}>{{ entry.title|striptags|default('entry.default_title'|trans)|raw }}</span>