Работа над SearchPage

client/components/Reader/Reader.vue

@@ -59,7 +59,7 @@
             </keep-alive>
 
             <SetPositionPage v-if="setPositionActive" ref="setPositionPage" @set-position-toggle="setPositionToggle" @book-pos-changed="bookPosChanged"></SetPositionPage>
-            <SearchPage v-if="searchActive" ref="searchPage" @search-toggle="searchToggle"></SearchPage>
+            <SearchPage v-show="searchActive" ref="searchPage" @search-toggle="searchToggle"></SearchPage>
             <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>
@@ -299,12 +299,13 @@ class Reader extends Vue {
 
     searchToggle() {
         this.searchActive = !this.searchActive;
-        if (this.searchActive && this.activePage == 'TextPage' && this.lastOpenedBook) {
+        const page = this.$refs.page;
+        if (this.searchActive && this.activePage == 'TextPage' && page.parsed && this.lastOpenedBook) {
             this.closeAllTextPages();
             this.searchActive = true;
 
             this.$nextTick(() => {
-                //this.$refs.searchPage
+                this.$refs.searchPage.init(page.parsed);
             });
         } else {
             this.searchActive = false;
@@ -640,9 +641,7 @@ class Reader extends Vue {
 }
 
 .tool-button {
-    margin: 0;
-    margin-left: 2px;
-    margin-right: 2px;
+    margin: 0 2px 0 2px;
     padding: 0;
     color: #3E843E;
     background-color: #E6EDF4;

client/components/Reader/SearchPage/SearchPage.vue

@@ -5,6 +5,21 @@
                 <template slot="header">
                     {{ header }}
                 </template>
+
+                <div class="content">
+                    <span v-show="initStep">{{ initPercentage }}%</span>
+
+                    <div v-show="!initStep" class="input">
+                        <input ref="input" class="el-input__inner"
+                            placeholder="что ищем"
+                            :value="needle" @input="needle = $event.target.value"/>
+                        <div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">{{ foundText }}</div>
+                    </div>
+                    <el-button-group v-show="!initStep" class="button-group">
+                        <el-button @click="findNext"><i class="el-icon-arrow-down"></i></el-button>
+                        <el-button @click="findPrev"><i class="el-icon-arrow-up"></i></el-button>
+                    </el-button-group>
+                </div>
             </Window>
         </div>
     </div>
@@ -16,26 +31,106 @@ 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,
     },
+    watch: {
+        needle: function() {
+            this.find();
+
+        },
+        foundText: function(newValue) {
+            this.$refs.input.style.paddingRight = newValue.length*12 + 'px';
+        },
+    },
 })
 class SearchPage extends Vue {
     header = null;
+    initStep = null;
+    initPercentage = 0;
+    needle = null;
+    foundList = [];
+    foundCur = -1;
 
     created() {
         this.commit = this.$store.commit;
         this.reader = this.$store.state.reader;
+    }
+
+    async init(parsed) {
+        this.parsed = parsed;
+
+        this.initStep = true;
+        this.stopInit = false;
+        this.header = 'Подготовка';
+        await this.$nextTick();
+
+        let prevPerc = 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)
+                break;
+
+            for (const part of parts)
+                text += part.text;
+
+            const perc = Math.round(i/parsed.para.length*100);
+
+            if (perc != prevPerc) {
+                this.initPercentage = perc;
+                await sleep(1);
+                prevPerc = perc;
+            }
+        }
+        this.text = text;
+        this.initStep = false;
+
+        this.header = 'Найти';
+        await this.$nextTick();
+        this.$refs.input.focus();
+        this.$refs.input.select();
+    }
+
+    get foundText() {
+        if (this.foundList.length && this.foundCur >= 0)
+            return `${this.foundCur}/${this.foundList.length}`;
+        else
+            return '';
+    }
+
+    find() {
+        let foundList = [];
+        let i = 0;
+        while (i < this.text.length) {
+            i++;
+        }
+        this.foundList = foundList;
+    }
+
+    findNext() {
+        console.log('1');
+    }
 
+    findPrev() {
+        console.log('2');
     }
 
     close() {
+        this.stopInit = true;
         this.$emit('search-toggle');
     }
 
     keyHook(event) {
+        //недостатки сторонних ui
+        if (document.activeElement === this.$refs.input && event.type == 'keydown' && event.key == 'Enter') {
+            this.find();
+        }
+
         if (event.type == 'keydown' && (event.code == 'Escape')) {
             this.close();
         }
@@ -53,15 +148,46 @@ class SearchPage extends Vue {
     z-index: 40;
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: center;
 }
 
 .mainWindow {
     width: 100%;
-    max-width: 400px;
-    height: 140px;
+    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/element.js

@@ -23,6 +23,9 @@ import './theme/menu-item.css';
 import ElButton from 'element-ui/lib/button';
 import './theme/button.css';
 
+import ElButtonGroup from 'element-ui/lib/button-group';
+import './theme/button-group.css';
+
 import ElCheckbox from 'element-ui/lib/checkbox';
 import './theme/checkbox.css';
 
@@ -93,7 +96,7 @@ import MessageBox from 'element-ui/lib/message-box';
 import './theme/message-box.css';
 
 const components = {
-    ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
+    ElMenu, ElMenuItem, ElButton, ElButtonGroup, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElCol, ElContainer, ElAside, ElMain, ElHeader,
     ElInput, ElInputNumber, ElSelect, ElOption, ElTable, ElTableColumn,
     ElProgress, ElSlider, ElForm, ElFormItem,