New: Find method for documents (#460)

src/lib/viewers/doc/DocBaseViewer.js

@@ -258,6 +258,7 @@ class DocBaseViewer extends BaseViewer {
 
     /**
      * Initializes the Find Bar and Find Controller
+     *
      * @return {void}
      */
     initFind() {
@@ -280,6 +281,29 @@ class DocBaseViewer extends BaseViewer {
         this.findBar = new DocFindBar(this.findBarEl, this.findController, canDownload);
     }
 
+    /**
+     * Scrolls to and highlights the next occurences of a phrase in the document using the DocFindBar
+     *
+     * @public
+     * @param {string} phrase - Phrase to find
+     * @param {boolean} [openFindBar] - Option to open the findbar on find
+     * @return {void}
+     */
+    find(phrase, openFindBar = false) {
+        if (!this.findBar) {
+            return;
+        }
+
+        // Go to page one so that we can find the first occurence in the document
+        this.setPage(1);
+        this.findBar.setFindFieldElValue(phrase);
+        this.findBar.findFieldHandler();
+
+        if (openFindBar) {
+            this.findBar.open();
+        }
+    }
+
     /**
      * Ensures that the print blob is loaded & updates the print UI.
      *

src/lib/viewers/doc/DocFindBar.js

@@ -55,6 +55,7 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Creates find input field, search icon and results count elements
+     *
      * @return {void}
      */
     createFindField() {
@@ -78,6 +79,7 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Creates previous, next, and close buttons for find bar
+     *
      * @return {void}
      */
     createFindButtons() {
@@ -125,6 +127,7 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Update Find Bar UI to current match state
+     *
      * @param  {number} state FindState from PDFFindController
      * @return {void}
      */
@@ -154,6 +157,7 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Update results count to current match count
+     *
      * @return {void}
      */
     updateUIResultsCount() {
@@ -178,13 +182,24 @@ class DocFindBar extends EventEmitter {
         this.findResultsCountEl.classList.remove(CLASS_HIDDEN);
     }
 
+    /**
+     * Sets the findFieldEl value
+     *
+     * @param {string} phrase - Phrase to set the find field el value to
+     * @return {void}
+     */
+    setFindFieldElValue(phrase) {
+        this.findFieldEl.value = phrase;
+    }
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
     /**
      * Add event listeners to the DOM elements
-     * @return {void}
+     *
      * @private
+     * @return {void}
      */
     bindDOMListeners() {
         this.bar.addEventListener('keydown', this.barKeyDownHandler);
@@ -199,8 +214,9 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Remove event listeners from the DOM elements
-     * @return {void}
+     *
      * @private
+     * @return {void}
      */
     unbindDOMListeners() {
         this.bar.removeEventListener('keydown', this.barKeyDownHandler);
@@ -255,9 +271,9 @@ class DocFindBar extends EventEmitter {
     /**
      * Handler for find keyboard short cuts
      *
+     * @private
      * @param {Event} event - Key event
      * @return {void}
-     * @private
      */
     barKeyDownHandler(event) {
         const key = decodeKeydown(event).toLowerCase();
@@ -292,9 +308,10 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Handler to find next match count and update match count accordingly
+     *
+     * @private
      * @param  {boolean} clicked False when triggered through keyboard shortcut
      * @return {void}
-     * @private
      */
     findNextHandler(clicked) {
         if (this.findFieldEl.value) {
@@ -314,9 +331,10 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Handler to find previous match and update match count accordingly
+     *
+     * @private
      * @param  {boolean} clicked False when triggered through keyboard shortcut
      * @return {void}
-     * @private
      */
     findPreviousHandler(clicked) {
         if (this.findFieldEl.value) {
@@ -336,13 +354,14 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Unhide Find Bar
-     * @return {void}
+     *
      * @private
+     * @return {void}
      */
     open() {
         // Repopulate and re-highlight find field with last search
         if (this.prevSearchQuery) {
-            this.findFieldEl.value = this.prevSearchQuery;
+            this.setFindFieldElValue(this.prevSearchQuery);
             this.findFieldHandler();
         }
 
@@ -356,13 +375,14 @@ class DocFindBar extends EventEmitter {
 
     /**
      * Hide Find Bar
-     * @return {void}
+     *
      * @private
+     * @return {void}
      */
     close() {
         // Save and clear current search to hide highlights
         this.prevSearchQuery = this.findFieldEl.value;
-        this.findFieldEl.value = '';
+        this.setFindFieldElValue('');
         this.findFieldHandler();
 
         if (!this.opened) {

src/lib/viewers/doc/README.md

@@ -64,6 +64,7 @@ The following methods are available for the document viewer.
 | zoomIn | Zooms the document in | {number} number of steps to zoom in based on scale |
 | zoomOut | Zooms the document out | {number} number of steps to zoom out based on scale |
 | toggleFullscreen | Toggles fullscreen mode ||
+| find | scrolls to and highlights the next occurrences of a given phrase | {string} phrase to find, {boolean} option to open the find bar on find, defaults to false |
 
 # Presentation Viewer
 

src/lib/viewers/doc/__tests__/DocBaseViewer-test.js

@@ -398,6 +398,43 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
         });
     });
 
+    describe('find()', () => {
+        beforeEach(() => {
+            docBase.findBar = {
+                setFindFieldElValue: sandbox.stub(),
+                findFieldHandler: sandbox.stub(),
+                open: sandbox.stub(),
+                destroy: sandbox.stub()
+            }
+
+            sandbox.stub(docBase, 'setPage');
+        });
+
+        it('should do nothing if there is no findbar', () => {
+            docBase.findBar = undefined;
+
+            docBase.find('hi');
+
+            expect(docBase.setPage).to.not.be.called;
+        });
+
+        it('should set the search value and handle a find', () => {
+            docBase.find('hi');
+
+            expect(docBase.setPage).to.be.calledWith(1);
+            expect(docBase.findBar.setFindFieldElValue).to.be.calledWith('hi');
+            expect(docBase.findBar.findFieldHandler).to.be.called;
+        });
+
+        it('should open the findbar if the openFindBar flag is true', () => {
+            docBase.find('hi', true);
+
+            expect(docBase.findBar.setFindFieldElValue).to.be.calledWith('hi');
+            expect(docBase.findBar.findFieldHandler).to.be.called;
+            expect(docBase.findBar.open).to.be.called;
+        });
+    });
+
     describe('browserPrint()', () => {
         beforeEach(() => {
             stubs.emit = sandbox.stub(docBase, 'emit');

src/lib/viewers/doc/__tests__/DocFindBar-test.js

@@ -252,6 +252,18 @@ describe('lib/viewers/doc/DocFindBar', () => {
         });
     });
 
+    describe('setFindFieldElValue()', () => {
+        it('should set the findFieldEl value', () => {
+            docFindBar.findFieldEl = {
+                removeEventListener: sandbox.stub()
+            }
+
+            docFindBar.setFindFieldElValue('test');
+
+            expect(docFindBar.findFieldEl.value).to.equal('test');
+        });
+    });
+
     describe('bindDOMListeners()', () => {
         it('should add the correct event listeners', () => {
             const barStub = sandbox.stub(docFindBar.bar, 'addEventListener');