Skip to content

Commit

Permalink
Fixes #3578: DropDownButton / ComboButton: convert to be hierarchical.
Browse files Browse the repository at this point in the history 
Changed code so drop down widget is a child of the drop down button
  • Loading branch information
@wkeese
wkeese committed Jun 30, 2007
1 parent a2b61c7 commit 9be93d6
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 135 deletions.
15 changes: 10 additions & 5 deletions _Templated.js
View file
Expand Up @@ -86,12 +86,17 @@ dojo.declare("dijit._Templated",
});
}

// relocate source contents to templated container node
// this.containerNode must be able to receive children, or exceptions will be thrown
if(this.srcNodeRef && this.srcNodeRef.hasChildNodes()){
this._fillContent(this.srcNodeRef);
},

_fillContent: function(/*DomNode*/ source){
// summary:
// relocate source contents to templated container node
// this.containerNode must be able to receive children, or exceptions will be thrown
if(source){
var dest = this.containerNode||this.domNode;
while(this.srcNodeRef.hasChildNodes()){
dest.appendChild(this.srcNodeRef.firstChild);
while(source.hasChildNodes()){
dest.appendChild(source.firstChild);
}
}
},
Expand Down
35 changes: 24 additions & 11 deletions form/Button.js
View file
Expand Up @@ -51,31 +51,44 @@ dojo.declare(

/*
* usage
* <button dojoType="DropDownButton" dropDownId="mymenu">Hello world</button>
* <button dojoType="DropDownButton" label="Hello world"><div dojotype=dijit.Menu>...</div></button>
*
* var button1 = dojo.widget.createWidget("DropDownButton", {label: "hello world", dropDownId: foo});
* document.body.appendChild(button1.domNode);
*/
dojo.declare(
"dijit.form.DropDownButton",
dijit.form.Button,
[dijit.form.Button, dijit._Container],
{
// summary
// push the button and a menu shows up

// dropDownId: String
// widget id of the menu that this button should activate
dropDownId: "",
baseClass : "dijitDropDownButton",

templatePath: dojo.moduleUrl("dijit.form" , "templates/DropDownButton.html"),

postCreate: function(){
dijit.form.DropDownButton.superclass.postCreate.apply(this, arguments);
_fillContent: function(){
// my inner HTML contains both the button text and a drop down widget, like
// <DropDownButton> <button>push me</button> <Menu> ... </Menu> </DropDownButton>
// first part holds button label and second part is popup
if(this.srcNodeRef){
var nodes = dojo.query("*", this.srcNodeRef);
dijit.form.DropDownButton.superclass._fillContent.call(this, nodes[0]);

// save pointer to srcNode so we can grab the drop down widget after it's instantiated
this.dropDownContainer = this.srcNodeRef;
}
},

startup: function(){
this._dropDown = dijit.byId(this.dropDownId);
// we didn't copy the dropdown widget from the this.srcNodeRef, so it's in no-man's
// land now. move it to document.body.
if(!this.dropDown){
var node = dojo.query("[widgetId]", this.dropDownContainer)[0];
this.dropDown = dijit.util.manager.byNode(node);
}
dojo.body().appendChild(this.dropDown.domNode);
this.dropDown.domNode.style.display="none";
},

_onArrowClick: function(/*Event*/ e){
Expand All @@ -88,7 +101,7 @@ dojo.declare(
// summary: callback when the user presses a key on menu popup node
if(this.disabled){ return; }
if(e.keyCode == dojo.keys.DOWN_ARROW){
if(!this._dropDown || this._dropDown.domNode.style.display=="none"){
if(!this.dropDown || this.dropDown.domNode.style.display=="none"){
dojo.stopEvent(e);
return this._toggleDropDown();
}
Expand All @@ -99,7 +112,7 @@ dojo.declare(
// summary: toggle the drop-down widget; if it is up, close it, if not, open it
if(this.disabled){ return; }
this.popupStateNode.focus();
var dropDown = this._dropDown;
var dropDown = this.dropDown;
if(!dropDown){ return false; }
if(!dropDown.isShowingNow){
var oldWidth=dropDown.domNode.style.width;
Expand Down Expand Up @@ -129,7 +142,7 @@ dojo.declare(

/*
* usage
* <button dojoType="ComboButton" onClick="..." dropDownId="mymenu">Hello world</button>
* <button dojoType="ComboButton" onClick="..."><span>Hello world</span><div dojoType=dijit.Menu>...</div></button>
*
* var button1 = dojo.widget.createWidget("DropDownButton", {label: "hello world", onClick: foo, dropDownId: "myMenu"});
* document.body.appendChild(button1.domNode);
Expand Down
50 changes: 24 additions & 26 deletions tests/form/test_Button.html
View file
Expand Up @@ -61,15 +61,31 @@ <h2>Simple, drop down & combo buttons</h2>
Create
</button>
<span dojoType="dijit.Tooltip" connectId="1465">tooltip on button</span>
<button dojoType="dijit.form.DropDownButton" dropDownId='editMenu' iconClass="noteIcon">
Edit
</button>
<button dojoType="dijit.form.DropDownButton" dropDownId='colorPalette' iconClass="noteIcon">
Color
</button>
<button dojoType="dijit.form.ComboButton" optionsTitle='save options' dropDownId='saveMenu' onClick='logMessage("clicked combo save")'
<button dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
<span>Edit<b>!</b></span>
<div dojoType="dijit.PopupMenu">
<div dojoType="dijit.MenuItem" iconSrc="../images/cut.gif"
onClick="logMessage('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconSrc="../images/copy.gif"
onClick="logMessage('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconSrc="../images/paste.gif"
onClick="logMessage('not actually pasting anything, just a test!')">Paste</div>
</div>
</button>
<button dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
<span>Color</span>
<div dojoType="dijit.ColorPalette" id="colorPalette" style="display: none" palette="3x4"
onColorSelect="console.log(this.selectedColor);"></div>
</button>
<button dojoType="dijit.form.ComboButton" optionsTitle='save options' onClick='logMessage("clicked combo save")'
iconClass="plusBlockIcon">
Save
<span>Save</span>
<div dojoType="dijit.PopupMenu" id="saveMenu" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save As</div>
</div>
</button>
<button dojoType="dijit.form.Button" onClick='logMessage("clicked simple")' disabled='true' iconClass="plusIcon">
Disabled
Expand Down Expand Up @@ -207,24 +223,6 @@ <h2>Programatically changing buttons</h2>
<button onclick='location.reload()'>Revert</button>
</div>

<div dojoType="dijit.ColorPalette" id="colorPalette" style="display: none" palette="3x4" onColorSelect="console.log(this.selectedColor);"></div>

<div dojoType="dijit.PopupMenu" id="editMenu" toggle="fade" toggleDuration="500" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../images/cut.gif"
onClick="logMessage('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconSrc="../images/copy.gif"
onClick="logMessage('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconSrc="../images/paste.gif"
onClick="logMessage('not actually pasting anything, just a test!')">Paste</div>
</div>

<div dojoType="dijit.PopupMenu" id="saveMenu" toggle="wipe" toggleDuration="500" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save As</div>
</div>

<h3>Button instantiated via javacript:</h3>
<div id="buttonContainer"></div>
<script type="text/javascript">
Expand Down
12 changes: 8 additions & 4 deletions tests/test_Toolbar.html
View file
Expand Up @@ -43,8 +43,6 @@ <h1 class="testTitle">Toolbar test</h1>

<h2>Toolbar from markup</h2>

<div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette" style="display: none" palette="3x4" onColorSelect="console.log(this.selectedColor);"></div>

<div id="toolbar1" dojoType="dijit.Toolbar"
><div dojoType="dijit.form.Button" id="toolbar1.cut" iconClass="dijitEditorIconCut">Cut</div
><div dojoType="dijit.form.Button" id="toolbar1.copy" iconClass="dijitEditorIconCopy">Copy</div
Expand Down Expand Up @@ -74,8 +72,14 @@ <h2>Toolbar from markup</h2>
><div dojoType="dijit.form.Button" id="toolbar1.outdent" iconClass="dijitEditorIconOutdent">Outdent</div

><span dojoType="dijit.ToolbarSeparator"></span
><div dojoType="dijit.form.DropDownButton" id="toolbar1.backcolor" dropDownId="toolbar1.colorPalette" iconClass="dijitEditorIconBackColor">Background</div
><div dojoType="dijit.form.DropDownButton" id="toolbar1.forecolor" dropDownId="toolbar1.colorPalette" iconClass="dijitEditorIconForeColor">Foreground</div
><div dojoType="dijit.form.DropDownButton" id="toolbar1.backcolor" iconClass="dijitEditorIconBackColor">
<span>Background</span>
<div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette" style="display: none" palette="3x4" onColorSelect="console.log(this.selectedColor);"></div>
</div
><div dojoType="dijit.form.DropDownButton" id="toolbar1.forecolor" iconClass="dijitEditorIconForeColor">
<span>Foreground</span>
<div dojoType="dijit.ColorPalette" id="toolbar1.colorPalette2" style="display: none" palette="3x4" onColorSelect="console.log(this.selectedColor);"></div>
</div
></div>

<h2>Toolbar from script</h2>
Expand Down
86 changes: 56 additions & 30 deletions themes/templateThemeTest.html
View file
Expand Up @@ -48,31 +48,73 @@ <h2>Tundra</h2>
<button id='foo' dojoType="dijit.form.Button" onClick='logMessage("clicked simple")'>
Button
</button>
<button dojoType="dijit.form.Button" onClick='logMessage("clicked simple")'>
<img src="../images/note.gif" width="16" height="16"> Button w/image
<button dojoType="dijit.form.Button" iconClass="noteIcon" onClick='logMessage("clicked simple")'>
Button w/image
</button>
<button dojoType="dijit.form.Button" onClick='logMessage("clicked simple")' disabled='true'>
Disabled Button
</button>
<br><br>
<button dojoType="dijit.form.DropDownButton" dropDownId='editMenu'>
Drop Down Button
<button dojoType="dijit.form.DropDownButton">
<span>Drop Down Button</span>
<div dojoType="dijit.PopupMenu" id="editMenu" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/cut.gif"
onClick="logMessage('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/copy.gif"
onClick="logMessage('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/paste.gif"
onClick="logMessage('not actually pasting anything, just a test!')">Paste</div>
</div>
</button>
<button dojoType="dijit.form.DropDownButton" dropDownId='editMenu'>
<img src="../images/note.gif" width="20" height="20"> Button w/image
<button dojoType="dijit.form.DropDownButton" iconClass="noteIcon">
<span>Button w/image</span>
<div dojoType="dijit.PopupMenu" id="editMenu2" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/cut.gif"
onClick="logMessage('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/copy.gif"
onClick="logMessage('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/paste.gif"
onClick="logMessage('not actually pasting anything, just a test!')">Paste</div>
</div>
</button>
<button dojoType="dijit.form.DropDownButton" dropDownId='editMenu' disabled='true'>
Drop Down Disabled
<button dojoType="dijit.form.DropDownButton" disabled='true'>
<span>Drop Down Disabled</span>
<div dojoType="dijit.PopupMenu" id="editMenu3" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/cut.gif"
onClick="logMessage('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/copy.gif"
onClick="logMessage('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/paste.gif"
onClick="logMessage('not actually pasting anything, just a test!')">Paste</div>
</div>
</button>
<br><br>
<button dojoType="dijit.form.ComboButton" dropDownId='saveMenu' onClick='logMessage("clicked combo save")'>
Combo Button
<button dojoType="dijit.form.ComboButton" onClick='logMessage("clicked combo save")'>
<span>Combo Button</span>
<div dojoType="dijit.PopupMenu" id="saveMenu" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save As</div>
</div>
</button>
<button dojoType="dijit.form.ComboButton" dropDownId='saveMenu' onClick='logMessage("clicked combo save")'>
<img src="../images/note.gif" width="20" height="20"> Combo w/image
<button dojoType="dijit.form.ComboButton" iconClass="noteIcon" onClick='logMessage("clicked combo save")'>
<span>Combo w/image</span>
<div dojoType="dijit.PopupMenu" id="saveMenu" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save As</div>
</div>
</button>
<button dojoType="dijit.form.ComboButton" dropDownId='saveMenu' onClick='logMessage("clicked combo save")' disabled='true'>
Combo Disabled
<button dojoType="dijit.form.ComboButton" onClick='logMessage("clicked combo save")' disabled='true'>
<span>Combo Disabled</span>
<div dojoType="dijit.PopupMenu" id="saveMenu" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save As</div>
</div>
</button>
<br><br>
<input dojoType="dijit.form.ComboBox"
Expand Down Expand Up @@ -137,21 +179,5 @@ <h2>a11y mode</h2>
dojo.byId("a11y").innerHTML = html;
</script>

<div dojoType="dijit.PopupMenu" id="editMenu" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/cut.gif"
onClick="logMessage('not actually cutting anything, just a test!')">Cut</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/copy.gif"
onClick="logMessage('not actually copying anything, just a test!')">Copy</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/paste.gif"
onClick="logMessage('not actually pasting anything, just a test!')">Paste</div>
</div>

<div dojoType="dijit.PopupMenu" id="saveMenu" style="display: none;">
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save</div>
<div dojoType="dijit.MenuItem" iconSrc="../../templates/buttons/save.gif"
onClick="logMessage('not actually saving anything, just a test!')">Save As</div>
</div>

</body>
</html>

0 comments on commit 9be93d6

Please sign in to comment.