Добавлены жесты для тачскрина

client/components/Reader/HelpPage/HelpPage.vue

@@ -11,7 +11,7 @@
             <el-tab-pane label="Клавиатура">
                 <HotkeysHelpPage></HotkeysHelpPage>
             </el-tab-pane>
-            <el-tab-pane label="Мышь/тачпад">
+            <el-tab-pane label="Мышь/тачскрин">
                 <MouseHelpPage></MouseHelpPage>
             </el-tab-pane>
             <el-tab-pane label="История версий" name="releases">

client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue

@@ -1,15 +1,25 @@
 <template>
     <div class="page">
-        <h4>Управление с помощью мыши/тачпада:</h4>
+        <h4>Управление с помощью мыши/тачскрина:</h4>
         <ul>
             <li><b>ЛКМ/ТАЧ</b> по экрану в одну из областей - активация действия:</li>
                 <div class="click-map-page">
                     <ClickMapPage ref="clickMapPage"></ClickMapPage>
                 </div>
+        
             <li><b>ПКМ</b> - показать/скрыть панель управления</li>
             <li><b>СКМ</b> - вкл./выкл. плавный скроллинг текста</li>
+            <br>
+            <li>Жесты для тачскрина:</li>
+            <ul>
+                <li style="list-style-type: square">от центра вверх: на весь экран</li>
+                <li style="list-style-type: square">от центра вниз: плавный скроллинг</li>
+                <li style="list-style-type: square">от центра вправо: увеличить скорость скроллинга</li>
+                <li style="list-style-type: square">от центра влево: уменьшить скорость скроллинга</li>
+            </ul>
+
         </ul>
-        * Для управления с помощью мыши/тачпада необходимо установить галочку "Включить управление кликом" в настройках
+        * Для управления с помощью мыши/тачскрина необходимо установить галочку "Включить управление кликом" в настройках
     </div>
 </template>
 

client/components/Reader/TextPage/TextPage.vue

@@ -19,7 +19,7 @@
         </div>
         <div v-show="clickControl" ref="layoutEvents" class="layout events" @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp"
             @wheel.prevent.stop="onMouseWheel"
-            @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchcancel.prevent.stop="onTouchCancel"
+            @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove" @touchcancel.prevent.stop="onTouchCancel"
             oncontextmenu="return false;">
             <div v-show="showStatusBar" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
                 @click.prevent.stop="onStatusBarClick"></div>
@@ -877,6 +877,14 @@ class TextPage extends Vue {
         this.$emit('tool-bar-toggle');
     }
 
