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

src/lib/AnnotationControls.scss

@@ -19,4 +19,8 @@
             }
         }
     }
+
+    &.is-hidden {
+        display: none;
+    }
 }

src/lib/AnnotationControls.ts

@@ -1,10 +1,13 @@
 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';
+
 export const CLASS_BUTTON_ACTIVE = 'is-active';
+export const CLASS_GROUP_HIDE = 'is-hidden';
 
 export type RegionHandler = ({ isRegionActive, event }: { isRegionActive: boolean; event: MouseEvent }) => void;
 export type Options = {
@@ -32,8 +35,47 @@ 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}
+     */
+    private handleFullscreenChange = (isFullscreen: boolean): void => {
+        const groupElement = this.controls.controlsEl.querySelector(`.${CLASS_ANNOTATIONS_GROUP}`);
+
+        if (isFullscreen) {
+            groupElement.classList.add(CLASS_GROUP_HIDE);
+        } else {
+            groupElement.classList.remove(CLASS_GROUP_HIDE);
+        }
+    };
+
     /**
      * Region comment button click handler
      *

src/lib/__tests__/AnnotationControls-test.js

@@ -1,7 +1,13 @@
 /* eslint-disable no-unused-expressions */
-import AnnotationControls, { CLASS_REGION_BUTTON, CLASS_BUTTON_ACTIVE } from '../AnnotationControls';
-import Controls, { CLASS_BOX_CONTROLS_GROUP_BUTTON } from '../Controls';
 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 fullscreen from '../Fullscreen';
 
 let annotationControls;
 let stubs = {};
@@ -16,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(() => {
@@ -33,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');
@@ -94,4 +117,27 @@ describe('lib/AnnotationControls', () => {
             });
         });
     });
+
+    describe('handleFullscreenChange()', () => {
+        beforeEach(() => {
+            stubs.classListAdd = sandbox.stub();
+            stubs.classListRemove = sandbox.stub();
+            stubs.querySelector = sandbox.stub().returns({
+                classList: {
+                    add: stubs.classListAdd,
+                    remove: stubs.classListRemove,
+                },
+            });
+            annotationControls.controls.controlsEl.querySelector = stubs.querySelector;
+        });
+
+        it('should hide entire group if fullscreen is active', () => {
+            annotationControls.handleFullscreenChange(true);
+            expect(stubs.querySelector).to.be.calledWith(`.${CLASS_ANNOTATIONS_GROUP}`);
+            expect(stubs.classListAdd).to.be.calledWith(CLASS_GROUP_HIDE);
+
+            annotationControls.handleFullscreenChange(false);
+            expect(stubs.classListRemove).to.be.calledWith(CLASS_GROUP_HIDE);
+        });
+    });
 });

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);
         }