Добавил ClickMapPage

client/components/Reader/ClickMapPage/ClickMapPage.vue

@@ -0,0 +1,76 @@
+<template>
+    <div ref="page" class="page">
+        <div v-html="mapHtml"></div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import {sleep} from '../../../share/utils';
+import {clickMap, clickMapText} from '../share/clickMap';
+
+export default @Component({
+})
+class ClickMapPage extends Vue {
+    fontSize = '200%';
+
+    created() {
+    }
+
+    get mapHtml() {
+        let result = '<div style="display: flex; width: 100%; height: 100%; position: absolute;">';
+
+        let px = 0;
+        for (const x in clickMap) {
+            let div = `<div style="display: flex; flex-direction: column; width: ${x - px}%;">`;
+
+            let py = 0;
+            for (const y in clickMap[x]) {
+                const text = clickMapText[clickMap[x][y]].split(' ');
+                let divText = '';
+                for (const t of text)
+                    divText += `<span>${t}</span>`;
+                div += `<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; ` +
+                    `height: ${y - py}%; border: 1px solid white; font-size: ${this.fontSize}">${divText}</div>`;
+                py = y;
+            }
+
+            div += '</div>';
+            px = x;
+            result += div;
+        }
+
+        result += '</div>';
+        return result;
+    }
+
+    async slowDisappear() {
+        const page = this.$refs.page;
+        page.style.animation = 'click-map-disappear 5s ease-in 1';
+        await sleep(5000);
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 45;
+    background-color: rgba(0, 0, 0, 0.9);
+    color: white;
+    display: flex;
+}
+
+</style>
+<style>
+@keyframes click-map-disappear {
+  0%   { opacity: 0.9; }
+  100% { opacity: 0; }
+}
+</style>

client/components/Reader/Reader.vue

@@ -71,6 +71,7 @@
             <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>
+            <ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage>
         </el-main>
     </el-container>
 </template>
@@ -89,6 +90,7 @@ 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 ClickMapPage from './ClickMapPage/ClickMapPage.vue';
 
 import bookManager from './share/bookManager';
 import readerApi from '../../api/reader';
@@ -107,6 +109,7 @@ export default @Component({
         HistoryPage,
         SettingsPage,
         HelpPage,
+        ClickMapPage,
     },
     watch: {
         bookPos: function(newValue) {
@@ -147,6 +150,7 @@ class Reader extends Vue {
     historyActive = false;
     settingsActive = false;
     helpActive = false;
+    clickMapActive = false;
 
     bookPos = null;
     allowUrlParamBookPos = false;
@@ -517,6 +521,12 @@ class Reader extends Vue {
         return classResult;
     }
 
+    async showClickMapPage() {
+        this.clickMapActive = true;
+        await this.$refs.clickMapPage.slowDisappear();
+        this.clickMapActive = false;
+    }
+
     get activePage() {
         let result = '';
 
@@ -608,6 +618,8 @@ class Reader extends Vue {
                         this.loaderActive = false;
                         progress.hide(); this.progressActive = false;
                         this.blinkCachedLoadMessage();
+
+                        await this.showClickMapPage();
                         return;
                     }
 
@@ -654,6 +666,8 @@ class Reader extends Vue {
                     this.blinkCachedLoadMessage();
                 } else
                     this.stopBlink = true;
+
+                await this.showClickMapPage();
             } catch (e) {
                 progress.hide(); this.progressActive = false;
                 this.loaderActive = true;

client/components/Reader/TextPage/TextPage.vue

@@ -39,7 +39,7 @@ import {sleep} from '../../../share/utils';
 import bookManager from '../share/bookManager';
 import DrawHelper from './DrawHelper';
 import rstore from '../../../store/modules/reader';
-import clickMap from '../share/clickMap';
+import {clickMap} from '../share/clickMap';
 
 const minLayoutWidth = 100;
 

client/components/Reader/share/clickMap.js

@@ -1,7 +1,13 @@
-const clickMap = {
-    40: {30: 'PgUp', 100: 'PgDown'},
-    60: {40: 'Up', 60: 'Menu', 100: 'Down'},
+export const clickMap = {
+    33: {30: 'PgUp', 100: 'PgDown'},
+    67: {30: 'Up', 70: 'Menu', 100: 'Down'},
     100: {30: 'PgUp', 100: 'PgDown'}
 };
 
-export default clickMap;
+export const clickMapText = {
+    'PgUp': 'Страницу вверх',
+    'PgDown': 'Страницу вниз',
+    'Up': 'Строку вверх',
+    'Down': 'Строку вниз',
+    'Menu': 'Показать или скрыть панель',
+};