| 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 |
|
|
|
11 |
dojo.provide("dojo.widget.Button");
|
|
|
12 |
dojo.require("dojo.lang.extras");
|
|
|
13 |
dojo.require("dojo.html.*");
|
|
|
14 |
dojo.require("dojo.html.selection");
|
|
|
15 |
dojo.require("dojo.widget.*");
|
|
|
16 |
dojo.widget.defineWidget("dojo.widget.Button", dojo.widget.HtmlWidget, {isContainer:true, caption:"", templateString:"<div dojoAttachPoint=\"buttonNode\" class=\"dojoButton\" style=\"position:relative;\" dojoAttachEvent=\"onMouseOver; onMouseOut; onMouseDown; onMouseUp; onClick:buttonClick; onKey:onKey; onFocus;\">\n <div class=\"dojoButtonContents\" align=center dojoAttachPoint=\"containerNode\" style=\"position:absolute;z-index:2;\"></div>\n <img dojoAttachPoint=\"leftImage\" style=\"position:absolute;left:0px;\">\n <img dojoAttachPoint=\"centerImage\" style=\"position:absolute;z-index:1;\">\n <img dojoAttachPoint=\"rightImage\" style=\"position:absolute;top:0px;right:0px;\">\n</div>\n", templateCssString:"/* ---- button --- */\n.dojoButton {\n\tpadding: 0 0 0 0;\n\tfont-size: 8pt;\n\twhite-space: nowrap;\n\tcursor: pointer;\n\tfont-family: Myriad, Tahoma, Verdana, sans-serif;\n}\n\n.dojoButton .dojoButtonContents {\n\tpadding: 2px 2px 2px 2px;\n\ttext-align: center;\t\t/* if icon and label are split across two lines, center icon */\n\tcolor: white;\n}\n\n.dojoButtonLeftPart .dojoButtonContents {\n\tpadding-right: 8px;\n}\n\n.dojoButtonDisabled {\n\tcursor: url(\"images/no.gif\"), default;\n}\n\n\n.dojoButtonContents img {\n\tvertical-align: middle;\t/* if icon and label are on same line, center them */\n}\n\n/* -------- colors ------------ */\n\n.dojoButtonHover .dojoButtonContents {\n}\n\n.dojoButtonDepressed .dojoButtonContents {\n\tcolor: #293a4b;\n}\n\n.dojoButtonDisabled .dojoButtonContents {\n\tcolor: #aaa;\n}\n\n\n/* ---------- drop down button specific ---------- */\n\n/* border between label and arrow (for drop down buttons */\n.dojoButton .border {\n\twidth: 1px;\n\tbackground: gray;\n}\n\n/* button arrow */\n.dojoButton .downArrow {\n\tpadding-left: 10px;\n\ttext-align: center;\n}\n\n.dojoButton.disabled .downArrow {\n\tcursor : default;\n}\n", templateCssPath:dojo.uri.moduleUri("dojo.widget", "templates/ButtonTemplate.css"), inactiveImg:"templates/images/soriaButton-", activeImg:"templates/images/soriaActive-", pressedImg:"templates/images/soriaPressed-", disabledImg:"templates/images/soriaDisabled-", width2height:1 / 3, fillInTemplate:function () {
|
|
|
17 |
if (this.caption) {
|
|
|
18 |
this.containerNode.appendChild(document.createTextNode(this.caption));
|
|
|
19 |
}
|
|
|
20 |
dojo.html.disableSelection(this.containerNode);
|
|
|
21 |
}, postCreate:function () {
|
|
|
22 |
this._sizeMyself();
|
|
|
23 |
}, _sizeMyself:function () {
|
|
|
24 |
if (this.domNode.parentNode) {
|
|
|
25 |
var placeHolder = document.createElement("span");
|
|
|
26 |
dojo.html.insertBefore(placeHolder, this.domNode);
|
|
|
27 |
}
|
|
|
28 |
dojo.body().appendChild(this.domNode);
|
|
|
29 |
this._sizeMyselfHelper();
|
|
|
30 |
if (placeHolder) {
|
|
|
31 |
dojo.html.insertBefore(this.domNode, placeHolder);
|
|
|
32 |
dojo.html.removeNode(placeHolder);
|
|
|
33 |
}
|
|
|
34 |
}, _sizeMyselfHelper:function () {
|
|
|
35 |
var mb = dojo.html.getMarginBox(this.containerNode);
|
|
|
36 |
this.height = mb.height;
|
|
|
37 |
this.containerWidth = mb.width;
|
|
|
38 |
var endWidth = this.height * this.width2height;
|
|
|
39 |
this.containerNode.style.left = endWidth + "px";
|
|
|
40 |
this.leftImage.height = this.rightImage.height = this.centerImage.height = this.height;
|
|
|
41 |
this.leftImage.width = this.rightImage.width = endWidth + 1;
|
|
|
42 |
this.centerImage.width = this.containerWidth;
|
|
|
43 |
this.centerImage.style.left = endWidth + "px";
|
|
|
44 |
this._setImage(this.disabled ? this.disabledImg : this.inactiveImg);
|
|
|
45 |
if (this.disabled) {
|
|
|
46 |
dojo.html.prependClass(this.domNode, "dojoButtonDisabled");
|
|
|
47 |
this.domNode.removeAttribute("tabIndex");
|
|
|
48 |
dojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", true);
|
|
|
49 |
} else {
|
|
|
50 |
dojo.html.removeClass(this.domNode, "dojoButtonDisabled");
|
|
|
51 |
this.domNode.setAttribute("tabIndex", "0");
|
|
|
52 |
dojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", false);
|
|
|
53 |
}
|
|
|
54 |
this.domNode.style.height = this.height + "px";
|
|
|
55 |
this.domNode.style.width = (this.containerWidth + 2 * endWidth) + "px";
|
|
|
56 |
}, onMouseOver:function (e) {
|
|
|
57 |
if (this.disabled) {
|
|
|
58 |
return;
|
|
|
59 |
}
|
|
|
60 |
if (!dojo.html.hasClass(this.buttonNode, "dojoButtonHover")) {
|
|
|
61 |
dojo.html.prependClass(this.buttonNode, "dojoButtonHover");
|
|
|
62 |
}
|
|
|
63 |
this._setImage(this.activeImg);
|
|
|
64 |
}, onMouseDown:function (e) {
|
|
|
65 |
if (this.disabled) {
|
|
|
66 |
return;
|
|
|
67 |
}
|
|
|
68 |
dojo.html.prependClass(this.buttonNode, "dojoButtonDepressed");
|
|
|
69 |
dojo.html.removeClass(this.buttonNode, "dojoButtonHover");
|
|
|
70 |
this._setImage(this.pressedImg);
|
|
|
71 |
}, onMouseUp:function (e) {
|
|
|
72 |
if (this.disabled) {
|
|
|
73 |
return;
|
|
|
74 |
}
|
|
|
75 |
dojo.html.prependClass(this.buttonNode, "dojoButtonHover");
|
|
|
76 |
dojo.html.removeClass(this.buttonNode, "dojoButtonDepressed");
|
|
|
77 |
this._setImage(this.activeImg);
|
|
|
78 |
}, onMouseOut:function (e) {
|
|
|
79 |
if (this.disabled) {
|
|
|
80 |
return;
|
|
|
81 |
}
|
|
|
82 |
if (e.toElement && dojo.html.isDescendantOf(e.toElement, this.buttonNode)) {
|
|
|
83 |
return;
|
|
|
84 |
}
|
|
|
85 |
dojo.html.removeClass(this.buttonNode, "dojoButtonHover");
|
|
|
86 |
dojo.html.removeClass(this.buttonNode, "dojoButtonDepressed");
|
|
|
87 |
this._setImage(this.inactiveImg);
|
|
|
88 |
}, onKey:function (e) {
|
|
|
89 |
if (!e.key) {
|
|
|
90 |
return;
|
|
|
91 |
}
|
|
|
92 |
var menu = dojo.widget.getWidgetById(this.menuId);
|
|
|
93 |
if (e.key == e.KEY_ENTER || e.key == " ") {
|
|
|
94 |
this.onMouseDown(e);
|
|
|
95 |
this.buttonClick(e);
|
|
|
96 |
dojo.lang.setTimeout(this, "onMouseUp", 75, e);
|
|
|
97 |
dojo.event.browser.stopEvent(e);
|
|
|
98 |
}
|
|
|
99 |
if (menu && menu.isShowingNow && e.key == e.KEY_DOWN_ARROW) {
|
|
|
100 |
dojo.event.disconnect(this.domNode, "onblur", this, "onBlur");
|
|
|
101 |
}
|
|
|
102 |
}, onFocus:function (e) {
|
|
|
103 |
var menu = dojo.widget.getWidgetById(this.menuId);
|
|
|
104 |
if (menu) {
|
|
|
105 |
dojo.event.connectOnce(this.domNode, "onblur", this, "onBlur");
|
|
|
106 |
}
|
|
|
107 |
}, onBlur:function (e) {
|
|
|
108 |
var menu = dojo.widget.getWidgetById(this.menuId);
|
|
|
109 |
if (!menu) {
|
|
|
110 |
return;
|
|
|
111 |
}
|
|
|
112 |
if (menu.close && menu.isShowingNow) {
|
|
|
113 |
menu.close();
|
|
|
114 |
}
|
|
|
115 |
}, buttonClick:function (e) {
|
|
|
116 |
if (!this.disabled) {
|
|
|
117 |
try {
|
|
|
118 |
this.domNode.focus();
|
|
|
119 |
}
|
|
|
120 |
catch (e2) {
|
|
|
121 |
}
|
|
|
122 |
this.onClick(e);
|
|
|
123 |
}
|
|
|
124 |
}, onClick:function (e) {
|
|
|
125 |
}, _setImage:function (prefix) {
|
|
|
126 |
this.leftImage.src = dojo.uri.moduleUri("dojo.widget", prefix + "l.gif");
|
|
|
127 |
this.centerImage.src = dojo.uri.moduleUri("dojo.widget", prefix + "c.gif");
|
|
|
128 |
this.rightImage.src = dojo.uri.moduleUri("dojo.widget", prefix + "r.gif");
|
|
|
129 |
}, _toggleMenu:function (menuId) {
|
|
|
130 |
var menu = dojo.widget.getWidgetById(menuId);
|
|
|
131 |
if (!menu) {
|
|
|
132 |
return;
|
|
|
133 |
}
|
|
|
134 |
if (menu.open && !menu.isShowingNow) {
|
|
|
135 |
var pos = dojo.html.getAbsolutePosition(this.domNode, false);
|
|
|
136 |
menu.open(pos.x, pos.y + this.height, this);
|
|
|
137 |
dojo.event.disconnect(this.domNode, "onblur", this, "onBlur");
|
|
|
138 |
} else {
|
|
|
139 |
if (menu.close && menu.isShowingNow) {
|
|
|
140 |
menu.close();
|
|
|
141 |
} else {
|
|
|
142 |
menu.toggle();
|
|
|
143 |
}
|
|
|
144 |
}
|
|
|
145 |
}, setCaption:function (content) {
|
|
|
146 |
this.caption = content;
|
|
|
147 |
this.containerNode.innerHTML = content;
|
|
|
148 |
this._sizeMyself();
|
|
|
149 |
}, setDisabled:function (disabled) {
|
|
|
150 |
this.disabled = disabled;
|
|
|
151 |
this._sizeMyself();
|
|
|
152 |
}});
|
|
|
153 |
dojo.widget.defineWidget("dojo.widget.DropDownButton", dojo.widget.Button, {menuId:"", downArrow:"templates/images/whiteDownArrow.gif", disabledDownArrow:"templates/images/whiteDownArrow.gif", fillInTemplate:function () {
|
|
|
154 |
dojo.widget.DropDownButton.superclass.fillInTemplate.apply(this, arguments);
|
|
|
155 |
this.arrow = document.createElement("img");
|
|
|
156 |
dojo.html.setClass(this.arrow, "downArrow");
|
|
|
157 |
dojo.widget.wai.setAttr(this.domNode, "waiState", "haspopup", this.menuId);
|
|
|
158 |
}, _sizeMyselfHelper:function () {
|
|
|
159 |
this.arrow.src = dojo.uri.moduleUri("dojo.widget", this.disabled ? this.disabledDownArrow : this.downArrow);
|
|
|
160 |
this.containerNode.appendChild(this.arrow);
|
|
|
161 |
dojo.widget.DropDownButton.superclass._sizeMyselfHelper.call(this);
|
|
|
162 |
}, onClick:function (e) {
|
|
|
163 |
this._toggleMenu(this.menuId);
|
|
|
164 |
}});
|
|
|
165 |
dojo.widget.defineWidget("dojo.widget.ComboButton", dojo.widget.Button, {menuId:"", templateString:"<div class=\"dojoButton\" style=\"position:relative;top:0px;left:0px; text-align:none;\" dojoAttachEvent=\"onKey;onFocus\">\n\n\t<div dojoAttachPoint=\"buttonNode\" class=\"dojoButtonLeftPart\" style=\"position:absolute;left:0px;top:0px;\"\n\t\tdojoAttachEvent=\"onMouseOver; onMouseOut; onMouseDown; onMouseUp; onClick:buttonClick;\">\n\t\t<div class=\"dojoButtonContents\" dojoAttachPoint=\"containerNode\" style=\"position:absolute;top:0px;right:0px;z-index:2;\"></div>\n\t\t<img dojoAttachPoint=\"leftImage\" style=\"position:absolute;left:0px;top:0px;\">\n\t\t<img dojoAttachPoint=\"centerImage\" style=\"position:absolute;right:0px;top:0px;z-index:1;\">\n\t</div>\n\n\t<div dojoAttachPoint=\"rightPart\" class=\"dojoButtonRightPart\" style=\"position:absolute;top:0px;right:0px;\"\n\t\tdojoAttachEvent=\"onMouseOver:rightOver; onMouseOut:rightOut; onMouseDown:rightDown; onMouseUp:rightUp; onClick:rightClick;\">\n\t\t<img dojoAttachPoint=\"arrowBackgroundImage\" style=\"position:absolute;top:0px;left:0px;z-index:1;\">\n\t\t<img src=\"${dojoWidgetModuleUri}templates/images/whiteDownArrow.gif\"\n\t\t \t\tstyle=\"z-index:2;position:absolute;left:3px;top:50%;\">\n\t\t<img dojoAttachPoint=\"rightImage\" style=\"position:absolute;top:0px;right:0px;\">\n\t</div>\n\n</div>\n", splitWidth:2, arrowWidth:5, _sizeMyselfHelper:function (e) {
|
|
|
166 |
var mb = dojo.html.getMarginBox(this.containerNode);
|
|
|
167 |
this.height = mb.height;
|
|
|
168 |
this.containerWidth = mb.width;
|
|
|
169 |
var endWidth = this.height / 3;
|
|
|
170 |
if (this.disabled) {
|
|
|
171 |
dojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", true);
|
|
|
172 |
this.domNode.removeAttribute("tabIndex");
|
|
|
173 |
} else {
|
|
|
174 |
dojo.widget.wai.setAttr(this.domNode, "waiState", "disabled", false);
|
|
|
175 |
this.domNode.setAttribute("tabIndex", "0");
|
|
|
176 |
}
|
|
|
177 |
this.leftImage.height = this.rightImage.height = this.centerImage.height = this.arrowBackgroundImage.height = this.height;
|
|
|
178 |
this.leftImage.width = endWidth + 1;
|
|
|
179 |
this.centerImage.width = this.containerWidth;
|
|
|
180 |
this.buttonNode.style.height = this.height + "px";
|
|
|
181 |
this.buttonNode.style.width = endWidth + this.containerWidth + "px";
|
|
|
182 |
this._setImage(this.disabled ? this.disabledImg : this.inactiveImg);
|
|
|
183 |
this.arrowBackgroundImage.width = this.arrowWidth;
|
|
|
184 |
this.rightImage.width = endWidth + 1;
|
|
|
185 |
this.rightPart.style.height = this.height + "px";
|
|
|
186 |
this.rightPart.style.width = this.arrowWidth + endWidth + "px";
|
|
|
187 |
this._setImageR(this.disabled ? this.disabledImg : this.inactiveImg);
|
|
|
188 |
this.domNode.style.height = this.height + "px";
|
|
|
189 |
var totalWidth = this.containerWidth + this.splitWidth + this.arrowWidth + 2 * endWidth;
|
|
|
190 |
this.domNode.style.width = totalWidth + "px";
|
|
|
191 |
}, _setImage:function (prefix) {
|
|
|
192 |
this.leftImage.src = dojo.uri.moduleUri("dojo.widget", prefix + "l.gif");
|
|
|
193 |
this.centerImage.src = dojo.uri.moduleUri("dojo.widget", prefix + "c.gif");
|
|
|
194 |
}, rightOver:function (e) {
|
|
|
195 |
if (this.disabled) {
|
|
|
196 |
return;
|
|
|
197 |
}
|
|
|
198 |
dojo.html.prependClass(this.rightPart, "dojoButtonHover");
|
|
|
199 |
this._setImageR(this.activeImg);
|
|
|
200 |
}, rightDown:function (e) {
|
|
|
201 |
if (this.disabled) {
|
|
|
202 |
return;
|
|
|
203 |
}
|
|
|
204 |
dojo.html.prependClass(this.rightPart, "dojoButtonDepressed");
|
|
|
205 |
dojo.html.removeClass(this.rightPart, "dojoButtonHover");
|
|
|
206 |
this._setImageR(this.pressedImg);
|
|
|
207 |
}, rightUp:function (e) {
|
|
|
208 |
if (this.disabled) {
|
|
|
209 |
return;
|
|
|
210 |
}
|
|
|
211 |
dojo.html.prependClass(this.rightPart, "dojoButtonHover");
|
|
|
212 |
dojo.html.removeClass(this.rightPart, "dojoButtonDepressed");
|
|
|
213 |
this._setImageR(this.activeImg);
|
|
|
214 |
}, rightOut:function (e) {
|
|
|
215 |
if (this.disabled) {
|
|
|
216 |
return;
|
|
|
217 |
}
|
|
|
218 |
dojo.html.removeClass(this.rightPart, "dojoButtonHover");
|
|
|
219 |
dojo.html.removeClass(this.rightPart, "dojoButtonDepressed");
|
|
|
220 |
this._setImageR(this.inactiveImg);
|
|
|
221 |
}, rightClick:function (e) {
|
|
|
222 |
if (this.disabled) {
|
|
|
223 |
return;
|
|
|
224 |
}
|
|
|
225 |
try {
|
|
|
226 |
this.domNode.focus();
|
|
|
227 |
}
|
|
|
228 |
catch (e2) {
|
|
|
229 |
}
|
|
|
230 |
this._toggleMenu(this.menuId);
|
|
|
231 |
}, _setImageR:function (prefix) {
|
|
|
232 |
this.arrowBackgroundImage.src = dojo.uri.moduleUri("dojo.widget", prefix + "c.gif");
|
|
|
233 |
this.rightImage.src = dojo.uri.moduleUri("dojo.widget", prefix + "r.gif");
|
|
|
234 |
}, onKey:function (e) {
|
|
|
235 |
if (!e.key) {
|
|
|
236 |
return;
|
|
|
237 |
}
|
|
|
238 |
var menu = dojo.widget.getWidgetById(this.menuId);
|
|
|
239 |
if (e.key == e.KEY_ENTER || e.key == " ") {
|
|
|
240 |
this.onMouseDown(e);
|
|
|
241 |
this.buttonClick(e);
|
|
|
242 |
dojo.lang.setTimeout(this, "onMouseUp", 75, e);
|
|
|
243 |
dojo.event.browser.stopEvent(e);
|
|
|
244 |
} else {
|
|
|
245 |
if (e.key == e.KEY_DOWN_ARROW && e.altKey) {
|
|
|
246 |
this.rightDown(e);
|
|
|
247 |
this.rightClick(e);
|
|
|
248 |
dojo.lang.setTimeout(this, "rightUp", 75, e);
|
|
|
249 |
dojo.event.browser.stopEvent(e);
|
|
|
250 |
} else {
|
|
|
251 |
if (menu && menu.isShowingNow && e.key == e.KEY_DOWN_ARROW) {
|
|
|
252 |
dojo.event.disconnect(this.domNode, "onblur", this, "onBlur");
|
|
|
253 |
}
|
|
|
254 |
}
|
|
|
255 |
}
|
|
|
256 |
}});
|
|
|
257 |
|