[Summary view] [Print] [Text view]

   1  /*!
   2   * jQuery UI Selectable 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: Selectable
  11  //>>group: Interactions
  12  //>>description: Allows groups of elements to be selected with the mouse.
  13  //>>docs: http://api.jqueryui.com/selectable/
  14  //>>demos: http://jqueryui.com/selectable/
  15  //>>css.structure: ../../themes/base/selectable.css
  16  
  17  ( function( factory ) {
  18      "use strict";
  19  
  20      if ( typeof define === "function" && define.amd ) {
  21  
  22          // AMD. Register as an anonymous module.
  23          define( [
  24              "jquery",
  25              "./mouse",
  26              "./core"
  27          ], factory );
  28      } else {
  29  
  30          // Browser globals
  31          factory( jQuery );
  32      }
  33  } )( function( $ ) {
  34  "use strict";
  35  
  36  return $.widget( "ui.selectable", $.ui.mouse, {
  37      version: "1.13.1",
  38      options: {
  39          appendTo: "body",
  40          autoRefresh: true,
  41          distance: 0,
  42          filter: "*",
  43          tolerance: "touch",
  44  
  45          // Callbacks
  46          selected: null,
  47          selecting: null,
  48          start: null,
  49          stop: null,
  50          unselected: null,
  51          unselecting: null
  52      },
  53      _create: function() {
  54          var that = this;
  55  
  56          this._addClass( "ui-selectable" );
  57  
  58          this.dragged = false;
  59  
  60          // Cache selectee children based on filter
  61          this.refresh = function() {
  62              that.elementPos = $( that.element[ 0 ] ).offset();
  63              that.selectees = $( that.options.filter, that.element[ 0 ] );
  64              that._addClass( that.selectees, "ui-selectee" );
  65              that.selectees.each( function() {
  66                  var $this = $( this ),
  67                      selecteeOffset = $this.offset(),
  68                      pos = {
  69                          left: selecteeOffset.left - that.elementPos.left,
  70                          top: selecteeOffset.top - that.elementPos.top
  71                      };
  72                  $.data( this, "selectable-item", {
  73                      element: this,
  74                      $element: $this,
  75                      left: pos.left,
  76                      top: pos.top,
  77                      right: pos.left + $this.outerWidth(),
  78                      bottom: pos.top + $this.outerHeight(),
  79                      startselected: false,
  80                      selected: $this.hasClass( "ui-selected" ),
  81                      selecting: $this.hasClass( "ui-selecting" ),
  82                      unselecting: $this.hasClass( "ui-unselecting" )
  83                  } );
  84              } );
  85          };
  86          this.refresh();
  87  
  88          this._mouseInit();
  89  
  90          this.helper = $( "<div>" );
  91          this._addClass( this.helper, "ui-selectable-helper" );
  92      },
  93  
  94      _destroy: function() {
  95          this.selectees.removeData( "selectable-item" );
  96          this._mouseDestroy();
  97      },
  98  
  99      _mouseStart: function( event ) {
 100          var that = this,
 101              options = this.options;
 102  
 103          this.opos = [ event.pageX, event.pageY ];
 104          this.elementPos = $( this.element[ 0 ] ).offset();
 105  
 106          if ( this.options.disabled ) {
 107              return;
 108          }
 109  
 110          this.selectees = $( options.filter, this.element[ 0 ] );
 111  
 112          this._trigger( "start", event );
 113  
 114          $( options.appendTo ).append( this.helper );
 115  
 116          // position helper (lasso)
 117          this.helper.css( {
 118              "left": event.pageX,
 119              "top": event.pageY,
 120              "width": 0,
 121              "height": 0
 122          } );
 123  
 124          if ( options.autoRefresh ) {
 125              this.refresh();
 126          }
 127  
 128          this.selectees.filter( ".ui-selected" ).each( function() {
 129              var selectee = $.data( this, "selectable-item" );
 130              selectee.startselected = true;
 131              if ( !event.metaKey && !event.ctrlKey ) {
 132                  that._removeClass( selectee.$element, "ui-selected" );
 133                  selectee.selected = false;
 134                  that._addClass( selectee.$element, "ui-unselecting" );
 135                  selectee.unselecting = true;
 136  
 137                  // selectable UNSELECTING callback
 138                  that._trigger( "unselecting", event, {
 139                      unselecting: selectee.element
 140                  } );
 141              }
 142          } );
 143  
 144          $( event.target ).parents().addBack().each( function() {
 145              var doSelect,
 146                  selectee = $.data( this, "selectable-item" );
 147              if ( selectee ) {
 148                  doSelect = ( !event.metaKey && !event.ctrlKey ) ||
 149                      !selectee.$element.hasClass( "ui-selected" );
 150                  that._removeClass( selectee.$element, doSelect ? "ui-unselecting" : "ui-selected" )
 151                      ._addClass( selectee.$element, doSelect ? "ui-selecting" : "ui-unselecting" );
 152                  selectee.unselecting = !doSelect;
 153                  selectee.selecting = doSelect;
 154                  selectee.selected = doSelect;
 155  
 156                  // selectable (UN)SELECTING callback
 157                  if ( doSelect ) {
 158                      that._trigger( "selecting", event, {
 159                          selecting: selectee.element
 160                      } );
 161                  } else {
 162                      that._trigger( "unselecting", event, {
 163                          unselecting: selectee.element
 164                      } );
 165                  }
 166                  return false;
 167              }
 168          } );
 169  
 170      },
 171  
 172      _mouseDrag: function( event ) {
 173  
 174          this.dragged = true;
 175  
 176          if ( this.options.disabled ) {
 177              return;
 178          }
 179  
 180          var tmp,
 181              that = this,
 182              options = this.options,
 183              x1 = this.opos[ 0 ],
 184              y1 = this.opos[ 1 ],
 185              x2 = event.pageX,
 186              y2 = event.pageY;
 187  
 188          if ( x1 > x2 ) {
 189              tmp = x2; x2 = x1; x1 = tmp;
 190          }
 191          if ( y1 > y2 ) {
 192              tmp = y2; y2 = y1; y1 = tmp;
 193          }
 194          this.helper.css( { left: x1, top: y1, width: x2 - x1, height: y2 - y1 } );
 195  
 196          this.selectees.each( function() {
 197              var selectee = $.data( this, "selectable-item" ),
 198                  hit = false,
 199                  offset = {};
 200  
 201              //prevent helper from being selected if appendTo: selectable
 202              if ( !selectee || selectee.element === that.element[ 0 ] ) {
 203                  return;
 204              }
 205  
 206              offset.left   = selectee.left   + that.elementPos.left;
 207              offset.right  = selectee.right  + that.elementPos.left;
 208              offset.top    = selectee.top    + that.elementPos.top;
 209              offset.bottom = selectee.bottom + that.elementPos.top;
 210  
 211              if ( options.tolerance === "touch" ) {
 212                  hit = ( !( offset.left > x2 || offset.right < x1 || offset.top > y2 ||
 213                      offset.bottom < y1 ) );
 214              } else if ( options.tolerance === "fit" ) {
 215                  hit = ( offset.left > x1 && offset.right < x2 && offset.top > y1 &&
 216                      offset.bottom < y2 );
 217              }
 218  
 219              if ( hit ) {
 220  
 221                  // SELECT
 222                  if ( selectee.selected ) {
 223                      that._removeClass( selectee.$element, "ui-selected" );
 224                      selectee.selected = false;
 225                  }
 226                  if ( selectee.unselecting ) {
 227                      that._removeClass( selectee.$element, "ui-unselecting" );
 228                      selectee.unselecting = false;
 229                  }
 230                  if ( !selectee.selecting ) {
 231                      that._addClass( selectee.$element, "ui-selecting" );
 232                      selectee.selecting = true;
 233  
 234                      // selectable SELECTING callback
 235                      that._trigger( "selecting", event, {
 236                          selecting: selectee.element
 237                      } );
 238                  }
 239              } else {
 240  
 241                  // UNSELECT
 242                  if ( selectee.selecting ) {
 243                      if ( ( event.metaKey || event.ctrlKey ) && selectee.startselected ) {
 244                          that._removeClass( selectee.$element, "ui-selecting" );
 245                          selectee.selecting = false;
 246                          that._addClass( selectee.$element, "ui-selected" );
 247                          selectee.selected = true;
 248                      } else {
 249                          that._removeClass( selectee.$element, "ui-selecting" );
 250                          selectee.selecting = false;
 251                          if ( selectee.startselected ) {
 252                              that._addClass( selectee.$element, "ui-unselecting" );
 253                              selectee.unselecting = true;
 254                          }
 255  
 256                          // selectable UNSELECTING callback
 257                          that._trigger( "unselecting", event, {
 258                              unselecting: selectee.element
 259                          } );
 260                      }
 261                  }
 262                  if ( selectee.selected ) {
 263                      if ( !event.metaKey && !event.ctrlKey && !selectee.startselected ) {
 264                          that._removeClass( selectee.$element, "ui-selected" );
 265                          selectee.selected = false;
 266  
 267                          that._addClass( selectee.$element, "ui-unselecting" );
 268                          selectee.unselecting = true;
 269  
 270                          // selectable UNSELECTING callback
 271                          that._trigger( "unselecting", event, {
 272                              unselecting: selectee.element
 273                          } );
 274                      }
 275                  }
 276              }
 277          } );
 278  
 279          return false;
 280      },
 281  
 282      _mouseStop: function( event ) {
 283          var that = this;
 284  
 285          this.dragged = false;
 286  
 287          $( ".ui-unselecting", this.element[ 0 ] ).each( function() {
 288              var selectee = $.data( this, "selectable-item" );
 289              that._removeClass( selectee.$element, "ui-unselecting" );
 290              selectee.unselecting = false;
 291              selectee.startselected = false;
 292              that._trigger( "unselected", event, {
 293                  unselected: selectee.element
 294              } );
 295          } );
 296          $( ".ui-selecting", this.element[ 0 ] ).each( function() {
 297              var selectee = $.data( this, "selectable-item" );
 298              that._removeClass( selectee.$element, "ui-selecting" )
 299                  ._addClass( selectee.$element, "ui-selected" );
 300              selectee.selecting = false;
 301              selectee.selected = true;
 302              selectee.startselected = true;
 303              that._trigger( "selected", event, {
 304                  selected: selectee.element
 305              } );
 306          } );
 307          this._trigger( "stop", event );
 308  
 309          this.helper.remove();
 310  
 311          return false;
 312      }
 313  
 314  } );
 315  
 316  } );