feat(docviewer): Toggle find bar control (#1088)

src/i18n/en-US.properties

@@ -36,6 +36,8 @@ loading_preview=Loading Preview...
 download_file=Download File
 # Text shown when a text file has been truncated due to size limits.
 text_truncated=This file has been truncated due to size limits. Please download to view the whole file.
+# Button tooltip for toggling find bar
+toggle_findbar=Toggle findbar
 # Button tooltip to toggle Thumbnails Sidebar
 toggle_thumbnails=Toggle thumbnails
 # Message when file has inaccessible xrefs

src/lib/viewers/doc/DocBaseViewer.js

@@ -33,6 +33,7 @@ import {
     ICON_PRINT_CHECKMARK,
     ICON_FULLSCREEN_IN,
     ICON_FULLSCREEN_OUT,
+    ICON_SEARCH,
     ICON_THUMBNAILS_TOGGLE,
 } from '../../icons/icons';
 import { JS, PRELOAD_JS, CSS } from './docAssets';
@@ -774,16 +775,26 @@ class DocBaseViewer extends BaseViewer {
         // Only initialize the find bar if the user has download permissions on
         // the file. Users without download permissions shouldn't be able to
         // interact with the text layer
-        const canDownload = checkPermission(this.options.file, PERMISSION_DOWNLOAD);
-        if (!canDownload || this.getViewerOption('disableFindBar')) {
+        if (this.isFindDisabled()) {
             return;
         }
 
-        this.findBar = new DocFindBar(this.findBarEl, this.pdfFindController, this.pdfEventBus, canDownload);
+        this.findBar = new DocFindBar(this.findBarEl, this.pdfFindController, this.pdfEventBus);
         this.findBar.addListener(VIEWER_EVENT.metric, this.emitMetric);
         this.findBar.addListener('close', this.handleFindBarClose);
     }
 
+    /**
+     * Determines if findbar is disabled
+     *
+     * @private
+     * @return {boolean}
+     */
+    isFindDisabled() {
+        const canDownload = checkPermission(this.options.file, PERMISSION_DOWNLOAD);
+        return !canDownload || this.getViewerOption('disableFindBar');
+    }
+
     /**
      * Re-sizing logic.
      *
@@ -1069,6 +1080,10 @@ class DocBaseViewer extends BaseViewer {
             );
         }
 
+        if (!this.isFindDisabled()) {
+            this.controls.add(__('toggle_findbar'), () => this.findBar.toggle(), 'bp-toggle-findbar-icon', ICON_SEARCH);
+        }
+
         this.zoomControls.init(this.pdfViewer.currentScale, {
             maxZoom: MAX_SCALE,
             minZoom: MIN_SCALE,

src/lib/viewers/doc/DocFindBar.js

@@ -401,6 +401,19 @@ class DocFindBar extends EventEmitter {
         this.opened = false;
         this.bar.classList.add(CLASS_HIDDEN);
     }
+
+    /**
+     * Toggles the Find Bar open and closed
+     *
+     * @return {void}
+     */
+    toggle() {
+        if (this.opened) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
 }
 
 export default DocFindBar;

src/lib/viewers/doc/DocFindBar.scss

@@ -85,21 +85,24 @@ $blue: #00f !default;
         margin: 0;
         line-height: 1;
         text-align: left;
-    }
+        border: 0;
 
-    .bp-doc-find-close {
-        &:hover .icon {
-            fill: $better-black;
+        svg {
+            width: 12px;
+            height: 12px;
         }
     }
 
-    .bp-doc-find-search,
     .bp-doc-find-close {
         border: 0;
 
         svg {
             width: 22px;
         }
+
+        &:hover .icon {
+            fill: $better-black;
+        }
     }
 
     .bp-find-match-not-found,

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

@@ -27,10 +27,11 @@ import {
     SELECTOR_BOX_PREVIEW,
 } from '../../../constants';
 import {
-    ICON_PRINT_CHECKMARK,
-    ICON_THUMBNAILS_TOGGLE,
     ICON_FULLSCREEN_IN,
     ICON_FULLSCREEN_OUT,
+    ICON_PRINT_CHECKMARK,
+    ICON_SEARCH,
+    ICON_THUMBNAILS_TOGGLE,
 } from '../../../icons/icons';
 import { VIEWER_EVENT, LOAD_METRIC, USER_DOCUMENT_THUMBNAIL_EVENTS } from '../../../events';
 import Timer from '../../../Timer';
@@ -2257,6 +2258,8 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                     add: sandbox.stub(),
                     removeListener: sandbox.stub(),
                 };
+
+                stubs.isFindDisabled = sandbox.stub(docBase, 'isFindDisabled');
             });
 
             it('should add the correct controls', () => {
@@ -2269,6 +2272,13 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                     ICON_THUMBNAILS_TOGGLE,
                 );
 
+                expect(docBase.controls.add).to.be.calledWith(
+                    __('toggle_findbar'),
+                    sinon.match.func,
+                    'bp-toggle-findbar-icon',
+                    ICON_SEARCH,
+                );
+
                 expect(docBase.zoomControls.init).to.be.calledWith(0.9, {
                     maxZoom: 10,
                     minZoom: 0.1,
@@ -2309,6 +2319,19 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                     ICON_THUMBNAILS_TOGGLE,
                 );
             });
+
+            it('should not add the find controls if find is disabled', () => {
+                stubs.isFindDisabled.returns(true);
+
+                docBase.bindControlListeners();
+
+                expect(docBase.controls.add).not.to.be.calledWith(
+                    __('toggle_findbar'),
+                    sinon.match.func,
+                    'bp-toggle-findbar-icon',
+                    ICON_SEARCH,
+                );
+            });
         });
 
         describe('toggleThumbnails()', () => {

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

@@ -584,4 +584,29 @@ describe('lib/viewers/doc/DocFindBar', () => {
             expect(stubs.add).to.be.calledWith(CLASS_HIDDEN);
         });
     });
+
+    describe('toggle()', () => {
+        beforeEach(() => {
+            stubs.open = sandbox.stub(docFindBar, 'open');
+            stubs.close = sandbox.stub(docFindBar, 'close');
+        });
+
+        it('should open if not currently opened', () => {
+            docFindBar.opened = false;
+
+            docFindBar.toggle();
+
+            expect(docFindBar.open).to.be.called;
+            expect(docFindBar.close).not.to.be.called;
+        });
+
+        it('should close if currently opened', () => {
+            docFindBar.opened = true;
+
+            docFindBar.toggle();
+
+            expect(docFindBar.open).not.to.be.called;
+            expect(docFindBar.close).to.be.called;
+        });
+    });
 });