add settings for epubjs-reader

CHANGELOG.md

@@ -11,7 +11,9 @@ x.x.x - TODO
   * ...
 
 2.5.x - 2024xxxx 
-  * ...
+  * Changes in config_default.php file:
+    - new $config['cops_epubjs_reader_settings']
+  * Configurable epubjs-reader settings - see issue mikespub-org/intity-epubjs-reader#2 by @intity
 
 2.5.3 - 20240404 Expand rest api + update epubjs reader
   * Upgrade mikespub/epubjs-reader from @intity theme - see issue #76

config_default.php

@@ -561,3 +561,38 @@
  * 'epubjs'
  */
 $config['cops_epub_reader'] = 'monocle';
+
+/*
+ * Configure epubjs-reader as used in templates/epubjs-reader.html
+ * This is a javascript object stored as text string for the template
+ *
+ * const settings = {{=it.settings}};
+ *
+ * Note: we could put this into a separate .json file that is downloaded
+ * by the template javascript at some point
+ *
+ * See https://github.com/mikespub-org/intity-epubjs-reader/issues/2#issuecomment-2043469571
+ * for examples
+ * 
+$config['cops_epubjs_reader_settings'] = '{
+    arrows: "content", // none | content | toolbar - depending on this.isMobile
+    restore: true,
+    history: true,
+    openbook: true,
+    language: "en",
+    sectionId: undefined,
+    bookmarks: [],   // array | false
+    annotations: [], // array | false
+    flow: "paginated", // paginated | scrolled
+    spread: {
+        mod: "auto", // auto | none
+        min: 800
+    },
+    styles: {
+        fontSize: 100
+    },
+    pagination: undefined, // not implemented
+    fullscreen: document.fullscreenEnabled // default behaviour
+}';
+ */
+$config['cops_epubjs_reader_settings'] = '{}';

lib/Output/EPubReader.php

@@ -215,13 +215,16 @@ public static function getEpubjsReader($idData, $request)
         // URL format: zipfs.php/{db}/{idData}/{component}
         $db = $book->getDatabaseId() ?? 0;
         $link = Route::url($endpoint . "/{$db}/{$idData}/");
+        // Configurable settings (javascript object as text)
+        $settings = Config::get('epubjs_reader_settings');
 
         $dist = Route::url(dirname(Config::get('assets')) . '/mikespub/epubjs-reader/dist');
         $data = [
             'title'      => htmlspecialchars($book->title),
             'version'    => Config::VERSION,
             'dist'       => $dist,
             'link'       => $link,
+            'settings'   => $settings,
         ];
 
         return Format::template($data, $template);

templates/epubjs-reader.html

@@ -22,23 +22,39 @@
 	<!-- Reader -->
 	<script src="{{=it.dist}}/js/epubreader.js?v={{=it.version}}"></script>
 
-	<!-- Initialize bookPath -->
+	<!-- Initialize bookPath and settings -->
 	<script>
+		// string containing the initial book path - link / to get content from file /{component}
 		const bookPath = "{{=it.link}}";
-
+		// js object containing the initial settings (use text for template variable)
+		const settings = {{=it.settings}};
+		/**
+		 * See https://github.com/mikespub-org/intity-epubjs-reader/issues/2#issuecomment-2043469571
+		 * for examples
+		 * 
+		{
+			arrows: "content", // none | content | toolbar - depending on this.isMobile
+			restore: true,
+			history: true,
+			openbook: true,
+			language: "en",
+			sectionId: undefined,
+			bookmarks: [],   // array | false
+			annotations: [], // array | false
+			flow: "paginated", // paginated | scrolled
+			spread: {
+				mod: "auto", // auto | none
+				min: 800
+			},
+			styles: {
+				fontSize: 100
+			},
+			pagination: undefined, // not implemented
+			fullscreen: document.fullscreenEnabled // default behaviour
+		}
+		*/
 		window.onload = (e) => {
-			epubreader.main(bookPath, {
-				restore: true,
-				/**
-				controls: {
-					arrows: true,
-					openbook: false,
-					bookmarks: true,
-					annotations: false,
-					fullscreen: false
-				}
-				*/
-			});
+			epubreader.main(bookPath, settings);
 			e.stopPropagation();
 		};
 	</script>