From 075ea9223dabd25162a715967e2db22c7fd6b677 Mon Sep 17 00:00:00 2001 From: leojpod Date: Fri, 2 Dec 2016 18:59:13 +0100 Subject: [PATCH] #3 - tracking of the search matches but the scrolling is not perfect yet --- addon/components/pdf-js.js | 86 ++++++++++++++++++++++++++- addon/templates/components/pdf-js.hbs | 4 ++ 2 files changed, 89 insertions(+), 1 deletion(-) diff --git a/addon/components/pdf-js.js b/addon/components/pdf-js.js index fafc4f8..395aca0 100644 --- a/addon/components/pdf-js.js +++ b/addon/components/pdf-js.js @@ -17,8 +17,37 @@ const { run } = Ember +function scrollToMatch (pdfViewer, match) { + let { pageIdx, matchIdx } = match + let page = pdfViewer.getPageView(pageIdx) + let { textLayer } = page + if (!textLayer) { + Ember.Logger.debug(`page ${pageIdx} not ready`) + page.div.scrollIntoView() + run.later(() => { + Ember.Logger.debug('re-running scrollToMatch') + scrollToMatch(pdfViewer, match) + }, 50) + } else { + Ember.Logger.debug('ready to scroll right to the match') + if (!textLayer.textContent) { + Ember.Logger.debug('textLayer.textContent ', textLayer.textContent) + Ember.Logger.debug('page->', page) + run.later(() => { + Ember.Logger.debug('re-running scrollToMatch') + scrollToMatch(pdfViewer, match) + }, 50) + } else { + let [{ begin: { divIdx } }] = textLayer.convertMatches([matchIdx], [1]) + textLayer.textDivs[divIdx].scrollIntoView() + // debugger + } + } +} + export default Component.extend({ layout, + classNames: [ 'pdf-js' ], // Service pdfJs: injectService('pdf-js'), pdfLib: reads('pdfJs.PDFJS'), @@ -36,6 +65,13 @@ export default Component.extend({ pdfFindController: undefined, pdfPage: undefined, pdfTotalPages: undefined, + currentMatch: undefined, + currentMatchIdx: undefined, + matchTotal: undefined, + + // privates + _topMargin: 10, + _container: undefined, // components toolbarComponent: 'pdf-js-toolbar', @@ -43,6 +79,7 @@ export default Component.extend({ // initialization didInsertElement () { let [container] = this.element.getElementsByClassName('pdfViewerContainer') + this.set('_container', container) let pdfLinkService = new PDFLinkService() this.set('pdfLinkService', pdfLinkService) let pdfViewer = new PDFViewer({ @@ -60,6 +97,8 @@ export default Component.extend({ pdfViewer }) this.set('pdfFindController', pdfFindController) + Ember.Logger.debug('pdfFindController -> ', pdfFindController) + Ember.Logger.debug('pdfViewer -> ', pdfViewer) pdfViewer.setFindController(pdfFindController) pdfViewer.currentScaleValue = 'page-fit' @@ -72,6 +111,30 @@ export default Component.extend({ }) }) + pdfFindController.onUpdateResultsCount = function (total) { + run(function () { + self.set('matchTotal', total) + }) + } + pdfFindController.onUpdateState = function (state, previous, total) { + run(function () { + if (state !== 0 && state !== 2) { // 0 <=> search found something ; 2 <=> wrapped + return + } + let { pageIdx, matchIdx } = pdfFindController.selected + if (matchIdx !== -1 || pageIdx !== -1) { + let { pageMatches } = pdfFindController + let idx = matchIdx + 1 + for (let i = 0; i < pageIdx; i++) { + idx += pageMatches[i].length + } + let match = pdfFindController.pageMatches[pageIdx][matchIdx] + self.set('currentMatch', match) + self.set('currentMatchIdx', idx) + } + }) + } + if (this.get('pdf')) { this.send('load') } @@ -92,7 +155,6 @@ export default Component.extend({ } loadingTask = loadingTask.then((pdfDocument) => { - Ember.Logger.debug('pdfDocument loaded -> ', pdfDocument) this.set('pdfDocument', pdfDocument) let viewer = this.get('pdfViewer') viewer.setDocument(pdfDocument) @@ -116,6 +178,26 @@ export default Component.extend({ phraseSearch }) }, + changeSearchResult (changeDirection) { + let pdfFindController = this.get('pdfFindController') + if (!pdfFindController.state) { + return // there is no search going on so let's ignore that call + } + switch (changeDirection) { + case 'prev': + pdfFindController.state.findPrevious = true + pdfFindController.nextMatch() + break + case 'next': + pdfFindController.state.findPrevious = false + pdfFindController.nextMatch() + break + default: + return + } + let container = this.get('_container') + let divMatchPromise = scrollToMatch(this.get('pdfViewer'), pdfFindController.selected) + }, changePage (changePage) { let pdfLinkService = this.get('pdfLinkService') switch (changePage) { @@ -129,6 +211,8 @@ export default Component.extend({ // regular change of page: pdfLinkService.page = changePage } + let pdfViewer = this.get('pdfViewer') + pdfViewer.getPageView(pdfLinkService.page - 1).div.scrollIntoView() }, zoom () { throw 'not implemented yet' diff --git a/addon/templates/components/pdf-js.hbs b/addon/templates/components/pdf-js.hbs index ab3e59b..0037838 100644 --- a/addon/templates/components/pdf-js.hbs +++ b/addon/templates/components/pdf-js.hbs @@ -1,11 +1,15 @@ {{component toolbarComponent changePage=(action 'changePage') + changeSearchResult=(action 'changeSearchResult') search=(action 'search') zoom=(action 'zoom') page=pdfPage pageTotal=pdfTotalPages class="ember-pdf-js toolbar" + currentMatch=currentMatch + currentMatchIdx=currentMatchIdx + matchTotal=matchTotal }}