Начата работа над SettingsPage

client/components/Reader/Reader.vue

@@ -41,7 +41,7 @@
                 </div>
 
                 <el-tooltip content="Настроить" :open-delay="1000" effect="light">
-                    <el-button ref="settings" class="tool-button" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>            
+                    <el-button ref="settings" class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>            
                 </el-tooltip>
             </div>
         </el-header>
@@ -56,9 +56,9 @@
                 ></component>
             </keep-alive>
 
-            <HistoryPage v-if="historyActive" ref="historyPage" @load-book="loadBook" @history-toggle="historyToggle"></HistoryPage>
             <SetPositionPage v-if="setPositionActive" ref="setPositionPage" @set-position-toggle="setPositionToggle" @book-pos-changed="bookPosChanged"></SetPositionPage>
-
+            <HistoryPage v-if="historyActive" ref="historyPage" @load-book="loadBook" @history-toggle="historyToggle"></HistoryPage>
+            <SettingsPage v-if="settingsActive" ref="settingsPage" @settings-toggle="settingsToggle"></SettingsPage>
         </el-main>
     </el-container>
 </template>
@@ -71,8 +71,9 @@ import LoaderPage from './LoaderPage/LoaderPage.vue';
 import TextPage from './TextPage/TextPage.vue';
 import ProgressPage from './ProgressPage/ProgressPage.vue';
 
-import HistoryPage from './HistoryPage/HistoryPage.vue';
 import SetPositionPage from './SetPositionPage/SetPositionPage.vue';
+import HistoryPage from './HistoryPage/HistoryPage.vue';
+import SettingsPage from './SettingsPage/SettingsPage.vue';
 
 import bookManager from './share/bookManager';
 import readerApi from '../../api/reader';
@@ -83,8 +84,10 @@ export default @Component({
         LoaderPage,
         TextPage,
         ProgressPage,
-        HistoryPage,
+
         SetPositionPage,
+        HistoryPage,
+        SettingsPage,
     },
     watch: {
         bookPos: function(newValue) {
@@ -115,11 +118,12 @@ class Reader extends Vue {
     progressActive = false;
     fullScreenActive = false;
 
+    setPositionActive = false;
     scrollingActive = false;
     searchActive = false;
     copyTextActive = false;
     historyActive = false;
-    setPositionActive = false;
+    settingsActive = false;
 
     bookPos = null;
     allowUrlParamBookPos = true;
@@ -232,8 +236,9 @@ class Reader extends Vue {
     }
 
     closeAllTextPages() {
-        this.historyActive = false;
         this.setPositionActive = false;
+        this.historyActive = false;
+        this.settingsActive = false;
     }
 
     loaderToggle() {
@@ -243,16 +248,6 @@ class Reader extends Vue {
         }
     }
 
-    historyToggle() {
-        this.historyActive = !this.historyActive;
-        if (this.historyActive) {
-            this.closeAllTextPages();
-            this.historyActive = true;
-        } else {
-            this.historyActive = false;
-        }
-    }
-
     setPositionToggle() {
         this.setPositionActive = !this.setPositionActive;
         if (this.setPositionActive && this.activePage == 'TextPage' && this.lastOpenedBook) {
@@ -268,6 +263,26 @@ class Reader extends Vue {
         }
     }
 
+    historyToggle() {
+        this.historyActive = !this.historyActive;
+        if (this.historyActive) {
+            this.closeAllTextPages();
+            this.historyActive = true;
+        } else {
+            this.historyActive = false;
+        }
+    }
+
+    settingsToggle() {
+        this.settingsActive = !this.settingsActive;
+        if (this.settingsActive) {
+            this.closeAllTextPages();
+            this.settingsActive = true;
+        } else {
+            this.settingsActive = false;
+        }
+    }
+
     buttonClick(button) {
         switch (button) {
             case 'loader':
@@ -276,17 +291,20 @@ class Reader extends Vue {
             case 'fullScreen':
                 this.fullScreenToggle();
                 break;
-            case 'history':
-                this.historyToggle();
-                break;
             case 'setPosition':
                 this.setPositionToggle();
                 break;                
+            case 'history':
+                this.historyToggle();
+                break;
             case 'refresh':
                 if (this.lastOpenedBook) {
                     this.loadBook({url: this.lastOpenedBook.url, force: true});
                 }
                 break;
+            case 'settings':
+                this.settingsToggle();
+                break;
         }
         this.$refs[button].$el.blur();
     }
@@ -304,6 +322,7 @@ class Reader extends Vue {
             case 'search':
             case 'copyText':
             case 'history':
+            case 'settings':
                 if (this[`${button}Active`])
                     classResult = classActive;
                 break;
@@ -486,6 +505,9 @@ class Reader extends Vue {
     keyHook(event) {
         if (this.$root.rootRoute == '/reader') {
             let handled = false;
+            if (!handled && this.settingsActive)
+                handled = this.$refs.settingsPage.keyHook(event);
+
             if (!handled && this.historyActive)
                 handled = this.$refs.historyPage.keyHook(event);
 
@@ -496,16 +518,21 @@ class Reader extends Vue {
                 handled = this.$refs.page.keyHook(event);
 
             if (!handled && event.type == 'keydown') {
-                switch (event.code) {
+                if (event.code == 'Escape')
-                    case 'Escape':
+                    this.loaderToggle();
-                        this.loaderToggle();
+
-                        break;
+                if (this.activePage == 'TextPage') {
-                    case 'KeyH':
+                    switch (event.code) {
-                        this.historyToggle();
+                        case 'KeyP':
-                        break;
+                            this.setPositionToggle();
-                    case 'KeyP':
+                            break;
-                        this.setPositionToggle();
+                        case 'KeyH':
-                        break;
+                            this.historyToggle();
+                            break;
+                        case 'KeyS':
+                            this.settingsToggle();
+                            break;
+                    }
                 }
             }
         }

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -0,0 +1,68 @@
+<template>
+    <div ref="main" class="main" @click="close">
+        <div class="mainWindow" @click.stop>
+            <Window @close="close">
+                <template slot="header">
+                    Настройки
+                </template>
+
+            </Window>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import Window from '../../share/Window.vue';
+
+export default @Component({
+    components: {
+        Window,
+    },
+})
+class SettingsPage extends Vue {
+    sliderValue = null;
+    sliderMax = null;
+
+    created() {
+        this.commit = this.$store.commit;
+        this.reader = this.$store.state.reader;
+    }
+
+    close() {
+        this.$emit('settings-toggle');
+    }
+
+    keyHook(event) {
+        if (event.type == 'keydown' && event.code == 'Escape') {
+            this.close();
+        }
+        return true;
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.main {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.mainWindow {
+    width: 100%;
+    max-width: 600px;
+    height: 70%;
+    display: flex;
+    position: relative;
+}
+</style>