js/jquery/src/jquery-ui/button.js

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