diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue index 49200eeb..40d9c339 100644 --- a/client/components/Reader/Reader.vue +++ b/client/components/Reader/Reader.vue @@ -59,7 +59,12 @@ - + + @@ -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; } } diff --git a/client/components/Reader/SearchPage/SearchPage.vue b/client/components/Reader/SearchPage/SearchPage.vue index 06cadc30..4fc81547 100644 --- a/client/components/Reader/SearchPage/SearchPage.vue +++ b/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); - this.$emit('book-pos-changed', {bookPos: this.foundList[this.foundCur]}); + + 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; - this.$emit('book-pos-changed', {bookPos: this.foundList[this.foundCur]}); + + 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(); } diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index 0a18f85a..b144b8d5 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/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++) { - let word = partWords[i]; - out += this.drawHelper.fillText(word, x, y, font); - x += this.measureText(word, part.style) + (i < partWords.length - 1 ? space : 0); + for (let j = 0; j < partWords.length; j++) { + let f = font; + let word = partWords[j]; + 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; - const font = this.fontByStyle(part.style); - out += this.drawHelper.fillText(text, x, y, font); - x += this.measureText(text, part.style); + let font = this.fontByStyle(part.style); + + if (i == 0 && this.searching) {//для поиска, разбивка по словам + 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;