[Summary view] [Print] [Text view]

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