Fix: Add Annotations bundling changes back (#95)

- Reverts the commit (176ad13) which
  reverted the annotations bundling changes
- No longer emit extra 'load' event on 'textlayerrendered'
- Replacing fileVersionID with fileVersionId (same with fileID)

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,
@@ -934,10 +932,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/Annotation.js

@@ -12,7 +12,7 @@ class Annotation {
      *
      * @typedef {Object} AnnotationData
      * @property {string} annotationID Annotation ID
-     * @property {string} fileVersionID File version ID for this annotation
+     * @property {string} fileVersionId File version ID for this annotation
      * @property {string} threadID Thread ID
      * @property {string} thread Thread number
      * @property {string} type Annotation type, e.g. 'point' or 'highlight'
@@ -36,7 +36,7 @@ class Annotation {
      */
     constructor(data) {
         this.annotationID = data.annotationID;
-        this.fileVersionID = data.fileVersionID;
+        this.fileVersionId = data.fileVersionId;
         this.threadID = data.threadID;
         this.thread = data.thread;
         this.type = data.type;

src/lib/annotations/AnnotationService.js

@@ -77,7 +77,7 @@ class AnnotationService extends EventEmitter {
                 body: JSON.stringify({
                     item: {
                         type: 'file_version',
-                        id: annotation.fileVersionID
+                        id: annotation.fileVersionId
                     },
                     details: {
                         type: annotation.type,
@@ -125,10 +125,10 @@ class AnnotationService extends EventEmitter {
     /**
      * Reads annotations from file version ID.
      *
-     * @param {string} fileVersionID - File version ID to fetch annotations for
+     * @param {string} fileVersionId - File version ID to fetch annotations for
      * @return {Promise} Promise that resolves with fetched annotations
      */
-    read(fileVersionID) {
+    read(fileVersionId) {
         this.annotations = [];
         let resolve;
         let reject;
@@ -137,7 +137,7 @@ class AnnotationService extends EventEmitter {
             reject = failure;
         });
 
-        this.readFromMarker(resolve, reject, fileVersionID);
+        this.readFromMarker(resolve, reject, fileVersionId);
         return promise;
     }
 
@@ -176,11 +176,11 @@ class AnnotationService extends EventEmitter {
     /**
      * Gets a map of thread ID to annotations in that thread.
      *
-     * @param {string} fileVersionID - File version ID to fetch annotations for
+     * @param {string} fileVersionId - File version ID to fetch annotations for
      * @return {Promise} Promise that resolves with thread map
      */
-    getThreadMap(fileVersionID) {
-        return this.read(fileVersionID).then(this.createThreadMap);
+    getThreadMap(fileVersionId) {
+        return this.read(fileVersionId).then(this.createThreadMap);
     }
 
     //--------------------------------------------------------------------------
@@ -224,7 +224,7 @@ class AnnotationService extends EventEmitter {
     createAnnotation(data) {
         return new Annotation({
             annotationID: data.id,
-            fileVersionID: data.item.id,
+            fileVersionId: data.item.id,
             threadID: data.details.threadID,
             type: data.details.type,
             thread: data.thread,
@@ -245,13 +245,13 @@ class AnnotationService extends EventEmitter {
      * Construct the URL to read annotations with a marker or limit added
      *
      * @private
-     * @param {string} fileVersionID - File version ID to fetch annotations for
+     * @param {string} fileVersionId - File version ID to fetch annotations for
      * @param {string} marker - marker to use if there are more than limit annotations
      *  * @param {int} limit - the amout of annotations the API will return per call
      * @return {Promise} Promise that resolves with fetched annotations
      */
-    getReadUrl(fileVersionID, marker = null, limit = null) {
-        let apiUrl = `${this.api}/2.0/files/${this.fileId}/annotations?version=${fileVersionID}&fields=item,thread,details,message,created_by,created_at,modified_at,permissions`;
+    getReadUrl(fileVersionId, marker = null, limit = null) {
+        let apiUrl = `${this.api}/2.0/files/${this.fileId}/annotations?version=${fileVersionId}&fields=item,thread,details,message,created_by,created_at,modified_at,permissions`;
         if (marker) {
             apiUrl += `&marker=${marker}`;
         }
@@ -268,18 +268,18 @@ class AnnotationService extends EventEmitter {
      * limit is 100 annotations per API call.
      *
      * @private
-     * @param {string} fileVersionID - File version ID to fetch annotations for
+     * @param {string} fileVersionId - File version ID to fetch annotations for
      * @param {string} marker - marker to use if there are more than limit annotations
      * @param {int} limit - the amout of annotations the API will return per call
      * @return {void}
      */
-    readFromMarker(resolve, reject, fileVersionID, marker = null, limit = null) {
-        fetch(this.getReadUrl(fileVersionID, marker, limit), {
+    readFromMarker(resolve, reject, fileVersionId, marker = null, limit = null) {
+        fetch(this.getReadUrl(fileVersionId, marker, limit), {
             headers: this.headers })
         .then((response) => response.json())
         .then((data) => {
             if (data.type === 'error' || !Array.isArray(data.entries)) {
-                reject(new Error(`Could not read annotations from file version with ID ${fileVersionID}`));
+                reject(new Error(`Could not read annotations from file version with ID ${fileVersionId}`));
                 this.emit('annotationerror', {
                     reason: 'read'
                 });
@@ -289,7 +289,7 @@ class AnnotationService extends EventEmitter {
                 });
 
                 if (data.next_marker) {
-                    this.readFromMarker(resolve, reject, fileVersionID, data.next_marker, limit);
+                    this.readFromMarker(resolve, reject, fileVersionId, data.next_marker, limit);
                 } else {
                     resolve(this.annotations);
                 }

src/lib/annotations/AnnotationThread.js

@@ -20,7 +20,7 @@ class AnnotationThread extends EventEmitter {
      * @property {Annotation[]} [annotations] Annotations in thread - none if
      * this is a new thread
      * @property {AnnotationService} annotationService Annotations CRUD service
-     * @property {string} fileVersionID File version ID
+     * @property {string} fileVersionId File version ID
      * @property {Object} location Location object
      * @property {string} threadID Thread ID
      * @property {string} thread Thread number
@@ -43,7 +43,7 @@ class AnnotationThread extends EventEmitter {
         this.annotatedElement = data.annotatedElement;
         this.annotations = data.annotations || [];
         this.annotationService = data.annotationService;
-        this.fileVersionID = data.fileVersionID;
+        this.fileVersionId = data.fileVersionId;
         this.location = data.location;
         this.threadID = data.threadID || AnnotationService.generateID();
         this.thread = data.thread || '';
@@ -410,7 +410,7 @@ class AnnotationThread extends EventEmitter {
      */
     createAnnotationData(type, text) {
         return {
-            fileVersionID: this.fileVersionID,
+            fileVersionId: this.fileVersionId,
             type,
             text,
             location: this.location,

src/lib/annotations/Annotator.js

@@ -17,7 +17,7 @@ class Annotator extends EventEmitter {
      * @typedef {Object} AnnotatorData
      * @property {HTMLElement} annotatedElement HTML element to annotate on
      * @property {AnnotationService} [annotationService] Annotations CRUD service
-     * @property {string} fileVersionID File version ID
+     * @property {string} fileVersionId File version ID
      */
 
     //--------------------------------------------------------------------------
@@ -32,13 +32,13 @@ class Annotator extends EventEmitter {
      */
     constructor(data) {
         super();
-        this.annotatedElement = data.annotatedElement;
-        this.annotationService = data.annotationService;
-        this.fileVersionID = data.fileVersionID;
+
+        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,21 @@ class Annotator extends EventEmitter {
      * @return {void}
      */
     init() {
+        this.annotatedElement = this.getAnnotatedEl(this.container);
+        this.notification = new Notification(this.annotatedElement);
+
+        const { apiHost, fileId, token } = this.options;
+
+        this.annotationService = new AnnotationService({
+            apiHost,
+            fileId,
+            token,
+            canAnnotate: this.canAnnotate
+        });
+
         this.setScale(1);
         this.setupAnnotations();
+        this.showAnnotations();
     }
 
     /**
@@ -219,6 +232,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
     //--------------------------------------------------------------------------
@@ -246,7 +269,7 @@ class Annotator extends EventEmitter {
     fetchAnnotations() {
         this.threads = {};
 
-        return this.annotationService.getThreadMap(this.fileVersionID)
+        return this.annotationService.getThreadMap(this.fileVersionId)
             .then((threadMap) => {
                 // Generate map of page to threads
                 Object.keys(threadMap).forEach((threadID) => {

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;