Добавил HotkeysHelpPage
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
@@ -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':
|
||||
|
||||
Reference in New Issue
Block a user