fix ariatemplates#1474 Better dialog width management depending on th…

…e title length

src/aria/widgets/container/Dialog.js

@@ -580,9 +580,45 @@ module.exports = Aria.classDefinition({
             var cfg = this._cfg;
             var getDomElementChild = ariaUtilsDom.getDomElementChild;
             this._domElt = this._popup.domElement;
-            this._titleBarDomElt = getDomElementChild(this._domElt, 0, true);
-            this._titleDomElt = getDomElementChild(this._titleBarDomElt, cfg.icon ? 1 : 0);
+            var titleBarDomElt = this._titleBarDomElt = getDomElementChild(this._domElt, 0, true);
+            var bodyElement = getDomElementChild(this._domElt, 0);
+            var titleDomElt = this._titleDomElt = getDomElementChild(this._titleBarDomElt, cfg.icon ? 1 : 0);
             this._calculatePosition();
+
+            var isIE7 = aria.core.Browser.isIE7;
+
+            if (isIE7) {
+                // without this, IE 7 gives wrong inner sizes
+                titleDomElt.style.overflow = "visible";
+            }
+
+            var bodyWidth = ariaUtilsDom.getGeometry(bodyElement).width;
+            var titleBarWidth = ariaUtilsDom.getGeometry(titleBarDomElt).width;
+            var titleWidth = ariaUtilsDom.getGeometry(titleDomElt).width;
+            var childNodes = this._titleBarDomElt.childNodes;
+            var iconsWidth = 0;
+            for (var i = 1, ii = childNodes.length; i < ii; i++) {
+                iconsWidth += childNodes[i].offsetWidth;
+            }
+
+            // First manage the width of the modal depending on the title bar and the max width
+            var shadows = this._shadows;
+            if ((titleWidth + iconsWidth) > bodyWidth) {
+                this.setProperty("width", titleWidth + iconsWidth + shadows.left + shadows.right);
+                this._onDimensionsChanged(false);
+                titleBarWidth = ariaUtilsDom.getGeometry(titleBarDomElt).width;
+            }
+
+            // The manage the title length to manage the text-overflow
+            if (titleWidth >= titleBarWidth) {
+                titleDomElt.style.width = (titleBarWidth - iconsWidth - shadows.left - shadows.right) + "px";
+            }
+
+            if (isIE7) {
+                // Back to overflow hidden mode
+                titleDomElt.style.overflow = "hidden";
+            }
+
             if (cfg.modal) {
                 ariaTemplatesNavigationManager.focusFirst(this._domElt);
             }

src/aria/widgets/container/DialogStyle.tpl.css

@@ -132,6 +132,9 @@
             padding-top: 6px;
             color:${skinClass.titleColor};
             font-weight:bold;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
         .xDialog_${skinClassName}_icon {
             padding-left: 6px;

test/aria/widgets/container/dialog/sizes/DialogMaxWidthTestCase.js

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Test for issue #10
+ */
+Aria.classDefinition({
+    $classpath : "test.aria.widgets.container.dialog.sizes.DialogMaxWidthTestCase",
+    $extends : "aria.jsunit.TemplateTestCase",
+    $prototype : {
+
+        checkSizes : function(dialogId, mainWidth) {
+            var dialog = this.dialogs[dialogId];
+
+            var dom = dialog._domElt;
+            var children = dom.children;
+            var dlgBody = children[0];
+            var dlgTitle = children[1];
+            var dlgTitleText = aria.utils.Dom.getElementsByClassName(dlgTitle, "sDialog_title");
+            var dlgCloseIcon = aria.utils.Dom.getElementsByClassName(dlgTitle, "sDialog_close");
+
+            this.assertEqualsWithTolerance(dlgBody.offsetWidth, mainWidth, 8, dialogId + " width should be %2 instead of %1");
+            this.assertEqualsWithTolerance(dlgTitle.offsetWidth, mainWidth - 10, 8, dialogId + " title width should be %2 instead of %1");
+            this.assertEquals(dlgTitleText.offsetTop, dlgCloseIcon.offsetTop, "The close icon should be on teh first line");
+        },
+
+
+        runTemplateTest : function () {
+            // The main template is Ready even if it contains a template inside the Dialog, wait
+            var dialogIds = ["dialog1", "dialog2", "dialog3", "dialog4"];
+            this.waitFor({
+                condition : function() {
+                    // Wait for every dialog ready and open
+                    var dialogs = this.dialogs = {};
+                    for (var i = 0; i < dialogIds.length; i += 1) {
+                        var id = dialogIds[i];
+                        var currentInstance = dialogs[id] = this.getWidgetInstance(id);
+                        if (!currentInstance || !currentInstance._popup.isOpen) {
+                            return false;
+                        }
+                    }
+                    return true;
+                },
+                callback : {
+                    fn : this.checkWidths,
+                    scope : this
+                }
+            });
+        },
+
+        checkWidths : function () {
+            this.checkSizes("dialog1", 400);
+            this.checkSizes("dialog2", 400);
+            this.checkSizes("dialog3", 238);
+            this.checkSizes("dialog4", 400);
+
+            this.end();
+        }
+    }
+});

test/aria/widgets/container/dialog/sizes/DialogMaxWidthTestCaseTpl.tpl

@@ -0,0 +1,80 @@
+/*
+ * Copyright 2012 Amadeus s.a.s.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+{Template {
+    $classpath : "test.aria.widgets.container.dialog.sizes.DialogMaxWidthTestCaseTpl"
+}}
+
+    {macro main()}
+
+        {@aria:Dialog {
+            visible : true,
+            macro : "largeContent",
+            title: "Very very very very very very very very very very very very long title",
+            id : "dialog1",
+            maximizable : true,
+            center : false,
+            xpos : 20,
+            ypos : 20,
+            maxHeight: 350,
+            maxWidth: 400
+        }/}
+
+        {@aria:Dialog {
+            visible : true,
+            macro : "largeContent",
+            title: "Normal title",
+            id : "dialog2",
+            center : false,
+            xpos : 450,
+            ypos : 20,
+            maxHeight: 400,
+            maxWidth: 400
+        }/}
+
+        {@aria:Dialog {
+            visible : true,
+            macro : "smallContent",
+            title: "Title larger than the content",
+            id : "dialog3",
+            center : false,
+            xpos : 900,
+            ypos : 20,
+            maxHeight: 400,
+            maxWidth: 400
+        }/}
+
+        {@aria:Dialog {
+            visible : true,
+            macro : "smallContent",
+            title: "Very very very very very very very very very very very very long title",
+            id : "dialog4",
+            center : false,
+            xpos : 1150,
+            ypos : 20,
+            maxHeight: 400,
+            maxWidth: 400
+        }/}
+
+        {/macro}
+
+    {macro largeContent ()}
+        <div style="width:700px; height: 3000px">Large dialog content</div>
+    {/macro}
+    {macro smallContent ()}
+        <div style="padding: 20px">Dialog content</div>
+    {/macro}
+
+{/Template}