ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

button.js (9975B)


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