From ec1477f0817d25884c96c7be42fbd300e73c999f Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 8 Feb 2019 21:09:25 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20Cl?=
 =?UTF-8?q?ickMapPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/ClickMapPage/ClickMapPage.vue      | 76 +++++++++++++++++++
 client/components/Reader/Reader.vue           | 14 ++++
 .../components/Reader/TextPage/TextPage.vue   |  2 +-
 client/components/Reader/share/clickMap.js    | 14 +++-
 4 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 client/components/Reader/ClickMapPage/ClickMapPage.vue

diff --git a/client/components/Reader/ClickMapPage/ClickMapPage.vue b/client/components/Reader/ClickMapPage/ClickMapPage.vue
new file mode 100644
index 00000000..48a74183
--- /dev/null
+++ b/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>
diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index b95583c2..fb95cc06 100644
--- a/client/components/Reader/Reader.vue
+++ b/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;
diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue
index 4ab196c8..5fc27fd8 100644
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/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;
 
diff --git a/client/components/Reader/share/clickMap.js b/client/components/Reader/share/clickMap.js
index 559a03e8..7212a2a5 100644
--- a/client/components/Reader/share/clickMap.js
+++ b/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;
\ No newline at end of file
+export const clickMapText = {
+    'PgUp': 'Страницу вверх',
+    'PgDown': 'Страницу вниз',
+    'Up': 'Строку вверх',
+    'Down': 'Строку вниз',
+    'Menu': 'Показать или скрыть панель',
+};