box-annotations - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

CHANGELOG.md

@@ -1,6 +0,12 @@
-<a name="0.3.1"></a>
-## 0.3.1 (2017-11-15)
+<a name="0.4.0"></a>
+# 0.4.0 (2017-11-21)
 
+* Chore: Cleanup annotations permissions (#40) ([a52ed54](https://github.com/box/box-annotations/commit/a52ed54))
+* Fix: Activate annotation dialog on post (#42) ([bc001be](https://github.com/box/box-annotations/commit/bc001be))
 * Fix: Disable highlight creation when the mobile shared dialog is visible (#35) ([de7f392](https://github.com/box/box-annotations/commit/de7f392))
+* Fix: Don't clear reply textarea when annotation is added to dialog (#36) ([1f88d55](https://github.com/box/box-annotations/commit/1f88d55))
 * Fix: Ensure commentbox event listeners are bound properly (#37) ([fcce638](https://github.com/box/box-annotations/commit/fcce638))
+* Fix: Prevent creation of highlights when a point annotation is pending (#41) ([42e29ce](https://github.com/box/box-annotations/commit/42e29ce))
+* Fix: Validate pendingThreadID when calling onSelectionChange() (#39) ([10c1c98](https://github.com/box/box-annotations/commit/10c1c98))
+* Update: packages (#43) ([97a91c3](https://github.com/box/box-annotations/commit/97a91c3))
 *  Fix: Ensure newly created threads are set as inactive while saving (#38) ([8072fa8](https://github.com/box/box-annotations/commit/8072fa8))
@@ -7,0 +13,0 @@

lib/annotationConstants.js

@@ -7,3 +7,5 @@ export var USER_ANONYMOUS = 'Anonymous';
 export var CLASS_DISABLED = 'is-disabled';
-export var CLASS_BUTTON = 'bp-btn-plain';
+export var CLASS_BUTTON = 'bp-btn';
+export var CLASS_BUTTON_PLAIN = 'bp-btn-plain';
+export var CLASS_BUTTON_PRIMARY = 'bp-btn-primary';
 
@@ -10,0 +12,0 @@ export var CLASS_ANNOTATION_BUTTON_CANCEL = 'cancel-annotation-btn';

lib/AnnotationDialog.js

@@ -22,3 +22,2 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 var CLASS_CANCEL_DELETE = 'cancel-delete-btn';
-var CLASS_CANNOT_ANNOTATE = 'cannot-annotate';
 var CLASS_COMMENT = 'annotation-comment';
@@ -140,7 +139,2 @@ var CLASS_COMMENTS_CONTAINER = 'annotation-comments';
 
-            // If user cannot annotate, hide reply/edit/delete UI
-            if (!this.canAnnotate) {
-                this.element.classList.add(CLASS_CANNOT_ANNOTATE);
-            }
-
             // Focus the textarea if visible
@@ -258,3 +252,2 @@ if (annotatorUtil.isElementInViewport(textAreaEl)) {
             this.addAnnotationElement(annotation);
-            this.deactivateReply(true); // Deactivate reply area and focus
         }
@@ -483,6 +476,6 @@
                 }
+            }
 
-                // Ensure textarea stays open
-                this.activateReply();
-            }
+            // Ensure textarea stays open
+            this.activateReply();
         }
@@ -647,6 +640,60 @@
             annotationEl.setAttribute('data-annotation-id', annotation.annotationID);
-            annotationEl.innerHTML = ('\n            <div class="profile-image-container">' + avatarHtml + '</div>\n            <div class="profile-container">\n                <div class="user-name">' + userName + '</div>\n                <div class="comment-date">' + created + '</div>\n            </div>\n            <div class="comment-text">' + text + '</div>\n            <button class="bp-btn-plain ' + CLASS_BUTTON_DELETE_COMMENT + ' ' + (annotation.permissions.can_delete ? '' : constants.CLASS_HIDDEN) + '" data-type="' + constants.DATA_TYPE_DELETE + '" title="' + this.localized.deleteButton + '">\n                ' + ICON_DELETE + '\n            </button>\n            <div class="' + CLASS_DELETE_CONFIRMATION + ' ' + constants.CLASS_HIDDEN + '">\n                <div class="delete-confirmation-message">\n                    ' + this.localized.deleteConfirmation + '\n                </div>\n                <div class="' + constants.CLASS_BUTTON_CONTAINER + '">\n                    <button class="bp-btn ' + CLASS_CANCEL_DELETE + '" data-type="' + constants.DATA_TYPE_CANCEL_DELETE + '">\n                        ' + this.localized.cancelButton + '\n                    </button>\n                    <button class="bp-btn bp-btn-primary ' + CLASS_BUTTON_DELETE_CONFIRM + '" data-type="' + constants.DATA_TYPE_CONFIRM_DELETE + '">\n                        ' + this.localized.deleteButton + '\n                    </button>\n                </div>\n            </div>').trim();
 
             var annotationContainerEl = this.dialogEl.querySelector('.' + CLASS_COMMENTS_CONTAINER);
             annotationContainerEl.appendChild(annotationEl);
+
+            // Avatar
+            var avatarEl = document.createElement('div');
+            avatarEl.classList.add('profile-image-container');
+            avatarEl.innerHTML = avatarHtml;
+            annotationEl.appendChild(avatarEl);
+
+            // Creator namate & date
+            var profileContainerEl = document.createElement('div');
+            profileContainerEl.classList.add('profile-container');
+            annotationEl.appendChild(profileContainerEl);
+
+            var userNameEl = document.createElement('div');
+            userNameEl.classList.add('user-name');
+            userNameEl.textContent = userName;
+            profileContainerEl.appendChild(userNameEl);
+
+            var createdEl = document.createElement('div');
+            createdEl.classList.add('comment-date');
+            createdEl.textContent = created;
+            profileContainerEl.appendChild(createdEl);
+
+            // Comment
+            var commentTextEl = document.createElement('div');
+            commentTextEl.classList.add('comment-text');
+            commentTextEl.textContent = text;
+            annotationEl.appendChild(commentTextEl);
+
+            // Delete button
+            if (!annotation.permissions.can_delete) {
+                return;
+            }
+
+            var deleteBtn = annotatorUtil.generateBtn([constants.CLASS_BUTTON_PLAIN, CLASS_BUTTON_DELETE_COMMENT], this.localized.deleteButton, ICON_DELETE, constants.DATA_TYPE_DELETE);
+            annotationEl.appendChild(deleteBtn);
+
+            var deleteConfirmEl = document.createElement('div');
+            deleteConfirmEl.classList.add(CLASS_DELETE_CONFIRMATION);
+            deleteConfirmEl.classList.add(constants.CLASS_HIDDEN);
+            annotationEl.appendChild(deleteConfirmEl);
+
+            var confirmMsgEl = document.createElement('div');
+            confirmMsgEl.classList.add('delete-confirmation-message');
+            confirmMsgEl.textContent = this.localized.deleteConfirmation;
+            deleteConfirmEl.appendChild(confirmMsgEl);
+
+            var deleteBtnsEl = document.createElement('div');
+            deleteBtnsEl.classList.add(constants.CLASS_BUTTON_CONTAINER);
+            deleteConfirmEl.appendChild(deleteBtnsEl);
+
+            var cancelDeleteBtn = annotatorUtil.generateBtn([constants.CLASS_BUTTON, CLASS_CANCEL_DELETE], this.localized.cancelButton, this.localized.cancelButton, constants.DATA_TYPE_CANCEL_DELETE);
+            deleteBtnsEl.appendChild(cancelDeleteBtn);
+
+            var confirmDeleteBtn = annotatorUtil.generateBtn([constants.CLASS_BUTTON, CLASS_BUTTON_DELETE_CONFIRM, constants.CLASS_BUTTON_PRIMARY], this.localized.deleteButton, this.localized.deleteButton, constants.DATA_TYPE_CONFIRM_DELETE);
+            deleteBtnsEl.appendChild(confirmDeleteBtn);
         }
@@ -819,3 +866,3 @@
             var dialogEl = document.createElement('div');
-            dialogEl.innerHTML = ('\n            <section class="' + (numAnnotations ? constants.CLASS_HIDDEN : '') + '" data-section="create">\n                <textarea class="' + constants.CLASS_TEXTAREA + ' ' + constants.CLASS_ANNOTATION_TEXTAREA + '"\n                    placeholder="' + this.localized.addCommentPlaceholder + '"></textarea>\n                <div class="' + constants.CLASS_BUTTON_CONTAINER + '">\n                    <button class="bp-btn ' + constants.CLASS_ANNOTATION_BUTTON_CANCEL + '" data-type="' + constants.DATA_TYPE_CANCEL + '">\n                        ' + this.localized.cancelButton + '\n                    </button>\n                    <button class="bp-btn bp-btn-primary ' + constants.CLASS_ANNOTATION_BUTTON_POST + '" data-type="' + constants.DATA_TYPE_POST + '">\n                        ' + this.localized.postButton + '\n                    </button>\n                </div>\n            </section>\n            <section class="' + (numAnnotations ? '' : constants.CLASS_HIDDEN) + '" data-section="show">\n                <div class="' + CLASS_COMMENTS_CONTAINER + '"></div>\n                <div class="' + CLASS_REPLY_CONTAINER + '">\n                    <textarea class="' + constants.CLASS_TEXTAREA + ' ' + CLASS_REPLY_TEXTAREA + '"\n                        placeholder="' + this.localized.replyPlaceholder + '" data-type="' + constants.DATA_TYPE_REPLY_TEXTAREA + '"></textarea>\n                    <div class="' + constants.CLASS_BUTTON_CONTAINER + ' ' + constants.CLASS_HIDDEN + '">\n                        <button class="bp-btn ' + constants.CLASS_ANNOTATION_BUTTON_CANCEL + '" data-type="' + constants.DATA_TYPE_CANCEL_REPLY + '">\n                            ' + this.localized.cancelButton + '\n                        </button>\n                        <button class="bp-btn bp-btn-primary ' + constants.CLASS_ANNOTATION_BUTTON_POST + '" data-type="' + constants.DATA_TYPE_POST_REPLY + '">\n                            ' + this.localized.postButton + '\n                        </button>\n                    </div>\n                </div>\n            </section>').trim();
+            dialogEl.innerHTML = ('\n            <section class="' + (numAnnotations ? constants.CLASS_HIDDEN : '') + '" data-section="create">\n                <textarea class="' + constants.CLASS_TEXTAREA + ' ' + constants.CLASS_ANNOTATION_TEXTAREA + '"\n                    placeholder="' + this.localized.addCommentPlaceholder + '"></textarea>\n                <div class="' + constants.CLASS_BUTTON_CONTAINER + '">\n                    <button class="' + constants.CLASS_BUTTON + ' ' + constants.CLASS_ANNOTATION_BUTTON_CANCEL + '" data-type="' + constants.DATA_TYPE_CANCEL + '">\n                        ' + this.localized.cancelButton + '\n                    </button>\n                    <button class="' + constants.CLASS_BUTTON + ' ' + constants.CLASS_BUTTON_PRIMARY + ' ' + constants.CLASS_ANNOTATION_BUTTON_POST + '" data-type="' + constants.DATA_TYPE_POST + '">\n                        ' + this.localized.postButton + '\n                    </button>\n                </div>\n            </section>\n            <section class="' + (numAnnotations ? '' : constants.CLASS_HIDDEN) + '" data-section="show">\n                <div class="' + CLASS_COMMENTS_CONTAINER + '"></div>\n                <div class="' + CLASS_REPLY_CONTAINER + '">\n                    <textarea class="' + constants.CLASS_TEXTAREA + ' ' + CLASS_REPLY_TEXTAREA + '"\n                        placeholder="' + this.localized.replyPlaceholder + '" data-type="' + constants.DATA_TYPE_REPLY_TEXTAREA + '"></textarea>\n                    <div class="' + constants.CLASS_BUTTON_CONTAINER + ' ' + constants.CLASS_HIDDEN + '">\n                        <button class="' + constants.CLASS_BUTTON + ' ' + constants.CLASS_ANNOTATION_BUTTON_CANCEL + '" data-type="' + constants.DATA_TYPE_CANCEL_REPLY + '">\n                            ' + this.localized.cancelButton + '\n                        </button>\n                        <button class="' + constants.CLASS_BUTTON + ' ' + constants.CLASS_BUTTON_PRIMARY + ' ' + constants.CLASS_ANNOTATION_BUTTON_POST + '" data-type="' + constants.DATA_TYPE_POST_REPLY + '">\n                            ' + this.localized.postButton + '\n                        </button>\n                    </div>\n                </div>\n            </section>').trim();
             return dialogEl;
@@ -822,0 +869,0 @@ }

lib/AnnotationService.js

@@ -253,2 +253,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
                 var threadID = annotation.threadID;
+
                 var thread = threadMap[threadID] || [];
@@ -255,0 +256,0 @@ threadMap[threadID] = thread;

lib/AnnotationThread.js

@@ -255,2 +255,4 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
                 this.dialog.removeAnnotation(annotationID);
+                this.showDialog();
+                this.dialog.deactivateReply();
             }
@@ -633,2 +635,3 @@
                 this.dialog.addAnnotation(annotation);
+                this.dialog.activateReply();
             }
