[Summary view] [Print] [Text view]

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