Работа над HelpPage

client/components/App.vue

@@ -263,6 +263,13 @@ body, html, #app {
     font: normal 12pt ReaderDefault;
 }
 
+.el-tabs__content {
+    flex: 1;
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
+}
+
 @font-face {
   font-family: 'ReaderDefault';
   src: url('fonts/reader-default.woff') format('woff'),

client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue

@@ -0,0 +1,70 @@
+<template>
+    <div class="page">
+        <h4>Возможности читалки:</h4>
+        <ul>
+            <li>загрузка любой страницы интернета</li>
+            <li>изменение цвета фона, текста, размер и тип шрифта и прочее</li>
+            <li>установка и запоминание текущей позиции и настроек в браузере (в будущем планируется сохранение и на сервер)</li>
+            <li>кеширование файлов книг на клиенте и на сервере</li>
+            <li>открытие книг с локального диска</li>
+            <li>плавный скроллинг текста</li>
+            <li>анимация перелистывания (скоро)</li>
+            <li>поиск по тексту и копирование фрагмента</li>
+            <li>запоминание недавних книг, скачивание книги из читалки в формате fb2</li>
+            <li>управление кликом и с клавиатуры</li>
+            <li>подключение к интернету не обязательно для чтения книги после ее загрузки</li>
+            <li>регистрация не требуется</li>
+        </ul>
+
+        <p>В качестве URL можно задавать html-страничку с книгой, либо прямую ссылку 
+        на файл из онлайн-библиотеки (например, скопировав адрес ссылки или кнопки "скачать fb2").</p>
+        <p>Поддерживаемые форматы: <strong>html, txt, fb2, fb2.zip</strong></p>
+
+        <div v-html="automationHtml"></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 HelpPage extends Vue {
+    selectedTab = null;
+
+    created() {
+        this.config = this.$store.state.config;
+    }
+
+    get automationHtml() {
+        if (this.config.mode == 'omnireader') {
+            return `<p>Вы можете добавить в свой браузер закладку, указав в ее свойствах вместо адреса следующий код:
+                    <br><strong>javascript:location.href='http://omnireader.ru/?url='+location.href;</strong>
+                    <br>Тогда, нажав на получившуюся кнопку на любой странице интернета, вы автоматически откроете ее в Omni Reader.</p>`;
+        } else {
+            return '';
+        }
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.page {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+    font-size: 150%;
+}
+
+h4 {
+    margin: 0;
+}
+</style>

client/components/Reader/HelpPage/HelpPage.vue

@@ -0,0 +1,85 @@
+<template>
+    <div ref="main" class="main" @click="close">
+        <div class="mainWindow" @click.stop>
+            <Window @close="close">
+                <template slot="header">
+                    Справка
+                </template>
+
+                <el-tabs type="border-card" v-model="selectedTab">
+                    <el-tab-pane class="tab" label="Общее">
+                        <CommonHelpPage></CommonHelpPage>
+                    </el-tab-pane>
+                    <el-tab-pane label="Клавиатура">
+                    </el-tab-pane>
+                    <el-tab-pane label="Мышь">
+                    </el-tab-pane>
+                    <el-tab-pane label="Донат">                        
+                    </el-tab-pane>
+
+                </el-tabs>
+            </Window>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import Window from '../../share/Window.vue';
+import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
+
+export default @Component({
+    components: {
+        Window,
+        CommonHelpPage,
+    },
+})
+class HelpPage extends Vue {
+    selectedTab = null;
+
+    close() {
+        this.$emit('help-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: 40;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.mainWindow {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+.el-tabs {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.el-tab-pane {
+    flex: 1;
+    display: flex;
+}
+</style>

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -78,6 +78,7 @@ class LoaderPage extends Vue {
     }
 
     openHelp() {
+        this.$emit('help-toggle');
     }
 
     openDonate() {

client/components/Reader/Reader.vue

@@ -56,6 +56,7 @@
                     @full-screen-toogle="fullScreenToggle"
                     @stop-scrolling="stopScrolling"
                     @scrolling-toggle="scrollingToggle"
+                    @help-toggle="helpToggle"
                 ></component>
             </keep-alive>
 
@@ -69,6 +70,7 @@
             <CopyTextPage v-if="copyTextActive" ref="copyTextPage" @copy-text-toggle="copyTextToggle"></CopyTextPage>            
             <HistoryPage v-if="historyActive" ref="historyPage" @load-book="loadBook" @history-toggle="historyToggle"></HistoryPage>
             <SettingsPage v-if="settingsActive" ref="settingsPage" @settings-toggle="settingsToggle"></SettingsPage>
+            <HelpPage v-if="helpActive" ref="helpPage" @help-toggle="helpToggle"></HelpPage>
         </el-main>
     </el-container>
 </template>
@@ -86,6 +88,7 @@ import SearchPage from './SearchPage/SearchPage.vue';
 import CopyTextPage from './CopyTextPage/CopyTextPage.vue';
 import HistoryPage from './HistoryPage/HistoryPage.vue';
 import SettingsPage from './SettingsPage/SettingsPage.vue';
+import HelpPage from './HelpPage/HelpPage.vue';
 
 import bookManager from './share/bookManager';
 import readerApi from '../../api/reader';
@@ -103,6 +106,7 @@ export default @Component({
         CopyTextPage,
         HistoryPage,
         SettingsPage,
+        HelpPage,
     },
     watch: {
         bookPos: function(newValue) {
@@ -142,6 +146,7 @@ class Reader extends Vue {
     copyTextActive = false;
     historyActive = false;
     settingsActive = false;
+    helpActive = false;
 
     bookPos = null;
     allowUrlParamBookPos = false;
@@ -298,6 +303,7 @@ class Reader extends Vue {
         this.settingsActive = false;
         this.stopScrolling();
         this.stopSearch();
+        this.helpActive = false;
     }
 
     loaderToggle() {
@@ -405,6 +411,14 @@ class Reader extends Vue {
         }
     }
 
+    helpToggle() {
+        this.helpActive = !this.helpActive;
+        if (this.helpActive) {
+            this.closeAllTextPages();
+            this.helpActive = true;
+        }
+    }
+
     buttonClick(button) {
         switch (button) {
             case 'loader':
@@ -699,6 +713,9 @@ class Reader extends Vue {
     keyHook(event) {
         if (this.$root.rootRoute == '/reader') {
             let handled = false;
+            if (!handled && this.helpActive)
+                handled = this.$refs.helpPage.keyHook(event);
+
             if (!handled && this.settingsActive)
                 handled = this.$refs.settingsPage.keyHook(event);