Добавил возможность переключения fullScreen

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;
     }

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;
             }
         }
     }

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;
     },