+    doScrollingToggle() {
+        this.$emit('scrolling-toggle');
+    }
+
+    doFullScreenToggle() {
+        this.$emit('full-screen-toogle');
+    }
+
     async doFontSizeInc() {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
@@ -968,7 +976,7 @@ class TextPage extends Vue {
                 case 'Enter':
                 case 'Backquote'://`
                 case 'KeyF':
-                    this.$emit('full-screen-toogle');
+                    this.doFullScreenToggle();
                     break;
                 case 'Tab':
                 case 'KeyQ':
@@ -1009,22 +1017,64 @@ class TextPage extends Vue {
         if (!this.$isMobileDevice)
             return;
         this.endClickRepeat();
+
         if (event.touches.length == 1) {
             const touch = event.touches[0];
             const rect = event.target.getBoundingClientRect();
             const x = touch.pageX - rect.left;
             const y = touch.pageY - rect.top;
-            if (this.handleClick(x, y)) {
-                this.repDoing = true;
-                this.debouncedStartClickRepeat(x, y);
+            const hc = this.handleClick(x, y, new Set(['Menu']));
+            if (hc) {
+                if (hc != 'Menu') {
+                    this.repDoing = true;
+                    this.debouncedStartClickRepeat(x, y);
+                } else {
+                    this.startTouch = {x, y};
+                }
             }
         }
     }
 
-    onTouchEnd() {
+    onTouchMove(event) {
+        if (this.startTouch) {
+            event.preventDefault();
+        }
+    }
+
+    onTouchEnd(event) {
         if (!this.$isMobileDevice)
             return;
         this.endClickRepeat();
+
+        if (event.changedTouches.length == 1) {
+            const touch = event.changedTouches[0];
+            const rect = event.target.getBoundingClientRect();
+            const x = touch.pageX - rect.left;
+            const y = touch.pageY - rect.top;
+            if (this.startTouch) {
+                const dy = this.startTouch.y - y;
+                const dx = this.startTouch.x - x;
+                const moveDelta = 30;
+                const touchDelta = 15;
+                if (dy > 0 && Math.abs(dy) >= moveDelta && Math.abs(dy) > Math.abs(dx)) {
+                    //движение вверх
+                    this.doFullScreenToggle();
+                } else if (dy < 0 && Math.abs(dy) >= moveDelta && Math.abs(dy) > Math.abs(dx)) {
+                    //движение вниз
+                    this.doScrollingToggle();
+                } else if (dx > 0 && Math.abs(dx) >= moveDelta && Math.abs(dy) < Math.abs(dx)) {
+                    //движение влево
+                    this.doScrollingSpeedDown();
+                } else if (dx < 0 && Math.abs(dx) >= moveDelta && Math.abs(dy) < Math.abs(dx)) {
+                    //движение вправо
+                    this.doScrollingSpeedUp();
+                } else if (Math.abs(dy) < touchDelta && Math.abs(dx) < touchDelta) {
+                    this.doToolBarToggle();
+                }
+
+                this.startTouch = null;
+            }
+        }
     }
 
     onTouchCancel() {
@@ -1038,12 +1088,13 @@ class TextPage extends Vue {
             return;
         this.endClickRepeat();
         if (event.button == 0) {
-            if (this.handleClick(event.offsetX, event.offsetY)) {
+            const hc = this.handleClick(event.offsetX, event.offsetY);
+            if (hc && hc != 'Menu') {
                 this.repDoing = true;
                 this.debouncedStartClickRepeat(event.offsetX, event.offsetY);
             }
         } else if (event.button == 1) {
-            this.$emit('scrolling-toggle');
+            this.doScrollingToggle();
         } else if (event.button == 2) {
             this.doToolBarToggle();
         }
@@ -1074,7 +1125,7 @@ class TextPage extends Vue {
         }
     }
 
-    handleClick(pointX, pointY) {
+    getClickAction(pointX, pointY) {
         const w = pointX/this.realWidth*100;
         const h = pointY/this.realHeight*100;
 
@@ -1090,27 +1141,35 @@ class TextPage extends Vue {
             }
         }
 
-        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
+        return action;
+    }
+
+    handleClick(pointX, pointY, exclude) {
+        const action = this.getClickAction(pointX, pointY);
+
+        if (!exclude || !exclude.has(action)) {
+            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
+            }
         }
 
-        return (action && action != 'Menu');
+        return action;
    }
 
 }

client/components/Reader/versionHistory.js

@@ -1,4 +1,21 @@
 export const versionHistory = [
+{
+    showUntil: '2019-11-10',
+    header: '0.7.7 (2019-11-06)',
+    content:
+`
+<ul>
+    <li>добавлены следующие жесты для тачскрина (только при включенной опции "управление кликом"):</li>
+    <ul>
+        <li style="list-style-type: square">от центра вверх: на весь экран</li>
+        <li style="list-style-type: square">от центра вниз: плавный скроллинг</li>
+        <li style="list-style-type: square">от центра вправо: увеличить скорость скроллинга</li>
+        <li style="list-style-type: square">от центра влево: уменьшить скорость скроллинга</li>
+    </ul>
+</ul>
+`
+},
+
 {
     showUntil: '2019-10-29',
     header: '0.7.6 (2019-10-30)',