Merge branch 'feature/lss' into develop

2019-11-06 20:17:25 +07:00
parent e002bebfbe b9aeb648d6
commit afa3fcb524
5 changed files with 118 additions and 32 deletions
--- a/client/components/Reader/HelpPage/HelpPage.vue
+++ b/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">
--- a/client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue
+++ b/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>

--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/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;
   }

 }
--- a/client/components/Reader/versionHistory.js
+++ b/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)',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "Liberama",
-  "version": "0.7.6",
+  "version": "0.7.7",
  "engines": {
    "node": ">=10.0.0"
  },