[Summary view] [Print] [Text view]

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