Эх сурвалжийг харах

Добавил HotkeysHelpPage

Book Pauk 6 жил өмнө
parent
commit
9e012486ad

+ 3 - 4
client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue

@@ -5,7 +5,7 @@
             <li>загрузка любой страницы интернета</li>
             <li>изменение цвета фона, текста, размер и тип шрифта и прочее</li>
             <li>установка и запоминание текущей позиции и настроек в браузере (в будущем планируется сохранение и на сервер)</li>
-            <li>кеширование файлов книг на клиенте и на сервере</li>
+            <li>кэширование файлов книг на клиенте и на сервере</li>
             <li>открытие книг с локального диска</li>
             <li>плавный скроллинг текста</li>
             <li>анимация перелистывания (скоро)</li>
@@ -37,9 +37,7 @@ export default @Component({
         Window,
     },
 })
-class HelpPage extends Vue {
-    selectedTab = null;
-
+class CommonHelpPage extends Vue {
     created() {
         this.config = this.$store.state.config;
     }
@@ -63,6 +61,7 @@ class HelpPage extends Vue {
     padding: 15px;
     overflow-y: auto;
     font-size: 150%;
+    line-height: 130%;
 }
 
 h4 {

+ 3 - 0
client/components/Reader/HelpPage/HelpPage.vue

@@ -11,6 +11,7 @@
                         <CommonHelpPage></CommonHelpPage>
                     </el-tab-pane>
                     <el-tab-pane label="Клавиатура">
+                        <HotkeysHelpPage></HotkeysHelpPage>
                     </el-tab-pane>
                     <el-tab-pane label="Мышь/тачпад">
                     </el-tab-pane>
@@ -30,11 +31,13 @@ import Component from 'vue-class-component';
 
 import Window from '../../share/Window.vue';
 import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
+import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
 
 export default @Component({
     components: {
         Window,
         CommonHelpPage,
+        HotkeysHelpPage,
     },
 })
 class HelpPage extends Vue {

+ 58 - 0
client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="page">
+        <h4>Управление с помощью горячих клавиш:</h4>
+        <ul>
+            <li><b>Escape</b> - показать/скрыть страницу загрузки</li>
+            <li><b>Tab</b> - показать/скрыть панель управления</li>
+            <li><b>PageUp, Left, Shift+Space, Backspace</b> - страницу назад</li>
+            <li><b>PageDown, Right, Space</b> - страницу вперед</li>
+            <li><b>Home</b> - в начало книги</li>
+            <li><b>End</b> - в конец книги</li>
+            <li><b>Up</b> - строчку назад</li>
+            <li><b>Down</b> - строчку вперёд</li>
+            <li><b>A, Shift+A</b> - изменить размер шрифта</li>
+            <li><b>Enter, F, F11, ` (апостроф)</b> - вкл./выкл. полный экран</li>
+            <li><b>Z</b> - вкл./выкл. плавный скроллинг текста</li>
+            <li><b>Shift+Down/Shift+Up</b> - увеличить/уменьшить скорость скроллинга
+            <li><b>P</b> - установить страницу</li>
+            <li><b>Ctrl+F</b> - найти в тексте</li>            
+            <li><b>Ctrl+C</b> - скопировать текст со страницы</li>            
+            <li><b>R</b> - принудительно обновить книгу в обход кэша</li>
+            <li><b>H</b> - открыть недавние</li>
+            <li><b>S</b> - открыть окно настроек</li>
+        </ul>
+    </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 HotkeysHelpPage extends Vue {
+    created() {
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.page {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+    font-size: 150%;
+    line-height: 130%;
+}
+
+h4 {
+    margin: 0;
+}
+</style>

+ 65 - 4
client/components/Reader/TextPage/TextPage.vue

@@ -860,22 +860,77 @@ class TextPage extends Vue {
         this.$emit('tool-bar-toggle');
     }
 
+    async doFontSizeInc() {
+        if (!this.settingsChanging) {
+            this.settingsChanging = true;
+            const newSize = (this.settings.fontSize + 1 < 100 ? this.settings.fontSize + 1 : 100);
+            const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
+            this.commit('reader/setSettings', newSettings);
+            await sleep(50);
+            this.settingsChanging = false;
+        }
+    }
+
+    async doFontSizeDec() {
+        if (!this.settingsChanging) {
+            this.settingsChanging = true;
+            const newSize = (this.settings.fontSize - 1 > 5 ? this.settings.fontSize - 1 : 5);
+            const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
+            this.commit('reader/setSettings', newSettings);
+            await sleep(50);
+            this.settingsChanging = false;
+        }
+    }
+
+    async doScrollingSpeedUp() {
+        if (!this.settingsChanging) {
+            this.settingsChanging = true;
+            const newDelay = (this.settings.scrollingDelay - 50 > 1 ? this.settings.scrollingDelay - 50 : 1);
+            const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
+            this.commit('reader/setSettings', newSettings);
+            await sleep(50);
+            this.settingsChanging = false;
+        }
+    }
+
+    async doScrollingSpeedDown() {
+        if (!this.settingsChanging) {
+            this.settingsChanging = true;
+            const newDelay = (this.settings.scrollingDelay + 50 < 10000 ? this.settings.scrollingDelay + 50 : 10000);
+            const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
+            this.commit('reader/setSettings', newSettings);
+            await sleep(50);
+            this.settingsChanging = false;
+        }
+    }
+
     keyHook(event) {
         let result = false;
-        if (event.type == 'keydown' && !event.ctrlKey && !event.altKey && !event.shiftKey) {
+        if (event.type == 'keydown' && !event.ctrlKey && !event.altKey) {
             result = true;
             switch (event.code) {
                 case 'ArrowDown':
-                    this.doDown();
+                    if (event.shiftKey)
+                        this.doScrollingSpeedUp();
+                    else
+                        this.doDown();
                     break;
                 case 'ArrowUp':
-                    this.doUp();
+                    if (event.shiftKey)
+                        this.doScrollingSpeedDown();
+                    else
+                        this.doUp();
                     break;
                 case 'PageDown':
                 case 'ArrowRight':
-                case 'Space':
                     this.doPageDown();
                     break;
+                case 'Space':
+                    if (event.shiftKey)
+                        this.doPageUp();
+                    else
+                        this.doPageDown();
+                    break;
                 case 'PageUp':
                 case 'ArrowLeft':
                 case 'Backspace':
@@ -887,6 +942,12 @@ class TextPage extends Vue {
                 case 'End':
                     this.doEnd();
                     break;
+                case 'KeyA':
+                    if (event.shiftKey)
+                        this.doFontSizeDec();
+                    else
+                        this.doFontSizeInc();
+                    break;
                 case 'Enter':
                 case 'Backquote'://`
                 case 'KeyF':