[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('dd-ddm-drop', function (Y, NAME) {
   9  
  10  
  11      /**
  12       * Extends the dd-ddm Class to add support for the placement of Drop Target
  13       * shims inside the viewport shim. It also handles all Drop Target related events and interactions.
  14       * @module dd
  15       * @submodule dd-ddm-drop
  16       * @for DDM
  17       * @namespace DD
  18       */
  19  
  20      //TODO CSS class name for the bestMatch..
  21      Y.mix(Y.DD.DDM, {
  22          /**
  23          * This flag turns off the use of the mouseover/mouseout shim. It should not be used unless you know what you are doing.
  24          * @private
  25          * @property _noShim
  26          * @type {Boolean}
  27          */
  28          _noShim: false,
  29          /**
  30          * Placeholder for all active shims on the page
  31          * @private
  32          * @property _activeShims
  33          * @type {Array}
  34          */
  35          _activeShims: [],
  36          /**
  37          * This method checks the _activeShims Object to see if there is a shim active.
  38          * @private
  39          * @method _hasActiveShim
  40          * @return {Boolean}
  41          */
  42          _hasActiveShim: function() {
  43              if (this._noShim) {
  44                  return true;
  45              }
  46              return this._activeShims.length;
  47          },
  48          /**
  49          * Adds a Drop Target to the list of active shims
  50          * @private
  51          * @method _addActiveShim
  52          * @param {Object} d The Drop instance to add to the list.
  53          */
  54          _addActiveShim: function(d) {
  55              this._activeShims.push(d);
  56          },
  57          /**
  58          * Removes a Drop Target to the list of active shims
  59          * @private
  60          * @method _removeActiveShim
  61          * @param {Object} d The Drop instance to remove from the list.
  62          */
  63          _removeActiveShim: function(d) {
  64              var s = [];
  65              Y.Array.each(this._activeShims, function(v) {
  66                  if (v._yuid !== d._yuid) {
  67                      s.push(v);
  68                  }
  69  
  70              });
  71              this._activeShims = s;
  72          },
  73          /**
  74          * This method will sync the position of the shims on the Drop Targets that are currently active.
  75          * @method syncActiveShims
  76          * @param {Boolean} force Resize/sync all Targets.
  77          */
  78          syncActiveShims: function(force) {
  79              Y.later(0, this, function(force) {
  80                  var drops = ((force) ? this.targets : this._lookup());
  81                  Y.Array.each(drops, function(v) {
  82                      v.sizeShim.call(v);
  83                  }, this);
  84              }, force);
  85          },
  86          /**
  87          * The mode that the drag operations will run in 0 for Point, 1 for Intersect, 2 for Strict
  88          * @private
  89          * @property mode
  90          * @type Number
  91          */
  92          mode: 0,
  93          /**
  94          * In point mode, a Drop is targeted by the cursor being over the Target
  95          * @private
  96          * @property POINT
  97          * @type Number
  98          */
  99          POINT: 0,
 100          /**
 101          * In intersect mode, a Drop is targeted by "part" of the drag node being over the Target
 102          * @private
 103          * @property INTERSECT
 104          * @type Number
 105          */
 106          INTERSECT: 1,
 107          /**
 108          * In strict mode, a Drop is targeted by the "entire" drag node being over the Target
 109          * @private
 110          * @property STRICT
 111          * @type Number
 112          */
 113          STRICT: 2,
 114          /**
 115          * Should we only check targets that are in the viewport on drags (for performance), default: true
 116          * @property useHash
 117          * @type {Boolean}
 118          */
 119          useHash: true,
 120          /**
 121          * A reference to the active Drop Target
 122          * @property activeDrop
 123          * @type {Object}
 124          */
 125          activeDrop: null,
 126          /**
 127          * An array of the valid Drop Targets for this interaction.
 128          * @property validDrops
 129          * @type {Array}
 130          */
 131          //TODO Change array/object literals to be in sync..
 132          validDrops: [],
 133          /**
 134          * An object literal of Other Drop Targets that we encountered during this interaction (in the case of overlapping Drop Targets)
 135          * @property otherDrops
 136          * @type {Object}
 137          */
 138          otherDrops: {},
 139          /**
 140          * All of the Targets
 141          * @property targets
 142          * @type {Array}
 143          */
 144          targets: [],
 145          /**
 146          * Add a Drop Target to the list of Valid Targets. This list get's regenerated on each new drag operation.
 147          * @private
 148          * @method _addValid
 149          * @param {Object} drop
 150          * @chainable
 151          */
 152          _addValid: function(drop) {
 153              this.validDrops.push(drop);
 154              return this;
 155          },
 156          /**
 157          * Removes a Drop Target from the list of Valid Targets. This list get's regenerated on each new drag operation.
 158          * @private
 159          * @method _removeValid
 160          * @param {Object} drop
 161          * @chainable
 162          */
 163          _removeValid: function(drop) {
 164              var drops = [];
 165              Y.Array.each(this.validDrops, function(v) {
 166                  if (v !== drop) {
 167                      drops.push(v);
 168                  }
 169              });
 170  
 171              this.validDrops = drops;
 172              return this;
 173          },
 174          /**
 175          * Check to see if the Drag element is over the target, method varies on current mode
 176          * @method isOverTarget
 177          * @param {Object} drop The drop to check against
 178          * @return {Boolean}
 179          */
 180          isOverTarget: function(drop) {
 181              if (this.activeDrag && drop) {
 182                  var xy = this.activeDrag.mouseXY, r, dMode = this.activeDrag.get('dragMode'),
 183                      aRegion, node = drop.shim;
 184                  if (xy && this.activeDrag) {
 185                      aRegion = this.activeDrag.region;
 186                      if (dMode === this.STRICT) {
 187                          return this.activeDrag.get('dragNode').inRegion(drop.region, true, aRegion);
 188                      }
 189                      if (drop && drop.shim) {
 190                          if ((dMode === this.INTERSECT) && this._noShim) {
 191                              r = aRegion || this.activeDrag.get('node');
 192                              return drop.get('node').intersect(r, drop.region).inRegion;
 193                          }
 194  
 195                          if (this._noShim) {
 196                              node = drop.get('node');
 197                          }
 198                          return node.intersect({
 199                              top: xy[1],
 200                              bottom: xy[1],
 201                              left: xy[0],
 202                              right: xy[0]
 203                          }, drop.region).inRegion;
 204                      }
 205                  }
 206              }
 207              return false;
 208          },
 209          /**
 210          * Clears the cache data used for this interaction.
 211          * @method clearCache
 212          */
 213          clearCache: function() {
 214              this.validDrops = [];
 215              this.otherDrops = {};
 216              this._activeShims = [];
 217          },
 218          /**
 219          * Clear the cache and activate the shims of all the targets
 220          * @private
 221          * @method _activateTargets
 222          */
 223          _activateTargets: function() {
 224              this._noShim = true;
 225              this.clearCache();
 226              Y.Array.each(this.targets, function(v) {
 227                  v._activateShim([]);
 228                  if (v.get('noShim') === true) {
 229                      this._noShim = false;
 230                  }
 231              }, this);
 232              this._handleTargetOver();
 233  
 234          },
 235          /**
 236          * This method will gather the area for all potential targets and see which has the hightest covered area and return it.
 237          * @method getBestMatch
 238          * @param {Array} drops An Array of drops to scan for the best match.
 239          * @param {Boolean} all If present, it returns an Array. First item is best match, second is an Array of the other items in the original Array.
 240          * @return {Object or Array}
 241          */
 242          getBestMatch: function(drops, all) {
 243              var biggest = null, area = 0, out;
 244  
 245              Y.Object.each(drops, function(v) {
 246                  var inter = this.activeDrag.get('dragNode').intersect(v.get('node'));
 247                  v.region.area = inter.area;
 248  
 249                  if (inter.inRegion) {
 250                      if (inter.area > area) {
 251                          area = inter.area;
 252                          biggest = v;
 253                      }
 254                  }
 255              }, this);
 256              if (all) {
 257                  out = [];
 258                  //TODO Sort the others in numeric order by area covered..
 259                  Y.Object.each(drops, function(v) {
 260                      if (v !== biggest) {
 261                          out.push(v);
 262                      }
 263                  }, this);
 264                  return [biggest, out];
 265              }
 266              return biggest;
 267          },
 268          /**
 269          * This method fires the drop:hit, drag:drophit, drag:dropmiss methods and deactivates the shims..
 270          * @private
 271          * @method _deactivateTargets
 272          */
 273          _deactivateTargets: function() {
 274              var other = [], tmp,
 275                  activeDrag = this.activeDrag,
 276                  activeDrop = this.activeDrop;
 277  
 278              //TODO why is this check so hard??
 279              if (activeDrag && activeDrop && this.otherDrops[activeDrop]) {
 280                  if (!activeDrag.get('dragMode')) {
 281                      //TODO otherDrops -- private..
 282                      other = this.otherDrops;
 283                      delete other[activeDrop];
 284                  } else {
 285                      tmp = this.getBestMatch(this.otherDrops, true);
 286                      activeDrop = tmp[0];
 287                      other = tmp[1];
 288                  }
 289                  activeDrag.get('node').removeClass(this.CSS_PREFIX + '-drag-over');
 290                  if (activeDrop) {
 291                      activeDrop.fire('drop:hit', { drag: activeDrag, drop: activeDrop, others: other });
 292                      activeDrag.fire('drag:drophit', { drag: activeDrag,  drop: activeDrop, others: other });
 293                  }
 294              } else if (activeDrag && activeDrag.get('dragging')) {
 295                  activeDrag.get('node').removeClass(this.CSS_PREFIX + '-drag-over');
 296                  activeDrag.fire('drag:dropmiss', { pageX: activeDrag.lastXY[0], pageY: activeDrag.lastXY[1] });
 297              }
 298  
 299              this.activeDrop = null;
 300  
 301              Y.Array.each(this.targets, function(v) {
 302                  v._deactivateShim([]);
 303              }, this);
 304          },
 305          /**
 306          * This method is called when the move method is called on the Drag Object.
 307          * @private
 308          * @method _dropMove
 309          */
 310          _dropMove: function() {
 311              if (this._hasActiveShim()) {
 312                  this._handleTargetOver();
 313              } else {
 314                  Y.Object.each(this.otherDrops, function(v) {
 315                      v._handleOut.apply(v, []);
 316                  });
 317              }
 318          },
 319          /**
 320          * Filters the list of Drops down to those in the viewport.
 321          * @private
 322          * @method _lookup
 323          * @return {Array} The valid Drop Targets that are in the viewport.
 324          */
 325          _lookup: function() {
 326              if (!this.useHash || this._noShim) {
 327                  return this.validDrops;
 328              }
 329              var drops = [];
 330              //Only scan drop shims that are in the Viewport
 331              Y.Array.each(this.validDrops, function(v) {
 332                  if (v.shim && v.shim.inViewportRegion(false, v.region)) {
 333                      drops.push(v);
 334                  }
 335              });
 336              return drops;
 337  
 338          },
 339          /**
 340          * This method execs _handleTargetOver on all valid Drop Targets
 341          * @private
 342          * @method _handleTargetOver
 343          */
 344          _handleTargetOver: function() {
 345              var drops = this._lookup();
 346              Y.Array.each(drops, function(v) {
 347                  v._handleTargetOver.call(v);
 348              }, this);
 349          },
 350          /**
 351          * Add the passed in Target to the targets collection
 352          * @private
 353          * @method _regTarget
 354          * @param {Object} t The Target to add to the targets collection
 355          */
 356          _regTarget: function(t) {
 357              this.targets.push(t);
 358          },
 359          /**
 360          * Remove the passed in Target from the targets collection
 361          * @private
 362          * @method _unregTarget
 363          * @param {Object} drop The Target to remove from the targets collection
 364          */
 365          _unregTarget: function(drop) {
 366              var targets = [], vdrops;
 367              Y.Array.each(this.targets, function(v) {
 368                  if (v !== drop) {
 369                      targets.push(v);
 370                  }
 371              }, this);
 372              this.targets = targets;
 373  
 374              vdrops = [];
 375              Y.Array.each(this.validDrops, function(v) {
 376                  if (v !== drop) {
 377                      vdrops.push(v);
 378                  }
 379              });
 380  
 381              this.validDrops = vdrops;
 382          },
 383          /**
 384          * Get a valid Drop instance back from a Node or a selector string, false otherwise
 385          * @method getDrop
 386          * @param {String/Object} node The Node instance or Selector string to check for a valid Drop Object
 387          * @return {Object}
 388          */
 389          getDrop: function(node) {
 390              var drop = false,
 391                  n = Y.one(node);
 392              if (n instanceof Y.Node) {
 393                  Y.Array.each(this.targets, function(v) {
 394                      if (n.compareTo(v.get('node'))) {
 395                          drop = v;
 396                      }
 397                  });
 398              }
 399              return drop;
 400          }
 401      }, true);
 402  
 403  
 404  
 405  
 406  }, '3.17.2', {"requires": ["dd-ddm"]});