Fix image fit in settings to be saved and set correctly

app/index.html

@@ -92,6 +92,7 @@
         selectedMangaPath:selectedMangaPath,
         currentViewMangaPage: currentViewMangaPage,
         viewMangaCommand: viewMangaCommand,
+        imageFit: imageFit,
         appCommands: appCommands
     }} -->
     <!-- /ko -->
@@ -102,6 +103,7 @@
     <settings-page params="
             isRecursive: isRecursive, 
             commands:appCommands,
+            imageFit: imageFit,
             isDetectUpdatesOnStart:isDetectUpdatesOnStart">
     </settings-page>
     <file-drag-overlay></file-drag-overlay>

app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "BaijiMangaViewer",
+  "name": "baiji-manga-viewer",
   "version": "1.1.0",
   "description": "A modern manga viewer inspired by Quivi that uses Material Design",
   "main": "./main.js",

app/renderer-process/components/settings-page/settings-page.template.html

@@ -8,7 +8,7 @@ <h4 id="header-text" class="col s12">
 		<div class="col s12 l3">
 			<div class="switch col s12">
 				<label id="include-subfolders">
-					Include subfolders
+					Search Include subfolders
 					<input type="checkbox" data-bind="switch:isRecursive">
 					<span class="lever"></span>
 					<span id="include-label" data-bind="text:isRecursiveText"></span>
@@ -39,10 +39,10 @@ <h4 id="header-text" class="col s12">
 					options:viewOptions,
 					optionsText: 'text',
 					optionsValue: 'value',
-					value: viewOption,
-					materialSelect:viewOption">
+					value: imageFit,
+					materialSelect:imageFit">
 				</select>
-				<label>Search and view options</label>
+				<label>Image fit</label>
 			</div>
 		</div>
 	</div>

app/renderer-process/components/settings-page/settings-page.viewmodel.js

