[Summary view] [Print] [Text view]

   1  /*!
   2   * jQuery UI Checkboxradio 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: Checkboxradio
  11  //>>group: Widgets
  12  //>>description: Enhances a form with multiple themeable checkboxes or radio buttons.
  13  //>>docs: http://api.jqueryui.com/checkboxradio/
  14  //>>demos: http://jqueryui.com/checkboxradio/
  15  //>>css.structure: ../../themes/base/core.css
  16  //>>css.structure: ../../themes/base/button.css
  17  //>>css.structure: ../../themes/base/checkboxradio.css
  18  //>>css.theme: ../../themes/base/theme.css
  19  
  20  ( function( factory ) {
  21      "use strict";
  22  
  23      if ( typeof define === "function" && define.amd ) {
  24  
  25          // AMD. Register as an anonymous module.
  26          define( [
  27              "jquery",
  28              "./core"
  29          ], factory );
  30      } else {
  31  
  32          // Browser globals
  33          factory( jQuery );
  34      }
  35  } )( function( $ ) {
  36  "use strict";
  37  
  38  $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
  39      version: "1.13.1",
  40      options: {
  41          disabled: null,
  42          label: null,
  43          icon: true,
  44          classes: {
  45              "ui-checkboxradio-label": "ui-corner-all",
  46              "ui-checkboxradio-icon": "ui-corner-all"
  47          }
  48      },
  49  
  50      _getCreateOptions: function() {
  51          var disabled, labels;
  52          var that = this;
  53          var options = this._super() || {};
  54  
  55          // We read the type here, because it makes more sense to throw a element type error first,
  56          // rather then the error for lack of a label. Often if its the wrong type, it
  57          // won't have a label (e.g. calling on a div, btn, etc)
  58          this._readType();
  59  
  60          labels = this.element.labels();
  61  
  62          // If there are multiple labels, use the last one
  63          this.label = $( labels[ labels.length - 1 ] );
  64          if ( !this.label.length ) {
  65              $.error( "No label found for checkboxradio widget" );
  66          }
  67  
  68          this.originalLabel = "";
  69  
  70          // We need to get the label text but this may also need to make sure it does not contain the
  71          // input itself.
  72          this.label.contents().not( this.element[ 0 ] ).each( function() {
  73  
  74              // The label contents could be text, html, or a mix. We concat each element to get a
  75              // string representation of the label, without the input as part of it.
  76              that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML;
  77          } );
  78  
  79          // Set the label option if we found label text
  80          if ( this.originalLabel ) {
  81              options.label = this.originalLabel;
  82          }
  83  
  84          disabled = this.element[ 0 ].disabled;
  85          if ( disabled != null ) {
  86              options.disabled = disabled;
  87          }
  88          return options;
  89      },
  90  
  91      _create: function() {
  92          var checked = this.element[ 0 ].checked;
  93  
  94          this._bindFormResetHandler();
  95  
  96          if ( this.options.disabled == null ) {
  97              this.options.disabled = this.element[ 0 ].disabled;
  98          }
  99  
 100          this._setOption( "disabled", this.options.disabled );
 101          this._addClass( "ui-checkboxradio", "ui-helper-hidden-accessible" );
 102          this._addClass( this.label, "ui-checkboxradio-label", "ui-button ui-widget" );
 103  
 104          if ( this.type === "radio" ) {
 105              this._addClass( this.label, "ui-checkboxradio-radio-label" );
 106          }
 107  
 108          if ( this.options.label && this.options.label !== this.originalLabel ) {
 109              this._updateLabel();
 110          } else if ( this.originalLabel ) {
 111              this.options.label = this.originalLabel;
 112          }
 113  
 114          this._enhance();
 115  
 116          if ( checked ) {
 117              this._addClass( this.label, "ui-checkboxradio-checked", "ui-state-active" );
 118          }
 119  
 120          this._on( {
 121              change: "_toggleClasses",
 122              focus: function() {
 123                  this._addClass( this.label, null, "ui-state-focus ui-visual-focus" );
 124              },
 125              blur: function() {
 126                  this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" );
 127              }
 128          } );
 129      },
 130  
 131      _readType: function() {
 132          var nodeName = this.element[ 0 ].nodeName.toLowerCase();
 133          this.type = this.element[ 0 ].type;
 134          if ( nodeName !== "input" || !/radio|checkbox/.test( this.type ) ) {
 135              $.error( "Can't create checkboxradio on element.nodeName=" + nodeName +
 136                  " and element.type=" + this.type );
 137          }
 138      },
 139  
 140      // Support jQuery Mobile enhanced option
 141      _enhance: function() {
 142          this._updateIcon( this.element[ 0 ].checked );
 143      },
 144  
 145      widget: function() {
 146          return this.label;
 147      },
 148  
 149      _getRadioGroup: function() {
 150          var group;
 151          var name = this.element[ 0 ].name;
 152          var nameSelector = "input[name='" + $.escapeSelector( name ) + "']";
 153  
 154          if ( !name ) {
 155              return $( [] );
 156          }
 157  
 158          if ( this.form.length ) {
 159              group = $( this.form[ 0 ].elements ).filter( nameSelector );
 160          } else {
 161  
 162              // Not inside a form, check all inputs that also are not inside a form
 163              group = $( nameSelector ).filter( function() {
 164                  return $( this )._form().length === 0;
 165              } );
 166          }
 167  
 168          return group.not( this.element );
 169      },
 170  
 171      _toggleClasses: function() {
 172          var checked = this.element[ 0 ].checked;
 173          this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
 174  
 175          if ( this.options.icon && this.type === "checkbox" ) {
 176              this._toggleClass( this.icon, null, "ui-icon-check ui-state-checked", checked )
 177                  ._toggleClass( this.icon, null, "ui-icon-blank", !checked );
 178          }
 179  
 180          if ( this.type === "radio" ) {
 181              this._getRadioGroup()
 182                  .each( function() {
 183                      var instance = $( this ).checkboxradio( "instance" );
 184  
 185                      if ( instance ) {
 186                          instance._removeClass( instance.label,
 187                              "ui-checkboxradio-checked", "ui-state-active" );
 188                      }
 189                  } );
 190          }
 191      },
 192  
 193      _destroy: function() {
 194          this._unbindFormResetHandler();
 195  
 196          if ( this.icon ) {
 197              this.icon.remove();
 198              this.iconSpace.remove();
 199          }
 200      },
 201  
 202      _setOption: function( key, value ) {
 203  
 204          // We don't allow the value to be set to nothing
 205          if ( key === "label" && !value ) {
 206              return;
 207          }
 208  
 209          this._super( key, value );
 210  
 211          if ( key === "disabled" ) {
 212              this._toggleClass( this.label, null, "ui-state-disabled", value );
 213              this.element[ 0 ].disabled = value;
 214  
 215              // Don't refresh when setting disabled
 216              return;
 217          }
 218          this.refresh();
 219      },
 220  
 221      _updateIcon: function( checked ) {
 222          var toAdd = "ui-icon ui-icon-background ";
 223  
 224          if ( this.options.icon ) {
 225              if ( !this.icon ) {
 226                  this.icon = $( "<span>" );
 227                  this.iconSpace = $( "<span> </span>" );
 228                  this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" );
 229              }
 230  
 231              if ( this.type === "checkbox" ) {
 232                  toAdd += checked ? "ui-icon-check ui-state-checked" : "ui-icon-blank";
 233                  this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" );
 234              } else {
 235                  toAdd += "ui-icon-blank";
 236              }
 237              this._addClass( this.icon, "ui-checkboxradio-icon", toAdd );
 238              if ( !checked ) {
 239                  this._removeClass( this.icon, null, "ui-icon-check ui-state-checked" );
 240              }
 241              this.icon.prependTo( this.label ).after( this.iconSpace );
 242          } else if ( this.icon !== undefined ) {
 243              this.icon.remove();
 244              this.iconSpace.remove();
 245              delete this.icon;
 246          }
 247      },
 248  
 249      _updateLabel: function() {
 250  
 251          // Remove the contents of the label ( minus the icon, icon space, and input )
 252          var contents = this.label.contents().not( this.element[ 0 ] );
 253          if ( this.icon ) {
 254              contents = contents.not( this.icon[ 0 ] );
 255          }
 256          if ( this.iconSpace ) {
 257              contents = contents.not( this.iconSpace[ 0 ] );
 258          }
 259          contents.remove();
 260  
 261          this.label.append( this.options.label );
 262      },
 263  
 264      refresh: function() {
 265          var checked = this.element[ 0 ].checked,
 266              isDisabled = this.element[ 0 ].disabled;
 267  
 268          this._updateIcon( checked );
 269          this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
 270          if ( this.options.label !== null ) {
 271              this._updateLabel();
 272          }
 273  
 274          if ( isDisabled !== this.options.disabled ) {
 275              this._setOptions( { "disabled": isDisabled } );
 276          }
 277      }
 278  
 279  } ] );
 280  
 281  return $.ui.checkboxradio;
 282  
 283  } );