From 26db83771ccfb1b3d162b53ca6798fd4c4efe01b Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 25 Jan 2019 21:49:19 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20fullScreen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Reader/Reader.vue           | 45 +++++++++++++++----
 .../components/Reader/TextPage/TextPage.vue   | 15 +++++--
 client/store/modules/reader.js                |  4 --
 3 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index a42ff8a3..1e599db2 100644
--- a/client/components/Reader/Reader.vue
+++ b/client/components/Reader/Reader.vue
@@ -90,12 +90,14 @@ export default @Component({
             if (newValue !== '' && newValue !== this.lastOpenedBook.url) {
                 this.loadBook({url: newValue, bookPos: this.routeParamPos});
             }
-        }
+        },
     },
 })
 class Reader extends Vue {
     loaderActive = false;
     progressActive = false;
+    fullScreenActive = false;
+
     bookPos = null;
     allowUrlParamBookPos = true;
 
@@ -161,10 +163,6 @@ class Reader extends Vue {
         this.updateRoute();
     }
 
-    get fullScreenActive() {
-        return this.reader.fullScreenActive;
-    }
-
     get toolBarActive() {
         return this.reader.toolBarActive;
     }
@@ -178,11 +176,37 @@ class Reader extends Vue {
         this.$root.$emit('resize');
     }
 
+    fullScreenToggle(newValue) {
+        this.fullScreenActive = !this.fullScreenActive;
+        if (this.fullScreenActive) {
+            const element = document.documentElement;
+            if (element.requestFullscreen) {
+                element.requestFullscreen();
+            } else if (element.webkitrequestFullscreen) {
+                element.webkitRequestFullscreen();
+            } else if (element.mozRequestFullscreen) {
+                element.mozRequestFullScreen();
+            }
+        } else {
+            if (document.cancelFullScreen) {
+                document.cancelFullScreen();
+            } else if (document.mozCancelFullScreen) {
+                document.mozCancelFullScreen();
+            } else if (document.webkitCancelFullScreen) {
+                document.webkitCancelFullScreen();
+            }
+        }
+    }
+
     buttonClick(button) {
         switch (button) {
-            case 'loader': this.loaderActive = !this.loaderActive; break;
-            case 'fullScreen': this.commit('reader/setFullScreenActive', !this.fullScreenActive); break;
-            case 'refresh': 
+            case 'loader':
+                this.loaderActive = !this.loaderActive;
+                break;
+            case 'fullScreen':
+                this.fullScreenToggle();
+                break;
+            case 'refresh':
                 if (this.lastOpenedBook) {
                     this.loadBook({url: this.lastOpenedBook.url, force: true});
                 }
@@ -241,6 +265,11 @@ class Reader extends Vue {
             });
         }
 
+        this.$nextTick(() => {
+            if (this.$refs.page)
+                this.$refs.page.fullScreenToggle = this.fullScreenToggle;
+        });
+
         this.lastActivePage = result;
         return result;
     }
diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue
index 5d060b94..a1eb5d44 100644
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/client/components/Reader/TextPage/TextPage.vue
@@ -454,9 +454,10 @@ class TextPage extends Vue {
             if (this.keepLastToFirst)
                 i--;
             i = (i > lines.length - 1 ? lines.length - 1 : i);
-
-            this.statusBar = this.drawHelper.drawStatusBar(this.statusBarTop, this.statusBarHeight, 
-                lines[i].end, this.parsed.textLength, this.title);
+            if (i >= 0) {
+                this.statusBar = this.drawHelper.drawStatusBar(this.statusBarTop, this.statusBarHeight, 
+                    lines[i].end, this.parsed.textLength, this.title);
+            }
         }
     }
 
@@ -567,6 +568,7 @@ class TextPage extends Vue {
     }
 
     keyHook(event) {
+        //console.log(event.code);
         if (event.type == 'keydown') {
             switch (event.code) {
                 case 'ArrowDown':
@@ -577,7 +579,6 @@ class TextPage extends Vue {
                     break;
                 case 'PageDown':
                 case 'ArrowRight':
-                case 'Enter':
                 case 'Space':
                     this.doPageDown();
                     break;
@@ -592,6 +593,12 @@ class TextPage extends Vue {
                 case 'End':
                     this.doEnd();
                     break;
+                case 'Enter':
+                case 'Backquote'://`
+                case 'KeyF':
+                    if (this.fullScreenToggle)
+                        this.fullScreenToggle();
+                    break;
             }
         }
     }
diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js
index e99bc7be..33087e66 100644
--- a/client/store/modules/reader.js
+++ b/client/store/modules/reader.js
@@ -2,7 +2,6 @@ import Vue from 'vue';
 
 // initial state
 const state = {
-    fullScreenActive: false,
     toolBarActive: true,
     openedBook: {},
 };
@@ -28,9 +27,6 @@ const actions = {};
 
 // mutations
 const mutations = {
-    setFullScreenActive(state, value) {
-        state.fullScreenActive = value;
-    },
     setToolBarActive(state, value) {
         state.toolBarActive = value;
     },