Chore: Remove autobind from base classes

box · Nov 22, 2017 · 2dfa636 · 2dfa636
1 parent e6641d0
commit 2dfa636
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 26 deletions.
diff --git a/src/Annotation.js b/src/Annotation.js
@@ -1,6 +1,3 @@
-import autobind from 'autobind-decorator';
-
-@autobind
 class Annotation {
     //--------------------------------------------------------------------------
     // Typedef

diff --git a/src/AnnotationDialog.js b/src/AnnotationDialog.js
@@ -1,4 +1,3 @@
-import autobind from 'autobind-decorator';
 import EventEmitter from 'events';
 import * as annotatorUtil from './annotatorUtil';
 import * as constants from './annotationConstants';
@@ -17,7 +16,6 @@ const CLASS_BUTTON_DELETE_COMMENT = 'delete-comment-btn';
 const CLASS_DELETE_CONFIRMATION = 'delete-confirmation';
 const CLASS_BUTTON_DELETE_CONFIRM = 'confirm-delete-btn';
 
-@autobind
 class AnnotationDialog extends EventEmitter {
     //--------------------------------------------------------------------------
     // Typedef
@@ -55,7 +53,16 @@ class AnnotationDialog extends EventEmitter {
         this.locale = data.locale;
         this.isMobile = data.isMobile;
 
+        // Explicitly bind listeners
+        this.keydownHandler = this.keydownHandler.bind(this);
+        this.clickHandler = this.clickHandler.bind(this);
+        this.stopPropagation = this.stopPropagation.bind(this);
         this.validateTextArea = this.validateTextArea.bind(this);
+
+        if (!this.isMobile) {
+            this.mouseenterHandler = this.mouseenterHandler.bind(this);
+            this.mouseleaveHandler = this.mouseleaveHandler.bind(this);
+        }
     }
 
     /**
@@ -141,6 +148,8 @@ class AnnotationDialog extends EventEmitter {
         }
 
         const dialogCloseButtonEl = this.element.querySelector(constants.SELECTOR_DIALOG_CLOSE);
+
+        this.hideMobileDialog = this.hideMobileDialog.bind(this);
         dialogCloseButtonEl.addEventListener('click', this.hideMobileDialog);
 
         this.element.classList.add(constants.CLASS_ANIMATE_DIALOG);
@@ -779,10 +788,14 @@ class AnnotationDialog extends EventEmitter {
                 <textarea class="${constants.CLASS_TEXTAREA} ${constants.CLASS_ANNOTATION_TEXTAREA}"
                     placeholder="${this.localized.addCommentPlaceholder}"></textarea>
                 <div class="${constants.CLASS_BUTTON_CONTAINER}">
-                    <button class="${constants.CLASS_BUTTON} ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}" data-type="${constants.DATA_TYPE_CANCEL}">
+                    <button class="${constants.CLASS_BUTTON} ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}" data-type="${
+    constants.DATA_TYPE_CANCEL
+}">
                         ${this.localized.cancelButton}
                     </button>
-                    <button class="${constants.CLASS_BUTTON} ${constants.CLASS_BUTTON_PRIMARY} ${constants.CLASS_ANNOTATION_BUTTON_POST}" data-type="${constants.DATA_TYPE_POST}">
+                    <button class="${constants.CLASS_BUTTON} ${constants.CLASS_BUTTON_PRIMARY} ${
+    constants.CLASS_ANNOTATION_BUTTON_POST
+}" data-type="${constants.DATA_TYPE_POST}">
                         ${this.localized.postButton}
                     </button>
                 </div>
@@ -791,13 +804,18 @@ class AnnotationDialog extends EventEmitter {
                 <div class="${CLASS_COMMENTS_CONTAINER}"></div>
                 <div class="${CLASS_REPLY_CONTAINER}">
                     <textarea class="${constants.CLASS_TEXTAREA} ${CLASS_REPLY_TEXTAREA}"
-                        placeholder="${this.localized
-        .replyPlaceholder}" data-type="${constants.DATA_TYPE_REPLY_TEXTAREA}"></textarea>
+                        placeholder="${this.localized.replyPlaceholder}" data-type="${
+    constants.DATA_TYPE_REPLY_TEXTAREA
+}"></textarea>
                     <div class="${constants.CLASS_BUTTON_CONTAINER} ${constants.CLASS_HIDDEN}">
-                        <button class="${constants.CLASS_BUTTON} ${constants.CLASS_ANNOTATION_BUTTON_CANCEL}" data-type="${constants.DATA_TYPE_CANCEL_REPLY}">
+                        <button class="${constants.CLASS_BUTTON} ${
+    constants.CLASS_ANNOTATION_BUTTON_CANCEL
+}" data-type="${constants.DATA_TYPE_CANCEL_REPLY}">
                             ${this.localized.cancelButton}
                         </button>
-                        <button class="${constants.CLASS_BUTTON} ${constants.CLASS_BUTTON_PRIMARY} ${constants.CLASS_ANNOTATION_BUTTON_POST}" data-type="${constants.DATA_TYPE_POST_REPLY}">
+                        <button class="${constants.CLASS_BUTTON} ${constants.CLASS_BUTTON_PRIMARY} ${
+    constants.CLASS_ANNOTATION_BUTTON_POST
+}" data-type="${constants.DATA_TYPE_POST_REPLY}">
                             ${this.localized.postButton}
                         </button>
                     </div>

diff --git a/src/AnnotationService.js b/src/AnnotationService.js
@@ -1,10 +1,8 @@
 import 'whatwg-fetch';
 import EventEmitter from 'events';
-import autobind from 'autobind-decorator';
 import Annotation from './Annotation';
 import { getHeaders } from './annotatorUtil';
 
-@autobind
 class AnnotationService extends EventEmitter {
     //--------------------------------------------------------------------------
     // Static
@@ -59,6 +57,9 @@ class AnnotationService extends EventEmitter {
             id: '0',
             name: this.anonymousUserName
         };
+
+        // Explicitly bind listeners
+        this.createThreadMap = this.createThreadMap.bind(this);
     }
 
     /**
@@ -255,8 +256,9 @@ class AnnotationService extends EventEmitter {
      * @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`;
+        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}`;
         }

diff --git a/src/AnnotationThread.js b/src/AnnotationThread.js
@@ -1,5 +1,4 @@
 import EventEmitter from 'events';
-import autobind from 'autobind-decorator';
 import Annotation from './Annotation';
 import AnnotationService from './AnnotationService';
 import * as annotatorUtil from './annotatorUtil';
@@ -12,7 +11,6 @@ import {
     THREAD_EVENT
 } from './annotationConstants';
 
-@autobind
 class AnnotationThread extends EventEmitter {
     //--------------------------------------------------------------------------
     // Typedef
@@ -61,6 +59,13 @@ class AnnotationThread extends EventEmitter {
         this.localized = data.localized;
         this.state = STATES.inactive;
 
+        // Explicitly bind listeners
+        this.showDialog = this.showDialog.bind(this);
+
+        if (!this.isMobile) {
+            this.mouseoutHandler = this.mouseoutHandler.bind(this);
+        }
+
         this.setup();
     }
 
@@ -381,6 +386,11 @@ class AnnotationThread extends EventEmitter {
             return;
         }
 
+        // Explicitly bind listeners to the dialog
+        this.createAnnotation = this.createAnnotation.bind(this);
+        this.cancelUnsavedAnnotation = this.cancelUnsavedAnnotation.bind(this);
+        this.deleteAnnotationWithID = this.deleteAnnotationWithID.bind(this);
+
         this.dialog.addListener('annotationcreate', this.createAnnotation);
         this.dialog.addListener('annotationcancel', this.cancelUnsavedAnnotation);
         this.dialog.addListener('annotationdelete', this.deleteAnnotationWithID);

diff --git a/src/Annotator.js b/src/Annotator.js
@@ -1,5 +1,4 @@
 import EventEmitter from 'events';
-import autobind from 'autobind-decorator';
 import AnnotationService from './AnnotationService';
 import * as annotatorUtil from './annotatorUtil';
 import { ICON_CLOSE } from './icons/icons';
@@ -19,7 +18,6 @@ import {
     CONTROLLER_EVENT
 } from './annotationConstants';
 
-@autobind
 class Annotator extends EventEmitter {
     //--------------------------------------------------------------------------
     // Typedef
@@ -70,9 +68,13 @@ class Annotator extends EventEmitter {
         const { CONTROLLERS } = this.options.annotator || {};
         this.modeControllers = CONTROLLERS || {};
 
-        this.createPointThread = this.createPointThread.bind(this);
-
         this.fetchPromise = this.fetchAnnotations();
+
+        // Explicitly binding listeners
+        this.createPointThread = this.createPointThread.bind(this);
+        this.scaleAnnotations = this.scaleAnnotations.bind(this);
+        this.handleControllerEvents = this.handleControllerEvents.bind(this);
+        this.handleServicesErrors = this.handleServicesErrors.bind(this);
     }
 
     /**
@@ -224,11 +226,11 @@ class Annotator extends EventEmitter {
     /* 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
-    */
+     * 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 */