Работа над CopyTextPage

client/components/Reader/CopyTextPage/CopyTextPage.vue

@@ -0,0 +1,131 @@
+<template>
+    <div ref="main" class="main" @click="close">
+        <div class="mainWindow" @click.stop>
+            <Window @close="close">
+                <template slot="header">
+                    Скопировать текст
+                </template>
+
+            </Window>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import Window from '../../share/Window.vue';
+import {sleep} from '../../../share/utils';
+
+export default @Component({
+    components: {
+        Window,
+    },
+})
+class CopyTextPage extends Vue {
+    initStep = null;
+    initPercentage = 0;
+
+    created() {
+        this.commit = this.$store.commit;
+        this.reader = this.$store.state.reader;
+    }
+
+    async init(bookPos, parsed) {
+        if (this.parsed != parsed) {
+            this.initStep = true;
+            this.stopInit = false;
+
+            let nextPerc = 0;
+            let text = '';
+            for (let i = 0; i < parsed.para.length; i++) {
+                const p = parsed.para[i];
+                const parts = parsed.splitToStyle(p.text);
+                if (this.stopInit)
+                    return;
+
+                for (const part of parts)
+                    text += part.text;
+
+                const perc = Math.round(i/parsed.para.length*100);
+
+                if (perc > nextPerc) {
+                    this.initPercentage = perc;
+                    await sleep(1);
+                    nextPerc = perc + 10;
+                }
+            }            
+
+            this.initStep = false;
+            this.parsed = parsed;
+        }
+    }
+
+    close() {
+        this.stopInit = true;
+        this.$emit('copy-text-toggle');
+    }
+
+    keyHook(event) {
+        if (event.type == 'keydown' && (event.code == 'Escape')) {
+            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;
+}
+
+.mainWindow {
+    width: 100%;
+    max-width: 500px;
+    height: 125px;
+    display: flex;
+    position: relative;
+    top: -50px;
+}
+
+.content {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px;
+}
+
+.input {
+    display: flex;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    position: relative;
+}
+
+.button-group {
+    width: 150px;
+    margin: 0;
+    padding: 0;
+}
+
+.el-button {
+    padding: 9px 17px 9px 17px;
+}
+
+i {
+    font-size: 20px;
+}
+</style>

client/components/Reader/Reader.vue

@@ -65,6 +65,7 @@
                 @start-text-search="startTextSearch"
                 @stop-text-search="stopTextSearch">
             </SearchPage>
+            <CopyTextPage v-if="copyTextActive" ref="copyTextPage" @copy-text-toggle="copyTextToggle"></CopyTextPage>            
             <HistoryPage v-if="historyActive" ref="historyPage" @load-book="loadBook" @history-toggle="historyToggle"></HistoryPage>
             <SettingsPage v-if="settingsActive" ref="settingsPage" @settings-toggle="settingsToggle"></SettingsPage>
         </el-main>
@@ -81,6 +82,7 @@ import ProgressPage from './ProgressPage/ProgressPage.vue';
 
 import SetPositionPage from './SetPositionPage/SetPositionPage.vue';
 import SearchPage from './SearchPage/SearchPage.vue';
+import CopyTextPage from './CopyTextPage/CopyTextPage.vue';
 import HistoryPage from './HistoryPage/HistoryPage.vue';
 import SettingsPage from './SettingsPage/SettingsPage.vue';
 
@@ -97,6 +99,7 @@ export default @Component({
 
         SetPositionPage,
         SearchPage,
+        CopyTextPage,
         HistoryPage,
         SettingsPage,
     },
@@ -265,6 +268,7 @@ class Reader extends Vue {
 
     closeAllTextPages() {
         this.setPositionActive = false;
+        this.copyTextActive = false;
         this.historyActive = false;
         this.settingsActive = false;
         this.stopScrolling();
@@ -328,7 +332,7 @@ class Reader extends Vue {
     searchToggle() {
         this.searchActive = !this.searchActive;
         const page = this.$refs.page;
-        if (this.searchActive && this.activePage == 'TextPage' && page.parsed && this.mostRecentBook()) {
+        if (this.searchActive && this.activePage == 'TextPage' && page.parsed) {
             this.closeAllTextPages();
             this.searchActive = true;
 
@@ -341,6 +345,21 @@ class Reader extends Vue {
         }
     }
 
+    copyTextToggle() {
+        this.copyTextActive = !this.copyTextActive;
+        const page = this.$refs.page;
+        if (this.copyTextActive && this.activePage == 'TextPage' && page.parsed) {
+            this.closeAllTextPages();
+            this.copyTextActive = true;
+
+            this.$nextTick(() => {
+                this.$refs.copyTextPage.init(this.mostRecentBook().bookPos, page.parsed);
+            });
+        } else {
+            this.searchActive = false;
+        }
+    }
+
     historyToggle() {
         this.historyActive = !this.historyActive;
         if (this.historyActive) {
@@ -378,6 +397,9 @@ class Reader extends Vue {
             case 'search':
                 this.searchToggle();
                 break;
+            case 'copyText':
+                this.copyTextToggle();
+                break;
             case 'history':
                 this.historyToggle();
                 break;
@@ -601,6 +623,9 @@ class Reader extends Vue {
             if (!handled && this.searchActive)
                 handled = this.$refs.searchPage.keyHook(event);
 
+            if (!handled && this.copyTextActive)
+                handled = this.$refs.copyTextPage.keyHook(event);
+
             if (!handled && this.$refs.page && this.$refs.page.keyHook)
                 handled = this.$refs.page.keyHook(event);
 
@@ -620,6 +645,13 @@ class Reader extends Vue {
                                 event.stopPropagation();
                             }
                             break;
+                        case 'KeyC':
+                            if (event.ctrlKey) {
+                                this.copyTextToggle();
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }
+                            break;
                         case 'KeyZ':
                             this.scrollingToggle();
                             break;