Currently, the PopupModal is always positioned relatively to the body element.

This change adds the ability to render the PopupModal inside an arbitrary parent element and center it relative to the parent.
RELNOTES[INC]: Add the ability to center a dialog inside a parent parent element.

PiperOrigin-RevId: 530611906
Change-Id: If6fe8510c0d7ef7c2cb01619834c4d0f68c3626b

Author: Closure Team

closure/goog/ui/BUILD

@@ -1286,6 +1286,7 @@ closure_js_library(
         "//closure/goog/events:eventtype",
         "//closure/goog/events:focushandler",
         "//closure/goog/fx:transition",
+        "//closure/goog/math:size",
         "//closure/goog/string",
         "//closure/goog/style",
         "//closure/goog/timer",

closure/goog/ui/modalpopup.js

@@ -22,6 +22,7 @@ goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('goog.events.FocusHandler');
 goog.require('goog.fx.Transition');
+goog.require('goog.math.Size');
 goog.require('goog.string');
 goog.require('goog.style');
 goog.require('goog.ui.Component');
@@ -138,6 +139,15 @@ goog.ui.ModalPopup.prototype.tabCatcherElement_ = null;
 goog.ui.ModalPopup.prototype.backwardTabWrapInProgress_ = false;
 
 
+/**
+ * Whether to center the popup and the background inside the parent element.
+ * Otherwise, the default is to center inside the document body.
+ * @type {boolean}
+ * @private
+ */
+goog.ui.ModalPopup.prototype.centerInsideParent_ = false;
+
+
 /**
  * Transition to show the popup.
  * @type {goog.fx.Transition}
@@ -450,6 +460,21 @@ goog.ui.ModalPopup.prototype.setTransition = function(
 };
 
 
+/**
+ * Sets the parent element to center the popup and the background inside the
+ * parent element.
+ * @param {boolean} centerInsideParent
+ */
+goog.ui.ModalPopup.prototype.setCenterInsideParentElement = function(
+    centerInsideParent) {
+  if (this.isInDocument()) {
+    throw new Error(
+        'Can\'t set parent element after component is already in document.');
+  }
+  this.centerInsideParent_ = centerInsideParent;
+};
+
+
 /**
  * Shows the popup.
  * @private
@@ -646,20 +671,26 @@ goog.ui.ModalPopup.prototype.resizeBackground_ = function() {
     goog.style.setElementShown(this.bgEl_, false);
   }
 
-  var doc = this.getDomHelper().getDocument();
-  var win = goog.dom.getWindow(doc) || window;
-
-  // Take the max of document height and view height, in case the document does
-  // not fill the viewport. Read from both the body element and the html element
-  // to account for browser differences in treatment of absolutely-positioned
-  // content.
-  var viewSize = goog.dom.getViewportSize(win);
-  var w = Math.max(
-      viewSize.width,
-      Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth));
-  var h = Math.max(
-      viewSize.height,
-      Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight));
+  // Take the max of document height and parent element height, in case the
+  // document does not fill the parent element. Read from both the body element
+  // and the html element to account for browser differences in treatment of
+  // absolutely-positioned content.
+  let w;
+  let h;
+  if (this.centerInsideParent_) {
+    const parentEl = this.getElement().parentElement;
+    w = parentEl.clientWidth;
+    h = parentEl.clientHeight;
+  } else {
+    const doc = this.getDomHelper().getDocument();
+    const viewportSize = this.getDocumentViewportSize_();
+    w = Math.max(
+        viewportSize.width,
+        Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth));
+    h = Math.max(
+        viewportSize.height,
+        Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight));
+  }
 
   if (this.bgIframeEl_) {
     goog.style.setElementShown(this.bgIframeEl_, true);
@@ -680,8 +711,6 @@ goog.ui.ModalPopup.prototype.reposition = function() {
   // TODO(chrishenry): Make this use goog.positioning as in goog.ui.PopupBase?
 
   // Get the current viewport to obtain the scroll offset.
-  var doc = this.getDomHelper().getDocument();
-  var win = goog.dom.getWindow(doc) || window;
   if (goog.style.getComputedPosition(this.getElement()) == 'fixed') {
     var x = 0;
     var y = 0;
@@ -691,12 +720,20 @@ goog.ui.ModalPopup.prototype.reposition = function() {
     var y = scroll.y;
   }
 
-  var popupSize = goog.style.getSize(this.getElement());
-  var viewSize = goog.dom.getViewportSize(win);
+  // The popupSize should get calculated before viewSize to avoid losing focus
+  // on the action button.
+  const popupSize = goog.style.getSize(this.getElement());
+  let viewSize;
+  if (this.centerInsideParent_) {
+    const parentEl = this.getElement().parentElement;
+    viewSize = new goog.math.Size(parentEl.clientWidth, parentEl.clientHeight);
+  } else {
+    viewSize = this.getDocumentViewportSize_();
+  }
 
   // Make sure left and top are non-negatives.
-  var left = Math.max(x + viewSize.width / 2 - popupSize.width / 2, 0);
-  var top = Math.max(y + viewSize.height / 2 - popupSize.height / 2, 0);
+  const left = Math.max(x + viewSize.width / 2 - popupSize.width / 2, 0);
+  const top = Math.max(y + viewSize.height / 2 - popupSize.height / 2, 0);
   goog.style.setPosition(this.getElement(), left, top);
 
   // We place the tab catcher at the same position as the dialog to
@@ -756,6 +793,18 @@ goog.ui.ModalPopup.prototype.focusElement_ = function() {
 };
 
 
+/**
+ * Returns the size of the element containing the background and the modal.
+ * @return {!goog.math.Size}
+ * @private
+ */
+goog.ui.ModalPopup.prototype.getDocumentViewportSize_ = function() {
+  const doc = this.getDomHelper().getDocument();
+  const win = goog.dom.getWindow(doc) || window;
+  return goog.dom.getViewportSize(win);
+};
+
+
 /** @override */
 goog.ui.ModalPopup.prototype.disposeInternal = function() {
   'use strict';

closure/goog/ui/modalpopup_test.js

@@ -454,6 +454,20 @@ testSuite({
         dom.getActiveElement(document) == popup.getElement());
   },
 
+  testPopupGetsFocus_withOptionalParent() {
+    const parentEl = dom.createElement(TagName.DIV);
+    document.body.appendChild(parentEl);
+    popup = new ModalPopup();
+    popup.setCenterInsideParentElement(true);
+    popup.render(parentEl);
+
+    popup.setVisible(true);
+
+    assertTrue(
+        'Dialog must receive initial focus',
+        dom.getActiveElement(document) == popup.getElement());
+  },
+
   testDecoratedPopupGetsFocus() {
     const dialogElem = dom.createElement(TagName.DIV);
     document.body.appendChild(dialogElem);
@@ -465,4 +479,100 @@ testSuite({
         dom.getActiveElement(document) == popup.getElement());
     dom.removeNode(dialogElem);
   },
+
+  testBackgroundSize_withoutOptionalParent_inheritBodySize() {
+    popup = new ModalPopup();
+    popup.render();
+    // Because the test does not add css, the size of body element changes
+    // after showing the background.
+    const documentHeight = document.documentElement.scrollHeight;
+    const documentWidth = document.documentElement.scrollWidth;
+
+    popup.setVisible(true);
+
+    const backgroundSize = style.getSize(popup.getBackgroundElement());
+    assertTrue(backgroundSize.width === documentWidth);
+    assertTrue(backgroundSize.height === documentHeight);
+  },
+
+  testBackgroundSize_withOptionalParent_backgroundInheritParentSize() {
+    const parentEl = dom.createElement(TagName.DIV);
+    document.body.appendChild(parentEl);
+    style.setSize(parentEl, 99, 88);
+    // Reinforce the test by changing the parent element size and assert the
+    // modal popup receives the right parent dimensions.
+    parentEl.style.transform = 'scale(0.5)';
+    parentEl.style.zoom = '50%';
+    parentEl.style.border = '20px solid';
+    popup = new ModalPopup();
+    popup.setCenterInsideParentElement(true);
+    popup.render(parentEl);
+
+    popup.setVisible(true);
+
+    const backgroundSize = style.getSize(popup.getBackgroundElement());
+    assertTrue(backgroundSize.width === 99);
+    assertTrue(backgroundSize.height === 88);
+    dom.removeNode(parentEl);
+  },
+
+  testPopupPosition_withoutOptionalParent_relativeToBody() {
+    popup = new ModalPopup();
+    popup.render();
+    style.setSize(popup.getElement(), 20, 20);
+
+    popup.setVisible(true);
+
+    const viewportSize = dom.getViewportSize();
+    const modalEl = popup.getElement();
+    const modalSize = style.getSize(modalEl);
+    const top = style.getComputedStyle(modalEl, 'top');
+    const expectedTop = viewportSize.height / 2 - modalSize.height / 2;
+    assertTrue(top === expectedTop + 'px');
+    const left = style.getComputedStyle(modalEl, 'left');
+    const expectedLeft = viewportSize.width / 2 - modalSize.width / 2;
+    assertTrue(left === expectedLeft + 'px');
+  },
+
+  testPopupPosition_withOptionalParent_relativeToBody() {
+    const parentEl = dom.createElement(TagName.DIV);
+    document.body.appendChild(parentEl);
+    popup = new ModalPopup();
+    popup.setCenterInsideParentElement(true);
+    popup.render(parentEl);
+    style.setSize(popup.getElement(), 20, 20);
+    style.setSize(parentEl, 99, 88);
+    // Reinforce the test by changing the parent element size and assert the
+    // modal popup receives the right parent dimensions.
+    parentEl.style.transform = 'scale(0.5)';
+    parentEl.style.zoom = '50%';
+    const borderThickness = 20;
+    parentEl.style.border = `${borderThickness}px solid`;
+
+    popup.setVisible(true);
+
+    const modalEl = popup.getElement();
+    const modalSize = style.getSize(modalEl);
+    const parentSize = style.getSize(parentEl);
+    const parentInnerHeight =
+        parentSize.height - borderThickness - borderThickness;
+    const expectedTop = parentInnerHeight / 2 - modalSize.height / 2;
+    const top = style.getComputedStyle(modalEl, 'top');
+    assertTrue(top === expectedTop + 'px');
+    const left = style.getComputedStyle(modalEl, 'left');
+    const parentInnerWidth =
+        parentSize.width - borderThickness - borderThickness;
+    const expectedLeft = parentInnerWidth / 2 - modalSize.width / 2;
+    assertTrue(left === expectedLeft + 'px');
+    dom.removeNode(parentEl);
+  },
+
+  testSetCenterInsideParentElementAfterRender_throws() {
+    const parentEl = dom.createElement(TagName.DIV);
+    document.body.appendChild(parentEl);
+    popup = new ModalPopup();
+    popup.render();
+
+    assertThrows(() => popup.setCenterInsideParentElement(true));
+  }
 });