Button.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447
  1. if (!dojo._hasResource["dijit.form.Button"]) { // _hasResource checks added by
  2. // build. Do not use
  3. // _hasResource directly in your
  4. // code.
  5. dojo._hasResource["dijit.form.Button"] = true;
  6. dojo.provide("dijit.form.Button");
  7. dojo.require("dijit.form._FormWidget");
  8. dojo.require("dijit._Container");
  9. dojo.declare("dijit.form.Button", dijit.form._FormWidget, {
  10. /*
  11. * usage <button dojoType="button" onClick="...">Hello world</button>
  12. *
  13. * var button1 = new dijit.form.Button({label: "hello world", onClick:
  14. * foo}); dojo.body().appendChild(button1.domNode);
  15. */
  16. // summary
  17. // Basically the same thing as a normal HTML button, but with special
  18. // styling.
  19. // label: String
  20. // text to display in button
  21. label : "",
  22. // showLabel: Boolean
  23. // whether or not to display the text label in button
  24. showLabel : true,
  25. // iconClass: String
  26. // class to apply to div in button to make it display an icon
  27. iconClass : "",
  28. type : "button",
  29. baseClass : "dijitButton",
  30. templateString : "<div class=\"dijit dijitLeft dijitInline dijitButton\"\n\tdojoAttachEvent=\"onclick:_onButtonClick,onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse\"\n\t><div class='dijitRight'\n\t\t><button class=\"dijitStretch dijitButtonNode dijitButtonContents\" dojoAttachPoint=\"focusNode,titleNode\"\n\t\t\ttype=\"${type}\" waiRole=\"button\" waiState=\"labelledby-${id}_label\"\n\t\t\t><span class=\"dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\" \n \t\t\t\t><span class=\"dijitToggleButtonIconChar\">&#10003</span \n\t\t\t></span\n\t\t\t><span class=\"dijitButtonText\" id=\"${id}_label\" dojoAttachPoint=\"containerNode\">${label}</span\n\t\t></button\n\t></div\n></div>\n",
  31. // TODO: set button's title to this.containerNode.innerText
  32. _onClick : function(/* Event */e) {
  33. // summary: internal function to handle click actions
  34. if (this.disabled) {
  35. return false;
  36. }
  37. this._clicked(); // widget click actions
  38. return this.onClick(e); // user click actions
  39. },
  40. _onButtonClick : function(/* Event */e) {
  41. // summary: callback when the user mouse clicks the button portion
  42. dojo.stopEvent(e);
  43. var okToSubmit = this._onClick(e) !== false; // returning nothing
  44. // is same as true
  45. // for some reason type=submit buttons don't automatically submit
  46. // the form; do it manually
  47. if (this.type == "submit" && okToSubmit) {
  48. for (var node = this.domNode; node; node = node.parentNode) {
  49. var widget = dijit.byNode(node);
  50. if (widget && widget._onSubmit) {
  51. widget._onSubmit(e);
  52. break;
  53. }
  54. if (node.tagName.toLowerCase() == "form") {
  55. if (!node.onsubmit || node.onsubmit()) {
  56. node.submit();
  57. }
  58. break;
  59. }
  60. }
  61. }
  62. },
  63. postCreate : function() {
  64. // summary:
  65. // get label and set as title on button icon if necessary
  66. if (this.showLabel == false) {
  67. var labelText = "";
  68. this.label = this.containerNode.innerHTML;
  69. labelText = dojo.trim(this.containerNode.innerText
  70. || this.containerNode.textContent);
  71. // set title attrib on iconNode
  72. this.titleNode.title = labelText;
  73. dojo.addClass(this.containerNode, "dijitDisplayNone");
  74. }
  75. this.inherited(arguments);
  76. },
  77. onClick : function(/* Event */e) {
  78. // summary: user callback for when button is clicked
  79. // if type="submit", return value != false to perform submit
  80. return true;
  81. },
  82. _clicked : function(/* Event */e) {
  83. // summary: internal replaceable function for when the button is
  84. // clicked
  85. },
  86. setLabel : function(/* String */content) {
  87. // summary: reset the label (text) of the button; takes an HTML
  88. // string
  89. this.containerNode.innerHTML = this.label = content;
  90. if (dojo.isMozilla) { // Firefox has re-render issues with tables
  91. var oldDisplay = dojo.getComputedStyle(this.domNode).display;
  92. this.domNode.style.display = "none";
  93. var _this = this;
  94. setTimeout(function() {
  95. _this.domNode.style.display = oldDisplay;
  96. }, 1);
  97. }
  98. if (this.showLabel == false) {
  99. this.titleNode.title = dojo.trim(this.containerNode.innerText
  100. || this.containerNode.textContent);
  101. }
  102. }
  103. });
  104. /*
  105. * usage <button dojoType="DropDownButton" label="Hello world"><div
  106. * dojotype=dijit.Menu>...</div></button>
  107. *
  108. * var button1 = new dijit.form.DropDownButton({ label: "hi", dropDown: new
  109. * dijit.Menu(...) }); dojo.body().appendChild(button1);
  110. */
  111. dojo.declare("dijit.form.DropDownButton", [dijit.form.Button,
  112. dijit._Container], {
  113. // summary
  114. // push the button and a menu shows up
  115. baseClass : "dijitDropDownButton",
  116. templateString : "<div class=\"dijit dijitLeft dijitInline\"\n\tdojoAttachEvent=\"onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse,onclick:_onDropDownClick,onkeydown:_onDropDownKeydown,onblur:_onDropDownBlur,onkeypress:_onKey\"\n\t><div class='dijitRight'>\n\t<button class=\"dijitStretch dijitButtonNode dijitButtonContents\" type=\"${type}\"\n\t\tdojoAttachPoint=\"focusNode,titleNode\" waiRole=\"button\" waiState=\"haspopup-true,labelledby-${id}_label\"\n\t\t><div class=\"dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\"></div\n\t\t><span class=\"dijitButtonText\" \tdojoAttachPoint=\"containerNode,popupStateNode\"\n\t\tid=\"${id}_label\">${label}</span\n\t\t><span class='dijitA11yDownArrow'>&#9660;</span>\n\t</button>\n</div></div>\n",
  117. _fillContent : function() {
  118. // my inner HTML contains both the button contents and a
  119. // drop down widget, like
  120. // <DropDownButton> <span>push me</span> <Menu> ... </Menu>
  121. // </DropDownButton>
  122. // The first node is assumed to be the button content. The
  123. // widget is the popup.
  124. if (this.srcNodeRef) { // programatically created buttons
  125. // might not define srcNodeRef
  126. // FIXME: figure out how to filter out the widget and
  127. // use all remaining nodes as button
  128. // content, not just nodes[0]
  129. var nodes = dojo.query("*", this.srcNodeRef);
  130. dijit.form.DropDownButton.superclass._fillContent.call(
  131. this, nodes[0]);
  132. // save pointer to srcNode so we can grab the drop down
  133. // widget after it's instantiated
  134. this.dropDownContainer = this.srcNodeRef;
  135. }
  136. },
  137. startup : function() {
  138. // the child widget from srcNodeRef is the dropdown widget.
  139. // Insert it in the page DOM,
  140. // make it invisible, and store a reference to pass to the
  141. // popup code.
  142. if (!this.dropDown) {
  143. var dropDownNode = dojo.query("[widgetId]",
  144. this.dropDownContainer)[0];
  145. this.dropDown = dijit.byNode(dropDownNode);
  146. delete this.dropDownContainer;
  147. }
  148. dojo.body().appendChild(this.dropDown.domNode);
  149. this.dropDown.domNode.style.display = "none";
  150. },
  151. _onArrowClick : function(/* Event */e) {
  152. // summary: callback when the user mouse clicks on menu
  153. // popup node
  154. if (this.disabled) {
  155. return;
  156. }
  157. this._toggleDropDown();
  158. },
  159. _onDropDownClick : function(/* Event */e) {
  160. // on Firefox 2 on the Mac it is possible to fire onclick
  161. // by pressing enter down on a second element and
  162. // transferring
  163. // focus to the DropDownButton;
  164. // we want to prevent opening our menu in this situation
  165. // and only do so if we have seen a keydown on this button;
  166. // e.detail != 0 means that we were fired by mouse
  167. var isMacFFlessThan3 = dojo.isFF && dojo.isFF < 3
  168. && navigator.appVersion.indexOf("Macintosh") != -1;
  169. if (!isMacFFlessThan3 || e.detail != 0 || this._seenKeydown) {
  170. this._onArrowClick(e);
  171. }
  172. this._seenKeydown = false;
  173. },
  174. _onDropDownKeydown : function(/* Event */e) {
  175. this._seenKeydown = true;
  176. },
  177. _onDropDownBlur : function(/* Event */e) {
  178. this._seenKeydown = false;
  179. },
  180. _onKey : function(/* Event */e) {
  181. // summary: callback when the user presses a key on menu
  182. // popup node
  183. if (this.disabled) {
  184. return;
  185. }
  186. if (e.keyCode == dojo.keys.DOWN_ARROW) {
  187. if (!this.dropDown
  188. || this.dropDown.domNode.style.display == "none") {
  189. dojo.stopEvent(e);
  190. return this._toggleDropDown();
  191. }
  192. }
  193. },
  194. _onBlur : function() {
  195. // summary: called magically when focus has shifted away
  196. // from this widget and it's dropdown
  197. this._closeDropDown();
  198. // don't focus on button. the user has explicitly focused on
  199. // something else.
  200. },
  201. _toggleDropDown : function() {
  202. // summary: toggle the drop-down widget; if it is up, close
  203. // it, if not, open it
  204. if (this.disabled) {
  205. return;
  206. }
  207. dijit.focus(this.popupStateNode);
  208. var dropDown = this.dropDown;
  209. if (!dropDown) {
  210. return false;
  211. }
  212. if (!dropDown.isShowingNow) {
  213. // If there's an href, then load that first, so we don't
  214. // get a flicker
  215. if (dropDown.href && !dropDown.isLoaded) {
  216. var self = this;
  217. var handler = dojo.connect(dropDown, "onLoad",
  218. function() {
  219. dojo.disconnect(handler);
  220. self._openDropDown();
  221. });
  222. dropDown._loadCheck(true);
  223. return;
  224. } else {
  225. this._openDropDown();
  226. }
  227. } else {
  228. this._closeDropDown();
  229. }
  230. },
  231. _openDropDown : function() {
  232. var dropDown = this.dropDown;
  233. var oldWidth = dropDown.domNode.style.width;
  234. var self = this;
  235. dijit.popup.open({
  236. parent : this,
  237. popup : dropDown,
  238. around : this.domNode,
  239. orient : this.isLeftToRight() ? {
  240. 'BL' : 'TL',
  241. 'BR' : 'TR',
  242. 'TL' : 'BL',
  243. 'TR' : 'BR'
  244. } : {
  245. 'BR' : 'TR',
  246. 'BL' : 'TL',
  247. 'TR' : 'BR',
  248. 'TL' : 'BL'
  249. },
  250. onExecute : function() {
  251. self._closeDropDown(true);
  252. },
  253. onCancel : function() {
  254. self._closeDropDown(true);
  255. },
  256. onClose : function() {
  257. dropDown.domNode.style.width = oldWidth;
  258. self.popupStateNode
  259. .removeAttribute("popupActive");
  260. this._opened = false;
  261. }
  262. });
  263. if (this.domNode.offsetWidth > dropDown.domNode.offsetWidth) {
  264. var adjustNode = null;
  265. if (!this.isLeftToRight()) {
  266. adjustNode = dropDown.domNode.parentNode;
  267. var oldRight = adjustNode.offsetLeft
  268. + adjustNode.offsetWidth;
  269. }
  270. // make menu at least as wide as the button
  271. dojo.marginBox(dropDown.domNode, {
  272. w : this.domNode.offsetWidth
  273. });
  274. if (adjustNode) {
  275. adjustNode.style.left = oldRight
  276. - this.domNode.offsetWidth + "px";
  277. }
  278. }
  279. this.popupStateNode.setAttribute("popupActive", "true");
  280. this._opened = true;
  281. if (dropDown.focus) {
  282. dropDown.focus();
  283. }
  284. // TODO: set this.checked and call setStateClass(), to
  285. // affect button look while drop down is shown
  286. },
  287. _closeDropDown : function(/* Boolean */focus) {
  288. if (this._opened) {
  289. dijit.popup.close(this.dropDown);
  290. if (focus) {
  291. this.focus();
  292. }
  293. this._opened = false;
  294. }
  295. }
  296. });
  297. /*
  298. * usage <button dojoType="ComboButton" onClick="..."><span>Hello world</span><div
  299. * dojoType=dijit.Menu>...</div></button>
  300. *
  301. * var button1 = new dijit.form.ComboButton({label: "hello world", onClick:
  302. * foo, dropDown: "myMenu"}); dojo.body().appendChild(button1.domNode);
  303. */
  304. dojo.declare("dijit.form.ComboButton", dijit.form.DropDownButton, {
  305. // summary
  306. // left side is normal button, right side displays menu
  307. templateString : "<table class='dijit dijitReset dijitInline dijitLeft'\n\tcellspacing='0' cellpadding='0'\n\tdojoAttachEvent=\"onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse\">\n\t<tr>\n\t\t<td\tclass=\"dijitStretch dijitButtonContents dijitButtonNode\"\n\t\t\ttabIndex=\"${tabIndex}\"\n\t\t\tdojoAttachEvent=\"ondijitclick:_onButtonClick\" dojoAttachPoint=\"titleNode\"\n\t\t\twaiRole=\"button\" waiState=\"labelledby-${id}_label\">\n\t\t\t<div class=\"dijitInline ${iconClass}\" dojoAttachPoint=\"iconNode\"></div>\n\t\t\t<span class=\"dijitButtonText\" id=\"${id}_label\" dojoAttachPoint=\"containerNode\">${label}</span>\n\t\t</td>\n\t\t<td class='dijitReset dijitRight dijitButtonNode dijitDownArrowButton'\n\t\t\tdojoAttachPoint=\"popupStateNode,focusNode\"\n\t\t\tdojoAttachEvent=\"ondijitclick:_onArrowClick, onkeypress:_onKey\"\n\t\t\tstateModifier=\"DownArrow\"\n\t\t\ttitle=\"${optionsTitle}\" name=\"${name}\"\n\t\t\twaiRole=\"button\" waiState=\"haspopup-true\"\n\t\t><div waiRole=\"presentation\">&#9660;</div>\n\t</td></tr>\n</table>\n",
  308. attributeMap : dojo.mixin(dojo
  309. .clone(dijit.form._FormWidget.prototype.attributeMap),
  310. {
  311. id : "",
  312. name : ""
  313. }),
  314. // optionsTitle: String
  315. // text that describes the options menu (accessibility)
  316. optionsTitle : "",
  317. baseClass : "dijitComboButton",
  318. _focusedNode : null,
  319. postCreate : function() {
  320. this.inherited(arguments);
  321. this._focalNodes = [this.titleNode, this.popupStateNode];
  322. dojo.forEach(this._focalNodes, dojo.hitch(this, function(node) {
  323. if (dojo.isIE) {
  324. this.connect(node, "onactivate", this._onNodeFocus);
  325. } else {
  326. this.connect(node, "onfocus", this._onNodeFocus);
  327. }
  328. }));
  329. },
  330. focusFocalNode : function(node) {
  331. // summary: Focus the focal node node.
  332. this._focusedNode = node;
  333. dijit.focus(node);
  334. },
  335. hasNextFocalNode : function() {
  336. // summary: Returns true if this widget has no node currently
  337. // focused or if there is a node following the focused one.
  338. // False is returned if the last node has focus.
  339. return this._focusedNode !== this.getFocalNodes()[1];
  340. },
  341. focusNext : function() {
  342. // summary: Focus the focal node following the current node with
  343. // focus
  344. // or the first one if no node currently has focus.
  345. this._focusedNode = this.getFocalNodes()[this._focusedNode ? 1 : 0];
  346. dijit.focus(this._focusedNode);
  347. },
  348. hasPrevFocalNode : function() {
  349. // summary: Returns true if this widget has no node currently
  350. // focused or if there is a node before the focused one.
  351. // False is returned if the first node has focus.
  352. return this._focusedNode !== this.getFocalNodes()[0];
  353. },
  354. focusPrev : function() {
  355. // summary: Focus the focal node before the current node with focus
  356. // or the last one if no node currently has focus.
  357. this._focusedNode = this.getFocalNodes()[this._focusedNode ? 0 : 1];
  358. dijit.focus(this._focusedNode);
  359. },
  360. getFocalNodes : function() {
  361. // summary: Returns an array of focal nodes for this widget.
  362. return this._focalNodes;
  363. },
  364. _onNodeFocus : function(evt) {
  365. this._focusedNode = evt.currentTarget;
  366. },
  367. _onBlur : function(evt) {
  368. this.inherited(arguments);
  369. this._focusedNode = null;
  370. }
  371. });
  372. dojo.declare("dijit.form.ToggleButton", dijit.form.Button, {
  373. // summary
  374. // A button that can be in two states (checked or not).
  375. // Can be base class for things like tabs or checkbox or radio
  376. // buttons
  377. baseClass : "dijitToggleButton",
  378. // checked: Boolean
  379. // Corresponds to the native HTML <input> element's attribute.
  380. // In markup, specified as "checked='checked'" or just
  381. // "checked".
  382. // True if the button is depressed, or the checkbox is checked,
  383. // or the radio button is selected, etc.
  384. checked : false,
  385. _clicked : function(/* Event */evt) {
  386. this.setChecked(!this.checked);
  387. },
  388. setChecked : function(/* Boolean */checked) {
  389. // summary
  390. // Programatically deselect the button
  391. this.checked = checked;
  392. dijit.setWaiState(this.focusNode || this.domNode,
  393. "pressed", this.checked);
  394. this._setStateClass();
  395. this.onChange(checked);
  396. }
  397. });
  398. }