1
0

button.js 11 KB

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