Move the page margin config to frontend

public/js/reader.js

@@ -10,6 +10,7 @@ const readerComponent = () => {
 		longPages: false,
 		lastSavedPage: page,
 		selectedIndex: 0, // 0: not selected; 1: the first page
+		margin: 30,
 
 		/**
 		 * Initialize the component by fetching the page dimensions
@@ -27,7 +28,6 @@ const readerComponent = () => {
 							url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
 							width: d.width,
 							height: d.height,
-							style: `margin-top: ${data.margin}px; margin-bottom: ${data.margin}px;`
 						};
 					});
 
@@ -47,6 +47,11 @@ const readerComponent = () => {
 					const mode = this.mode;
 					this.updateMode(this.mode, page, nextTick);
 					$('#mode-select').val(mode);
+
+					const savedMargin = localStorage.getItem('margin');
+					if (savedMargin) {
+						this.margin = savedMargin;
+					}
 				})
 				.catch(e => {
 					const errMsg = `Failed to get the page dimensions. ${e}`;
@@ -277,6 +282,11 @@ const readerComponent = () => {
 		entryChanged() {
 			const id = $('#entry-select').val();
 			this.redirect(`${base_url}reader/${tid}/${id}`);
+		},
+
+		marginChanged() {
+			localStorage.setItem('margin', this.margin);
+			this.toPage(this.selectedIndex);
 		}
 	};
 }

src/config.cr

@@ -20,7 +20,6 @@ class Config
   property plugin_path : String = File.expand_path "~/mango/plugins",
     home: true
   property download_timeout_seconds : Int32 = 30
-  property page_margin : Int32 = 30
   property disable_login = false
   property default_username = ""
   property auth_proxy_header_name = ""

src/routes/api.cr

@@ -612,7 +612,6 @@ struct APIRouter
         "width"  => Int32,
         "height" => Int32,
       }],
-      "margin" => Int32?,
     }
     get "/api/dimensions/:tid/:eid" do |env|
       begin
@@ -628,7 +627,6 @@ struct APIRouter
         send_json env, {
           "success"    => true,
           "dimensions" => sizes,
-          "margin"     => Config.current.page_margin,
         }.to_json
       rescue e
         send_json env, {

src/views/reader.html.ecr

@@ -25,11 +25,11 @@
             <img
               uk-img
               :class="{'uk-align-center': true, 'spine': item.width < 50}"
-              :style="item.style"
               :data-src="item.url"
               :width="item.width"
               :height="item.height"
               :id="item.id"
+              :style="`margin-top:${margin}px; margin-bottom:${margin}px`"
               @click="showControl($event)"
               />
           </template>
@@ -80,6 +80,7 @@
               </select>
             </div>
           </div>
+
           <div class="uk-margin">
             <label class="uk-form-label" for="mode-select">Mode</label>
             <div class="uk-form-controls">
@@ -90,6 +91,13 @@
             </div>
           </div>
 
+          <div class="uk-margin" x-show="mode === 'continuous'">
+            <label class="uk-form-label" for="margin-range" x-text="`Page Margin: ${margin}px`"></label>
+            <div class="uk-form-controls">
+              <input id="margin-range" class="uk-range" type="range" min="0" max="50" step="5" x-model="margin" @change="marginChanged()">
+            </div>
+          </div>
+
           <hr class="uk-divider-icon">
 
           <div class="uk-margin">