jquery.ui.button.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395
  1. /*!
  2. * jQuery UI Button 1.10.4
  3. * http://jqueryui.com
  4. *
  5. * Copyright 2014 jQuery Foundation and other contributors
  6. * Released under the MIT license.
  7. * http://jquery.org/license
  8. *
  9. * http://api.jqueryui.com/button/
  10. *
  11. * Depends:
  12. * jquery.ui.core.js
  13. * jquery.ui.widget.js
  14. */
  15. (function( $, undefined ) {
  16. var lastActive,
  17. baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
  18. typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
  19. formResetHandler = function() {
  20. var form = $( this );
  21. setTimeout(function() {
  22. form.find( ":ui-button" ).button( "refresh" );
  23. }, 1 );
  24. },
  25. radioGroup = function( radio ) {
  26. var name = radio.name,
  27. form = radio.form,
  28. radios = $( [] );
  29. if ( name ) {
  30. name = name.replace( /'/g, "\\'" );
  31. if ( form ) {
  32. radios = $( form ).find( "[name='" + name + "']" );
  33. } else {
  34. radios = $( "[name='" + name + "']", radio.ownerDocument )
  35. .filter(function() {
  36. return !this.form;
  37. });
  38. }
  39. }
  40. return radios;
  41. };
  42. $.widget( "ui.button", {
  43. version: "1.10.4",
  44. defaultElement: "<button>",
  45. options: {
  46. disabled: null,
  47. text: true,
  48. label: null,
  49. icons: {
  50. primary: null,
  51. secondary: null
  52. }
  53. },
  54. _create: function() {
  55. this.element.closest( "form" )
  56. .unbind( "reset" + this.eventNamespace )
  57. .bind( "reset" + this.eventNamespace, formResetHandler );
  58. if ( typeof this.options.disabled !== "boolean" ) {
  59. this.options.disabled = !!this.element.prop( "disabled" );
  60. } else {
  61. this.element.prop( "disabled", this.options.disabled );
  62. }
  63. this._determineButtonType();
  64. this.hasTitle = !!this.buttonElement.attr( "title" );
  65. var that = this,
  66. options = this.options,
  67. toggleButton = this.type === "checkbox" || this.type === "radio",
  68. activeClass = !toggleButton ? "ui-state-active" : "";
  69. if ( options.label === null ) {
  70. options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html());
  71. }
  72. this._hoverable( this.buttonElement );
  73. this.buttonElement
  74. .addClass( baseClasses )
  75. .attr( "role", "button" )
  76. .bind( "mouseenter" + this.eventNamespace, function() {
  77. if ( options.disabled ) {
  78. return;
  79. }
  80. if ( this === lastActive ) {
  81. $( this ).addClass( "ui-state-active" );
  82. }
  83. })
  84. .bind( "mouseleave" + this.eventNamespace, function() {
  85. if ( options.disabled ) {
  86. return;
  87. }
  88. $( this ).removeClass( activeClass );
  89. })
  90. .bind( "click" + this.eventNamespace, function( event ) {
  91. if ( options.disabled ) {
  92. event.preventDefault();
  93. event.stopImmediatePropagation();
  94. }
  95. });
  96. // Can't use _focusable() because the element that receives focus
  97. // and the element that gets the ui-state-focus class are different
  98. this._on({
  99. focus: function() {
  100. this.buttonElement.addClass( "ui-state-focus" );
  101. },
  102. blur: function() {
  103. this.buttonElement.removeClass( "ui-state-focus" );
  104. }
  105. });
  106. if ( toggleButton ) {
  107. this.element.bind( "change" + this.eventNamespace, function() {
  108. that.refresh();
  109. });
  110. }
  111. if ( this.type === "checkbox" ) {
  112. this.buttonElement.bind( "click" + this.eventNamespace, function() {
  113. if ( options.disabled ) {
  114. return false;
  115. }
  116. });
  117. } else if ( this.type === "radio" ) {
  118. this.buttonElement.bind( "click" + this.eventNamespace, function() {
  119. if ( options.disabled ) {
  120. return false;
  121. }
  122. $( this ).addClass( "ui-state-active" );
  123. that.buttonElement.attr( "aria-pressed", "true" );
  124. var radio = that.element[ 0 ];
  125. radioGroup( radio )
  126. .not( radio )
  127. .map(function() {
  128. return $( this ).button( "widget" )[ 0 ];
  129. })
  130. .removeClass( "ui-state-active" )
  131. .attr( "aria-pressed", "false" );
  132. });
  133. } else {
  134. this.buttonElement
  135. .bind( "mousedown" + this.eventNamespace, function() {
  136. if ( options.disabled ) {
  137. return false;
  138. }
  139. $( this ).addClass( "ui-state-active" );
  140. lastActive = this;
  141. that.document.one( "mouseup", function() {
  142. lastActive = null;
  143. });
  144. })
  145. .bind( "mouseup" + this.eventNamespace, function() {
  146. if ( options.disabled ) {
  147. return false;
  148. }
  149. $( this ).removeClass( "ui-state-active" );
  150. })
  151. .bind( "keydown" + this.eventNamespace, function(event) {
  152. if ( options.disabled ) {
  153. return false;
  154. }
  155. if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
  156. $( this ).addClass( "ui-state-active" );
  157. }
  158. })
  159. // see #8559, we bind to blur here in case the button element loses
  160. // focus between keydown and keyup, it would be left in an "active" state
  161. .bind( "keyup" + this.eventNamespace + " blur" + this.eventNamespace, function() {
  162. $( this ).removeClass( "ui-state-active" );
  163. });
  164. if ( this.buttonElement.is("a") ) {
  165. this.buttonElement.keyup(function(event) {
  166. if ( event.keyCode === $.ui.keyCode.SPACE ) {
  167. // TODO pass through original event correctly (just as 2nd argument doesn't work)
  168. $( this ).click();
  169. }
  170. });
  171. }
  172. }
  173. // TODO: pull out $.Widget's handling for the disabled option into
  174. // $.Widget.prototype._setOptionDisabled so it's easy to proxy and can
  175. // be overridden by individual plugins
  176. this._setOption( "disabled", options.disabled );
  177. this._resetButton();
  178. },
  179. _determineButtonType: function() {
  180. var ancestor, labelSelector, checked;
  181. if ( this.element.is("[type=checkbox]") ) {
  182. this.type = "checkbox";
  183. } else if ( this.element.is("[type=radio]") ) {
  184. this.type = "radio";
  185. } else if ( this.element.is("input") ) {
  186. this.type = "input";
  187. } else {
  188. this.type = "button";
  189. }
  190. if ( this.type === "checkbox" || this.type === "radio" ) {
  191. // we don't search against the document in case the element
  192. // is disconnected from the DOM
  193. ancestor = this.element.parents().last();
  194. labelSelector = "label[for='" + this.element.attr("id") + "']";
  195. this.buttonElement = ancestor.find( labelSelector );
  196. if ( !this.buttonElement.length ) {
  197. ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
  198. this.buttonElement = ancestor.filter( labelSelector );
  199. if ( !this.buttonElement.length ) {
  200. this.buttonElement = ancestor.find( labelSelector );
  201. }
  202. }
  203. this.element.addClass( "ui-helper-hidden-accessible" );
  204. checked = this.element.is( ":checked" );
  205. if ( checked ) {
  206. this.buttonElement.addClass( "ui-state-active" );
  207. }
  208. this.buttonElement.prop( "aria-pressed", checked );
  209. } else {
  210. this.buttonElement = this.element;
  211. }
  212. },
  213. widget: function() {
  214. return this.buttonElement;
  215. },
  216. _destroy: function() {
  217. this.element
  218. .removeClass( "ui-helper-hidden-accessible" );
  219. this.buttonElement
  220. .removeClass( baseClasses + " ui-state-active " + typeClasses )
  221. .removeAttr( "role" )
  222. .removeAttr( "aria-pressed" )
  223. .html( this.buttonElement.find(".ui-button-text").html() );
  224. if ( !this.hasTitle ) {
  225. this.buttonElement.removeAttr( "title" );
  226. }
  227. },
  228. _setOption: function( key, value ) {
  229. this._super( key, value );
  230. if ( key === "disabled" ) {
  231. this.element.prop( "disabled", !!value );
  232. if ( value ) {
  233. this.buttonElement.removeClass( "ui-state-focus" );
  234. }
  235. return;
  236. }
  237. this._resetButton();
  238. },
  239. refresh: function() {
  240. //See #8237 & #8828
  241. var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" );
  242. if ( isDisabled !== this.options.disabled ) {
  243. this._setOption( "disabled", isDisabled );
  244. }
  245. if ( this.type === "radio" ) {
  246. radioGroup( this.element[0] ).each(function() {
  247. if ( $( this ).is( ":checked" ) ) {
  248. $( this ).button( "widget" )
  249. .addClass( "ui-state-active" )
  250. .attr( "aria-pressed", "true" );
  251. } else {
  252. $( this ).button( "widget" )
  253. .removeClass( "ui-state-active" )
  254. .attr( "aria-pressed", "false" );
  255. }
  256. });
  257. } else if ( this.type === "checkbox" ) {
  258. if ( this.element.is( ":checked" ) ) {
  259. this.buttonElement
  260. .addClass( "ui-state-active" )
  261. .attr( "aria-pressed", "true" );
  262. } else {
  263. this.buttonElement
  264. .removeClass( "ui-state-active" )
  265. .attr( "aria-pressed", "false" );
  266. }
  267. }
  268. },
  269. _resetButton: function() {
  270. if ( this.type === "input" ) {
  271. if ( this.options.label ) {
  272. this.element.val( this.options.label );
  273. }
  274. return;
  275. }
  276. var buttonElement = this.buttonElement.removeClass( typeClasses ),
  277. buttonText = $( "<span></span>", this.document[0] )
  278. .addClass( "ui-button-text" )
  279. .html( this.options.label )
  280. .appendTo( buttonElement.empty() )
  281. .text(),
  282. icons = this.options.icons,
  283. multipleIcons = icons.primary && icons.secondary,
  284. buttonClasses = [];
  285. if ( icons.primary || icons.secondary ) {
  286. if ( this.options.text ) {
  287. buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
  288. }
  289. if ( icons.primary ) {
  290. buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
  291. }
  292. if ( icons.secondary ) {
  293. buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
  294. }
  295. if ( !this.options.text ) {
  296. buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
  297. if ( !this.hasTitle ) {
  298. buttonElement.attr( "title", $.trim( buttonText ) );
  299. }
  300. }
  301. } else {
  302. buttonClasses.push( "ui-button-text-only" );
  303. }
  304. buttonElement.addClass( buttonClasses.join( " " ) );
  305. }
  306. });
  307. $.widget( "ui.buttonset", {
  308. version: "1.10.4",
  309. options: {
  310. items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
  311. },
  312. _create: function() {
  313. this.element.addClass( "ui-buttonset" );
  314. },
  315. _init: function() {
  316. this.refresh();
  317. },
  318. _setOption: function( key, value ) {
  319. if ( key === "disabled" ) {
  320. this.buttons.button( "option", key, value );
  321. }
  322. this._super( key, value );
  323. },
  324. refresh: function() {
  325. var rtl = this.element.css( "direction" ) === "rtl";
  326. this.buttons = this.element.find( this.options.items )
  327. .filter( ":ui-button" )
  328. .button( "refresh" )
  329. .end()
  330. .not( ":ui-button" )
  331. .button()
  332. .end()
  333. .map(function() {
  334. return $( this ).button( "widget" )[ 0 ];
  335. })
  336. .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
  337. .filter( ":first" )
  338. .addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
  339. .end()
  340. .filter( ":last" )
  341. .addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
  342. .end()
  343. .end();
  344. },
  345. _destroy: function() {
  346. this.element.removeClass( "ui-buttonset" );
  347. this.buttons
  348. .map(function() {
  349. return $( this ).button( "widget" )[ 0 ];
  350. })
  351. .removeClass( "ui-corner-left ui-corner-right" )
  352. .end()
  353. .button( "destroy" );
  354. }
  355. });
  356. }( jQuery ) );