Changeset 12162

Timestamp:

01/25/08 03:07:46 (12 months ago)

Author:

bill

Message:

Fixes #5670: TooltipDialog?: can't contain layout widgets
Modifies TooltipDialog? to initialize in a visibility:hidden state rather than display:none, in order for possible child layout widgets to initialize correctly.
Since TooltipDialog? is not a layout widget itself, note that this means that the child layout widgets must have a size specified (rather than specifying a size on the TooltipDialog? itself)

Location:

dijit/trunk

Files:

• Dialog.js (modified) (3 diffs)
• form/Button.js (modified) (2 diffs)
• layout/ContentPane.js (modified) (1 diff)
• tests/test_Dialog.html (modified) (4 diffs)
• tests/test_TooltipDialog.html (added)
• _base/popup.js (modified) (5 diffs)

dijit/trunk/Dialog.js

@@ -147 +147 @@
                 //              Don't change this parameter from the default value.
                 //              This ContentPane parameter doesn't make sense for Dialog, since Dialog
-                //              is never a child of a layout Container, nor can you specify the size of
+                //              is never a child of a layout container, nor can you specify the size of
                 //              Dialog in order to control the size of an inner widget. 
                 doLayout: false,
@@ -157 +157 @@
                         dojo.body().appendChild(this.domNode);
                         this.inherited("postCreate",arguments);
-                        this.domNode.style.visibility="hidden";
+                        this.domNode.style.visibility = "hidden";
+                        this.domNode.style.position = "absolute";
+                        this.domNode.style.top = "-9999px";
                         this.connect(this, "onExecute", "hide");
                         this.connect(this, "onCancel", "hide");
@@ -378 +380 @@
                 title: "",
 
+                // doLayout: Boolean
+                //              Don't change this parameter from the default value.
+                //              This ContentPane parameter doesn't make sense for TooltipDialog, since TooltipDialog
+                //              is never a child of a layout container, nor can you specify the size of
+                //              TooltipDialog in order to control the size of an inner widget. 
+                doLayout: false,
+
                 // _firstFocusItem: DomNode
                 //              The pointer to the first focusable node in the dialog

dijit/trunk/form/Button.js

@@ -138 +138 @@
                         delete this.dropDownContainer;
                 }
-                dojo.body().appendChild(this.dropDown.domNode);
-                this.dropDown.domNode.style.display="none";
+                dijit.popup.prepare(this.dropDown.domNode);
 
                 this.inherited(arguments);
