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

cps/static/js/reading/epub.js

@@ -2,7 +2,7 @@
 
 var reader;
 
-(function() {
+(function () {
     "use strict";
 
     EPUBJS.filePath = calibre.filePath;
@@ -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,54 +29,61 @@ 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;
+        touchEnd = event.changedTouches[0].screenX;
         if (touchStart < touchEnd) {
-            if(reader.book.package.metadata.direction === "rtl") {
+            if (reader.book.package.metadata.direction === "rtl") {
-    			reader.rendition.next();
+                reader.rendition.next();
-    		} else {
+            } else {
-    			reader.rendition.prev();
+                reader.rendition.prev();
-    		}
+            }
             // Swiped Right
         }
         if (touchStart > touchEnd) {
-            if(reader.book.package.metadata.direction === "rtl") {
+            if (reader.book.package.metadata.direction === "rtl") {
-    			reader.rendition.prev();
+                reader.rendition.prev();
-    		} else {
+            } else {
                 reader.rendition.next();
-    		}
+            }
             // Swiped Left
         }
     });
 
     // Update progress percentage
     let progressDiv = document.getElementById("progress");
-    reader.book.ready.then((()=>{
+    reader.book.ready.then(() => {
-        let locations_key = reader.book.key()+'-locations';
+        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 = ()=>{};
+            save_locations = () => {};
         } else {
             make_locations = reader.book.locations.generate();
-            save_locations = ()=>{
+            save_locations = () => {
-                localStorage.setItem(locations_key, reader.book.locations.save());
+                localStorage.setItem(
+                    locations_key,
+                    reader.book.locations.save()
+                );
             };
         }
-        make_locations.then(()=>{
+        make_locations
-            reader.rendition.on('relocated', (location)=>{
+            .then(() => {
-                let percentage = Math.round(location.end.percentage*100);
+                reader.rendition.on("relocated", (location) => {
-                progressDiv.textContent=percentage+"%";
+                    let percentage = Math.round(location.end.percentage * 100);
-            });
+                    progressDiv.textContent = percentage + "%";
-            reader.rendition.reportLocation();
+                });
-            progressDiv.style.visibility = "visible";
+                reader.rendition.reportLocation();
-        }).then(save_locations);
+                progressDiv.style.visibility = "visible";
-    }));
+            })
+            .then(save_locations);
+    });
 
     /**
      * @param {string} action - Add or remove bookmark
@@ -85,26 +92,42 @@ 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
-                return bookmark && bookmark !== location;
+                .filter(function (bookmark) {
-            }).map(function (bookmark) {
+                    return bookmark && bookmark !== location;
-                this.removeBookmark(bookmark);
+                })
-            }.bind(this));
+                .map(
+                    function (bookmark) {
+                        this.removeBookmark(bookmark);
+                    }.bind(this)
+                );
         }
-        
+
         var csrftoken = $("input[name='csrf_token']").val();
 
         // Save to database
         $.ajax(calibre.bookmarkUrl, {
             method: "post",
             data: { bookmark: location || "" },
-            headers: { "X-CSRFToken": csrftoken }
+            headers: { "X-CSRFToken": csrftoken },
         }).fail(function (xhr, status, error) {
             alert(error);
         });
     }
-    
+
     // 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;