From 7d5af52d53d5d8e92d51ce992be7f7520f7c7c28 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Thu, 17 Jan 2019 22:29:11 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D1=80=D0=B5=D0=BA=D1=86=D0=B8=D1=8E=20=D0=BD=D0=B0=20=D0=BC?=
 =?UTF-8?q?=D1=8B=D1=88=D1=8C=20=D0=B8=20=D1=82=D0=B0=D1=87=D0=BF=D0=B0?=
 =?UTF-8?q?=D0=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Reader/TextPage/TextPage.vue   | 58 +++++++++++++++++--
 1 file changed, 54 insertions(+), 4 deletions(-)

diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue
index 16674d54..6e0aed38 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" @click="canvasClick"></canvas>
+        <canvas ref="canvas" class="canvas" @mousedown.prevent="onMouseDown" @touchstart.prevent="onTouchStart"></canvas>
     </div>
 </template>
 
@@ -279,6 +279,10 @@ class TextPage extends Vue {
         }
     }
 
+    doToolBarToggle() {
+        this.$emit('tool-bar-toggle');
+    }
+
     keyHook(event) {
         if (event.type == 'keydown') {
             switch (event.code) {
@@ -309,9 +313,55 @@ class TextPage extends Vue {
         }
     }
 
-    canvasClick(event) {
-        console.log(event);
-        this.$emit('tool-bar-toggle');
+    onTouchStart(event) {
+        if (event.touches.length == 1) {
+            this.onMouseDown(event.touches[0]);
+        }
+    }
+
+
+    onMouseDown(event) {
+        const mouseLegend = {
+            40: {30: 'PgUp', 100: 'PgDown'},
+            60: {40: 'Up', 60: 'Menu', 100: 'Down'},
+            100: {30: 'PgUp', 100: 'PgDown'}
+        };
+
+        const w = event.clientX/this.canvas.width*100;
+        const h = event.clientY/this.canvas.height*100;
+
+        let action = '';
+        loops: {
+            for (const x in mouseLegend) {
+                for (const y in mouseLegend[x]) {
+                    if (w < x && h < y) {
+                        action = mouseLegend[x][y];
+                        break loops;
+                    }
+                }
+            }
+        }
+
+        switch (action) {
+            case 'Down' ://Down
+                this.doDown();
+                break;
+            case 'Up' ://Up
+                this.doUp();
+                break;
+            case 'PgDown' ://PgDown
+                this.doPageDown();
+                break;
+            case 'PgUp' ://PgUp
+                this.doPageUp();
+                break;
+            case 'Menu' :
+                this.doToolBarToggle();
+                break;
+            default :
+                // Nothing
+        }
+
     }
 }
 //-----------------------------------------------------------------------------