[Summary view] [Print] [Text view]

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