Temp hide show ui for plain and comment highlights

src/lib/annotations/Annotator.js

@@ -298,6 +298,10 @@ class Annotator extends EventEmitter {
 
         const pageThreads = this.getThreadsOnPage(pageNum);
         Object.values(pageThreads).forEach((thread) => {
+            if (!this.isModeAnnotatable(thread.type)) {
+                return;
+            }
+
             thread.show();
         });
     }

src/lib/annotations/BoxAnnotations.js

@@ -8,7 +8,7 @@ const ANNOTATORS = [
         NAME: 'Document',
         CONSTRUCTOR: DocAnnotator,
         VIEWER: ['Document', 'Presentation'],
-        TYPE: [TYPES.point, TYPES.highlight]
+        TYPE: [TYPES.point, TYPES.highlight, TYPES.highlight_comment]
     },
     {
         NAME: 'Image',

src/lib/annotations/MobileAnnotator.scss

@@ -216,20 +216,21 @@ $tablet: "(min-width: 768px)";
     z-index: 9999;
 
     .bp-annotation-highlight-btns {
+        display: flex;
+        justify-content: flex-start;
         padding: 0;
 
         button {
-            float: left;
+            flex-grow: 1;
             padding: 15px 0;
-            width: 50%;
 
-            &:first-child::after {
+            &:nth-child(2)::before {
                 border-right: 1px solid $seesee;
                 bottom: 17px;
                 content: "";
                 height: 25px;
-                left: 50%;
                 position: absolute;
+                right: 50%;
             }
         }
     }

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

@@ -238,6 +238,21 @@ describe('lib/annotations/Annotator', () => {
                 stubs.threadMock3.expects('show').never();
                 annotator.renderAnnotationsOnPage(1);
             });
+
+            it('should not call show() if the thread type is disabled', () => {
+                const badType = 'not_accepted';
+                stubs.thread3.type = badType;
+                stubs.thread2.type = 'type';
+
+                stubs.threadMock3.expects('show').never();
+                stubs.threadMock2.expects('show').once();
+
+                const isModeAnn = sandbox.stub(annotator, 'isModeAnnotatable');
+                isModeAnn.withArgs(badType).returns(false);
+                isModeAnn.withArgs('type').returns(true);
+
+                annotator.renderAnnotationsOnPage('2');
+            });
         });
 
         describe('rotateAnnotations()', () => {

src/lib/annotations/doc/CreateHighlightDialog.js

@@ -9,24 +9,20 @@ const TITLE_HIGHLIGHT_TOGGLE = __('annotation_highlight_toggle');
 const TITLE_HIGHLIGHT_COMMENT = __('annotation_highlight_comment');
 const DATA_TYPE_HIGHLIGHT = 'add-highlight-btn';
 const DATA_TYPE_ADD_HIGHLIGHT_COMMENT = 'add-highlight-comment-btn';
-const CREATE_HIGHLIGHT_DIALOG_TEMPLATE = `
-    <div class="${constants.CLASS_ANNOTATION_CARET}" style="left: 50%;"></div>
-    <div>
-        <div class="${constants.CLASS_ANNOTATION_HIGHLIGHT_DIALOG}">
-            <span class="${constants.CLASS_HIGHLIGHT_BTNS}">
-                <button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_BTN}"
-                    data-type="${DATA_TYPE_HIGHLIGHT}"
-                    title="${TITLE_HIGHLIGHT_TOGGLE}">
-                    ${ICON_HIGHLIGHT}
-                </button>
-                <button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN}"
-                    data-type="${DATA_TYPE_ADD_HIGHLIGHT_COMMENT}""
-                    title="${TITLE_HIGHLIGHT_COMMENT}">
-                    ${ICON_HIGHLIGHT_COMMENT}
-                </button>
-            </span>
-        </div>
-    </div>`.trim();
+
+const CARAT_TEMPLATE = `<div class="${constants.CLASS_ANNOTATION_CARET}" style="left: 50%;"></div>`;
+const HIGHLIGHT_BUTTON_TEMPLATE = `
+    <button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_BTN}"
+        data-type="${DATA_TYPE_HIGHLIGHT}"
+        title="${TITLE_HIGHLIGHT_TOGGLE}">
+        ${ICON_HIGHLIGHT}
+    </button>`.trim();
+const COMMENT_BUTTON_TEMPLATE = `
+    <button class="bp-btn-plain ${constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN}"
+        data-type="${DATA_TYPE_ADD_HIGHLIGHT_COMMENT}""
+        title="${TITLE_HIGHLIGHT_COMMENT}">
+        ${ICON_HIGHLIGHT_COMMENT}
+    </button>`.trim();
 
 /**
  * Events emitted by this component.
@@ -71,6 +67,12 @@ class CreateHighlightDialog extends EventEmitter {
     /** @property {boolean} - Whether or not this is visible. */
     isVisible;
 
+    /** @property {boolean} - Whether or not to allow plain highlight interaction. */
+    allowHighlight;
+
+    /** @property {boolean} - Whether or not to allow comment interactions. */
+    allowComment;
+
     /**
      * A dialog used to create plain and comment highlights.
      *
@@ -88,12 +90,19 @@ class CreateHighlightDialog extends EventEmitter {
         this.parentEl = parentEl;
         this.isMobile = config.isMobile || false;
         this.hasTouch = config.hasTouch || false;
+        this.allowHighlight = config.allowHighlight !== undefined ? !!config.allowHighlight : true;
+        this.allowComment = config.allowComment !== undefined ? !!config.allowComment : true;
 
         // Explicit scope binding for event listeners
-        this.onHighlightClick = this.onHighlightClick.bind(this);
-        this.onCommentClick = this.onCommentClick.bind(this);
-        this.onCommentPost = this.onCommentPost.bind(this);
-        this.onCommentCancel = this.onCommentCancel.bind(this);
+        if (this.allowHighlight) {
+            this.onHighlightClick = this.onHighlightClick.bind(this);
+        }
+
+        if (this.allowComment) {
+            this.onCommentClick = this.onCommentClick.bind(this);
+            this.onCommentPost = this.onCommentPost.bind(this);
+            this.onCommentCancel = this.onCommentCancel.bind(this);
+        }
     }
 
     /**
@@ -162,8 +171,10 @@ class CreateHighlightDialog extends EventEmitter {
 
         hideElement(this.containerEl);
 
-        this.commentBox.hide();
-        this.commentBox.clear();
+        if (this.commentBox) {
+            this.commentBox.hide();
+            this.commentBox.clear();
+        }
     }
 
     /**
@@ -186,8 +197,6 @@ class CreateHighlightDialog extends EventEmitter {
         // Event listeners
         this.highlightCreateEl.removeEventListener('click', this.onHighlightClick);
         this.commentCreateEl.removeEventListener('click', this.onCommentClick);
-        this.commentBox.removeListener(CommentBox.CommentEvents.post, this.onCommentPost);
-        this.commentBox.removeListener(CommentBox.CommentEvents.cancel, this.onCommentCancel);
 
         if (this.hasTouch) {
             this.highlightCreateEl.removeEventListener('touchstart', this.stopPropagation);
@@ -201,8 +210,12 @@ class CreateHighlightDialog extends EventEmitter {
         this.containerEl = null;
         this.parentEl = null;
 
-        this.commentBox.destroy();
-        this.commentBox = null;
+        if (this.commentBox) {
+            this.commentBox.removeListener(CommentBox.CommentEvents.post, this.onCommentPost);
+            this.commentBox.removeListener(CommentBox.CommentEvents.cancel, this.onCommentCancel);
+            this.commentBox.destroy();
+            this.commentBox = null;
+        }
     }
 
     //--------------------------------------------------------------------------
@@ -315,50 +328,77 @@ class CreateHighlightDialog extends EventEmitter {
      * @return {HTMLElement} The element containing Highlight creation UI
      */
     createElement() {
+        const caretTemplate = this.isMobile ? '' : CARAT_TEMPLATE;
+        const highlightTemplate = this.allowHighlight ? HIGHLIGHT_BUTTON_TEMPLATE : '';
+        const commentTemplate = this.allowComment ? COMMENT_BUTTON_TEMPLATE : '';
+
+        const createHighlightDialogTemplate = `
+            ${caretTemplate}
+            <div>
+                <div class="${constants.CLASS_ANNOTATION_HIGHLIGHT_DIALOG}">
+                    <span class="${constants.CLASS_HIGHLIGHT_BTNS}">
+                        ${highlightTemplate}
+                        ${commentTemplate}
+                    </span>
+                </div>
+            </div>`.trim();
+
         const highlightDialogEl = document.createElement('div');
         highlightDialogEl.classList.add(CLASS_CREATE_DIALOG);
-        highlightDialogEl.innerHTML = CREATE_HIGHLIGHT_DIALOG_TEMPLATE;
+        highlightDialogEl.innerHTML = createHighlightDialogTemplate;
 
         // Get rid of the caret
         if (this.isMobile) {
             highlightDialogEl.classList.add('bp-mobile-annotation-dialog');
             highlightDialogEl.classList.add('bp-annotation-dialog');
-            highlightDialogEl.querySelector('.bp-annotation-caret').remove();
         }
 
         const containerEl = highlightDialogEl.querySelector(constants.SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG);
 
         // Reference HTML
-        this.highlightCreateEl = containerEl.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
-        this.commentCreateEl = containerEl.querySelector(`.${constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN}`);
         this.buttonsEl = containerEl.querySelector(constants.SELECTOR_HIGHLIGHT_BTNS);
 
-        // Create comment box
-        this.commentBox = new CommentBox(containerEl);
-
         // Stop interacting with this element from triggering outside actions
         highlightDialogEl.addEventListener('click', this.stopPropagation);
         highlightDialogEl.addEventListener('mouseup', this.stopPropagation);
         highlightDialogEl.addEventListener('dblclick', this.stopPropagation);
 
-        // Event listeners
-        this.highlightCreateEl.addEventListener('click', this.onHighlightClick);
-        this.commentCreateEl.addEventListener('click', this.onCommentClick);
-        this.commentBox.addListener(CommentBox.CommentEvents.post, this.onCommentPost);
-        this.commentBox.addListener(CommentBox.CommentEvents.cancel, this.onCommentCancel);
+        // Events for highlight button
+        if (this.allowHighlight) {
+            this.highlightCreateEl = containerEl.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
+            this.highlightCreateEl.addEventListener('click', this.onHighlightClick);
+
+            if (this.hasTouch) {
+                this.highlightCreateEl.addEventListener('touchstart', this.stopPropagation);
+                this.highlightCreateEl.addEventListener('touchend', this.onHighlightClick);
+            }
+        }
+
+        // Events for comment button
+        if (this.allowComment) {
+            // Create comment box
+            this.commentBox = new CommentBox(containerEl);
+            this.commentCreateEl = containerEl.querySelector(`.${constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN}`);
+            this.commentCreateEl.addEventListener('click', this.onCommentClick);
+
+            // Event listeners
+            this.commentBox.addListener(CommentBox.CommentEvents.post, this.onCommentPost);
+            this.commentBox.addListener(CommentBox.CommentEvents.cancel, this.onCommentCancel);
+
+            // Hide comment box, by default
+            this.commentBox.hide();
+
+            if (this.hasTouch) {
+                this.commentCreateEl.addEventListener('touchstart', this.stopPropagation);
+                this.commentCreateEl.addEventListener('touchend', this.onCommentClick);
+            }
+        }
 
         // touch events
         if (this.hasTouch) {
-            this.highlightCreateEl.addEventListener('touchstart', this.stopPropagation);
-            this.commentCreateEl.addEventListener('touchstart', this.stopPropagation);
-            this.highlightCreateEl.addEventListener('touchend', this.onHighlightClick);
-            this.commentCreateEl.addEventListener('touchend', this.onCommentClick);
             highlightDialogEl.addEventListener('touchend', this.stopPropagation);
         }
 
-        // Hide comment box, by default
-        this.commentBox.hide();
-
         return highlightDialogEl;
     }
 }