[Summary view] [Print] [Text view]

   1  /*!
   2   * jQuery UI Controlgroup 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: Controlgroup
  11  //>>group: Widgets
  12  //>>description: Visually groups form control widgets
  13  //>>docs: https://api.jqueryui.com/controlgroup/
  14  //>>demos: https://jqueryui.com/controlgroup/
  15  //>>css.structure: ../../themes/base/core.css
  16  //>>css.structure: ../../themes/base/controlgroup.css
  17  //>>css.theme: ../../themes/base/theme.css
  18  
  19  ( function( factory ) {
  20      "use strict";
  21  
  22      if ( typeof define === "function" && define.amd ) {
  23  
  24          // AMD. Register as an anonymous module.
  25          define( [
  26              "jquery",
  27              "../widget"
  28          ], factory );
  29      } else {
  30  
  31          // Browser globals
  32          factory( jQuery );
  33      }
  34  } )( function( $ ) {
  35  "use strict";
  36  
  37  var controlgroupCornerRegex = /ui-corner-([a-z]){2,6}/g;
  38  
  39  return $.widget( "ui.controlgroup", {
  40      version: "1.13.3",
  41      defaultElement: "<div>",
  42      options: {
  43          direction: "horizontal",
  44          disabled: null,
  45          onlyVisible: true,
  46          items: {
  47              "button": "input[type=button], input[type=submit], input[type=reset], button, a",
  48              "controlgroupLabel": ".ui-controlgroup-label",
  49              "checkboxradio": "input[type='checkbox'], input[type='radio']",
  50              "selectmenu": "select",
  51              "spinner": ".ui-spinner-input"
  52          }
  53      },
  54  
  55      _create: function() {
  56          this._enhance();
  57      },
  58  
  59      // To support the enhanced option in jQuery Mobile, we isolate DOM manipulation
  60      _enhance: function() {
  61          this.element.attr( "role", "toolbar" );
  62          this.refresh();
  63      },
  64  
  65      _destroy: function() {
  66          this._callChildMethod( "destroy" );
  67          this.childWidgets.removeData( "ui-controlgroup-data" );
  68          this.element.removeAttr( "role" );
  69          if ( this.options.items.controlgroupLabel ) {
  70              this.element
  71                  .find( this.options.items.controlgroupLabel )
  72                  .find( ".ui-controlgroup-label-contents" )
  73                  .contents().unwrap();
  74          }
  75      },
  76  
  77      _initWidgets: function() {
  78          var that = this,
  79              childWidgets = [];
  80  
  81          // First we iterate over each of the items options
  82          $.each( this.options.items, function( widget, selector ) {
  83              var labels;
  84              var options = {};
  85  
  86              // Make sure the widget has a selector set
  87              if ( !selector ) {
  88                  return;
  89              }
  90  
  91              if ( widget === "controlgroupLabel" ) {
  92                  labels = that.element.find( selector );
  93                  labels.each( function() {
  94                      var element = $( this );
  95  
  96                      if ( element.children( ".ui-controlgroup-label-contents" ).length ) {
  97                          return;
  98                      }
  99                      element.contents()
 100                          .wrapAll( "<span class='ui-controlgroup-label-contents'></span>" );
 101                  } );
 102                  that._addClass( labels, null, "ui-widget ui-widget-content ui-state-default" );
 103                  childWidgets = childWidgets.concat( labels.get() );
 104                  return;
 105              }
 106  
 107              // Make sure the widget actually exists
 108              if ( !$.fn[ widget ] ) {
 109                  return;
 110              }
 111  
 112              // We assume everything is in the middle to start because we can't determine
 113              // first / last elements until all enhancments are done.
 114              if ( that[ "_" + widget + "Options" ] ) {
 115                  options = that[ "_" + widget + "Options" ]( "middle" );
 116              } else {
 117                  options = { classes: {} };
 118              }
 119  
 120              // Find instances of this widget inside controlgroup and init them
 121              that.element
 122                  .find( selector )
 123                  .each( function() {
 124                      var element = $( this );
 125                      var instance = element[ widget ]( "instance" );
 126  
 127                      // We need to clone the default options for this type of widget to avoid
 128                      // polluting the variable options which has a wider scope than a single widget.
 129                      var instanceOptions = $.widget.extend( {}, options );
 130  
 131                      // If the button is the child of a spinner ignore it
 132                      // TODO: Find a more generic solution
 133                      if ( widget === "button" && element.parent( ".ui-spinner" ).length ) {
 134                          return;
 135                      }
 136  
 137                      // Create the widget if it doesn't exist
 138                      if ( !instance ) {
 139                          instance = element[ widget ]()[ widget ]( "instance" );
 140                      }
 141                      if ( instance ) {
 142                          instanceOptions.classes =
 143                              that._resolveClassesValues( instanceOptions.classes, instance );
 144                      }
 145                      element[ widget ]( instanceOptions );
 146  
 147                      // Store an instance of the controlgroup to be able to reference
 148                      // from the outermost element for changing options and refresh
 149                      var widgetElement = element[ widget ]( "widget" );
 150                      $.data( widgetElement[ 0 ], "ui-controlgroup-data",
 151                          instance ? instance : element[ widget ]( "instance" ) );
 152  
 153                      childWidgets.push( widgetElement[ 0 ] );
 154                  } );
 155          } );
 156  
 157          this.childWidgets = $( $.uniqueSort( childWidgets ) );
 158          this._addClass( this.childWidgets, "ui-controlgroup-item" );
 159      },
 160  
 161      _callChildMethod: function( method ) {
 162          this.childWidgets.each( function() {
 163              var element = $( this ),
 164                  data = element.data( "ui-controlgroup-data" );
 165              if ( data && data[ method ] ) {
 166                  data[ method ]();
 167              }
 168          } );
 169      },
 170  
 171      _updateCornerClass: function( element, position ) {
 172          var remove = "ui-corner-top ui-corner-bottom ui-corner-left ui-corner-right ui-corner-all";
 173          var add = this._buildSimpleOptions( position, "label" ).classes.label;
 174  
 175          this._removeClass( element, null, remove );
 176          this._addClass( element, null, add );
 177      },
 178  
 179      _buildSimpleOptions: function( position, key ) {
 180          var direction = this.options.direction === "vertical";
 181          var result = {
 182              classes: {}
 183          };
 184          result.classes[ key ] = {
 185              "middle": "",
 186              "first": "ui-corner-" + ( direction ? "top" : "left" ),
 187              "last": "ui-corner-" + ( direction ? "bottom" : "right" ),
 188              "only": "ui-corner-all"
 189          }[ position ];
 190  
 191          return result;
 192      },
 193  
 194      _spinnerOptions: function( position ) {
 195          var options = this._buildSimpleOptions( position, "ui-spinner" );
 196  
 197          options.classes[ "ui-spinner-up" ] = "";
 198          options.classes[ "ui-spinner-down" ] = "";
 199  
 200          return options;
 201      },
 202  
 203      _buttonOptions: function( position ) {
 204          return this._buildSimpleOptions( position, "ui-button" );
 205      },
 206  
 207      _checkboxradioOptions: function( position ) {
 208          return this._buildSimpleOptions( position, "ui-checkboxradio-label" );
 209      },
 210  
 211      _selectmenuOptions: function( position ) {
 212          var direction = this.options.direction === "vertical";
 213          return {
 214              width: direction ? "auto" : false,
 215              classes: {
 216                  middle: {
 217                      "ui-selectmenu-button-open": "",
 218                      "ui-selectmenu-button-closed": ""
 219                  },
 220                  first: {
 221                      "ui-selectmenu-button-open": "ui-corner-" + ( direction ? "top" : "tl" ),
 222                      "ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "top" : "left" )
 223                  },
 224                  last: {
 225                      "ui-selectmenu-button-open": direction ? "" : "ui-corner-tr",
 226                      "ui-selectmenu-button-closed": "ui-corner-" + ( direction ? "bottom" : "right" )
 227                  },
 228                  only: {
 229                      "ui-selectmenu-button-open": "ui-corner-top",
 230                      "ui-selectmenu-button-closed": "ui-corner-all"
 231                  }
 232  
 233              }[ position ]
 234          };
 235      },
 236  
 237      _resolveClassesValues: function( classes, instance ) {
 238          var result = {};
 239          $.each( classes, function( key ) {
 240              var current = instance.options.classes[ key ] || "";
 241              current = String.prototype.trim.call( current.replace( controlgroupCornerRegex, "" ) );
 242              result[ key ] = ( current + " " + classes[ key ] ).replace( /\s+/g, " " );
 243          } );
 244          return result;
 245      },
 246  
 247      _setOption: function( key, value ) {
 248          if ( key === "direction" ) {
 249              this._removeClass( "ui-controlgroup-" + this.options.direction );
 250          }
 251  
 252          this._super( key, value );
 253          if ( key === "disabled" ) {
 254              this._callChildMethod( value ? "disable" : "enable" );
 255              return;
 256          }
 257  
 258          this.refresh();
 259      },
 260  
 261      refresh: function() {
 262          var children,
 263              that = this;
 264  
 265          this._addClass( "ui-controlgroup ui-controlgroup-" + this.options.direction );
 266  
 267          if ( this.options.direction === "horizontal" ) {
 268              this._addClass( null, "ui-helper-clearfix" );
 269          }
 270          this._initWidgets();
 271  
 272          children = this.childWidgets;
 273  
 274          // We filter here because we need to track all childWidgets not just the visible ones
 275          if ( this.options.onlyVisible ) {
 276              children = children.filter( ":visible" );
 277          }
 278  
 279          if ( children.length ) {
 280  
 281              // We do this last because we need to make sure all enhancment is done
 282              // before determining first and last
 283              $.each( [ "first", "last" ], function( index, value ) {
 284                  var instance = children[ value ]().data( "ui-controlgroup-data" );
 285  
 286                  if ( instance && that[ "_" + instance.widgetName + "Options" ] ) {
 287                      var options = that[ "_" + instance.widgetName + "Options" ](
 288                          children.length === 1 ? "only" : value
 289                      );
 290                      options.classes = that._resolveClassesValues( options.classes, instance );
 291                      instance.element[ instance.widgetName ]( options );
 292                  } else {
 293                      that._updateCornerClass( children[ value ](), value );
 294                  }
 295              } );
 296  
 297              // Finally call the refresh method on each of the child widgets.
 298              this._callChildMethod( "refresh" );
 299          }
 300      }
 301  } );
 302  } );