@@ -635,0 +638,0 @@ }

lib/annotatorUtil.js

 import 'whatwg-fetch';
-import { PERMISSION_ANNOTATE, PERMISSION_CAN_VIEW_ANNOTATIONS_ALL, PERMISSION_CAN_VIEW_ANNOTATIONS_SELF, TYPES, SELECTOR_ANNOTATION_CARET, PENDING_STATES, CLASS_ACTIVE, CLASS_HIDDEN, CLASS_INVISIBLE, CLASS_DISABLED, CLASS_BUTTON } from './annotationConstants';
+import { PERMISSION_ANNOTATE, PERMISSION_CAN_VIEW_ANNOTATIONS_ALL, PERMISSION_CAN_VIEW_ANNOTATIONS_SELF, TYPES, SELECTOR_ANNOTATION_CARET, PENDING_STATES, CLASS_ACTIVE, CLASS_HIDDEN, CLASS_INVISIBLE, CLASS_DISABLED } from './annotationConstants';
 
@@ -255,3 +255,3 @@ var HEADER_CLIENT_NAME = 'X-Box-Client-Name';
  * @public
- * @param {string} className Button CSS class
+ * @param {string[]} classNames Button CSS class
  * @param {string} title Accessibilty title
@@ -262,8 +262,9 @@ * @param {string} content Button HTML content
  */
