Доделки поиска текста

client/components/Reader/Reader.vue

@@ -59,7 +59,12 @@
             </keep-alive>
 
             <SetPositionPage v-if="setPositionActive" ref="setPositionPage" @set-position-toggle="setPositionToggle" @book-pos-changed="bookPosChanged"></SetPositionPage>
-            <SearchPage v-show="searchActive" ref="searchPage" @search-toggle="searchToggle" @book-pos-changed="bookPosChanged"></SearchPage>
+            <SearchPage v-show="searchActive" ref="searchPage" 
+                @search-toggle="searchToggle" 
+                @book-pos-changed="bookPosChanged"
+                @start-text-search="startTextSearch"
+                @stop-text-search="stopTextSearch">
+            </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>
@@ -261,10 +266,10 @@ class Reader extends Vue {
 
     closeAllTextPages() {
         this.setPositionActive = false;
-        this.searchActive = false;
         this.historyActive = false;
         this.settingsActive = false;
         this.stopScrolling();
+        this.stopSearch();
     }
 
     loaderToggle() {
@@ -306,6 +311,21 @@ class Reader extends Vue {
         }
     }
 
+    stopSearch() {
+        if (this.searchActive)
+            this.searchToggle();
+    }
+
+    startTextSearch(opts) {
+        if (this.activePage == 'TextPage')
+            this.$refs.page.startSearch(opts.needle);
+    }
+
+    stopTextSearch() {
+        if (this.activePage == 'TextPage')
+            this.$refs.page.stopSearch();
+    }
+
     searchToggle() {
         this.searchActive = !this.searchActive;
         const page = this.$refs.page;
@@ -317,6 +337,7 @@ class Reader extends Vue {
                 this.$refs.searchPage.init(page.parsed);
             });
         } else {
+            this.stopTextSearch();
             this.searchActive = false;
         }
     }

client/components/Reader/SearchPage/SearchPage.vue

@@ -130,7 +130,13 @@ class SearchPage extends Vue {
             this.foundCur = next;
         else
             this.foundCur = (this.foundList.length ? 0 : -1);
+
+        if (this.foundCur >= 0) {
+            this.$emit('start-text-search', {needle: this.needle.toLowerCase()});
             this.$emit('book-pos-changed', {bookPos: this.foundList[this.foundCur]});
+        } else {
+            this.$emit('stop-text-search');
+        }
         this.$refs.input.focus();
     }
 
@@ -140,7 +146,13 @@ class SearchPage extends Vue {
             this.foundCur = prev;
         else
             this.foundCur = this.foundList.length - 1;
+
+        if (this.foundCur >= 0) {
+            this.$emit('start-text-search', {needle: this.needle.toLowerCase()});
             this.$emit('book-pos-changed', {bookPos: this.foundList[this.foundCur]});
+        } else {
+            this.$emit('stop-text-search');
+        }
         this.$refs.input.focus();
     }
 

client/components/Reader/TextPage/TextPage.vue

@@ -322,6 +322,7 @@ class TextPage extends Vue {
 
         this.linesUp = null;
         this.linesDown = null;
+        this.searching = false;
 
         this.getSettings();
         this.calcDrawProps();
@@ -402,6 +403,25 @@ class TextPage extends Vue {
             this.resolveTransitionFinish();
     }
 
+    startSearch(needle) {
+        this.needle = '';
+        const words = needle.split(' ');
+        for (const word of words) {
+            if (word != '') {
+                this.needle = word;
+                break;
+            }
+        }
+
+        this.searching = true;
+        this.draw();
+    }
+
+    stopSearch() {
+        this.searching = false;
+        this.draw();
+    }
+
     async startTextScrolling() {
         if (this.doingScrolling || !this.book || !this.parsed.textLength || !this.linesDown || this.pageLineCount < 1 ||
             this.linesDown.length <= this.pageLineCount) {
@@ -612,10 +632,14 @@ class TextPage extends Vue {
                         const font = this.fontByStyle(part.style);
                         let partWords = part.text.split(' ');
 
-                        for (let i = 0; i < partWords.length; i++) {
+                        for (let j = 0; j < partWords.length; j++) {
-                            let word = partWords[i];
+                            let f = font;
-                            out += this.drawHelper.fillText(word, x, y, font);
+                            let word = partWords[j];
-                            x += this.measureText(word, part.style) + (i < partWords.length - 1 ? space : 0);
+                            if (i == 0 && this.searching && word.toLowerCase().indexOf(this.needle) >= 0) {
+                                f = this.fontByStyle(Object.assign({}, part.style, {bold: true}));
+                            }
+                            out += this.drawHelper.fillText(word, x, y, f);
+                            x += this.measureText(word, part.style) + (j < partWords.length - 1 ? space : 0);
                         }
                     }
                     filled = true;
@@ -627,10 +651,23 @@ class TextPage extends Vue {
                 let x = indent;
                 x = (center ? (this.w - this.measureText(lineText, centerStyle))/2 : x);
                 for (const part of line.parts) {
-                    let text = part.text;
+                    let font = this.fontByStyle(part.style);
-                    const font = this.fontByStyle(part.style);
+
-                    out += this.drawHelper.fillText(text, x, y, font);
+                    if (i == 0 && this.searching) {//для поиска, разбивка по словам
-                    x += this.measureText(text, part.style);
+                        let partWords = part.text.split(' ');
+                        for (let j = 0; j < partWords.length; j++) {
+                            let f = font;
+                            let word = partWords[j];
+                            if (word.toLowerCase().indexOf(this.needle) >= 0) {
+                                f = this.fontByStyle(Object.assign({}, part.style, {bold: true}));
+                            }
+                            out += this.drawHelper.fillText(word, x, y, f);
+                            x += this.measureText(word, part.style) + (j < partWords.length - 1 ? spaceWidth : 0);
+                        }
+                    } else {
+                        out += this.drawHelper.fillText(part.text, x, y, font);
+                        x += this.measureText(part.text, part.style);
+                    }
                 }
             }
             y += this.lineHeight;