@@ -17,7 +17,7 @@ export class SettingsPageViewmodel {
         this.isRecursive = params.isRecursive;
         this.commands = params.commands;
         this.isDetectUpdatesOnStart = params.isDetectUpdatesOnStart;
-        this.viewOption = ko.observable(ViewOptions.Default)
+        this.imageFit = params.imageFit;
         this.viewOptions = ko.observableArray([
             new SelectItem("Normal size", ViewOptions.Default),
             new SelectItem("Fit to width", ViewOptions.FitToWidth),
@@ -63,7 +63,7 @@ export class SettingsPageViewmodel {
             PREVIOUS_PAGE: "Previous page",
             FOCUS_SEARCH: "Focus search",
             OPEN_DIRECTORY: "Open directory",
-
+            BACK_TO_LIST: "Back to list"
         }
         return map[key] || key;
     }

app/renderer-process/components/view-manga/view-manga.viewmodel.js

@@ -24,20 +24,21 @@ export class ViewMangaViewmodel {
         this.command = params.viewMangaCommand;
         this.currentPage = params.currentViewMangaPage;
         this.appCommands = params.appCommands;
+        this.imageFit = params.imageFit;
 
         //class defined
-        this.option = ko.observable(1);
+        this.option = ko.observable(ko.unwrap(params.imageFit));
         this.scrollTopOnClick = ko.observable(true);
         this.page = ko.observable(1);
         this.transformScale = ko.observable(1.0);
         this.viewOptions = ko.observableArray(viewOptions);
 
-
+        console.log("option", this.option());
         //functions
         this.switchClass = this.switchClass.bind(this);
         this.goNextPage = this.goNextPage.bind(this);
         this.goToPreviousPage = this.goToPreviousPage.bind(this);
-        this.viewOption = ko.pureComputed(this.viewOption, this);
+        this.viewOption = ko.computed(this.viewOption, this);
         this.currentImage = ko.pureComputed(this.currentImage, this).extend({ rateLimit: 50 });
 
         this.commands = [
@@ -58,6 +59,8 @@ export class ViewMangaViewmodel {
                 request.then((manga) => {
                     manga = MangaFactory.getManga(manga);
                     this.selectedManga(manga);
+
+
                     manga.pageImages([]);
                     this.preloadNextPages(0, 2);
                 })
@@ -81,6 +84,9 @@ export class ViewMangaViewmodel {
             };
         }, this);
         this.subscriptions.push(sub);
+        let viewOption = _.find(this.viewOptions(), (x) => x.value == this.imageFit());
+        console.log("viewOption", viewOption);
+        this.switchClass(viewOption);
     }
 
     dispose() {
@@ -95,6 +101,8 @@ export class ViewMangaViewmodel {
     }
 
     switchClass(viewOption) {
+        console.log("inside switchClass", viewOption);
+
         let last = this.option();
         this.option(viewOption.value);
 
@@ -179,21 +187,31 @@ export class ViewMangaViewmodel {
     }
 
     viewOption() {
+        console.log("View Manga pge: viewOption computed", this.option());
+        var returnValue;
         switch (this.option()) {
             case ViewOptions.Normal:
 
-                return "normal";
+                returnValue = "normal";
+                break;
             case ViewOptions.FitToWidth:
-                return "fit-width";
+                returnValue = "fit-width";
+                break;
             case ViewOptions.FitToHeight:
-                return "fit-height";
+                returnValue = "fit-height";
+                break;
             case ViewOptions.ZoomIn:
-                return "zoom-in";
+                returnValue = "zoom-in";
+                break;
             case ViewOptions.ZoomOut:
-                return "zoom-out";
+                returnValue = "zoom-out";
+                break;
             default:
-                return "normal";
+                returnValue = "normal";
+                break;
         }
+        console.log("returnValue", returnValue);
+        return returnValue;
     }
     static registerComponent() {
         ko.components.register("view-manga", {

app/renderer-process/custom-bindings/keybind.custom-binding.js

@@ -24,7 +24,7 @@ ko.bindingHandlers.keybind = {
             if (!_.includes([16, 17, 18, 91], event.keyCode)) {
                 letter = String.fromCharCode(event.keyCode);
             }
-            if (_.includes([37, 38, 39, 40], event.keyCode)) {
+            if (_.includes([37, 38, 39, 40, 8], event.keyCode)) {
                 switch (event.keyCode) {
                     case 37:
                         letter = "LEFT ARROW";
@@ -38,6 +38,9 @@ ko.bindingHandlers.keybind = {
                     case 40:
                         letter = "DOWN ARROW";
                         break;
+                    case 8:
+                        letter = "BACKSPACE";
+                        break;
                 }
             }
             if (letter) {

app/renderer-process/models/command.viewmodel.js

@@ -11,5 +11,6 @@ export const DefaultCommandHotkeys = {
     NEXT_PAGE: "RIGHT ARROW",
     PREVIOUS_PAGE: "LEFT ARROW",
     FOCUS_SEARCH: "CTRL + F",
-    OPEN_DIRECTORY: "CTRL + O"
+    OPEN_DIRECTORY: "CTRL + O",
+    BACK_TO_LIST: "BACKSPACE"
 }

app/renderer-process/models/main.viewmodel.js

@@ -4,6 +4,7 @@ import path from "path";
 import api from "renderer-process/common/api.js";
 import Pages from "renderer-process/common/pages.enum";
 import Folder from "renderer-process/models/folder.viewmodel.js";
+import { ViewOptions } from "renderer-process/components";
 import { DefaultCommandHotkeys } from "renderer-process/models/command.viewmodel";
 import { autoUpdater } from "renderer-process/common/auto-updater";
 import logger from "electron-log";
@@ -23,6 +24,7 @@ export default class ViewModel {
         this.selectedMangaPath = ko.observable(params.selectedMangaPath).extend({ notify: 'always' });
         this.currentViewMangaPage = ko.observable(0);
         this.viewMangaCommand = ko.observable(null).extend({ notify: 'always' });
+        this.imageFit = ko.observable(params.imageFit || ViewOptions.Default);
         this.pagination = ko.observable(0);
         this.scrollEnd = ko.observable(false).extend({ rateLimit: 500 });
         this.appCommands = ko.observable(_.extend({}, DefaultCommandHotkeys, params.appCommands));
@@ -49,6 +51,7 @@ export default class ViewModel {
                 isRecursive: this.isRecursive(),
                 currentPage: this.currentPage(),
                 previousPage: this.previousPage(),
+                imageFit: this.imageFit(),
                 appCommands: appCommands,
                 selectedMangaPath: selectedMangaPath,
                 isDetectUpdatesOnStart: this.isDetectUpdatesOnStart()
@@ -57,11 +60,7 @@ export default class ViewModel {
             rateLimit: 500
         });
 
-        // let sub2 = this.selectedManga.subscribe(function (manga) {
-        //     if (manga) {
-        //         this.selectedDirectory(null);
-        //     }
-        // }, this);
+
         let sub3 = this.selectedMangaPath.subscribe(function (path) {
             logger.debug("selectedMangaPath changed", path);
             if (path) {
@@ -72,7 +71,6 @@ export default class ViewModel {
         }, this);
 
         this.subscriptions.push(sub);
-        // this.subscriptions.push(sub2);
 
         if (this.isDetectUpdatesOnStart()) {
             logger.info("checking for updates..");

package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "start": "yarn install && yarn compile && electron ./app",
+    "start": "electron ./app",
     "build-renderer": "node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.dev.js  --progress --profile --colors --watch",
     "build-renderer-prod": "node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.dev.js",
     "postinstall": "electron-builder install-app-deps",