Добавлен компонент SetPositionPage - установка позиции в тексте

client/components/Reader/Reader.vue

@@ -54,6 +54,8 @@
             </keep-alive>
 
             <HistoryPage v-if="historyActive" ref="historyPage" @load-book="loadBook" @history-toggle="historyToggle"></HistoryPage>
+            <SetPositionPage v-if="setPositionActive" ref="setPositionPage" @set-position-toggle="setPositionToggle" @book-pos-changed="bookPosChanged"></SetPositionPage>
+
         </el-main>
     </el-container>
 </template>
@@ -63,10 +65,12 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import LoaderPage from './LoaderPage/LoaderPage.vue';
-import HistoryPage from './HistoryPage/HistoryPage.vue';
 import TextPage from './TextPage/TextPage.vue';
 import ProgressPage from './ProgressPage/ProgressPage.vue';
 
+import HistoryPage from './HistoryPage/HistoryPage.vue';
+import SetPositionPage from './SetPositionPage/SetPositionPage.vue';
+
 import bookManager from './share/bookManager';
 import readerApi from '../../api/reader';
 import {sleep} from '../../share/utils';
@@ -74,9 +78,10 @@ import {sleep} from '../../share/utils';
 export default @Component({
     components: {
         LoaderPage,
-        HistoryPage,
         TextPage,
-        ProgressPage
+        ProgressPage,
+        HistoryPage,
+        SetPositionPage,
     },
     watch: {
         bookPos: function(newValue) {
@@ -104,11 +109,12 @@ export default @Component({
 })
 class Reader extends Vue {
     loaderActive = false;
-    historyActive = false;
-
     progressActive = false;
     fullScreenActive = false;
 
+    historyActive = false;
+    setPositionActive = false;
+
     bookPos = null;
     allowUrlParamBookPos = true;
     showRefreshIcon = true;
@@ -122,7 +128,7 @@ class Reader extends Vue {
 
         this.lastActivePage = false;
 
-        document.addEventListener('fullscreenchange', (event) => {
+        document.addEventListener('fullscreenchange', () => {
             this.fullScreenActive = (document.fullscreenElement !== null);
         });
     }
@@ -175,7 +181,8 @@ class Reader extends Vue {
     }
 
     bookPosChanged(event) {
-        this.bookPosSeen = event.bookPosSeen;
+        if (event.bookPosSeen !== undefined)
+            this.bookPosSeen = event.bookPosSeen;
         this.bookPos = event.bookPos;
         this.updateRoute();
     }
@@ -223,17 +230,30 @@ class Reader extends Vue {
         this.historyActive = !this.historyActive;
     }
 
+    setPositionToggle() {
+        this.setPositionActive = !this.setPositionActive;
+        if (this.setPositionActive) {
+            this.$nextTick(() => {
+                this.$refs.setPositionPage.sliderMax = this.lastOpenedBook.textLength - 1;
+                this.$refs.setPositionPage.sliderValue = this.lastOpenedBook.bookPos;
+            });
+        }
+    }
+
     buttonClick(button) {
         switch (button) {
             case 'loader':
                 this.loaderToggle();
                 break;
-            case 'history':
-                this.historyToggle();
-                break;
             case 'fullScreen':
                 this.fullScreenToggle();
                 break;
+            case 'history':
+                this.historyToggle();
+                break;
+            case 'setPosition':
+                this.setPositionToggle();
+                break;                
             case 'refresh':
                 if (this.lastOpenedBook) {
                     this.loadBook({url: this.lastOpenedBook.url, force: true});
@@ -247,8 +267,9 @@ class Reader extends Vue {
         const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
         switch (button) {
             case 'loader': return (this.loaderActive ? classActive : {});
-            case 'history': return (this.historyActive ? classActive : {});
             case 'fullScreen': return (this.fullScreenActive ? classActive : {});
+            case 'history': return (this.historyActive ? classActive : {});
+            case 'setPosition': return (this.setPositionActive ? classActive : {});
         }
         return {};
     }
@@ -416,6 +437,9 @@ class Reader extends Vue {
             if (this.historyActive)
                 handled = this.$refs.historyPage.keyHook(event);
 
+            if (this.setPositionActive)
+                handled = this.$refs.setPositionPage.keyHook(event);
+
             if (!handled && this.$refs.page && this.$refs.page.keyHook)
                 handled = this.$refs.page.keyHook(event);
 
@@ -427,6 +451,9 @@ class Reader extends Vue {
                     case 'KeyH':
                         this.historyToggle();
                         break;
+                    case 'KeyP':
+                        this.setPositionToggle();
+                        break;
                 }
             }
         }

client/components/Reader/SetPositionPage/SetPositionPage.vue

@@ -0,0 +1,98 @@
+<template>
+    <div ref="main" class="main" @click="close">
+        <div class="clickStop" @click.stop>
+            <Window @close="close">
+                <template slot="header">
+                    Установить позицию
+                </template>
+
+                <div class="slider">
+                    <el-slider v-model="sliderValue" :max="sliderMax" :format-tooltip="formatTooltip"></el-slider>
+                </div>
+            </Window>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import _ from 'lodash';
+
+import Window from '../../share/Window.vue';
+
+export default @Component({
+    components: {
+        Window,
+    },
+    watch: {
+        sliderValue: function(newValue) {
+            this.debouncedEmitPosChange(newValue);
+        },
+    },
+})
+class SetPositionPage extends Vue {
+    sliderValue = null;
+    sliderMax = null;
+
+    created() {
+        this.commit = this.$store.commit;
+        this.reader = this.$store.state.reader;
+
+        this.debouncedEmitPosChange = _.debounce((newValue) => {
+            this.$emit('book-pos-changed', {bookPos: newValue});
+        }, 500);
+    }
+
+    formatTooltip(val) {
+        if (this.sliderMax)
+            return (val/this.sliderMax*100).toFixed(2) + '%';
+        else
+            return 0;
+    }
+
+    close() {
+        this.$emit('set-position-toggle');
+    }
+
+    keyHook(event) {
+        if (event.type == 'keydown' && (event.code == 'Escape' || event.code == 'KeyP')) {
+            this.close();
+        }
+        return true;
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.main {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 40;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.clickStop {
+    width: 100%;
+    max-width: 600px;
+    height: 140px;
+    display: flex;
+}
+
+.slider {
+    margin: 20px;
+    background-color: #efefef;
+    border-radius: 15px;
+}
+
+.el-slider {
+    margin-right: 20px;
+    margin-left: 20px;
+}
+</style>

client/element.js

@@ -59,6 +59,9 @@ import './theme/table-column.css';
 import ElProgress from 'element-ui/lib/progress';
 import './theme/progress.css';
 
+import ElSlider from 'element-ui/lib/slider';
+import './theme/slider.css';
+
 import Notification from 'element-ui/lib/notification';
 import './theme/notification.css';
 
@@ -72,7 +75,7 @@ const components = {
     ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
     ElInput, ElTable, ElTableColumn,
-    ElProgress
+    ElProgress, ElSlider
 };
 
 for (let name in components) {