[Summary view] [Print] [Text view]

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