284 lines
8.1 KiB
HTML
284 lines
8.1 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Dijit.popup and BackgroundIFrame unit test</title>
|
|
<style type="text/css">
|
|
@import "../../themes/claro/document.css";
|
|
@import "../../themes/dijit.css";
|
|
@import "../css/dijitTests.css";
|
|
|
|
body {
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
div {
|
|
background: white;
|
|
border: solid 1px gray;
|
|
}
|
|
|
|
/* the menu type test widgets */
|
|
.choice div {
|
|
width: 200px;
|
|
cursor: pointer;
|
|
}
|
|
.choice div:hover {
|
|
background: #ccc;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
djConfig="isDebug: true, parseOnLoad: false"></script>
|
|
<script type="text/javascript" src="../_testCommon.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
dojo.require("dijit._base.popup");
|
|
dojo.require("dijit._Widget");
|
|
dojo.require("dijit._TemplatedMixin");
|
|
|
|
function log(str){
|
|
console.log(str);
|
|
}
|
|
|
|
dojo.ready(function(){
|
|
|
|
dojo.declare("SimpleDropDownButton", [dijit._Widget, dijit._TemplatedMixin], {
|
|
// summary:
|
|
// A button that shows a popup.
|
|
// Supply popup as parameter when instantiating this widget.
|
|
|
|
label: "show popup",
|
|
orient: {'BL': 'TL', 'BR': 'TR'},
|
|
|
|
templateString: "<button data-dojo-attach-event='onclick: openPopup'>${label}</button>",
|
|
|
|
openPopup: function(){
|
|
var self = this;
|
|
|
|
dijit.popup.open({
|
|
popup: this.popup,
|
|
parent: this,
|
|
around: this.domNode,
|
|
orient: this.orient,
|
|
onCancel: function(){
|
|
log(self.id + ": cancel of child");
|
|
},
|
|
onExecute: function(){
|
|
log(self.id + ": execute of child");
|
|
dijit.popup.close(self.popup);
|
|
self.open = false;
|
|
}
|
|
});
|
|
|
|
this.open = true;
|
|
},
|
|
|
|
closePopup: function(){
|
|
if(this.open){
|
|
log(this.id + ": close popup due to blur");
|
|
dijit.popup.close(this.popup);
|
|
this.open = false;
|
|
}
|
|
},
|
|
|
|
_onBlur: function(){
|
|
// summary:
|
|
// This is called from focus manager and when we get the signal we
|
|
// need to close the drop down
|
|
this.closePopup();
|
|
}
|
|
});
|
|
|
|
dojo.declare("SimplePopup", [dijit._Widget, dijit._TemplatedMixin], {
|
|
// summary:
|
|
// A trivial popup widget
|
|
|
|
templateString: "<span>i'm a popup</span>"
|
|
});
|
|
|
|
dojo.declare("SimpleChoiceWidget", [dijit._Widget, dijit._TemplatedMixin], {
|
|
// summary:
|
|
// A list of values; select a value by pressing an entry in the list.
|
|
|
|
choice1: "1",
|
|
choice2: "2",
|
|
choice3: "3",
|
|
|
|
templateString:
|
|
"<div class='choice'>" +
|
|
"<div data-dojo-attach-event='onclick: onClick'>${choice1}</div>" +
|
|
"<div data-dojo-attach-event='onclick: onClick'>${choice2}</div>" +
|
|
"<div data-dojo-attach-event='onclick: onClick'>${choice3}</div>" +
|
|
"</div>",
|
|
|
|
onClick: function(e){
|
|
this.onChange(e.target.innerHTML);
|
|
},
|
|
|
|
onChange: function(val){
|
|
// summary:
|
|
// When this widget is used as a popup, dijit.popup monitors calls
|
|
// to onChange and then closes the popup
|
|
log(this.id + ": selected " + val);
|
|
}
|
|
});
|
|
|
|
// Create a button that displays a simple drop down
|
|
choiceDropDown = new SimpleChoiceWidget();
|
|
(choiceDropDownButton = new SimpleDropDownButton({
|
|
id: "choiceDropDownButton",
|
|
label: "show choice drop down",
|
|
popup: choiceDropDown
|
|
})).placeAt(dojo.byId("widgets"));
|
|
|
|
dojo.declare("DialogWithPopupWidget", [dijit._Widget, dijit._TemplatedMixin], {
|
|
// summary:
|
|
// This is a dialog that contains a button that spawns a drop down.
|
|
// Supply popup as an argument to this widget.
|
|
|
|
title: "I'm a dialog",
|
|
label: "click me",
|
|
|
|
templateString:
|
|
"<div style='width: 300px'>" +
|
|
"<div>${title}</div>" +
|
|
"<input><br>" +
|
|
"<button data-dojo-attach-point='button'>${label}</button><br>" +
|
|
"<button data-dojo-attach-event='onclick: onExecute'>OK</button>" +
|
|
"</div>",
|
|
|
|
postCreate: function(){
|
|
// Convert the plain button into a SimpleDropDownButton widget.
|
|
// Having it be a widget is important because that's how the popup
|
|
// code knows where a stack of nested popups (typically menus) ends.
|
|
// (In this case closing a stack of menus shouldn't close the dialog.)
|
|
|
|
new SimpleDropDownButton({
|
|
id: this.id + "PopupButton",
|
|
label: this.label,
|
|
popup: this.popup,
|
|
orient: {'BR': 'BL', 'TR': 'tL'} // so popup doesn't cover OK button
|
|
}, this.button);
|
|
},
|
|
|
|
onExecute: function(){
|
|
// summary:
|
|
// Called when OK button is pressed.
|
|
// If this is used as a popup this signals to the parent that
|
|
// Dialog can be closed.
|
|
console.log(this.id + ": executed");
|
|
}
|
|
});
|
|
|
|
// Create a button that displays a dialog that displays a choice widget
|
|
dialogDropDownButton = new SimpleDropDownButton({
|
|
id: "showSimpleDialogButton",
|
|
label: "show dialog",
|
|
popup: new DialogWithPopupWidget({
|
|
id: "simpleDialog",
|
|
label: 'show simple choice drop down',
|
|
popup: new SimpleChoiceWidget({
|
|
id: "choiceFromDialog"
|
|
})
|
|
})
|
|
}).placeAt(dojo.byId("widgets"));
|
|
|
|
dojo.declare("NestedPopupOpener", [dijit._Widget, dijit._TemplatedMixin], {
|
|
// summary:
|
|
// Clicking a value in this list will open a nested popup.
|
|
// Specify popup1 and popup2 as parameters to this widget.
|
|
|
|
templateString:
|
|
"<div class='choice'>" +
|
|
"<div data-dojo-attach-event='onclick: onClick'>popup1</div>" +
|
|
"<div data-dojo-attach-event='onclick: onClick'>popup2</div>" +
|
|
"</div>",
|
|
|
|
onClick: function(e){
|
|
var id = this.id,
|
|
popup = this[e.target.innerHTML];
|
|
log(id + ": opening popup " + popup.id);
|
|
this.openPopup(popup);
|
|
},
|
|
|
|
openPopup: function(popup){
|
|
dijit.popup.open({
|
|
popup: popup,
|
|
parent: this,
|
|
around: this.domNode,
|
|
orient: {'TR': 'TL', 'TL': 'TR'},
|
|
onCancel: function(){
|
|
log(id + ": cancel of child " + popup.id);
|
|
},
|
|
onExecute: function(){
|
|
log(id + ": execute of child " + popup.id);
|
|
dijit.popup.close(popup);
|
|
}
|
|
})
|
|
},
|
|
|
|
closePopup: function(popup){
|
|
dijit.popup.close(popup);
|
|
}
|
|
});
|
|
|
|
// Create a button that displays a nested drop down.
|
|
nestedOpener = new NestedPopupOpener({
|
|
id: 'nestedPopupOpener',
|
|
popup1: (nestedChoice1 = new SimpleChoiceWidget({
|
|
id: "nestedChoice1"
|
|
})),
|
|
popup2: (nestedChoice2 = new SimpleChoiceWidget({
|
|
id: "nestedChoice2",
|
|
choice1: "4",
|
|
choice2: "5",
|
|
choice3: "6"
|
|
}))
|
|
});
|
|
nestedDropDownButton = new SimpleDropDownButton({
|
|
id: "showNestedMenuButton",
|
|
label: "show nested drop down",
|
|
popup: nestedOpener
|
|
}).placeAt(dojo.byId("widgets"));
|
|
|
|
// Create a button that displays a dialog that displays a nested drop down
|
|
dialogNestedChoice1 = new SimpleChoiceWidget({
|
|
id: "dialogNestedChoice1"
|
|
});
|
|
dialogNestedChoice2 = new SimpleChoiceWidget({
|
|
id: "dialogNestedChoice2",
|
|
choice1: "4",
|
|
choice2: "5",
|
|
choice3: "6"
|
|
});
|
|
dialogNestedPopupOpener = new NestedPopupOpener({
|
|
id: "nestedPopupOpenerFromDialog",
|
|
popup1: dialogNestedChoice1,
|
|
popup2: dialogNestedChoice2
|
|
});
|
|
dialogWithNestedPopup = new DialogWithPopupWidget({
|
|
id: "buttonInComplexDialog",
|
|
label: 'show nested menu',
|
|
popup: dialogNestedPopupOpener
|
|
});
|
|
dialogDropDownButton = new SimpleDropDownButton({
|
|
id: "showComplexDialogButton",
|
|
label: "show dialog w/nested menu",
|
|
popup: dialogWithNestedPopup
|
|
}).placeAt(dojo.byId("widgets"));
|
|
|
|
// To help the robot code, create an unattached widget and unattached DOMNode
|
|
new SimplePopup({id: "spw"}).placeAt(dojo.body());
|
|
dojo.place("<span id='sdn'>simple dom node</span>", dojo.body());
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>dijit.popup and BackgroundIFrame Unit Test</h1>
|
|
<input id="inputAtStart">
|
|
<span id="widgets"></span>
|
|
<input id="inputAtEnd">
|
|
</body>
|
|
</html>
|