| 1318 |
alexandre_ |
1 |
/*
|
|
|
2 |
Copyright (c) 2004-2006, The Dojo Foundation
|
|
|
3 |
All Rights Reserved.
|
|
|
4 |
|
|
|
5 |
Licensed under the Academic Free License version 2.1 or above OR the
|
|
|
6 |
modified BSD license. For more information on Dojo licensing, see:
|
|
|
7 |
|
|
|
8 |
http://dojotoolkit.org/community/licensing.shtml
|
|
|
9 |
*/
|
|
|
10 |
|
| 1422 |
alexandre_ |
11 |
|
|
|
12 |
|
| 1318 |
alexandre_ |
13 |
dojo.provide("dojo.widget.PageContainer");
|
|
|
14 |
dojo.require("dojo.lang.func");
|
|
|
15 |
dojo.require("dojo.widget.*");
|
|
|
16 |
dojo.require("dojo.event.*");
|
|
|
17 |
dojo.require("dojo.html.selection");
|
|
|
18 |
dojo.widget.defineWidget("dojo.widget.PageContainer", dojo.widget.HtmlWidget, {isContainer:true, doLayout:true, templateString:"<div dojoAttachPoint='containerNode'></div>", selectedChild:"", fillInTemplate:function (args, frag) {
|
|
|
19 |
var source = this.getFragNodeRef(frag);
|
|
|
20 |
dojo.html.copyStyle(this.domNode, source);
|
|
|
21 |
dojo.widget.PageContainer.superclass.fillInTemplate.apply(this, arguments);
|
|
|
22 |
}, postCreate:function (args, frag) {
|
|
|
23 |
if (this.children.length) {
|
|
|
24 |
dojo.lang.forEach(this.children, this._setupChild, this);
|
|
|
25 |
var initialChild;
|
|
|
26 |
if (this.selectedChild) {
|
|
|
27 |
this.selectChild(this.selectedChild);
|
|
|
28 |
} else {
|
|
|
29 |
for (var i = 0; i < this.children.length; i++) {
|
|
|
30 |
if (this.children[i].selected) {
|
|
|
31 |
this.selectChild(this.children[i]);
|
|
|
32 |
break;
|
|
|
33 |
}
|
|
|
34 |
}
|
|
|
35 |
if (!this.selectedChildWidget) {
|
|
|
36 |
this.selectChild(this.children[0]);
|
|
|
37 |
}
|
|
|
38 |
}
|
|
|
39 |
}
|
|
|
40 |
}, addChild:function (child) {
|
|
|
41 |
dojo.widget.PageContainer.superclass.addChild.apply(this, arguments);
|
|
|
42 |
this._setupChild(child);
|
|
|
43 |
this.onResized();
|
|
|
44 |
if (!this.selectedChildWidget) {
|
|
|
45 |
this.selectChild(child);
|
|
|
46 |
}
|
|
|
47 |
}, _setupChild:function (page) {
|
|
|
48 |
page.hide();
|
|
|
49 |
page.domNode.style.position = "relative";
|
|
|
50 |
dojo.event.topic.publish(this.widgetId + "-addChild", page);
|
|
|
51 |
}, removeChild:function (page) {
|
|
|
52 |
dojo.widget.PageContainer.superclass.removeChild.apply(this, arguments);
|
|
|
53 |
if (this._beingDestroyed) {
|
|
|
54 |
return;
|
|
|
55 |
}
|
|
|
56 |
dojo.event.topic.publish(this.widgetId + "-removeChild", page);
|
|
|
57 |
this.onResized();
|
|
|
58 |
if (this.selectedChildWidget === page) {
|
|
|
59 |
this.selectedChildWidget = undefined;
|
|
|
60 |
if (this.children.length > 0) {
|
|
|
61 |
this.selectChild(this.children[0], true);
|
|
|
62 |
}
|
|
|
63 |
}
|
|
|
64 |
}, selectChild:function (page, callingWidget) {
|
|
|
65 |
page = dojo.widget.byId(page);
|
|
|
66 |
this.correspondingPageButton = callingWidget;
|
|
|
67 |
if (this.selectedChildWidget) {
|
|
|
68 |
this._hideChild(this.selectedChildWidget);
|
|
|
69 |
}
|
|
|
70 |
this.selectedChildWidget = page;
|
|
|
71 |
this.selectedChild = page.widgetId;
|
|
|
72 |
this._showChild(page);
|
|
|
73 |
page.isFirstChild = (page == this.children[0]);
|
|
|
74 |
page.isLastChild = (page == this.children[this.children.length - 1]);
|
|
|
75 |
dojo.event.topic.publish(this.widgetId + "-selectChild", page);
|
|
|
76 |
}, forward:function () {
|
|
|
77 |
var index = dojo.lang.find(this.children, this.selectedChildWidget);
|
|
|
78 |
this.selectChild(this.children[index + 1]);
|
|
|
79 |
}, back:function () {
|
|
|
80 |
var index = dojo.lang.find(this.children, this.selectedChildWidget);
|
|
|
81 |
this.selectChild(this.children[index - 1]);
|
|
|
82 |
}, onResized:function () {
|
|
|
83 |
if (this.doLayout && this.selectedChildWidget) {
|
|
|
84 |
with (this.selectedChildWidget.domNode.style) {
|
|
|
85 |
top = dojo.html.getPixelValue(this.containerNode, "padding-top", true);
|
|
|
86 |
left = dojo.html.getPixelValue(this.containerNode, "padding-left", true);
|
|
|
87 |
}
|
|
|
88 |
var content = dojo.html.getContentBox(this.containerNode);
|
|
|
89 |
this.selectedChildWidget.resizeTo(content.width, content.height);
|
|
|
90 |
}
|
|
|
91 |
}, _showChild:function (page) {
|
|
|
92 |
if (this.doLayout) {
|
|
|
93 |
var content = dojo.html.getContentBox(this.containerNode);
|
|
|
94 |
page.resizeTo(content.width, content.height);
|
|
|
95 |
}
|
|
|
96 |
page.selected = true;
|
|
|
97 |
page.show();
|
|
|
98 |
}, _hideChild:function (page) {
|
|
|
99 |
page.selected = false;
|
|
|
100 |
page.hide();
|
|
|
101 |
}, closeChild:function (page) {
|
|
|
102 |
var remove = page.onClose(this, page);
|
|
|
103 |
if (remove) {
|
|
|
104 |
this.removeChild(page);
|
|
|
105 |
page.destroy();
|
|
|
106 |
}
|
|
|
107 |
}, destroy:function () {
|
|
|
108 |
this._beingDestroyed = true;
|
|
|
109 |
dojo.event.topic.destroy(this.widgetId + "-addChild");
|
|
|
110 |
dojo.event.topic.destroy(this.widgetId + "-removeChild");
|
|
|
111 |
dojo.event.topic.destroy(this.widgetId + "-selectChild");
|
|
|
112 |
dojo.widget.PageContainer.superclass.destroy.apply(this, arguments);
|
|
|
113 |
}});
|
|
|
114 |
dojo.widget.defineWidget("dojo.widget.PageController", dojo.widget.HtmlWidget, {templateString:"<span wairole='tablist' dojoAttachEvent='onKey'></span>", isContainer:true, containerId:"", buttonWidget:"PageButton", "class":"dojoPageController", fillInTemplate:function () {
|
|
|
115 |
dojo.html.addClass(this.domNode, this["class"]);
|
|
|
116 |
dojo.widget.wai.setAttr(this.domNode, "waiRole", "role", "tablist");
|
|
|
117 |
}, postCreate:function () {
|
|
|
118 |
this.pane2button = {};
|
|
|
119 |
var container = dojo.widget.byId(this.containerId);
|
|
|
120 |
if (container) {
|
|
|
121 |
dojo.lang.forEach(container.children, this.onAddChild, this);
|
|
|
122 |
}
|
|
|
123 |
dojo.event.topic.subscribe(this.containerId + "-addChild", this, "onAddChild");
|
|
|
124 |
dojo.event.topic.subscribe(this.containerId + "-removeChild", this, "onRemoveChild");
|
|
|
125 |
dojo.event.topic.subscribe(this.containerId + "-selectChild", this, "onSelectChild");
|
|
|
126 |
}, destroy:function () {
|
|
|
127 |
dojo.event.topic.unsubscribe(this.containerId + "-addChild", this, "onAddChild");
|
|
|
128 |
dojo.event.topic.unsubscribe(this.containerId + "-removeChild", this, "onRemoveChild");
|
|
|
129 |
dojo.event.topic.unsubscribe(this.containerId + "-selectChild", this, "onSelectChild");
|
|
|
130 |
dojo.widget.PageController.superclass.destroy.apply(this, arguments);
|
|
|
131 |
}, onAddChild:function (page) {
|
|
|
132 |
var button = dojo.widget.createWidget(this.buttonWidget, {label:page.label, closeButton:page.closable});
|
|
|
133 |
this.addChild(button);
|
|
|
134 |
this.domNode.appendChild(button.domNode);
|
|
|
135 |
this.pane2button[page] = button;
|
|
|
136 |
page.controlButton = button;
|
|
|
137 |
var _this = this;
|
|
|
138 |
dojo.event.connect(button, "onClick", function () {
|
|
|
139 |
_this.onButtonClick(page);
|
|
|
140 |
});
|
|
|
141 |
dojo.event.connect(button, "onCloseButtonClick", function () {
|
|
|
142 |
_this.onCloseButtonClick(page);
|
|
|
143 |
});
|
|
|
144 |
}, onRemoveChild:function (page) {
|
|
|
145 |
if (this._currentChild == page) {
|
|
|
146 |
this._currentChild = null;
|
|
|
147 |
}
|
|
|
148 |
var button = this.pane2button[page];
|
|
|
149 |
if (button) {
|
|
|
150 |
button.destroy();
|
|
|
151 |
}
|
|
|
152 |
this.pane2button[page] = null;
|
|
|
153 |
}, onSelectChild:function (page) {
|
|
|
154 |
if (this._currentChild) {
|
|
|
155 |
var oldButton = this.pane2button[this._currentChild];
|
|
|
156 |
oldButton.clearSelected();
|
|
|
157 |
}
|
|
|
158 |
var newButton = this.pane2button[page];
|
|
|
159 |
newButton.setSelected();
|
|
|
160 |
this._currentChild = page;
|
|
|
161 |
}, onButtonClick:function (page) {
|
|
|
162 |
var container = dojo.widget.byId(this.containerId);
|
|
|
163 |
container.selectChild(page, false, this);
|
|
|
164 |
}, onCloseButtonClick:function (page) {
|
|
|
165 |
var container = dojo.widget.byId(this.containerId);
|
|
|
166 |
container.closeChild(page);
|
|
|
167 |
}, onKey:function (evt) {
|
|
|
168 |
if ((evt.keyCode == evt.KEY_RIGHT_ARROW) || (evt.keyCode == evt.KEY_LEFT_ARROW)) {
|
|
|
169 |
var current = 0;
|
|
|
170 |
var next = null;
|
|
|
171 |
var current = dojo.lang.find(this.children, this.pane2button[this._currentChild]);
|
|
|
172 |
if (evt.keyCode == evt.KEY_RIGHT_ARROW) {
|
|
|
173 |
next = this.children[(current + 1) % this.children.length];
|
|
|
174 |
} else {
|
|
|
175 |
next = this.children[(current + (this.children.length - 1)) % this.children.length];
|
|
|
176 |
}
|
|
|
177 |
dojo.event.browser.stopEvent(evt);
|
|
|
178 |
next.onClick();
|
|
|
179 |
}
|
|
|
180 |
}});
|
|
|
181 |
dojo.widget.defineWidget("dojo.widget.PageButton", dojo.widget.HtmlWidget, {templateString:"<span class='item'>" + "<span dojoAttachEvent='onClick' dojoAttachPoint='titleNode' class='selectButton'>${this.label}</span>" + "<span dojoAttachEvent='onClick:onCloseButtonClick' class='closeButton'>[X]</span>" + "</span>", label:"foo", closeButton:false, onClick:function () {
|
|
|
182 |
this.focus();
|
|
|
183 |
}, onCloseButtonMouseOver:function () {
|
|
|
184 |
dojo.html.addClass(this.closeButtonNode, "closeHover");
|
|
|
185 |
}, onCloseButtonMouseOut:function () {
|
|
|
186 |
dojo.html.removeClass(this.closeButtonNode, "closeHover");
|
|
|
187 |
}, onCloseButtonClick:function (evt) {
|
|
|
188 |
}, setSelected:function () {
|
|
|
189 |
dojo.html.addClass(this.domNode, "current");
|
|
|
190 |
this.titleNode.setAttribute("tabIndex", "0");
|
|
|
191 |
}, clearSelected:function () {
|
|
|
192 |
dojo.html.removeClass(this.domNode, "current");
|
|
|
193 |
this.titleNode.setAttribute("tabIndex", "-1");
|
|
|
194 |
}, focus:function () {
|
|
|
195 |
if (this.titleNode.focus) {
|
|
|
196 |
this.titleNode.focus();
|
|
|
197 |
}
|
|
|
198 |
}});
|
|
|
199 |
dojo.lang.extend(dojo.widget.Widget, {label:"", selected:false, closable:false, onClose:function () {
|
|
|
200 |
return true;
|
|
|
201 |
}});
|
|
|
202 |
|