feat(annotations): Hide annotation controls when fullscreen is active

box · Mar 31, 2020 · bdfd7c9 · bdfd7c9
1 parent 372ba14
commit bdfd7c9
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 9 deletions.
diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts
@@ -1,6 +1,7 @@
 import noop from 'lodash/noop';
 import { ICON_REGION_COMMENT } from './icons/icons';
 import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from './Controls';
+import fullscreen from './Fullscreen';
 
 export const CLASS_ANNOTATIONS_GROUP = 'bp-AnnotationControls-group';
 export const CLASS_REGION_BUTTON = 'bp-AnnotationControls-regionBtn';
@@ -34,15 +35,38 @@ export default class AnnotationControls {
         }
 
         this.controls = controls;
+
+        this.attachEventHandlers();
+    }
+
+    /**
+     * [destructor]
+     *
+     * @return {void}
+     */
+    public destroy(): void {
+        if (fullscreen) {
+            fullscreen.removeAllListeners();
+        }
     }
 
+    /**
+     * Attaches event handlers
+     *
+     * @return {void}
+     */
+    private attachEventHandlers = (): void => {
+        fullscreen.addListener('enter', () => this.handleFullscreenChange(true));
+        fullscreen.addListener('exit', () => this.handleFullscreenChange(false));
+    };
+
     /**
      * Hide annotations control button group
      *
      * @param {boolean} isFullscreen - true if full screen will be active
      * @return {void}
      */
-    public toggleGroup = (isFullscreen: boolean): void => {
+    private handleFullscreenChange = (isFullscreen: boolean): void => {
         const groupElement = this.controls.controlsEl.querySelector(`.${CLASS_ANNOTATIONS_GROUP}`);
 
         if (isFullscreen) {

diff --git a/src/lib/__tests__/AnnotationControls-test.js b/src/lib/__tests__/AnnotationControls-test.js
@@ -1,12 +1,13 @@
 /* eslint-disable no-unused-expressions */
+import { ICON_REGION_COMMENT } from '../icons/icons';
 import AnnotationControls, {
     CLASS_ANNOTATIONS_GROUP,
     CLASS_BUTTON_ACTIVE,
     CLASS_GROUP_HIDE,
     CLASS_REGION_BUTTON,
 } from '../AnnotationControls';
 import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from '../Controls';
-import { ICON_REGION_COMMENT } from '../icons/icons';
+import fullscreen from '../Fullscreen';
 
 let annotationControls;
 let stubs = {};
@@ -21,8 +22,9 @@ describe('lib/AnnotationControls', () => {
     beforeEach(() => {
         fixture.load('__tests__/AnnotationControls-test.html');
         const controls = new Controls(document.getElementById('test-annotation-controls-container'));
-        annotationControls = new AnnotationControls(controls);
+        stubs.fullscreenAddListener = sandbox.stub(fullscreen, 'addListener');
         stubs.onRegionClick = sandbox.stub();
+        annotationControls = new AnnotationControls(controls);
     });
 
     afterEach(() => {
@@ -38,11 +40,27 @@ describe('lib/AnnotationControls', () => {
             expect(annotationControls.controls).not.to.be.undefined;
         });
 
+        it('should attach event listeners', () => {
+            expect(stubs.fullscreenAddListener).to.be.calledTwice;
+        });
+
         it('should throw an exception if controls is not provided', () => {
             expect(() => new AnnotationControls()).to.throw(Error, 'controls must be an instance of Controls');
         });
     });
 
+    describe('destroy()', () => {
+        beforeEach(() => {
+            stubs.fullscreenRemoveAllListeners = sandbox.stub(fullscreen, 'removeAllListeners');
+        });
+
+        it('should remove all listeners', () => {
+            annotationControls.destroy();
+
+            expect(stubs.fullscreenRemoveAllListeners).to.be.called;
+        });
+    });
+
     describe('init()', () => {
         beforeEach(() => {
             stubs.add = sandbox.stub(annotationControls.controls, 'add');
@@ -100,7 +118,7 @@ describe('lib/AnnotationControls', () => {
         });
     });
 
-    describe('toggleGroup()', () => {
+    describe('handleFullscreenChange()', () => {
         beforeEach(() => {
             stubs.classListAdd = sandbox.stub();
             stubs.classListRemove = sandbox.stub();
@@ -114,11 +132,11 @@ describe('lib/AnnotationControls', () => {
         });
 
         it('should hide entire group if fullscreen is active', () => {
-            annotationControls.toggleGroup(true);
+            annotationControls.handleFullscreenChange(true);
             expect(stubs.querySelector).to.be.calledWith(`.${CLASS_ANNOTATIONS_GROUP}`);
             expect(stubs.classListAdd).to.be.calledWith(CLASS_GROUP_HIDE);
 
-            annotationControls.toggleGroup(false);
+            annotationControls.handleFullscreenChange(false);
             expect(stubs.classListRemove).to.be.calledWith(CLASS_GROUP_HIDE);
         });
     });

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -536,9 +536,6 @@ class BaseViewer extends EventEmitter {
      */
     toggleFullscreen() {
         fullscreen.toggle(this.containerEl);
-        if (this.options.showAnnotationsControls) {
-            this.annotationControls.toggleGroup(!fullscreen.isFullscreen()); // pass in the next state
-        }
     }
 
     /**

diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -164,6 +164,10 @@ class DocBaseViewer extends BaseViewer {
             URL.revokeObjectURL(this.printURL);
         }
 
+        if (this.annotationControls) {
+            this.annotationControls.destroy();
+        }
+
         if (this.pageControls) {
             this.pageControls.removeListener('pagechange', this.setPage);
         }