Fix: Scrolling to bottom of flipped dialogs (#56)

box · Dec 4, 2017 · 89b50e2 · 89b50e2
1 parent 496ceec
commit 89b50e2
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 10 deletions.
diff --git a/src/AnnotationDialog.js b/src/AnnotationDialog.js
@@ -127,6 +127,22 @@ class AnnotationDialog extends EventEmitter {
         if (util.isElementInViewport(textAreaEl)) {
             textAreaEl.focus();
         }
+
+        this.scrollToLastComment();
+    }
+
+    /**
+     * Auto scroll annotations dialog to bottom where new comment was added
+     *
+     * @return {void}
+     */
+    scrollToLastComment() {
+        const annotationsEl = this.dialogEl.querySelector(constants.SELECTOR_ANNOTATION_CONTAINER);
+        if (annotationsEl) {
+            const isDialogFlipped = this.dialogEl.classList.contains(CLASS_FLIPPED_DIALOG);
+            const clientHeight = isDialogFlipped ? 0 : annotationsEl.clientHeight;
+            annotationsEl.scrollTop = annotationsEl.scrollHeight - clientHeight;
+        }
     }
 
     /**
@@ -718,11 +734,7 @@ class AnnotationDialog extends EventEmitter {
         replyTextEl.classList.add(constants.CLASS_ACTIVE);
         util.showElement(replyButtonEls);
 
-        // Auto scroll annotations dialog to bottom where new comment was added
-        const annotationsEl = this.dialogEl.querySelector(constants.SELECTOR_ANNOTATION_CONTAINER);
-        if (annotationsEl) {
-            annotationsEl.scrollTop = annotationsEl.scrollHeight - annotationsEl.clientHeight;
-        }
+        this.scrollToLastComment();
     }
 
     /**
@@ -748,11 +760,7 @@ class AnnotationDialog extends EventEmitter {
             replyTextEl.focus();
         }
 
-        // Auto scroll annotations dialog to bottom where new comment was added
-        const annotationsEl = this.dialogEl.querySelector(constants.SELECTOR_ANNOTATION_CONTAINER);
-        if (annotationsEl) {
-            annotationsEl.scrollTop = annotationsEl.scrollHeight - annotationsEl.clientHeight;
-        }
+        this.scrollToLastComment();
     }
 
     /**

diff --git a/src/__tests__/AnnotationDialog-test.js b/src/__tests__/AnnotationDialog-test.js
@@ -143,6 +143,33 @@ describe('AnnotationDialog', () => {
         });
     });
 
+    describe('scrollToLastComment()', () => {
+        it('should set the dialog scroll height to the bottom of the comments container', () => {
+            const annotationEl = {
+                scrollHeight: 500,
+                clientHeight: 300,
+                scrollTop: 0
+            };
+            sandbox.stub(dialog.dialogEl, 'querySelector').returns(annotationEl);
+
+            dialog.scrollToLastComment();
+            expect(annotationEl.scrollTop).equals(200);
+        });
+
+        it('should set the flipped dialog scroll height to the bottom of the comments container', () => {
+            const annotationEl = {
+                scrollHeight: 500,
+                clientHeight: 500,
+                scrollTop: 0
+            };
+            dialog.dialogEl.classList.add('bp-annotation-dialog-flipped');
+            sandbox.stub(dialog.dialogEl, 'querySelector').returns(annotationEl);
+
+            dialog.scrollToLastComment();
+            expect(annotationEl.scrollTop).equals(500);
+        });
+    });
+
     describe('showMobileDialog()', () => {
         it('should populate the mobile dialog if using a mobile browser', () => {
             dialog.highlightDialogEl = null;