jquery.ui.button.js 12 KB

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