Ensure that hidden popups do not use any space

mozilla · Dec 27, 2015 · dc06458 · dc06458
1 parent ad4354c
commit dc06458
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/display/annotation_layer.js b/src/display/annotation_layer.js
@@ -321,8 +321,8 @@ var TextAnnotationElement = (function TextAnnotationElementClosure() {
 
       if (!this.data.hasPopup) {
         var popupElement = new PopupElement({
-          parentContainer: this.container,
-          parentTrigger: image,
+          container: null,
+          trigger: image,
           color: this.data.color,
           title: this.data.title,
           contents: this.data.contents
@@ -437,8 +437,8 @@ var PopupAnnotationElement = (function PopupAnnotationElementClosure() {
       }
 
       var popup = new PopupElement({
-        parentContainer: parentElement,
-        parentTrigger: parentElement,
+        container: this.container,
+        trigger: parentElement,
         color: this.data.color,
         title: this.data.title,
         contents: this.data.contents
@@ -469,8 +469,8 @@ var PopupElement = (function PopupElementClosure() {
   var BACKGROUND_ENLIGHT = 0.7;
 
   function PopupElement(parameters) {
-    this.parentContainer = parameters.parentContainer;
-    this.parentTrigger = parameters.parentTrigger;
+    this.container = parameters.container;
+    this.trigger = parameters.trigger;
     this.color = parameters.color;
     this.title = parameters.title;
     this.contents = parameters.contents;
@@ -490,9 +490,16 @@ var PopupElement = (function PopupElementClosure() {
       var wrapper = document.createElement('div');
       wrapper.className = 'popupWrapper';
 
+      if (!this.container) {
+        // A separate container only exists for Popup annotations.
+        // When a Text annotation creates its own popup, it is placed inside
+        // the Text annotation container. Hiding the wrapper is enough then.
+        this.container = wrapper;
+      }
+      this.container.setAttribute('hidden', true);
+
       var popup = this.popup = document.createElement('div');
       popup.className = 'popup';
-      popup.setAttribute('hidden', true);
 
       var color = this.color;
       if (color) {
@@ -508,10 +515,9 @@ var PopupElement = (function PopupElementClosure() {
       title.textContent = this.title;
 
       // Attach the event listeners to the trigger element.
-      var trigger = this.parentTrigger;
-      trigger.addEventListener('click', this._toggle.bind(this));
-      trigger.addEventListener('mouseover', this._show.bind(this, false));
-      trigger.addEventListener('mouseout', this._hide.bind(this, false));
+      this.trigger.addEventListener('click', this._toggle.bind(this));
+      this.trigger.addEventListener('mouseover', this._show.bind(this, false));
+      this.trigger.addEventListener('mouseout', this._hide.bind(this, false));
       popup.addEventListener('click', this._hide.bind(this, true));
 
       popup.appendChild(title);
@@ -566,9 +572,9 @@ var PopupElement = (function PopupElementClosure() {
       if (pin) {
         this.pinned = true;
       }
-      if (this.popup.hasAttribute('hidden')) {
-        this.popup.removeAttribute('hidden');
-        this.parentContainer.style.zIndex += 1;
+      if (this.container.hasAttribute('hidden')) {
+        this.container.removeAttribute('hidden');
+        this.container.style.zIndex += 1;
       }
     },
 
@@ -583,9 +589,9 @@ var PopupElement = (function PopupElementClosure() {
       if (unpin) {
         this.pinned = false;
       }
-      if (!this.popup.hasAttribute('hidden') && !this.pinned) {
-        this.popup.setAttribute('hidden', true);
-        this.parentContainer.style.zIndex -= 1;
+      if (!this.container.hasAttribute('hidden') && !this.pinned) {
+        this.container.setAttribute('hidden', true);
+        this.container.style.zIndex -= 1;
       }
     }
   };