fix #349 maxwidth/maxheight issues in Dialog

After delivering #349 via commit 29331b1
a regresion was found during release testing: maxwidth/maxheight
constraints of the Dialog were calculated too big due to addition of the
shadow. That addition should be done only in maximized mode.

Moreover, the Dialog was not correctly resized in maximized mode when
it had maxWidth/maxHeight set. Now that properties are ignored in
maximized mode.

Close #359.

src/aria/widgets/CfgBeans.js

@@ -1526,7 +1526,7 @@ Aria.beanDefinitions({
                         },
                         "maximized" : {
                             $type : "common:BindingRef",
-                            $description : "Whether the Dialog is occupying the whole viewport. Set to true takes precedence over center, xpos, ypos, width, height. Unmaximize the Dialog first to change those settings."
+                            $description : "Whether the Dialog is occupying the whole viewport. Set to true takes precedence over center, xpos, ypos, width, height and also ignores maxWidth and maxHeight. Unmaximize the Dialog first to change those settings."
                         },
                         "center" : {
                             $type : "common:BindingRef"

src/aria/widgets/container/Dialog.js

@@ -121,6 +121,7 @@ Aria.classDefinition({
         _onViewportResized : function (event) {
 
             var domElt = this._domElt;
+            var maximized = this._cfg.maximized;
             if (domElt) {
                 // Remove width and height, they will be recalculated later, to have the content size well calculated
                 domElt.style.width = "";
@@ -130,17 +131,24 @@ Aria.classDefinition({
                 var viewport = aria.utils.Dom._getViewportSize();
                 var math = aria.utils.Math;
 
+                var maxHeight, maxWidth;
+                if (maximized) {
+                    maxHeight = viewport.height + this._shadows.top + this._shadows.bottom
+                    maxWidth = viewport.width + this._shadows.left + this._shadows.right;
+                } else {
+                    maxHeight = math.min(this._cfg.maxHeight, viewport.height);
+                    maxWidth = math.min(this._cfg.maxWidth, viewport.width);
+                }
                 this._div.updateSize({
                     height : this._cfg.height,
-                    maxHeight : math.min(this._cfg.maxHeight, viewport.height + this._shadows.top
-                            + this._shadows.bottom),
+                    maxHeight : maxHeight,
                     width : this._cfg.width,
-                    maxWidth : math.min(this._cfg.maxWidth, viewport.width + this._shadows.left + this._shadows.right)
+                    maxWidth : maxWidth
                 });
                 this._updateContainerSize();
             }
 
-            if (this._cfg.maximized) {
+            if (maximized) {
                 this._setMaximizedHeightAndWidth(viewport);
             }
         },
@@ -184,8 +192,14 @@ Aria.classDefinition({
 
             // constrain dialog to viewport
             var math = aria.utils.Math;
-            var maxHeight = math.min(this._cfg.maxHeight, viewport.height + this._shadows.top + this._shadows.bottom);
-            var maxWidth = math.min(this._cfg.maxWidth, viewport.width + this._shadows.left + this._shadows.right);
+            var maxHeight, maxWidth;
+            if (this._cfg.maximized) {
+                maxHeight = viewport.height + this._shadows.top + this._shadows.bottom
+                maxWidth = viewport.width + this._shadows.left + this._shadows.right;
+            } else {
+                maxHeight = math.min(this._cfg.maxHeight, viewport.height);
+                maxWidth = math.min(this._cfg.maxWidth, viewport.width);
+            }
             this._div = new aria.widgets.container.Div({
                 sclass : this._skinObj.divsclass,
                 margins : "0 0 0 0",
@@ -705,12 +719,16 @@ Aria.classDefinition({
                 center : cfg.center,
                 width : cfg.width,
                 height : cfg.height,
+                maxWidth : cfg.maxWidth,
+                maxHeight : cfg.maxHeight,
                 xpos : cfg.xpos,
                 ypos : cfg.ypos,
                 bodyOverflow : Aria.$window.document.documentElement.style.overflow
             };
 
             this.setProperty("center", false);
+            this.setProperty("maxWidth", undefined);
+            this.setProperty("maxHeight", undefined);
             if (this._popup && this._popup.isOpen) {
                 // proceed with maximization
                 this._popup.conf.maximized = true;
@@ -742,6 +760,8 @@ Aria.classDefinition({
             }
             this._setBodyOverflow(opts.bodyOverflow);
 
+            this.setProperty("maxWidth", opts.maxWidth);
+            this.setProperty("maxHeight", opts.maxHeight);
             this.changeProperty("width", opts.width);
             this.changeProperty("height", opts.height);
             if (opts.center) {

test/aria/widgets/container/dialog/MaximizableDialogTest.js

@@ -27,11 +27,13 @@ Aria.classDefinition({
         this.INITIAL_HEIGHT = 300;
         this.INITIAL_XPOS = 111;
         this.INITIAL_YPOS = 111;
+        this.INITIAL_MAXHEIGHT = 500; // must be smaller than iframe height
 
         Aria.$window.testData = this.data = {
             dialog : {
                 width : this.INITIAL_WIDTH,
                 height : this.INITIAL_HEIGHT,
+                maxheight : this.INITIAL_MAXHEIGHT,
                 xpos : this.INITIAL_XPOS,
                 ypos : this.INITIAL_YPOS,
                 visible : false,
@@ -93,6 +95,10 @@ Aria.classDefinition({
             Aria.$window.document.documentElement.style.backgroundColor = "aliceblue";
             // Aria.$window.document.getElementById('TESTAREA').style.height = '';
 
+            // This is an implicit test whether Dialog maxheight is ignored in the maximized mode.
+            // If below is true and all other tests pass, then maxheight is correctly ignored.
+            this.assertTrue(this.data.dialog.maxheight + 50 < this.data.iframeWrapper.height, "Invalid test config, iframe should be bigger than Dialog maxheight for this test.");
+
             this.iframe = aria.utils.Dom.getElementById(this.iframeUnderTestId);
             this.waitForIframe(this.iframeUnderTestId, this.widgetUnderTestId, this._iframeReady);
         },

test/aria/widgets/container/dialog/MaximizableDialogTestTpl.tpl

@@ -30,6 +30,7 @@
         movable : true,
         resizable : true,
         maximizable : true,
+        maxHeight: data.dialog.maxHeight, // this is to check that maximized takes precedence over maxHeight
         bind : {
             width : {
                 inside : data.dialog,