From 0413fa889d2bc97ffc560ba3aaf5081597254d5f Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Thu, 17 Jan 2019 21:42:48 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=8C=20=D1=81=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D1=8F=20=D1=82?=
 =?UTF-8?q?=D1=83=D0=BB=D0=B1=D0=B0=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Reader/Reader.vue            | 12 ++++++++++--
 client/components/Reader/TextPage/TextPage.vue |  7 ++++++-
 client/store/modules/reader.js                 |  4 ++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index 0ac88a79..3417368a 100644
--- a/client/components/Reader/Reader.vue
+++ b/client/components/Reader/Reader.vue
@@ -1,6 +1,6 @@
 <template>
     <el-container>
-        <el-header height='50px'>
+        <el-header v-show="toolBarActive" height='50px'>
             <div class="header">
                 <el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
                     <el-button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')"><i class="el-icon-back"></i></el-button>
@@ -46,7 +46,7 @@
 
         <el-main>
             <keep-alive>
-                <component ref="page" :is="pageActive" @load-book="loadBook" @book-pos-changed="bookPosChanged"></component>
+                <component ref="page" :is="pageActive" @load-book="loadBook" @book-pos-changed="bookPosChanged" @tool-bar-toggle="toolBarToggle"></component>
             </keep-alive>
         </el-main>
     </el-container>
@@ -163,10 +163,18 @@ class Reader extends Vue {
         return this.reader.fullScreenActive;
     }
 
+    get toolBarActive() {
+        return this.reader.toolBarActive;
+    }
+
     get lastOpenedBook() {
         return this.$store.getters['reader/lastOpenedBook'];
     }
 
+    toolBarToggle() {
+        this.commit('reader/setToolBarActive', !this.toolBarActive);
+    }
+
     buttonClick(button) {
         switch (button) {
             case 'loader': this.loaderActive = !this.loaderActive; break;
diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue
index d896d3eb..215023e0 100644
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/client/components/Reader/TextPage/TextPage.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="main" class="main">
-        <canvas ref="canvas" class="canvas"></canvas>
+        <canvas ref="canvas" class="canvas" @click="canvasClick"></canvas>
     </div>
 </template>
 
@@ -306,6 +306,11 @@ class TextPage extends Vue {
             }
         }
     }
+
+    canvasClick(event) {
+        console.log(event);
+        this.$emit('tool-bar-toggle');
+    }
 }
 //-----------------------------------------------------------------------------
 </script>
diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js
index e38f6304..e99bc7be 100644
--- a/client/store/modules/reader.js
+++ b/client/store/modules/reader.js
@@ -3,6 +3,7 @@ import Vue from 'vue';
 // initial state
 const state = {
     fullScreenActive: false,
+    toolBarActive: true,
     openedBook: {},
 };
 
@@ -30,6 +31,9 @@ const mutations = {
     setFullScreenActive(state, value) {
         state.fullScreenActive = value;
     },
+    setToolBarActive(state, value) {
+        state.toolBarActive = value;
+    },
     setOpenedBook(state, value) {
         Vue.set(state.openedBook, value.key, Object.assign({}, value, {touchTime: Date.now()}));
     },