Fix: Search preview container for mobile annotations dialog (#209)

- The annotation dialog can't search this.annotatedElement for the mobile dialog as it lives next to the preview itself. This was only an issue on mobile devices however, it prevented any dialogs from properly opening.
box · Jul 11, 2017 · 56e026a · 56e026a
1 parent 6eeb432
commit 56e026a
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 1 deletion.
diff --git a/src/lib/annotations/AnnotationDialog.js b/src/lib/annotations/AnnotationDialog.js
@@ -37,6 +37,7 @@ const CLASS_ANIMATE_DIALOG = 'bp-animate-show-dialog';
         super();
 
         this.annotatedElement = data.annotatedElement;
+        this.container = data.container;
         this.location = data.location;
         this.hasAnnotations = data.annotations.length > 0;
         this.canAnnotate = data.canAnnotate;
@@ -68,7 +69,7 @@ const CLASS_ANIMATE_DIALOG = 'bp-animate-show-dialog';
     show() {
         // Populate mobile annotations dialog with annotations information
         if (this.isMobile) {
-            this.element = this.annotatedElement.querySelector(`.${constants.CLASS_MOBILE_ANNOTATION_DIALOG}`);
+            this.element = this.container.querySelector(`.${constants.CLASS_MOBILE_ANNOTATION_DIALOG}`);
             annotatorUtil.showElement(this.element);
             this.element.appendChild(this.dialogEl);
 

diff --git a/src/lib/annotations/AnnotationThread.js b/src/lib/annotations/AnnotationThread.js
@@ -41,6 +41,7 @@ import { ICON_PLACED_ANNOTATION } from '../icons/icons';
         this.annotatedElement = data.annotatedElement;
         this.annotations = data.annotations || [];
         this.annotationService = data.annotationService;
+        this.container = data.container;
         this.fileVersionId = data.fileVersionId;
         this.location = data.location;
         this.threadID = data.threadID || AnnotationService.generateID();

diff --git a/src/lib/annotations/__tests__/AnnotationDialog-test.js b/src/lib/annotations/__tests__/AnnotationDialog-test.js
@@ -21,6 +21,7 @@ describe('lib/annotations/AnnotationDialog', () => {
 
         dialog = new AnnotationDialog({
             annotatedElement: document.querySelector('.annotated-element'),
+            container: document,
             location: {},
             annotations: [],
             canAnnotate: true

diff --git a/src/lib/annotations/doc/DocAnnotator.js b/src/lib/annotations/doc/DocAnnotator.js
@@ -260,6 +260,7 @@ function isThreadInHoverState(thread) {
             annotatedElement: this.annotatedElement,
             annotations,
             annotationService: this.annotationService,
+            container: this.container,
             fileVersionId: this.fileVersionId,
             isMobile: this.isMobile,
             locale: this.locale,

diff --git a/src/lib/annotations/doc/DocHighlightThread.js b/src/lib/annotations/doc/DocHighlightThread.js
@@ -257,6 +257,7 @@ const HOVER_TIMEOUT_MS = 75;
     createDialog() {
         this.dialog = new DocHighlightDialog({
             annotatedElement: this.annotatedElement,
+            container: this.container,
             annotations: this.annotations,
             locale: this.locale,
             location: this.location,

diff --git a/src/lib/annotations/doc/DocPointThread.js b/src/lib/annotations/doc/DocPointThread.js
@@ -70,6 +70,7 @@ const POINT_ANNOTATION_ICON_WIDTH = 24;
     createDialog() {
         this.dialog = new DocPointDialog({
             annotatedElement: this.annotatedElement,
+            container: this.container,
             annotations: this.annotations,
             locale: this.locale,
             location: this.location,

diff --git a/src/lib/annotations/image/ImageAnnotator.js b/src/lib/annotations/image/ImageAnnotator.js
@@ -91,6 +91,7 @@ const ANNOTATED_ELEMENT_SELECTOR = '.bp-image, .bp-images-wrapper';
             annotatedElement: this.annotatedElement,
             annotations,
             annotationService: this.annotationService,
+            container: this.container,
             fileVersionId: this.fileVersionId,
             isMobile: this.isMobile,
             locale: this.locale,

diff --git a/src/lib/annotations/image/ImagePointThread.js b/src/lib/annotations/image/ImagePointThread.js
@@ -47,6 +47,7 @@ const POINT_ANNOTATION_ICON_WIDTH = 24;
     createDialog() {
         this.dialog = new ImagePointDialog({
             annotatedElement: this.annotatedElement,
+            container: this.container,
             annotations: this.annotations,
             location: this.location,
             locale: this.locale,