@@ -185 +184 @@
                 if(this.disabled || this.readOnly){ return; }
                 if(e.keyCode == dojo.keys.DOWN_ARROW){
-                        if(!this.dropDown || this.dropDown.domNode.style.display=="none"){
+                        if(!this.dropDown || this.dropDown.domNode.style.visibility=="hidden"){
                                 dojo.stopEvent(e);
                                 this._toggleDropDown();

dijit/trunk/layout/ContentPane.js

@@ -178 +178 @@
                 if(this.doLayout != "false" && this.doLayout !== false){
                         this._checkIfSingleChild();
-                        console.log("singlechild " , this._singleChild, " my content box is ", this._contentBox);
                         if(this._singleChild && this._singleChild.resize){
                                 this._singleChild.startup();

dijit/trunk/tests/test_Dialog.html

@@ -88 +88 @@
 </div>
 
-<div dojoType="dijit.form.DropDownButton">
-        <span>Show Tooltip Dialog</span>
-        <div dojoType="dijit.TooltipDialog" id="tooltipDlg" title="Enter Login information"
-                execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
-                <table>
-                        <tr>
-                                <td><label for="user">User:</label></td>
-                                <td><input dojoType=dijit.form.TextBox type="text" name="user" id="user"></td>
-                        </tr>
-                        <tr>
-                                <td><label for="pwd">Password:</label></td>
-                                <td><input dojoType=dijit.form.TextBox type="password" name="pwd" id="pwd"></td>
-                        </tr>
-                        <tr>
-                                <td><label for="date2">Date:</label></td>
-                                <td><input dojoType=dijit.form.DateTextBox name="date" id="date2"></td>
-                        </tr>
-                        <tr>
-                                <td><label for="time2">Time:</label></td>
-                                <td><input dojoType=dijit.form.TimeTextBox name="time" id="time2"></td>
-                        </tr>
-                        <tr>
-                                <td><label for="combo">Pizza:</label></td>
-                                <td>
-                                        <select dojoType=dijit.form.FilteringSelect name="combo" id="combo" hasDownArrow="true">
-                                                <option value="cheese">cheese</option>
-                                                <option value="pepperoni">pepperoni</option>
-                                                <option value="sausage">sausage</option>
-                                        </select>
-                                </td>
-                        </tr>
-                        <tr>
-                                <td colspan="2" align="center">
-                                        <button dojoType=dijit.form.Button type="submit" name="submit">Order</button>
-                                </td>
-                        </tr>
-                </table>
-                <div style="width: 300px;">Note: This tooltip dialog has a bunch of nested drop downs for testing keyboard and click handling</div>
-        </div>
-</div> |
 
 <button dojoType="dijit.form.Button" onclick="createDialog()" title="shows after 3 second delay, with blue background">Programatic Dialog (3 second delay)</button> |
@@ -191 +151 @@
 <button dojoType="dijit.form.Button" onclick="dijit.byId('fifthDlg').show();">Test slow loading HREF Dialog</button>
 
-<div dojoType="dijit.Dialog" id="fifthDlg" href="layout/getResponse.php?delay=3000&messId=3" title="From HREF (slow network emulated)"></div>
-
-<div dojoType="dijit.form.DropDownButton">
-        <span>Test slowloading HREF Tooltip Dialog</span>
-        <div dojoType="dijit.TooltipDialog" href="layout/getResponse.php?delay=500&messId=2" title="tooltip dialog with no focusable items">
-        </div>
-</div> |
+<div dojoType="dijit.Dialog" id="fifthDlg" href="layout/getResponse.php?delay=3000&messId=3" title="From HREF (slow network simulated)"></div>
 
 <p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p>
@@ -266 +220 @@
 consectetuer dapibus eros. Aliquam nisl.
 </p>
-<div style="float:right;clear:right;" dojoType="dijit.form.DropDownButton">
-        <span>dropdown at right</span>
-<div dojoType="dijit.TooltipDialog" id="dialogright">
-                <div style="white-space:nowrap;">Aliquam vitae enim. Duis scelerisque metus auctor est venenatis</div>
-</div>
-</div>
 <p>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
@@ -293 +241 @@
 tortor pharetra congue. Suspendisse pulvinar.
 </p>
-
-<div dojoType="dijit.form.DropDownButton" title="Enter Login information2">
-        <span>Show Tooltip Dialog pointing upwards, with links</span>
-        <div dojoType="dijit.TooltipDialog" title="General Information Dialog">
-                <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
-                ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
-                nonummy mollis. <a href="http://www.lipsum.com/">Vestibulum</a> vel purus ac pede semper accumsan. Vivamus
-                lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
-                est quam sed urna. Phasellus adipiscing justo in <a href="http://www.lipsum.com/">ipsum</a>. Duis sagittis
-                dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
-                nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
-                pretium sollicitudin sapien. <a href="http://www.lipsum.com/">Suspendisse imperdiet</a>. Class aptent taciti
-                sociosqu ad litora torquent per conubia nostra, per inceptos
-                hymenaeos.
-                </p>
-        </div>  
-</div>
-(will go up if there isn't enough space on the bottom of the screen)
-
 <p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
 ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque

dijit/trunk/_base/popup.js

@@ -13 +13 @@
                 beginZIndex=1000,
                 idGen = 1;
+
+        this.prepare = function(/*DomNode*/ node){
+                // summary:
+                //              Prepares a node to be used as a popup
+                //
+                // description:
+                //              Attaches node to document.body, and
+                //              positions it off screen, but not display:none, so that
+                //              the widget doesn't appear in the page flow and/or cause a blank
+                //              area at the bottom of the viewport (making scrollbar longer), but
+                //              initialization of contained widgets works correctly
+        
+                dojo.body().appendChild(node);
+                var s = node.style;
+                if(s.display == "none"){
+                        s.display="";
+                }
+                s.visibility = "hidden";        // not needed for hiding, but used as flag that node is off-screen
+                s.position = "absolute";
+                s.top = "-9999px";
+        };
 
         this.open = function(/*Object*/ args){
@@ -64 +85 @@
                 dojo.body().appendChild(wrapper);
 
-                widget.domNode.style.display="";
+                var s = widget.domNode.style;
+                s.display = "";
+                s.visibility = "";
+                s.position = "";
                 wrapper.appendChild(widget.domNode);
 
@@ -81 +105 @@
                 // Compute the closest ancestor popup that's *not* a child of another popup.
                 // Ex: For a TooltipDialog with a button that spawns a tree of menus, find the popup of the button.
-                function getTopPopup(){
-                        for(var pi=stack.length-1; pi > 0 && stack[pi].parent === stack[pi-1].widget; pi--);
+                var getTopPopup = function(){
+                        for(var pi=stack.length-1; pi > 0 && stack[pi].parent === stack[pi-1].widget; pi--){
+                                /* do nothing, just trying to get right value for pi */
+                        }
                         return stack[pi];
                 }
@@ -148 +174 @@
                         // #2685: check if the widget still has a domNode so ContentPane can change its URL without getting an error
                         if(!widget||!widget.domNode){ return; }
-                        dojo.style(widget.domNode, "display", "none");
-                        dojo.body().appendChild(widget.domNode);
+                        
+                        this.prepare(widget.domNode);
+
                         iframe.destroy();
                         dojo._destroyElement(wrapper);
@@ -176 +203 @@
                                 iframe = dojo.doc.createElement(html);
                         }else{
-                                var iframe = dojo.doc.createElement("iframe");
+                                iframe = dojo.doc.createElement("iframe");
                                 iframe.src = 'javascript:""';
                                 iframe.className = "dijitBackgroundIframe";