-export function generateBtn(className, title, content) {
+export function generateBtn(classNames, title, content) {
     var dataType = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
 
     var buttonEl = document.createElement('button');
-    buttonEl.classList.add(CLASS_BUTTON);
-    buttonEl.classList.add(className);
+    classNames.forEach(function (className) {
+        return buttonEl.classList.add(className);
+    });
     buttonEl.title = title;
@@ -270,0 +271,0 @@ buttonEl.innerHTML = content;

lib/CommentBox.js

@@ -228,3 +228,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
             containerEl.classList.add('bp-create-comment');
-            containerEl.innerHTML = ('\n            <textarea class="' + constants.CLASS_TEXTAREA + ' ' + constants.CLASS_ANNOTATION_TEXTAREA + ' ' + constants.CLASS_ACTIVE + '"\n                placeholder="' + this.placeholderText + '"></textarea>\n            <div class="' + constants.CLASS_BUTTON_CONTAINER + '">\n                <button class="bp-btn ' + constants.CLASS_ANNOTATION_BUTTON_CANCEL + '">\n                    ' + this.cancelText + '\n                </button>\n                <button class="bp-btn bp-btn-primary ' + constants.CLASS_ANNOTATION_BUTTON_POST + '">\n                    ' + this.postText + '\n                </button>\n            </div>').trim();
+            containerEl.innerHTML = ('\n            <textarea class="' + constants.CLASS_TEXTAREA + ' ' + constants.CLASS_ANNOTATION_TEXTAREA + ' ' + constants.CLASS_ACTIVE + '"\n                placeholder="' + this.placeholderText + '"></textarea>\n            <div class="' + constants.CLASS_BUTTON_CONTAINER + '">\n                <button class="' + constants.CLASS_BUTTON + ' ' + constants.CLASS_ANNOTATION_BUTTON_CANCEL + '">\n                    ' + this.cancelText + '\n                </button>\n                <button class="' + constants.CLASS_BUTTON + ' ' + constants.CLASS_BUTTON_PRIMARY + ' ' + constants.CLASS_ANNOTATION_BUTTON_POST + '">\n                    ' + this.postText + '\n                </button>\n            </div>').trim();
 
@@ -231,0 +231,0 @@ return containerEl;

lib/controllers/AnnotationModeController.js

@@ -61,7 +61,7 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
             this.annotator = data.annotator;
-            this.permissions = data.permissions;
+            this.permissions = data.permissions || {};
             this.hasTouch = data.options ? data.options.hasTouch : false;
             this.isMobile = data.options ? data.options.isMobile : false;
 
-            if (data.modeButton) {
+            if (data.modeButton && this.permissions.canAnnotate) {
                 this.modeButton = data.modeButton;
@@ -68,0 +68,0 @@ this.showButton();

lib/controllers/DrawingModeController.js

@@ -333,2 +333,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
                         var page = thread.location.page;
+
                         this.threads[page].all().forEach(function (drawingThread) {
@@ -335,0 +336,0 @@ return drawingThread.show();

lib/doc/CreateHighlightDialog.js

@@ -14,3 +14,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 import { generateBtn, repositionCaret } from '../annotatorUtil';
-import { CREATE_EVENT, CLASS_ANNOTATION_CARET, CLASS_HIGHLIGHT_BTNS, CLASS_ADD_HIGHLIGHT_BTN, CLASS_ADD_HIGHLIGHT_COMMENT_BTN, CLASS_ANNOTATION_HIGHLIGHT_DIALOG, SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG, SELECTOR_HIGHLIGHT_BTNS, SELECTOR_ADD_HIGHLIGHT_BTN, SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN, CLASS_MOBILE_ANNOTATION_DIALOG, CLASS_ANNOTATION_DIALOG } from '../annotationConstants';
+import { CREATE_EVENT, CLASS_ANNOTATION_CARET, CLASS_HIGHLIGHT_BTNS, CLASS_ADD_HIGHLIGHT_BTN, CLASS_ADD_HIGHLIGHT_COMMENT_BTN, CLASS_ANNOTATION_HIGHLIGHT_DIALOG, SELECTOR_ANNOTATION_HIGHLIGHT_DIALOG, SELECTOR_HIGHLIGHT_BTNS, SELECTOR_ADD_HIGHLIGHT_BTN, SELECTOR_ADD_HIGHLIGHT_COMMENT_BTN, CLASS_MOBILE_ANNOTATION_DIALOG, CLASS_ANNOTATION_DIALOG, CLASS_BUTTON_PLAIN } from '../annotationConstants';
 
@@ -235,3 +235,3 @@ var CLASS_CREATE_DIALOG = 'bp-create-annotation-dialog';
             if (this.allowHighlight) {
-                var highlightEl = generateBtn(CLASS_ADD_HIGHLIGHT_BTN, this.localized.highlightToggle, ICON_HIGHLIGHT, DATA_TYPE_HIGHLIGHT);
+                var highlightEl = generateBtn([CLASS_BUTTON_PLAIN, CLASS_ADD_HIGHLIGHT_BTN], this.localized.highlightToggle, ICON_HIGHLIGHT, DATA_TYPE_HIGHLIGHT);
                 buttonsEl.appendChild(highlightEl);
@@ -241,3 +241,3 @@ }
             if (this.allowComment) {
-                var commentEl = generateBtn(CLASS_ADD_HIGHLIGHT_COMMENT_BTN, this.localized.highlightComment, ICON_HIGHLIGHT_COMMENT, DATA_TYPE_ADD_HIGHLIGHT_COMMENT);
+                var commentEl = generateBtn([CLASS_BUTTON_PLAIN, CLASS_ADD_HIGHLIGHT_COMMENT_BTN], this.localized.highlightComment, ICON_HIGHLIGHT_COMMENT, DATA_TYPE_ADD_HIGHLIGHT_COMMENT);
                 buttonsEl.appendChild(commentEl);
@@ -244,0 +244,0 @@ }

lib/doc/DocAnnotator.js

@@ -222,3 +222,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-                if (isNaN(x) || isNaN(y)) {
+                if (Number.isNaN(x) || Number.isNaN(y)) {
                     this.emit(ANNOTATOR_EVENT.error, this.localized.createError);
@@ -651,3 +651,3 @@ return location;
             var pointController = this.modeControllers[TYPES.point];
-            var isCreatingPoint = pointController && pointController.pendingThreadID !== null;
+            var isCreatingPoint = !!(pointController && pointController.pendingThreadID);
             if (isCreatingPoint || !isHidden || document.activeElement.nodeName.toLowerCase() === 'textarea') {
@@ -950,2 +950,8 @@ return;
 
+            // Prevent the creation of highlights if the user is currently creating a point annotation
+            var pointController = this.modeControllers[TYPES.point];
+            if (pointController && pointController.hadPendingThreads) {
+                return;
+            }
+
             // Creating highlights is disabled on mobile for now since the
@@ -1034,3 +1040,5 @@ // event we would listen to, selectionchange, fires continuously and
 
-            var page = annotatorUtil.getPageInfo(event.target).page;
+            var _annotatorUtil$getPag6 = annotatorUtil.getPageInfo(event.target),
+                page = _annotatorUtil$getPag6.page;
+
             var pageThreads = this.threads[page] || {};
@@ -1162,2 +1170,3 @@
             var highlights = this.highlighter.highlights;
+
             if (!Array.isArray(highlights)) {
@@ -1164,0 +1173,0 @@ return;

lib/doc/docAnnotatorUtil.js

@@ -190,6 +190,7 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
     var zoomScale = annotatorUtil.getScale(annotatedElement);
-    var x = location.x;
-    var y = location.y;
+    var x = location.x,
+        y = location.y;
 
     // If needed, scale coords comparing current dimensions with saved dimensions
+
     var dimensionScale = annotatorUtil.getDimensionScale(location.dimensions, pageDimensions, zoomScale, HEIGHT_PADDING);
@@ -324,2 +325,3 @@ if (dimensionScale) {
     var width = pageDimensions.width;
+
     var height = pageDimensions.height - PAGE_PADDING_TOP - PAGE_PADDING_BOTTOM;
@@ -326,0 +328,0 @@

lib/doc/DocDrawingDialog.js

@@ -262,3 +262,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
             if (canCommit) {
-                var commitButton = annotatorUtil.generateBtn(constants.CLASS_ADD_DRAWING_BTN, this.localized.drawSave, ICON_DRAW_SAVE + ' ' + this.localized.saveButton);
+                var commitButton = annotatorUtil.generateBtn([constants.CLASS_BUTTON_PLAIN, constants.CLASS_ADD_DRAWING_BTN], this.localized.drawSave, ICON_DRAW_SAVE + ' ' + this.localized.saveButton);
                 drawingButtonsEl.appendChild(commitButton);
@@ -268,3 +268,3 @@ }
             if (canDelete) {
-                var deleteButton = annotatorUtil.generateBtn(constants.CLASS_DELETE_DRAWING_BTN, this.localized.drawDelete, ICON_DRAW_DELETE + ' ' + this.localized.deleteButton);
+                var deleteButton = annotatorUtil.generateBtn([constants.CLASS_BUTTON_PLAIN, constants.CLASS_DELETE_DRAWING_BTN], this.localized.drawDelete, ICON_DRAW_DELETE + ' ' + this.localized.deleteButton);
                 drawingButtonsEl.appendChild(deleteButton);
@@ -271,0 +271,0 @@ }

lib/doc/DocHighlightDialog.js

@@ -165,14 +165,17 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
             var plainButtonEl = this.highlightDialogEl.querySelector('button.' + constants.CLASS_ADD_HIGHLIGHT_BTN);
-            var commentButtonEl = this.highlightDialogEl.querySelector('button.' + constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN);
-
-            if (showPlain) {
-                annotatorUtil.showElement(plainButtonEl);
-            } else {
-                annotatorUtil.hideElement(plainButtonEl);
+            if (plainButtonEl) {
+                if (showPlain) {
+                    annotatorUtil.showElement(plainButtonEl);
+                } else {
+                    annotatorUtil.hideElement(plainButtonEl);
+                }
             }
 
-            if (showComment) {
-                annotatorUtil.showElement(commentButtonEl);
-            } else {
-                annotatorUtil.hideElement(commentButtonEl);
+            var commentButtonEl = this.highlightDialogEl.querySelector('button.' + constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN);
+            if (commentButtonEl) {
+                if (showComment) {
+                    annotatorUtil.showElement(commentButtonEl);
+                } else {
+                    annotatorUtil.hideElement(commentButtonEl);
+                }
             }
@@ -344,3 +347,4 @@
             // Generate HTML of highlight dialog
-            this.highlightDialogEl = this.generateHighlightDialogEl();
+            var canDelete = firstAnnotation ? firstAnnotation.permissions.can_delete : this.canAnnotate;
+            this.highlightDialogEl = this.generateHighlightDialogEl(canDelete);
             this.highlightDialogEl.classList.add(constants.CLASS_ANNOTATION_HIGHLIGHT_DIALOG);
@@ -385,12 +389,2 @@
                 annotatorUtil.showElement(highlightLabelEl);
-
-                if (!this.canAnnotate) {
-                    // Hide all action buttons if user cannot annotate
-                    var highlightButtons = this.highlightDialogEl.querySelector(constants.SELECTOR_HIGHLIGHT_BTNS);
-                    annotatorUtil.hideElement(highlightButtons);
-                } else if (firstAnnotation.permissions && !firstAnnotation.permissions.can_delete) {
-                    // Hide delete button on plain highlights if user doesn't have permissions
-                    var addHighlightBtn = this.highlightDialogEl.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
-                    annotatorUtil.hideElement(addHighlightBtn);
-                }
             }
@@ -462,2 +456,6 @@
             var addHighlightBtn = this.dialogEl.querySelector(constants.SELECTOR_ADD_HIGHLIGHT_BTN);
+            if (!addHighlightBtn) {
+                return;
+            }
+
             if (fillStyle === constants.HIGHLIGHT_FILL.active) {
@@ -662,2 +660,3 @@ addHighlightBtn.classList.add(constants.CLASS_ACTIVE);
          * @private
+         * @param {booelan} canDeleteAnnotation  Whether or not the user can delete the highlight annotation
          * @return {HTMLElement} Highlight annotation dialog DOM element
@@ -668,5 +667,26 @@ */
         key: 'generateHighlightDialogEl',
-        value: function generateHighlightDialogEl() {
+        value: function generateHighlightDialogEl(canDeleteAnnotation) {
             var highlightDialogEl = document.createElement('div');
-            highlightDialogEl.innerHTML = ('\n            <span class="' + CLASS_HIGHLIGHT_LABEL + ' ' + constants.CLASS_HIDDEN + '"></span>\n            <span class="' + constants.CLASS_HIGHLIGHT_BTNS + '">\n                <button class="bp-btn-plain ' + constants.CLASS_ADD_HIGHLIGHT_BTN + '"\n                    data-type="' + constants.DATA_TYPE_HIGHLIGHT + '"\n                    title="' + this.localized.highlightToggle + '">\n                    ' + ICON_HIGHLIGHT + '\n                </button>\n                <button class="bp-btn-plain ' + constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN + '"\n                    data-type="' + constants.DATA_TYPE_ADD_HIGHLIGHT_COMMENT + '"\n                    title="' + this.localized.highlightComment + '">\n                    ' + ICON_HIGHLIGHT_COMMENT + '\n                </button>\n            </span>').trim();
+
+            var highlightLabelEl = document.createElement('span');
+            highlightLabelEl.classList.add(CLASS_HIGHLIGHT_LABEL);
+            highlightLabelEl.classList.add(constants.CLASS_HIDDEN);
+            highlightDialogEl.appendChild(highlightLabelEl);
+
+            if (!this.canAnnotate) {
+                return highlightDialogEl;
+            }
+
+            var highlightButtons = document.createElement('span');
+            highlightButtons.classList.add(constants.CLASS_HIGHLIGHT_BTNS);
+            highlightDialogEl.appendChild(highlightButtons);
+
+            if (canDeleteAnnotation) {
+                var addHighlightBtn = annotatorUtil.generateBtn([constants.CLASS_BUTTON_PLAIN, constants.CLASS_ADD_HIGHLIGHT_BTN], this.localized.highlightToggle, ICON_HIGHLIGHT, constants.DATA_TYPE_HIGHLIGHT);
+                highlightButtons.appendChild(addHighlightBtn);
+            }
+
+            var addCommentBtn = annotatorUtil.generateBtn([constants.CLASS_BUTTON_PLAIN, constants.CLASS_ADD_HIGHLIGHT_COMMENT_BTN], this.localized.highlightComment, ICON_HIGHLIGHT_COMMENT, constants.DATA_TYPE_ADD_HIGHLIGHT_COMMENT);
+            highlightButtons.appendChild(addCommentBtn);
+
             return highlightDialogEl;
@@ -673,0 +693,0 @@ }

lib/doc/DocHighlightThread.js

@@ -610,2 +610,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
+
             var index = 0;
@@ -612,0 +613,0 @@ while (index < length && !eventOccurredInHighlight) {

lib/drawing/DrawingPath.js

@@ -188,2 +188,3 @@ var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
             var paths = accumulator.paths;
+
             var apath = { path: pathA.path };
@@ -190,0 +191,0 @@ if (!paths) {

lib/drawing/DrawingThread.js

@@ -333,2 +333,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
                 var canvas = context.canvas;
+
                 context.clearRect(0, 0, canvas.width, canvas.height);
@@ -509,2 +510,3 @@ }
                 var canvas = this.drawingContext.canvas;
+
                 this.drawingContext.clearRect(0, 0, canvas.width, canvas.height);
@@ -511,0 +513,0 @@ }

lib/image/ImageAnnotator.js

@@ -94,3 +94,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-            if (isNaN(x) || isNaN(y)) {
+            if (Number.isNaN(x) || Number.isNaN(y)) {
                 this.emit(ANNOTATOR_EVENT.error, this.localized.createError);
@@ -97,0 +97,0 @@ return location;

package.json

 {
   "name": "box-annotations",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Box Annotations",
@@ -20,3 +20,3 @@ "author": "Box (https://www.box.com/)",
     "autobind-decorator": "^1.3.4",
-    "autoprefixer": "^6.7.7",
+    "autoprefixer": "^7.1.6",
     "babel-cli": "^6.26.0",
@@ -35,25 +35,24 @@ "babel-core": "^6.25.0",
     "babel-preset-react": "^6.23.0",
-    "chai": "^3.5.0",
-    "chai-as-promised": "5.3.0",
+    "chai": "^4.1.2",
     "chai-dom": "^1.5.0",
+    "commitlint": "^5.0.1",
+    "conventional-changelog-cli": "^1.3.2",
     "conventional-github-releaser": "^2.0.0",
-    "conventional-changelog-cli": "^1.3.2",
-    "conventional-changelog-lint": "^1.1.7",
     "cpx": "^1.5.0",
-    "css-loader": "^0.27.3",
+    "css-loader": "^0.28.7",
+    "cssnano-cli": "^1.0.5",
     "eslint": "^4.7.2",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-config-prettier": "^2.6.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-prettier": "^2.7.0",
     "eslint-import-resolver-webpack": "^0.8.3",
     "eslint-plugin-babel": "^4.1.1",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-react": "^7.4.0",
-    "extract-text-webpack-plugin": "2.1.0",
+    "extract-text-webpack-plugin": "^3.0.2",
     "fetch-mock": "^5.12.1",
     "fetch-mock-forwarder": "^1.0.0",
-    "husky": "^0.13.4",
+    "husky": "^0.14.3",
     "karma": "^1.5.0",
     "karma-chai": "^0.1.0",
-    "karma-chai-as-promised": "^0.1.2",
     "karma-chai-dom": "^1.1.0",
@@ -73,8 +72,8 @@ "karma-chai-sinon": "^0.1.5",
     "karma-webpack": "^2.0.4",
-    "lint-staged": "^4.2.3",
-    "mocha": "^3.4.2",
+    "lint-staged": "^5.0.0",
+    "mocha": "^4.0.1",
     "node-noop": "^1.0.0",
     "node-sass": "^4.5.0",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
-    "postcss-loader": "^1.3.3",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "postcss-loader": "^2.0.8",
     "prettier": "^1.5.3",
@@ -84,12 +83,11 @@ "prettier-eslint-cli": "^4.1.1",
     "sass-loader": "^6.0.6",
-    "sinon": "1.17.7",
-    "sinon-chai": "2.8.0",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
     "sinon-stub-promise": "^4.0.0",
-    "string-replace-loader": "^1.3.0",
-    "style-loader": "^0.18.2",
-    "stylelint": "^8.1.1",
+    "style-loader": "^0.19.0",
+    "stylelint": "^8.2.0",
     "stylelint-config-standard": "^17.0.0",
     "stylelint-order": "^0.7.0",
     "stylelint-scss": "^2.1.0",
-    "webpack": "^2.2.1",
+    "webpack": "^3.8.1",
     "webpack-bundle-analyzer": "^2.8.3",
@@ -105,5 +103,5 @@ "whatwg-fetch": "^2.0.3"
     "precommit": "lint-staged",
+    "commitmsg": "commitlint -e",
     "prepush": "yarn run lint",
     "prettier": "prettier-eslint \"src/**/*.js\" --print-width 120 --single-quote --tab-width 4 --write",
-    "commitmsg": "conventional-changelog-lint -e",
     "ci": "yarn run clean && yarn run lint && yarn run test",
@@ -110,0 +108,0 @@ "clean": "rm -rf dist && rm -rf lib && rm -rf reports/coverage && rm -rf src/i18n/json",

README.md

 [![Project Status](https://img.shields.io/badge/status-active-brightgreen.svg?style=flat-square)](http://opensource.box.com/badges/)
 [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-annotations)
-[![version](https://img.shields.io/badge/version-v0.3.1-blue.svg?style=flat-square)](https://github.com/box/box-annotations)
+[![version](https://img.shields.io/badge/version-v0.4.0-blue.svg?style=flat-square)](https://github.com/box/box-annotations)
 [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
@@ -6,0 +6,0 @@

No alert changes

Improved metrics

Total package byte prevSize

582977

increased by0.41%

Dev dependency count

72

decreased by-2.7%

Lines of code

9811

increased by0.62%

No dependency changes