feat(epub.js): add font size saving in localstorage like theme saving

cps/static/js/reading/epub.js

@@ -10,7 +10,7 @@ var reader;
 
     reader = ePubReader(calibre.bookUrl, {
         restore: true,
-        bookmarks: calibre.bookmark ? [calibre.bookmark] : []
+        bookmarks: calibre.bookmark ? [calibre.bookmark] : [],
     });
 
     Object.keys(themes).forEach(function (theme) {
@@ -29,10 +29,10 @@ var reader;
     var touchStart = 0;
     var touchEnd = 0;
 
-    reader.rendition.on('touchstart', function(event) {
+    reader.rendition.on("touchstart", function (event) {
         touchStart = event.changedTouches[0].screenX;
     });
-    reader.rendition.on('touchend', function(event) {
+    reader.rendition.on("touchend", function (event) {
         touchEnd = event.changedTouches[0].screenX;
         if (touchStart < touchEnd) {
             if (reader.book.package.metadata.direction === "rtl") {
@@ -54,29 +54,36 @@ var reader;
 
     // Update progress percentage
     let progressDiv = document.getElementById("progress");
-    reader.book.ready.then((()=>{
-        let locations_key = reader.book.key()+'-locations';
+    reader.book.ready.then(() => {
+        let locations_key = reader.book.key() + "-locations";
         let stored_locations = localStorage.getItem(locations_key);
         let make_locations, save_locations;
         if (stored_locations) {
-            make_locations = Promise.resolve(reader.book.locations.load(stored_locations));
+            make_locations = Promise.resolve(
+                reader.book.locations.load(stored_locations)
+            );
             // No-op because locations are already saved
             save_locations = () => {};
         } else {
             make_locations = reader.book.locations.generate();
             save_locations = () => {
-                localStorage.setItem(locations_key, reader.book.locations.save());
+                localStorage.setItem(
+                    locations_key,
+                    reader.book.locations.save()
+                );
             };
         }
-        make_locations.then(()=>{
-            reader.rendition.on('relocated', (location)=>{
+        make_locations
+            .then(() => {
+                reader.rendition.on("relocated", (location) => {
                     let percentage = Math.round(location.end.percentage * 100);
                     progressDiv.textContent = percentage + "%";
                 });
                 reader.rendition.reportLocation();
                 progressDiv.style.visibility = "visible";
-        }).then(save_locations);
-    }));
+            })
+            .then(save_locations);
+    });
 
     /**
      * @param {string} action - Add or remove bookmark
@@ -85,11 +92,15 @@ var reader;
     function updateBookmark(action, location) {
         // Remove other bookmarks (there can only be one)
         if (action === "add") {
-            this.settings.bookmarks.filter(function (bookmark) {
+            this.settings.bookmarks
+                .filter(function (bookmark) {
                     return bookmark && bookmark !== location;
-            }).map(function (bookmark) {
+                })
+                .map(
+                    function (bookmark) {
                         this.removeBookmark(bookmark);
-            }.bind(this));
+                    }.bind(this)
+                );
         }
 
         var csrftoken = $("input[name='csrf_token']").val();
@@ -98,7 +109,7 @@ var reader;
         $.ajax(calibre.bookmarkUrl, {
             method: "post",
             data: { bookmark: location || "" },
-            headers: { "X-CSRFToken": csrftoken }
+            headers: { "X-CSRFToken": csrftoken },
         }).fail(function (xhr, status, error) {
             alert(error);
         });
@@ -107,4 +118,16 @@ var reader;
     // Default settings load
     const theme = localStorage.getItem("calibre.reader.theme") ?? "lightTheme";
     selectTheme(theme);
+
+    // Restore saved font size after reader is ready
+    reader.book.ready.then(() => {
+        const savedFontSize = localStorage.getItem("calibre.reader.fontSize");
+        if (savedFontSize) {
+            const fontSizeFader = document.getElementById("fontSizeFader");
+            if (fontSizeFader) {
+                fontSizeFader.value = savedFontSize;
+                reader.rendition.themes.fontSize(`${savedFontSize}%`);
+            }
+        }
+    });
 })();

cps/templates/read.html

@@ -274,8 +274,12 @@
 
       // font size settings logic
       let fontSizeFader = document.getElementById("fontSizeFader");
+
+      // Save font size when changed
       fontSizeFader.addEventListener("change", function () {
-        reader.rendition.themes.fontSize(`${this.value}%`);
+        const fontSize = this.value;
+        localStorage.setItem("calibre.reader.fontSize", fontSize);
+        reader.rendition.themes.fontSize(`${fontSize}%`);
       });
 
       let defaultFont;