From 3e7dfe459981a75c6fca3ba9a55b61e9a6490a9b Mon Sep 17 00:00:00 2001 From: jakub-g Date: Mon, 4 Feb 2013 14:49:48 +0100 Subject: [PATCH] fix #349 maxwidth/maxheight issues in Dialog After delivering #349 via commit 29331b13d5724498ca8bb8a8566564499ed0bf36 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 | 2 +- src/aria/widgets/container/Dialog.js | 32 +++++++++++++++---- .../container/dialog/MaximizableDialogTest.js | 6 ++++ .../dialog/MaximizableDialogTestTpl.tpl | 1 + 4 files changed, 34 insertions(+), 7 deletions(-) diff --git a/src/aria/widgets/CfgBeans.js b/src/aria/widgets/CfgBeans.js index 116cc9929..0258112fb 100644 --- a/src/aria/widgets/CfgBeans.js +++ b/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" diff --git a/src/aria/widgets/container/Dialog.js b/src/aria/widgets/container/Dialog.js index fab51cd00..09b05cbd5 100644 --- a/src/aria/widgets/container/Dialog.js +++ b/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) { diff --git a/test/aria/widgets/container/dialog/MaximizableDialogTest.js b/test/aria/widgets/container/dialog/MaximizableDialogTest.js index e294cfc00..c2daba2dd 100644 --- a/test/aria/widgets/container/dialog/MaximizableDialogTest.js +++ b/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); }, diff --git a/test/aria/widgets/container/dialog/MaximizableDialogTestTpl.tpl b/test/aria/widgets/container/dialog/MaximizableDialogTestTpl.tpl index 660174198..867aaadee 100644 --- a/test/aria/widgets/container/dialog/MaximizableDialogTestTpl.tpl +++ b/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,