Chore: Bundling Annotators separately in annotations.js (#75)

- Determines which annotator to initialize based on the viewer provided in options
- Bundles the annotators separately to reduce the size of preview.js 
- Only loads annotations.js if ?showAnnotations=true and not a shared link
- Moving showAnnotate() and other basic annotation methods into BaseViewer
- Triggering annotations load on 'load' event

build/webpack.config.js

@@ -54,7 +54,8 @@ function updateConfig(conf, language, index) {
     const config = Object.assign(conf, {
         entry: {
             preview:        [`${lib}/Preview.js`],
-            csv:            [`${lib}/viewers/text/BoxCSV.js`]
+            csv:            [`${lib}/viewers/text/BoxCSV.js`],
+            annotations:    [`${lib}/annotations/BoxAnnotations.js`]
         },
         output: {
             path: path.resolve('dist', version, language),

src/lib/Preview.js

@@ -36,7 +36,6 @@ import {
     hideLoadingIndicator,
     showDownloadButton,
     showLoadingDownloadButton,
-    showAnnotateButton,
     showPrintButton,
     showNavigation
 } from './ui';
@@ -46,7 +45,6 @@ import {
     CLASS_NAVIGATION_VISIBILITY,
     FILE_EXT_ERROR_MAP,
     PERMISSION_DOWNLOAD,
-    PERMISSION_ANNOTATE,
     PERMISSION_PREVIEW,
     PREVIEW_SCRIPT_NAME,
     X_REP_HINT_BASE,
@@ -924,10 +922,6 @@ class Preview extends EventEmitter {
             }
         }
 
-        if (checkPermission(this.file, PERMISSION_ANNOTATE) && !Browser.isMobile() && checkFeature(this.viewer, 'isAnnotatable', 'point')) {
-            showAnnotateButton(this.viewer.getPointModeClickHandler());
-        }
-
         const { error } = data;
         if (error) {
             // Bump up preview count

src/lib/__tests__/Preview-test.js

@@ -1285,7 +1285,6 @@ describe('lib/Preview', () => {
             stubs.canDownload = sandbox.stub(Browser, 'canDownload');
             stubs.showDownloadButton = sandbox.stub(ui, 'showDownloadButton');
             stubs.showPrintButton = sandbox.stub(ui, 'showPrintButton');
-            stubs.showAnnotateButton = sandbox.stub(ui, 'showAnnotateButton');
             stubs.hideLoadingIndicator = sandbox.stub(ui, 'hideLoadingIndicator');
             stubs.emit = sandbox.stub(preview, 'emit');
             stubs.logPreviewEvent = sandbox.stub(preview, 'logPreviewEvent');
@@ -1369,43 +1368,6 @@ describe('lib/Preview', () => {
             expect(stubs.showPrintButton).to.be.called;
         });
 
-        it('should show the annotation button if you have annotation permissions', () => {
-            stubs.checkPermission.onCall(1).returns(false).onCall(2).returns(true);
-
-
-            preview.finishLoading();
-            expect(stubs.showAnnotateButton).to.not.be.called;
-
-            stubs.checkPermission.onCall(3).returns(true);
-
-            preview.finishLoading();
-            expect(stubs.showAnnotateButton).to.be.called;
-        });
-
-        it('should show the annotation button if you are not on a mobile browser', () => {
-            stubs.isMobile.returns(true);
-
-            preview.finishLoading();
-            expect(stubs.showAnnotateButton).to.not.be.called;
-
-            stubs.isMobile.returns(false);
-
-            preview.finishLoading();
-            expect(stubs.showAnnotateButton).to.be.called;
-        });
-
-        it('should show the annotation button if the viewer has annotation functionality', () => {
-            stubs.checkFeature.returns(false);
-
-            preview.finishLoading();
-            expect(stubs.showAnnotateButton).to.not.be.called;
-
-            stubs.checkFeature.returns(true);
-
-            preview.finishLoading();
-            expect(stubs.showAnnotateButton).to.be.called;
-        });
-
         it('should increment the preview count', () => {
             preview.count.success = 0;
 

src/lib/__tests__/ui-test.js

@@ -127,19 +127,6 @@ describe('lib/ui', () => {
             });
         });
 
-        describe('showAnnotateButton()', () => {
-            it('should set up and show annotate button', () => {
-                const buttonEl = containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_BTN_ANNOTATE);
-                buttonEl.classList.add(constants.CLASS_HIDDEN);
-                sandbox.mock(buttonEl).expects('addEventListener').withArgs('click', handler);
-
-                ui.showAnnotateButton(handler);
-
-                expect(buttonEl.title).to.equal('Point annotation mode');
-                expect(buttonEl.classList.contains(constants.CLASS_HIDDEN)).to.be.false;
-            });
-        });
-
         describe('showPrintButton()', () => {
             it('should set up and show print button', () => {
                 const buttonEl = containerEl.querySelector(constants.SELECTOR_BOX_PREVIEW_BTN_PRINT);

src/lib/annotations/Annotator.js

@@ -32,13 +32,13 @@ class Annotator extends EventEmitter {
      */
     constructor(data) {
         super();
-        this.annotatedElement = data.annotatedElement;
-        this.annotationService = data.annotationService;
+
+        this.canAnnotate = data.canAnnotate;
+        this.container = data.container;
+        this.options = data.options;
         this.fileVersionID = data.fileVersionID;
         this.locale = data.locale;
         this.validationErrorDisplayed = false;
-
-        this.notification = new Notification(this.annotatedElement);
     }
 
     /**
@@ -65,8 +65,29 @@ class Annotator extends EventEmitter {
      * @return {void}
      */
     init() {
+        this.annotatedElement = this.getAnnotatedEl(this.container);
+        this.annotationService = this.initAnnotationService(this.options);
+        this.notification = new Notification(this.annotatedElement);
+
         this.setScale(1);
         this.setupAnnotations();
+        this.showAnnotations();
+    }
+
+    /**
+     * Initializes the Annotation Service with appropriate options
+     *
+     * @param {Object} options - Options passed from the viewer to the annotator
+     * @return {AnnotationService} AnnotationService instance
+     */
+    initAnnotationService(options) {
+        const { apiHost, fileId, token } = options;
+        return new AnnotationService({
+            apiHost,
+            fileId,
+            token,
+            canAnnotate: this.canAnnotate
+        });
     }
 
     /**
@@ -219,6 +240,16 @@ class Annotator extends EventEmitter {
     createAnnotationThread(annotations, location, type) {}
     /* eslint-enable no-unused-vars */
 
+    /**
+    * Must be implemented to determine the annotated element in the viewer.
+    *
+    * @param {HTMLElement} containerEl - Container element for the viewer
+    * @return {HTMLElement} Annotated element in the viewer
+    */
+    /* eslint-disable no-unused-vars */
+    getAnnotatedEl(containerEl) {}
+    /* eslint-enable no-unused-vars */
+
     //--------------------------------------------------------------------------
     // Protected
     //--------------------------------------------------------------------------

src/lib/annotations/BoxAnnotations.js

@@ -0,0 +1,54 @@
+import DocAnnotator from './doc/DocAnnotator';
+import ImageAnnotator from './image/ImageAnnotator';
+
+const ANNOTATORS = [
+    {
+        NAME: 'Document',
+        CONSTRUCTOR: DocAnnotator,
+        VIEWER: ['Document', 'Presentation'],
+        TYPE: ['point', 'highlight']
+    },
+    {
+        NAME: 'Image',
+        CONSTRUCTOR: ImageAnnotator,
+        VIEWER: ['Image'],
+        TYPE: ['point']
+    }
+];
+
+class BoxAnnotations {
+
+    /**
+     * [constructor]
+     *
+     * @return {BoxAnnotations} BoxAnnotations instance
+     */
+    constructor() {
+        this.annotators = ANNOTATORS;
+    }
+
+    /**
+     * Returns the available annotators
+     *
+     * @return {Array} List of supported annotators
+     */
+    getAnnotators() {
+        return Array.isArray(this.annotators) ? this.annotators : [];
+    }
+
+    /**
+     * Chooses a annotator based on file extension.
+     *
+     * @param {Object} file - Box file
+     * @param {Array} [disabledAnnotators] - List of disabled annotators
+     * @return {Object} The annotator to use
+     */
+    determineAnnotator(viewer, disabledAnnotators = []) {
+        return this.annotators.find((annotator) =>
+            !(disabledAnnotators.includes(annotator.NAME)) && annotator.VIEWER.includes(viewer)
+        );
+    }
+}
+
+global.BoxAnnotations = BoxAnnotations;
+export default BoxAnnotations;