No Description

button.js 9.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. /*!
  2. * jQuery UI Button 1.12.1
  3. * http://jqueryui.com
  4. *
  5. * Copyright jQuery Foundation and other contributors
  6. * Released under the MIT license.
  7. * http://jquery.org/license
  8. */
  9. //>>label: Button
  10. //>>group: Widgets
  11. //>>description: Enhances a form with themeable buttons.
  12. //>>docs: http://api.jqueryui.com/button/
  13. //>>demos: http://jqueryui.com/button/
  14. //>>css.structure: ../../themes/base/core.css
  15. //>>css.structure: ../../themes/base/button.css
  16. //>>css.theme: ../../themes/base/theme.css
  17. ( function( factory ) {
  18. if ( typeof define === "function" && define.amd ) {
  19. // AMD. Register as an anonymous module.
  20. define( [
  21. "jquery",
  22. // These are only for backcompat
  23. // TODO: Remove after 1.12
  24. "./controlgroup",
  25. "./checkboxradio",
  26. "./core"
  27. ], factory );
  28. } else {
  29. // Browser globals
  30. factory( jQuery );
  31. }
  32. }( function( $ ) {
  33. $.widget( "ui.button", {
  34. version: "1.12.1",
  35. defaultElement: "<button>",
  36. options: {
  37. classes: {
  38. "ui-button": "ui-corner-all"
  39. },
  40. disabled: null,
  41. icon: null,
  42. iconPosition: "beginning",
  43. label: null,
  44. showLabel: true
  45. },
  46. _getCreateOptions: function() {
  47. var disabled,
  48. // This is to support cases like in jQuery Mobile where the base widget does have
  49. // an implementation of _getCreateOptions
  50. options = this._super() || {};
  51. this.isInput = this.element.is( "input" );
  52. disabled = this.element[ 0 ].disabled;
  53. if ( disabled != null ) {
  54. options.disabled = disabled;
  55. }
  56. this.originalLabel = this.isInput ? this.element.val() : this.element.html();
  57. if ( this.originalLabel ) {
  58. options.label = this.originalLabel;
  59. }
  60. return options;
  61. },
  62. _create: function() {
  63. if ( !this.option.showLabel & !this.options.icon ) {
  64. this.options.showLabel = true;
  65. }
  66. // We have to check the option again here even though we did in _getCreateOptions,
  67. // because null may have been passed on init which would override what was set in
  68. // _getCreateOptions
  69. if ( this.options.disabled == null ) {
  70. this.options.disabled = this.element[ 0 ].disabled || false;
  71. }
  72. this.hasTitle = !!this.element.attr( "title" );
  73. // Check to see if the label needs to be set or if its already correct
  74. if ( this.options.label && this.options.label !== this.originalLabel ) {
  75. if ( this.isInput ) {
  76. this.element.val( this.options.label );
  77. } else {
  78. this.element.html( this.options.label );
  79. }
  80. }
  81. this._addClass( "ui-button", "ui-widget" );
  82. this._setOption( "disabled", this.options.disabled );
  83. this._enhance();
  84. if ( this.element.is( "a" ) ) {
  85. this._on( {
  86. "keyup": function( event ) {
  87. if ( event.keyCode === $.ui.keyCode.SPACE ) {
  88. event.preventDefault();
  89. // Support: PhantomJS <= 1.9, IE 8 Only
  90. // If a native click is available use it so we actually cause navigation
  91. // otherwise just trigger a click event
  92. if ( this.element[ 0 ].click ) {
  93. this.element[ 0 ].click();
  94. } else {
  95. this.element.trigger( "click" );
  96. }
  97. }
  98. }
  99. } );
  100. }
  101. },
  102. _enhance: function() {
  103. if ( !this.element.is( "button" ) ) {
  104. this.element.attr( "role", "button" );
  105. }
  106. if ( this.options.icon ) {
  107. this._updateIcon( "icon", this.options.icon );
  108. this._updateTooltip();
  109. }
  110. },
  111. _updateTooltip: function() {
  112. this.title = this.element.attr( "title" );
  113. if ( !this.options.showLabel && !this.title ) {
  114. this.element.attr( "title", this.options.label );
  115. }
  116. },
  117. _updateIcon: function( option, value ) {
  118. var icon = option !== "iconPosition",
  119. position = icon ? this.options.iconPosition : value,
  120. displayBlock = position === "top" || position === "bottom";
  121. // Create icon
  122. if ( !this.icon ) {
  123. this.icon = $( "<span>" );
  124. this._addClass( this.icon, "ui-button-icon", "ui-icon" );
  125. if ( !this.options.showLabel ) {
  126. this._addClass( "ui-button-icon-only" );
  127. }
  128. } else if ( icon ) {
  129. // If we are updating the icon remove the old icon class
  130. this._removeClass( this.icon, null, this.options.icon );
  131. }
  132. // If we are updating the icon add the new icon class
  133. if ( icon ) {
  134. this._addClass( this.icon, null, value );
  135. }
  136. this._attachIcon( position );
  137. // If the icon is on top or bottom we need to add the ui-widget-icon-block class and remove
  138. // the iconSpace if there is one.
  139. if ( displayBlock ) {
  140. this._addClass( this.icon, null, "ui-widget-icon-block" );
  141. if ( this.iconSpace ) {
  142. this.iconSpace.remove();
  143. }
  144. } else {
  145. // Position is beginning or end so remove the ui-widget-icon-block class and add the
  146. // space if it does not exist
  147. if ( !this.iconSpace ) {
  148. this.iconSpace = $( "<span> </span>" );
  149. this._addClass( this.iconSpace, "ui-button-icon-space" );
  150. }
  151. this._removeClass( this.icon, null, "ui-wiget-icon-block" );
  152. this._attachIconSpace( position );
  153. }
  154. },
  155. _destroy: function() {
  156. this.element.removeAttr( "role" );
  157. if ( this.icon ) {
  158. this.icon.remove();
  159. }
  160. if ( this.iconSpace ) {
  161. this.iconSpace.remove();
  162. }
  163. if ( !this.hasTitle ) {
  164. this.element.removeAttr( "title" );
  165. }
  166. },
  167. _attachIconSpace: function( iconPosition ) {
  168. this.icon[ /^(?:end|bottom)/.test( iconPosition ) ? "before" : "after" ]( this.iconSpace );
  169. },
  170. _attachIcon: function( iconPosition ) {
  171. this.element[ /^(?:end|bottom)/.test( iconPosition ) ? "append" : "prepend" ]( this.icon );
  172. },
  173. _setOptions: function( options ) {
  174. var newShowLabel = options.showLabel === undefined ?
  175. this.options.showLabel :
  176. options.showLabel,
  177. newIcon = options.icon === undefined ? this.options.icon : options.icon;
  178. if ( !newShowLabel && !newIcon ) {
  179. options.showLabel = true;
  180. }
  181. this._super( options );
  182. },
  183. _setOption: function( key, value ) {
  184. if ( key === "icon" ) {
  185. if ( value ) {
  186. this._updateIcon( key, value );
  187. } else if ( this.icon ) {
  188. this.icon.remove();
  189. if ( this.iconSpace ) {
  190. this.iconSpace.remove();
  191. }
  192. }
  193. }
  194. if ( key === "iconPosition" ) {
  195. this._updateIcon( key, value );
  196. }
  197. // Make sure we can't end up with a button that has neither text nor icon
  198. if ( key === "showLabel" ) {
  199. this._toggleClass( "ui-button-icon-only", null, !value );
  200. this._updateTooltip();
  201. }
  202. if ( key === "label" ) {
  203. if ( this.isInput ) {
  204. this.element.val( value );
  205. } else {
  206. // If there is an icon, append it, else nothing then append the value
  207. // this avoids removal of the icon when setting label text
  208. this.element.html( value );
  209. if ( this.icon ) {
  210. this._attachIcon( this.options.iconPosition );
  211. this._attachIconSpace( this.options.iconPosition );
  212. }
  213. }
  214. }
  215. this._super( key, value );
  216. if ( key === "disabled" ) {
  217. this._toggleClass( null, "ui-state-disabled", value );
  218. this.element[ 0 ].disabled = value;
  219. if ( value ) {
  220. this.element.blur();
  221. }
  222. }
  223. },
  224. refresh: function() {
  225. // Make sure to only check disabled if its an element that supports this otherwise
  226. // check for the disabled class to determine state
  227. var isDisabled = this.element.is( "input, button" ) ?
  228. this.element[ 0 ].disabled : this.element.hasClass( "ui-button-disabled" );
  229. if ( isDisabled !== this.options.disabled ) {
  230. this._setOptions( { disabled: isDisabled } );
  231. }
  232. this._updateTooltip();
  233. }
  234. } );
  235. // DEPRECATED
  236. if ( $.uiBackCompat !== false ) {
  237. // Text and Icons options
  238. $.widget( "ui.button", $.ui.button, {
  239. options: {
  240. text: true,
  241. icons: {
  242. primary: null,
  243. secondary: null
  244. }
  245. },
  246. _create: function() {
  247. if ( this.options.showLabel && !this.options.text ) {
  248. this.options.showLabel = this.options.text;
  249. }
  250. if ( !this.options.showLabel && this.options.text ) {
  251. this.options.text = this.options.showLabel;
  252. }
  253. if ( !this.options.icon && ( this.options.icons.primary ||
  254. this.options.icons.secondary ) ) {
  255. if ( this.options.icons.primary ) {
  256. this.options.icon = this.options.icons.primary;
  257. } else {
  258. this.options.icon = this.options.icons.secondary;
  259. this.options.iconPosition = "end";
  260. }
  261. } else if ( this.options.icon ) {
  262. this.options.icons.primary = this.options.icon;
  263. }
  264. this._super();
  265. },
  266. _setOption: function( key, value ) {
  267. if ( key === "text" ) {
  268. this._super( "showLabel", value );
  269. return;
  270. }
  271. if ( key === "showLabel" ) {
  272. this.options.text = value;
  273. }
  274. if ( key === "icon" ) {
  275. this.options.icons.primary = value;
  276. }
  277. if ( key === "icons" ) {
  278. if ( value.primary ) {
  279. this._super( "icon", value.primary );
  280. this._super( "iconPosition", "beginning" );
  281. } else if ( value.secondary ) {
  282. this._super( "icon", value.secondary );
  283. this._super( "iconPosition", "end" );
  284. }
  285. }
  286. this._superApply( arguments );
  287. }
  288. } );
  289. $.fn.button = ( function( orig ) {
  290. return function() {
  291. if ( !this.length || ( this.length && this[ 0 ].tagName !== "INPUT" ) ||
  292. ( this.length && this[ 0 ].tagName === "INPUT" && (
  293. this.attr( "type" ) !== "checkbox" && this.attr( "type" ) !== "radio"
  294. ) ) ) {
  295. return orig.apply( this, arguments );
  296. }
  297. if ( !$.ui.checkboxradio ) {
  298. $.error( "Checkboxradio widget missing" );
  299. }
  300. if ( arguments.length === 0 ) {
  301. return this.checkboxradio( {
  302. "icon": false
  303. } );
  304. }
  305. return this.checkboxradio.apply( this, arguments );
  306. };
  307. } )( $.fn.button );
  308. $.fn.buttonset = function() {
  309. if ( !$.ui.controlgroup ) {
  310. $.error( "Controlgroup widget missing" );
  311. }
  312. if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" && arguments[ 2 ] ) {
  313. return this.controlgroup.apply( this,
  314. [ arguments[ 0 ], "items.button", arguments[ 2 ] ] );
  315. }
  316. if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" ) {
  317. return this.controlgroup.apply( this, [ arguments[ 0 ], "items.button" ] );
  318. }
  319. if ( typeof arguments[ 0 ] === "object" && arguments[ 0 ].items ) {
  320. arguments[ 0 ].items = {
  321. button: arguments[ 0 ].items
  322. };
  323. }
  324. return this.controlgroup.apply( this, arguments );
  325. };
  326. }
  327. return $.ui.button;
  328. } ) );