resources/jquery.ui/jquery.ui.button.js

   1 /*
   2  * jQuery UI Button 1.8.11
   3  *
   4  * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
   5  * Dual licensed under the MIT or GPL Version 2 licenses.
   6  * http://jquery.org/license
   7  *
   8  * http://docs.jquery.com/UI/Button
   9  *
  10  * Depends:
  11  *      jquery.ui.core.js
  12  *      jquery.ui.widget.js
  13  */
  14 (function( $, undefined ) {
  15
  16 var lastActive,
  17         baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
  18         stateClasses = "ui-state-hover ui-state-active ",
  19         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",
  20         formResetHandler = function( event ) {
  21                 $( ":ui-button", event.target.form ).each(function() {
  22                         var inst = $( this ).data( "button" );
  23                         setTimeout(function() {
  24                                 inst.refresh();
  25                         }, 1 );
  26                 });
  27         },
  28         radioGroup = function( radio ) {
  29                 var name = radio.name,
  30                         form = radio.form,
  31                         radios = $( [] );
  32                 if ( name ) {
  33                         if ( form ) {
  34                                 radios = $( form ).find( "[name='" + name + "']" );
  35                         } else {
  36                                 radios = $( "[name='" + name + "']", radio.ownerDocument )
  37                                         .filter(function() {
  38                                                 return !this.form;
  39                                         });
  40                         }
  41                 }
  42                 return radios;
  43         };
  44
  45 $.widget( "ui.button", {
  46         options: {
  47                 disabled: null,
  48                 text: true,
  49                 label: null,
  50                 icons: {
  51                         primary: null,
  52                         secondary: null
  53                 }
  54         },
  55         _create: function() {
  56                 this.element.closest( "form" )
  57                         .unbind( "reset.button" )
  58                         .bind( "reset.button", formResetHandler );
  59
  60                 if ( typeof this.options.disabled !== "boolean" ) {
  61                         this.options.disabled = this.element.attr( "disabled" );
  62                 }
  63
  64                 this._determineButtonType();
  65                 this.hasTitle = !!this.buttonElement.attr( "title" );
  66
  67                 var self = this,
  68                         options = this.options,
  69                         toggleButton = this.type === "checkbox" || this.type === "radio",
  70                         hoverClass = "ui-state-hover" + ( !toggleButton ? " ui-state-active" : "" ),
  71                         focusClass = "ui-state-focus";
  72
  73                 if ( options.label === null ) {
  74                         options.label = this.buttonElement.html();
  75                 }
  76
  77                 if ( this.element.is( ":disabled" ) ) {
  78                         options.disabled = true;
  79                 }
  80
  81                 this.buttonElement
  82                         .addClass( baseClasses )
  83                         .attr( "role", "button" )
  84                         .bind( "mouseenter.button", function() {
  85                                 if ( options.disabled ) {
  86                                         return;
  87                                 }
  88                                 $( this ).addClass( "ui-state-hover" );
  89                                 if ( this === lastActive ) {
  90                                         $( this ).addClass( "ui-state-active" );
  91                                 }
  92                         })
  93                         .bind( "mouseleave.button", function() {
  94                                 if ( options.disabled ) {
  95                                         return;
  96                                 }
  97                                 $( this ).removeClass( hoverClass );
  98                         })
  99                         .bind( "focus.button", function() {
 100                                 // no need to check disabled, focus won't be triggered anyway
 101                                 $( this ).addClass( focusClass );
 102                         })
 103                         .bind( "blur.button", function() {
 104                                 $( this ).removeClass( focusClass );
 105                         });
 106
 107                 if ( toggleButton ) {
 108                         this.element.bind( "change.button", function() {
 109                                 self.refresh();
 110                         });
 111                 }
 112
 113                 if ( this.type === "checkbox" ) {
 114                         this.buttonElement.bind( "click.button", function() {
 115                                 if ( options.disabled ) {
 116                                         return false;
 117                                 }
 118                                 $( this ).toggleClass( "ui-state-active" );
 119                                 self.buttonElement.attr( "aria-pressed", self.element[0].checked );
 120                         });
 121                 } else if ( this.type === "radio" ) {
 122                         this.buttonElement.bind( "click.button", function() {
 123                                 if ( options.disabled ) {
 124                                         return false;
 125                                 }
 126                                 $( this ).addClass( "ui-state-active" );
 127                                 self.buttonElement.attr( "aria-pressed", true );
 128
 129                                 var radio = self.element[ 0 ];
 130                                 radioGroup( radio )
 131                                         .not( radio )
 132                                         .map(function() {
 133                                                 return $( this ).button( "widget" )[ 0 ];
 134                                         })
 135                                         .removeClass( "ui-state-active" )
 136                                         .attr( "aria-pressed", false );
 137                         });
 138                 } else {
 139                         this.buttonElement
 140                                 .bind( "mousedown.button", function() {
 141                                         if ( options.disabled ) {
 142                                                 return false;
 143                                         }
 144                                         $( this ).addClass( "ui-state-active" );
 145                                         lastActive = this;
 146                                         $( document ).one( "mouseup", function() {
 147                                                 lastActive = null;
 148                                         });
 149                                 })
 150                                 .bind( "mouseup.button", function() {
 151                                         if ( options.disabled ) {
 152                                                 return false;
 153                                         }
 154                                         $( this ).removeClass( "ui-state-active" );
 155                                 })
 156                                 .bind( "keydown.button", function(event) {
 157                                         if ( options.disabled ) {
 158                                                 return false;
 159                                         }
 160                                         if ( event.keyCode == $.ui.keyCode.SPACE || event.keyCode == $.ui.keyCode.ENTER ) {
 161                                                 $( this ).addClass( "ui-state-active" );
 162                                         }
 163                                 })
 164                                 .bind( "keyup.button", function() {
 165                                         $( this ).removeClass( "ui-state-active" );
 166                                 });
 167
 168                         if ( this.buttonElement.is("a") ) {
 169                                 this.buttonElement.keyup(function(event) {
 170                                         if ( event.keyCode === $.ui.keyCode.SPACE ) {
 171                                                 // TODO pass through original event correctly (just as 2nd argument doesn't work)
 172                                                 $( this ).click();
 173                                         }
 174                                 });
 175                         }
 176                 }
 177
 178                 // TODO: pull out $.Widget's handling for the disabled option into
 179                 // $.Widget.prototype._setOptionDisabled so it's easy to proxy and can
 180                 // be overridden by individual plugins
 181                 this._setOption( "disabled", options.disabled );
 182         },
 183
 184         _determineButtonType: function() {
 185
 186                 if ( this.element.is(":checkbox") ) {
 187                         this.type = "checkbox";
 188                 } else {
 189                         if ( this.element.is(":radio") ) {
 190                                 this.type = "radio";
 191                         } else {
 192                                 if ( this.element.is("input") ) {
 193                                         this.type = "input";
 194                                 } else {
 195                                         this.type = "button";
 196                                 }
 197                         }
 198                 }
 199
 200                 if ( this.type === "checkbox" || this.type === "radio" ) {
 201                         // we don't search against the document in case the element
 202                         // is disconnected from the DOM
 203                         var ancestor = this.element.parents().filter(":last"),
 204                                 labelSelector = "label[for=" + this.element.attr("id") + "]";
 205                         this.buttonElement = ancestor.find( labelSelector );
 206                         if ( !this.buttonElement.length ) {
 207                                 ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
 208                                 this.buttonElement = ancestor.filter( labelSelector );
 209                                 if ( !this.buttonElement.length ) {
 210                                         this.buttonElement = ancestor.find( labelSelector );
 211                                 }
 212                         }
 213                         this.element.addClass( "ui-helper-hidden-accessible" );
 214
 215                         var checked = this.element.is( ":checked" );
 216                         if ( checked ) {
 217                                 this.buttonElement.addClass( "ui-state-active" );
 218                         }
 219                         this.buttonElement.attr( "aria-pressed", checked );
 220                 } else {
 221                         this.buttonElement = this.element;
 222                 }
 223         },
 224
 225         widget: function() {
 226                 return this.buttonElement;
 227         },
 228
 229         destroy: function() {
 230                 this.element
 231                         .removeClass( "ui-helper-hidden-accessible" );
 232                 this.buttonElement
 233                         .removeClass( baseClasses + " " + stateClasses + " " + typeClasses )
 234                         .removeAttr( "role" )
 235                         .removeAttr( "aria-pressed" )
 236                         .html( this.buttonElement.find(".ui-button-text").html() );
 237
 238                 if ( !this.hasTitle ) {
 239                         this.buttonElement.removeAttr( "title" );
 240                 }
 241
 242                 $.Widget.prototype.destroy.call( this );
 243         },
 244
 245         _setOption: function( key, value ) {
 246                 $.Widget.prototype._setOption.apply( this, arguments );
 247                 if ( key === "disabled" ) {
 248                         if ( value ) {
 249                                 this.element.attr( "disabled", true );
 250                         } else {
 251                                 this.element.removeAttr( "disabled" );
 252                         }
 253                 }
 254                 this._resetButton();
 255         },
 256
 257         refresh: function() {
 258                 var isDisabled = this.element.is( ":disabled" );
 259                 if ( isDisabled !== this.options.disabled ) {
 260                         this._setOption( "disabled", isDisabled );
 261                 }
 262                 if ( this.type === "radio" ) {
 263                         radioGroup( this.element[0] ).each(function() {
 264                                 if ( $( this ).is( ":checked" ) ) {
 265                                         $( this ).button( "widget" )
 266                                                 .addClass( "ui-state-active" )
 267                                                 .attr( "aria-pressed", true );
 268                                 } else {
 269                                         $( this ).button( "widget" )
 270                                                 .removeClass( "ui-state-active" )
 271                                                 .attr( "aria-pressed", false );
 272                                 }
 273                         });
 274                 } else if ( this.type === "checkbox" ) {
 275                         if ( this.element.is( ":checked" ) ) {
 276                                 this.buttonElement
 277                                         .addClass( "ui-state-active" )
 278                                         .attr( "aria-pressed", true );
 279                         } else {
 280                                 this.buttonElement
 281                                         .removeClass( "ui-state-active" )
 282                                         .attr( "aria-pressed", false );
 283                         }
 284                 }
 285         },
 286
 287         _resetButton: function() {
 288                 if ( this.type === "input" ) {
 289                         if ( this.options.label ) {
 290                                 this.element.val( this.options.label );
 291                         }
 292                         return;
 293                 }
 294                 var buttonElement = this.buttonElement.removeClass( typeClasses ),
 295                         buttonText = $( "<span></span>" )
 296                                 .addClass( "ui-button-text" )
 297                                 .html( this.options.label )
 298                                 .appendTo( buttonElement.empty() )
 299                                 .text(),
 300                         icons = this.options.icons,
 301                         multipleIcons = icons.primary && icons.secondary,
 302                         buttonClasses = [];
 303
 304                 if ( icons.primary || icons.secondary ) {
 305                         if ( this.options.text ) {
 306                                 buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
 307                         }
 308
 309                         if ( icons.primary ) {
 310                                 buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
 311                         }
 312
 313                         if ( icons.secondary ) {
 314                                 buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
 315                         }
 316
 317                         if ( !this.options.text ) {
 318                                 buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
 319
 320                                 if ( !this.hasTitle ) {
 321                                         buttonElement.attr( "title", buttonText );
 322                                 }
 323                         }
 324                 } else {
 325                         buttonClasses.push( "ui-button-text-only" );
 326                 }
 327                 buttonElement.addClass( buttonClasses.join( " " ) );
 328         }
 329 });
 330
 331 $.widget( "ui.buttonset", {
 332         options: {
 333                 items: ":button, :submit, :reset, :checkbox, :radio, a, :data(button)"
 334         },
 335
 336         _create: function() {
 337                 this.element.addClass( "ui-buttonset" );
 338         },
 339
 340         _init: function() {
 341                 this.refresh();
 342         },
 343
 344         _setOption: function( key, value ) {
 345                 if ( key === "disabled" ) {
 346                         this.buttons.button( "option", key, value );
 347                 }
 348
 349                 $.Widget.prototype._setOption.apply( this, arguments );
 350         },
 351
 352         refresh: function() {
 353                 this.buttons = this.element.find( this.options.items )
 354                         .filter( ":ui-button" )
 355                                 .button( "refresh" )
 356                         .end()
 357                         .not( ":ui-button" )
 358                                 .button()
 359                         .end()
 360                         .map(function() {
 361                                 return $( this ).button( "widget" )[ 0 ];
 362                         })
 363                                 .removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
 364                                 .filter( ":first" )
 365                                         .addClass( "ui-corner-left" )
 366                                 .end()
 367                                 .filter( ":last" )
 368                                         .addClass( "ui-corner-right" )
 369                                 .end()
 370                         .end();
 371         },
 372
 373         destroy: function() {
 374                 this.element.removeClass( "ui-buttonset" );
 375                 this.buttons
 376                         .map(function() {
 377                                 return $( this ).button( "widget" )[ 0 ];
 378                         })
 379                                 .removeClass( "ui-corner-left ui-corner-right" )
 380                         .end()
 381                         .button( "destroy" );
 382
 383                 $.Widget.prototype.destroy.call( this );
 384         }
 385 });
 386
 387 }( jQuery ) );