Работа над SearchPage

2019-02-02 16:58:08 +07:00
parent b7881cecf1
commit 806b0ecff1
3 changed files with 138 additions and 10 deletions
--- a/client/components/Reader/Reader.vue
+++ b/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;
--- a/client/components/Reader/SearchPage/SearchPage.vue
+++ b/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>
--- a/client/element.js
+++ b/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,