Chore: Removing references to constants.js and Browser.js in Annotati…

…ons code (#277)

- This will allow us to pass in any selector which will indicate the annotation button css selector in Preview aka we can use different annotation button icons based on where annotations is initialized

src/lib/annotations/AnnotationDialog.js

@@ -2,7 +2,6 @@ import autobind from 'autobind-decorator';
 import EventEmitter from 'events';
 import * as annotatorUtil from './annotatorUtil';
 import * as constants from './annotationConstants';
-import { CLASS_ACTIVE, CLASS_HIDDEN } from '../constants';
 import { ICON_CLOSE, ICON_DELETE } from '../icons/icons';
 
 const CLASS_ANNOTATION_PLAIN_HIGHLIGHT = 'bp-plain-highlight';
@@ -86,7 +85,7 @@ class AnnotationDialog extends EventEmitter {
                 this.element.classList.add(CLASS_ANNOTATION_PLAIN_HIGHLIGHT);
 
                 const headerEl = this.element.querySelector(constants.SELECTOR_MOBILE_DIALOG_HEADER);
-                headerEl.classList.add(CLASS_HIDDEN);
+                headerEl.classList.add(constants.CLASS_HIDDEN);
             }
 
             const dialogCloseButtonEl = this.element.querySelector(constants.SELECTOR_DIALOG_CLOSE);
@@ -102,7 +101,7 @@ class AnnotationDialog extends EventEmitter {
             : this.element.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
 
         // Don't re-position if reply textarea is already active
-        const textareaIsActive = textAreaEl.classList.contains(CLASS_ACTIVE);
+        const textareaIsActive = textAreaEl.classList.contains(constants.CLASS_ACTIVE);
         if (textareaIsActive && this.element.parentNode) {
             return;
         }
@@ -117,7 +116,7 @@ class AnnotationDialog extends EventEmitter {
         if (this.hasAnnotations) {
             this.activateReply();
         } else {
-            textAreaEl.classList.add(CLASS_ACTIVE);
+            textAreaEl.classList.add(constants.CLASS_ACTIVE);
         }
 
         // Move cursor to end of text area
@@ -357,7 +356,7 @@ class AnnotationDialog extends EventEmitter {
      * @return {void}
      */
     mouseenterHandler() {
-        if (this.element.classList.contains(CLASS_HIDDEN)) {
+        if (this.element.classList.contains(constants.CLASS_HIDDEN)) {
             annotatorUtil.showElement(this.element);
 
             const replyTextArea = this.element.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
@@ -490,10 +489,10 @@ class AnnotationDialog extends EventEmitter {
             <div class="comment-text">${text}</div>
             <button class="bp-btn-plain ${CLASS_BUTTON_DELETE_COMMENT} ${annotation.permissions.can_delete
             ? ''
-            : CLASS_HIDDEN}" data-type="${constants.DATA_TYPE_DELETE}" title="${__('annotation_delete')}">
+            : constants.CLASS_HIDDEN}" data-type="${constants.DATA_TYPE_DELETE}" title="${__('annotation_delete')}">
                 ${ICON_DELETE}
             </button>
-            <div class="${CLASS_DELETE_CONFIRMATION} ${CLASS_HIDDEN}">
+            <div class="${CLASS_DELETE_CONFIRMATION} ${constants.CLASS_HIDDEN}">
                 <div class="delete-confirmation-message">
                     ${__('annotation_delete_confirmation_message')}
                 </div>
@@ -535,13 +534,13 @@ class AnnotationDialog extends EventEmitter {
         const replyTextEl = this.dialogEl.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
 
         // Don't activate if reply textarea is already active
-        const isActive = replyTextEl.classList.contains(CLASS_ACTIVE);
+        const isActive = replyTextEl.classList.contains(constants.CLASS_ACTIVE);
         if (isActive) {
             return;
         }
 
         const replyButtonEls = replyTextEl.parentNode.querySelector(constants.SELECTOR_BUTTON_CONTAINER);
-        replyTextEl.classList.add(CLASS_ACTIVE);
+        replyTextEl.classList.add(constants.CLASS_ACTIVE);
         annotatorUtil.showElement(replyButtonEls);
 
         // Auto scroll annotations dialog to bottom where new comment was added
@@ -652,7 +651,7 @@ class AnnotationDialog extends EventEmitter {
     generateDialogEl(numAnnotations) {
         const dialogEl = document.createElement('div');
         dialogEl.innerHTML = `
-            <section class="${numAnnotations ? CLASS_HIDDEN : ''}" data-section="create">
+            <section class="${numAnnotations ? constants.CLASS_HIDDEN : ''}" data-section="create">
                 <textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA}"
                     placeholder="${__('annotation_add_comment_placeholder')}"></textarea>
                 <div class="${constants.CLASS_BUTTON_CONTAINER}">
@@ -664,14 +663,14 @@ class AnnotationDialog extends EventEmitter {
                     </button>
                 </div>
             </section>
-            <section class="${numAnnotations ? '' : CLASS_HIDDEN}" data-section="show">
+            <section class="${numAnnotations ? '' : constants.CLASS_HIDDEN}" data-section="show">
                 <div class="${CLASS_COMMENTS_CONTAINER}"></div>
                 <div class="${CLASS_REPLY_CONTAINER}">
                     <textarea class="${constants.CLASS_TEXTAREA} ${CLASS_REPLY_TEXTAREA}"
                         placeholder="${__(
                             'annotation_reply_placeholder'
                         )}" data-type="${constants.DATA_TYPE_REPLY_TEXTAREA}"></textarea>
-                    <div class="${constants.CLASS_BUTTON_CONTAINER} ${CLASS_HIDDEN}">
+                    <div class="${constants.CLASS_BUTTON_CONTAINER} ${constants.CLASS_HIDDEN}">
                         <button class="bp-btn ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}" data-type="${constants.DATA_TYPE_CANCEL_REPLY}">
                             ${__('annotation_cancel')}
                         </button>

src/lib/annotations/Annotator.js

@@ -2,15 +2,11 @@ import EventEmitter from 'events';
 import autobind from 'autobind-decorator';
 import AnnotationService from './AnnotationService';
 import * as annotatorUtil from './annotatorUtil';
-import {
-    CLASS_ACTIVE,
-    CLASS_HIDDEN,
-    SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT,
-    SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_DRAW
-} from '../constants';
 import { ICON_CLOSE } from '../icons/icons';
 import './Annotator.scss';
 import {
+    CLASS_ACTIVE,
+    CLASS_HIDDEN,
     DATA_TYPE_ANNOTATION_DIALOG,
     CLASS_MOBILE_ANNOTATION_DIALOG,
     CLASS_ANNOTATION_DIALOG,
@@ -59,6 +55,7 @@ class Annotator extends EventEmitter {
         this.validationErrorEmitted = false;
         this.isMobile = data.isMobile;
         this.previewUI = data.previewUI;
+        this.modeButtons = data.modeButtons;
         this.annotationModeHandlers = [];
     }
 
@@ -223,7 +220,8 @@ class Annotator extends EventEmitter {
         }
 
         // Hide create annotations button if image is rotated
-        const pointAnnotateButton = this.previewUI.getAnnotateButton(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT);
+        const pointButtonSelector = this.modeButtons[TYPES.point].selector;
+        const pointAnnotateButton = this.previewUI.getAnnotateButton(pointButtonSelector);
 
         if (rotationAngle !== 0) {
             annotatorUtil.hideElement(pointAnnotateButton);
@@ -251,7 +249,8 @@ class Annotator extends EventEmitter {
      */
     togglePointAnnotationHandler(event = {}) {
         this.destroyPendingThreads();
-        const buttonEl = event.target || this.previewUI.getAnnotateButton(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_POINT);
+        const pointButtonSelector = this.modeButtons[TYPES.point].selector;
+        const buttonEl = event.target || this.previewUI.getAnnotateButton(pointButtonSelector);
 
         if (this.isInDrawMode()) {
             this.toggleDrawAnnotationHandler();
@@ -294,7 +293,8 @@ class Annotator extends EventEmitter {
             this.togglePointAnnotationHandler();
         }
 
-        const buttonEl = event.target || this.previewUI.getAnnotateButton(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE_DRAW);
+        const drawButtonSelector = this.modeButtons[TYPES.draw].selector;
+        const buttonEl = event.target || this.previewUI.getAnnotateButton(drawButtonSelector);
         const postButtonEl = this.previewUI.getAnnotateButton(SELECTOR_ANNOTATION_BUTTON_DRAW_POST);
 
         // Exit if in draw mode

src/lib/annotations/CommentBox.js

@@ -1,5 +1,4 @@
 import EventEmitter from 'events';
-import { CLASS_ACTIVE } from '../constants';
 import * as constants from './annotationConstants';
 import { hideElement, showElement } from './annotatorUtil';
 
@@ -178,7 +177,7 @@ class CommentBox extends EventEmitter {
         const containerEl = document.createElement('section');
         containerEl.classList.add('bp-create-highlight-comment');
         containerEl.innerHTML = `
-            <textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA} ${CLASS_ACTIVE}"
+            <textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA} ${constants.CLASS_ACTIVE}"
                 placeholder="${this.placeholderText}"></textarea>
             <div class="${constants.CLASS_BUTTON_CONTAINER}">
                 <button class="bp-btn ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}">

src/lib/annotations/__tests__/AnnotationDialog-test.js

@@ -3,7 +3,6 @@ import Annotation from '../Annotation';
 import AnnotationDialog from '../AnnotationDialog';
 import * as annotatorUtil from '../annotatorUtil';
 import * as constants from '../annotationConstants';
-import { CLASS_ACTIVE, CLASS_HIDDEN } from '../../constants';
 
 const CLASS_ANNOTATION_PLAIN_HIGHLIGHT = 'bp-plain-highlight';
 const CLASS_CANCEL_DELETE = 'cancel-delete-btn';
@@ -130,7 +129,7 @@ describe('lib/annotations/AnnotationDialog', () => {
 
             dialog.show();
             const textArea = dialog.element.querySelector(`.${CLASS_REPLY_TEXTAREA}`);
-            expect(textArea).to.not.have.class(CLASS_ACTIVE);
+            expect(textArea).to.not.have.class(constants.CLASS_ACTIVE);
             expect(dialog.activateReply).to.be.called;
         });
 
@@ -142,7 +141,7 @@ describe('lib/annotations/AnnotationDialog', () => {
 
             dialog.show();
             const textArea = dialog.element.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
-            expect(textArea).to.have.class(CLASS_ACTIVE);
+            expect(textArea).to.have.class(constants.CLASS_ACTIVE);
             expect(dialog.activateReply).to.not.be.called;
         });
 
@@ -219,7 +218,7 @@ describe('lib/annotations/AnnotationDialog', () => {
     describe('hide()', () => {
         it('should hide dialog immediately', () => {
             dialog.hide();
-            expect(dialog.element).to.have.class(CLASS_HIDDEN);
+            expect(dialog.element).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should hide the mobile dialog if using a mobile browser', () => {
@@ -249,8 +248,8 @@ describe('lib/annotations/AnnotationDialog', () => {
             dialog.addAnnotation(new Annotation({}));
             const createSectionEl = document.querySelector(constants.SECTION_CREATE);
             const showSectionEl = document.querySelector(constants.SECTION_SHOW);
-            expect(createSectionEl).to.have.class(CLASS_HIDDEN);
-            expect(showSectionEl).to.not.have.class(CLASS_HIDDEN);
+            expect(createSectionEl).to.have.class(constants.CLASS_HIDDEN);
+            expect(showSectionEl).to.not.have.class(constants.CLASS_HIDDEN);
         });
     });
 
@@ -420,7 +419,7 @@ describe('lib/annotations/AnnotationDialog', () => {
         });
 
         it('should show the element only if the element is currently hidden', () => {
-            dialog.element.classList.add(CLASS_HIDDEN);
+            dialog.element.classList.add(constants.CLASS_HIDDEN);
 
             dialog.mouseenterHandler();
             expect(annotatorUtil.showElement).to.be.called;
@@ -432,7 +431,7 @@ describe('lib/annotations/AnnotationDialog', () => {
         });
 
         it('should emit \'annotationcommentpending\' when user hovers back into a dialog that has a pending comment', () => {
-            dialog.element.classList.add(CLASS_HIDDEN);
+            dialog.element.classList.add(constants.CLASS_HIDDEN);
             const commentsTextArea = dialog.element.querySelector(constants.SELECTOR_ANNOTATION_TEXTAREA);
             commentsTextArea.textContent = 'bleh';
 
@@ -623,7 +622,7 @@ describe('lib/annotations/AnnotationDialog', () => {
                 })
             );
             const deleteButton = document.querySelector(`.${CLASS_BUTTON_DELETE_COMMENT}`);
-            expect(deleteButton).to.have.class(CLASS_HIDDEN);
+            expect(deleteButton).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should make the delete icon hidden if the delete permission is not specified', () => {
@@ -636,7 +635,7 @@ describe('lib/annotations/AnnotationDialog', () => {
                 })
             );
             const deleteButton = document.querySelector(`.${CLASS_BUTTON_DELETE_COMMENT}`);
-            expect(deleteButton).to.have.class(CLASS_HIDDEN);
+            expect(deleteButton).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should make delete icon visible if the user has delete permission', () => {
@@ -649,7 +648,7 @@ describe('lib/annotations/AnnotationDialog', () => {
                 })
             );
             const deleteButton = document.querySelector(`.${CLASS_BUTTON_DELETE_COMMENT}`);
-            expect(deleteButton).to.not.have.class(CLASS_HIDDEN);
+            expect(deleteButton).to.not.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should hide the delete confirmation UI by default', () => {
@@ -662,7 +661,7 @@ describe('lib/annotations/AnnotationDialog', () => {
                 })
             );
             const deleteConfirmation = document.querySelector(SELECTOR_DELETE_CONFIRMATION);
-            expect(deleteConfirmation).to.have.class(CLASS_HIDDEN);
+            expect(deleteConfirmation).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should correctly format the date and time in a different locale', () => {
@@ -741,8 +740,8 @@ describe('lib/annotations/AnnotationDialog', () => {
             const buttonContainer = replyTextEl.parentNode.querySelector(constants.SELECTOR_BUTTON_CONTAINER);
 
             dialog.activateReply();
-            expect(replyTextEl).to.have.class(CLASS_ACTIVE);
-            expect(buttonContainer).to.not.have.class(CLASS_HIDDEN);
+            expect(replyTextEl).to.have.class(constants.CLASS_ACTIVE);
+            expect(buttonContainer).to.not.have.class(constants.CLASS_HIDDEN);
         });
     });
 
@@ -768,8 +767,8 @@ describe('lib/annotations/AnnotationDialog', () => {
             const buttonContainer = replyTextEl.parentNode.querySelector(constants.SELECTOR_BUTTON_CONTAINER);
 
             dialog.deactivateReply();
-            expect(replyTextEl).to.not.have.class(CLASS_ACTIVE);
-            expect(buttonContainer).to.have.class(CLASS_HIDDEN);
+            expect(replyTextEl).to.not.have.class(constants.CLASS_ACTIVE);
+            expect(buttonContainer).to.have.class(constants.CLASS_HIDDEN);
         });
     });
 
@@ -880,16 +879,16 @@ describe('lib/annotations/AnnotationDialog', () => {
             const dialogEl = dialog.generateDialogEl(0);
             const createSectionEl = dialogEl.querySelector(constants.SECTION_CREATE);
             const showSectionEl = dialogEl.querySelector(constants.SECTION_SHOW);
-            expect(createSectionEl).to.not.have.class(CLASS_HIDDEN);
-            expect(showSectionEl).to.have.class(CLASS_HIDDEN);
+            expect(createSectionEl).to.not.have.class(constants.CLASS_HIDDEN);
+            expect(showSectionEl).to.have.class(constants.CLASS_HIDDEN);
         });
 
         it('should generate an annotations dialog element with annotations', () => {
             const dialogEl = dialog.generateDialogEl(1);
             const createSectionEl = dialogEl.querySelector(constants.SECTION_CREATE);
             const showSectionEl = dialogEl.querySelector(constants.SECTION_SHOW);
-            expect(createSectionEl).to.have.class(CLASS_HIDDEN);
-            expect(showSectionEl).to.not.have.class(CLASS_HIDDEN);
+            expect(createSectionEl).to.have.class(constants.CLASS_HIDDEN);
+            expect(showSectionEl).to.not.have.class(constants.CLASS_HIDDEN);
         });
     });
 });

src/lib/annotations/__tests__/AnnotationThread-test.js

@@ -2,12 +2,12 @@
 import AnnotationThread from '../AnnotationThread';
 import Annotation from '../Annotation';
 import * as annotatorUtil from '../annotatorUtil';
-import { CLASS_HIDDEN } from '../../constants';
 import {
     STATES,
     TYPES,
     CLASS_ANNOTATION_POINT_MARKER,
-    DATA_TYPE_ANNOTATION_INDICATOR
+    DATA_TYPE_ANNOTATION_INDICATOR,
+    CLASS_HIDDEN
 } from '../annotationConstants';
 
 let thread;

src/lib/annotations/__tests__/Annotator-test.js

@@ -36,6 +36,10 @@ describe('lib/annotations/Annotator', () => {
             options,
             previewUI: {
                 getAnnotateButton: () => {}
+            },
+            modeButtons: {
+                point: { selector: 'point_btn' },
+                draw: { selector: 'draw_btn' }
             }
         });
 

src/lib/annotations/__tests__/CommentBox-test.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import CommentBox from '../CommentBox';
-import { CLASS_HIDDEN } from '../../constants';
 import {
+    CLASS_HIDDEN,
     SELECTOR_ANNOTATION_BUTTON_CANCEL,
     SELECTOR_ANNOTATION_BUTTON_POST
 } from '../annotationConstants';

src/lib/annotations/annotationConstants.js

@@ -1,3 +1,6 @@
+export const CLASS_ACTIVE = 'bp-is-active';
+export const CLASS_HIDDEN = 'bp-is-hidden';
+export const CLASS_INVISIBLE = 'bp-is-invisible';
 export const CLASS_ANNOTATION_BUTTON_CANCEL = 'cancel-annotation-btn';
 export const CLASS_ANNOTATION_BUTTON_POST = 'post-annotation-btn';
 export const CLASS_ANNOTATION_DIALOG = 'bp-annotation-dialog';

src/lib/annotations/annotatorUtil.js

@@ -1,6 +1,12 @@
 import 'whatwg-fetch';
-import { CLASS_ACTIVE, CLASS_HIDDEN, CLASS_INVISIBLE } from '../constants';
-import { TYPES, SELECTOR_ANNOTATION_CARET, PENDING_STATES } from './annotationConstants';
+import {
+    TYPES,
+    SELECTOR_ANNOTATION_CARET,
+    PENDING_STATES,
+    CLASS_ACTIVE,
+    CLASS_HIDDEN,
+    CLASS_INVISIBLE
+} from './annotationConstants';
 
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';