Добавил HotkeysHelpPage

This commit is contained in:
Book Pauk
2019-02-07 23:21:05 +07:00
parent eb1110709e
commit 9e012486ad
4 changed files with 129 additions and 8 deletions

View File

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

View File

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

View File

@@ -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>

View File

@@ -860,22 +860,77 @@ class TextPage extends Vue {
this.$emit('tool-bar-toggle'); 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) { keyHook(event) {
let result = false; let result = false;
if (event.type == 'keydown' && !event.ctrlKey && !event.altKey && !event.shiftKey) { if (event.type == 'keydown' && !event.ctrlKey && !event.altKey) {
result = true; result = true;
switch (event.code) { switch (event.code) {
case 'ArrowDown': case 'ArrowDown':
this.doDown(); if (event.shiftKey)
this.doScrollingSpeedUp();
else
this.doDown();
break; break;
case 'ArrowUp': case 'ArrowUp':
this.doUp(); if (event.shiftKey)
this.doScrollingSpeedDown();
else
this.doUp();
break; break;
case 'PageDown': case 'PageDown':
case 'ArrowRight': case 'ArrowRight':
case 'Space':
this.doPageDown(); this.doPageDown();
break; break;
case 'Space':
if (event.shiftKey)
this.doPageUp();
else
this.doPageDown();
break;
case 'PageUp': case 'PageUp':
case 'ArrowLeft': case 'ArrowLeft':
case 'Backspace': case 'Backspace':
@@ -887,6 +942,12 @@ class TextPage extends Vue {
case 'End': case 'End':
this.doEnd(); this.doEnd();
break; break;
case 'KeyA':
if (event.shiftKey)
this.doFontSizeDec();
else
this.doFontSizeInc();
break;
case 'Enter': case 'Enter':
case 'Backquote'://` case 'Backquote'://`
case 'KeyF': case 'KeyF':