[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-drop', function (Y, NAME) {
   9  
  10  
  11      /**
  12       * Provides the ability to create a Drop Target.
  13       * @module dd
  14       * @submodule dd-drop
  15       */
  16      /**
  17       * Provides the ability to create a Drop Target.
  18       * @class Drop
  19       * @extends Base
  20       * @constructor
  21       * @namespace DD
  22       */
  23  
  24      var NODE = 'node',
  25          DDM = Y.DD.DDM,
  26          OFFSET_HEIGHT = 'offsetHeight',
  27          OFFSET_WIDTH = 'offsetWidth',
  28          /**
  29          * Fires when a drag element is over this target.
  30          * @event drop:over
  31          * @param {EventFacade} event An Event Facade object with the following specific property added:
  32          * <dl>
  33          * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
  34          * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
  35          * </dl>
  36          * @bubbles DDM
  37          * @type {CustomEvent}
  38          */
  39          EV_DROP_OVER = 'drop:over',
  40          /**
  41          * Fires when a drag element enters this target.
  42          * @event drop:enter
  43          * @param {EventFacade} event An Event Facade object with the following specific property added:
  44          * <dl>
  45          * <dt>drop</dt><dd>The drop object at the time of the event.</dd>
  46          * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
  47          * </dl>
  48          * @bubbles DDM
  49          * @type {CustomEvent}
  50          */
  51          EV_DROP_ENTER = 'drop:enter',
  52          /**
  53          * Fires when a drag element exits this target.
  54          * @event drop:exit
  55          * @param {EventFacade} event An Event Facade object
  56          * @bubbles DDM
  57          * @type {CustomEvent}
  58          */
  59          EV_DROP_EXIT = 'drop:exit',
  60  
  61          /**
  62          * Fires when a draggable node is dropped on this Drop Target. (Fired from dd-ddm-drop)
  63          * @event drop:hit
  64          * @param {EventFacade} event An Event Facade object with the following specific property added:
  65          * <dl>
  66          * <dt>drop</dt><dd>The best guess on what was dropped on.</dd>
  67          * <dt>drag</dt><dd>The drag object at the time of the event.</dd>
  68          * <dt>others</dt><dd>An array of all the other drop targets that was dropped on.</dd>
  69          * </dl>
  70          * @bubbles DDM
  71          * @type {CustomEvent}
  72          */
  73  
  74  
  75      Drop = function() {
  76          this._lazyAddAttrs = false;
  77          Drop.superclass.constructor.apply(this, arguments);
  78  
  79  
  80          //DD init speed up.
  81          Y.on('domready', Y.bind(function() {
  82              Y.later(100, this, this._createShim);
  83          }, this));
  84          DDM._regTarget(this);
  85  
  86          /* TODO
  87          if (Dom.getStyle(this.el, 'position') == 'fixed') {
  88              Event.on(window, 'scroll', function() {
  89                  this.activateShim();
  90              }, this, true);
  91          }
  92          */
  93      };
  94  
  95      Drop.NAME = 'drop';
  96  
  97      Drop.ATTRS = {
  98          /**
  99          * Y.Node instance to use as the element to make a Drop Target
 100          * @attribute node
 101          * @type Node
 102          */
 103          node: {
 104              setter: function(node) {
 105                  var n = Y.one(node);
 106                  if (!n) {
 107                      Y.error('DD.Drop: Invalid Node Given: ' + node);
 108                  }
 109                  return n;
 110              }
 111          },
 112          /**
 113          * Array of groups to add this drop into.
 114          * @attribute groups
 115          * @type Array
 116          */
 117          groups: {
 118              value: ['default'],
 119              getter: function() {
 120                  if (!this._groups) {
 121                      this._groups = {};
 122                      return [];
 123                  }
 124  
 125                  return Y.Object.keys(this._groups);
 126              },
 127              setter: function(g) {
 128                  this._groups = Y.Array.hash(g);
 129                  return g;
 130              }
 131          },
 132          /**
 133          * CSS style padding to make the Drop Target bigger than the node.
 134          * @attribute padding
 135          * @type String
 136          */
 137          padding: {
 138              value: '0',
 139              setter: function(p) {
 140                  return DDM.cssSizestoObject(p);
 141              }
 142          },
 143          /**
 144          * Set to lock this drop element.
 145          * @attribute lock
 146          * @type Boolean
 147          */
 148          lock: {
 149              value: false,
 150              setter: function(lock) {
 151                  if (lock) {
 152                      this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-locked');
 153                  } else {
 154                      this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-locked');
 155                  }
 156                  return lock;
 157              }
 158          },
 159          /**
 160          * Controls the default bubble parent for this Drop instance. Default: Y.DD.DDM. Set to false to disable bubbling.
 161          * Use bubbleTargets in config.
 162          * @deprecated
 163          * @attribute bubbles
 164          * @type Object
 165          */
 166          bubbles: {
 167              setter: function(t) {
 168                  Y.log('bubbles is deprecated use bubbleTargets: HOST', 'warn', 'dd');
 169                  this.addTarget(t);
 170                  return t;
 171              }
 172          },
 173          /**
 174          * Use the Drop shim. Default: true
 175          * @deprecated
 176          * @attribute useShim
 177          * @type Boolean
 178          */
 179          useShim: {
 180              value: true,
 181              setter: function(v) {
 182                  Y.DD.DDM._noShim = !v;
 183                  return v;
 184              }
 185          }
 186      };
 187  
 188      Y.extend(Drop, Y.Base, {
 189          /**
 190          * The default bubbleTarget for this object. Default: Y.DD.DDM
 191          * @private
 192          * @property _bubbleTargets
 193          */
 194          _bubbleTargets: Y.DD.DDM,
 195          /**
 196          * Add this Drop instance to a group, this should be used for on-the-fly group additions.
 197          * @method addToGroup
 198          * @param {String} g The group to add this Drop Instance to.
 199          * @chainable
 200          */
 201          addToGroup: function(g) {
 202              this._groups[g] = true;
 203              return this;
 204          },
 205          /**
 206          * Remove this Drop instance from a group, this should be used for on-the-fly group removals.
 207          * @method removeFromGroup
 208          * @param {String} g The group to remove this Drop Instance from.
 209          * @chainable
 210          */
 211          removeFromGroup: function(g) {
 212              delete this._groups[g];
 213              return this;
 214          },
 215          /**
 216          * This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
 217          * @private
 218          * @method _createEvents
 219          */
 220          _createEvents: function() {
 221  
 222              var ev = [
 223                  EV_DROP_OVER,
 224                  EV_DROP_ENTER,
 225                  EV_DROP_EXIT,
 226                  'drop:hit'
 227              ];
 228  
 229              Y.Array.each(ev, function(v) {
 230                  this.publish(v, {
 231                      type: v,
 232                      emitFacade: true,
 233                      preventable: false,
 234                      bubbles: true,
 235                      queuable: false,
 236                      prefix: 'drop'
 237                  });
 238              }, this);
 239          },
 240          /**
 241          * Flag for determining if the target is valid in this operation.
 242          * @private
 243          * @property _valid
 244          * @type Boolean
 245          */
 246          _valid: null,
 247          /**
 248          * The groups this target belongs to.
 249          * @private
 250          * @property _groups
 251          * @type Array
 252          */
 253          _groups: null,
 254          /**
 255          * Node reference to the targets shim
 256          * @property shim
 257          * @type {Object}
 258          */
 259          shim: null,
 260          /**
 261          * A region object associated with this target, used for checking regions while dragging.
 262          * @property region
 263          * @type Object
 264          */
 265          region: null,
 266          /**
 267          * This flag is tripped when a drag element is over this target.
 268          * @property overTarget
 269          * @type Boolean
 270          */
 271          overTarget: null,
 272          /**
 273          * Check if this target is in one of the supplied groups.
 274          * @method inGroup
 275          * @param {Array} groups The groups to check against
 276          * @return Boolean
 277          */
 278          inGroup: function(groups) {
 279              this._valid = false;
 280              var ret = false;
 281              Y.Array.each(groups, function(v) {
 282                  if (this._groups[v]) {
 283                      ret = true;
 284                      this._valid = true;
 285                  }
 286              }, this);
 287              return ret;
 288          },
 289          /**
 290          * Private lifecycle method
 291          * @private
 292          * @method initializer
 293          */
 294          initializer: function() {
 295              Y.later(100, this, this._createEvents);
 296  
 297              var node = this.get(NODE), id;
 298              if (!node.get('id')) {
 299                  id = Y.stamp(node);
 300                  node.set('id', id);
 301              }
 302              node.addClass(DDM.CSS_PREFIX + '-drop');
 303              //Shouldn't have to do this..
 304              this.set('groups', this.get('groups'));
 305          },
 306          /**
 307          * Lifecycle destructor, unreg the drag from the DDM and remove listeners
 308          * @private
 309          * @method destructor
 310          */
 311          destructor: function() {
 312              DDM._unregTarget(this);
 313              if (this.shim && (this.shim !== this.get(NODE))) {
 314                  this.shim.detachAll();
 315                  this.shim.remove();
 316                  this.shim = null;
 317              }
 318              this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop');
 319              this.detachAll();
 320          },
 321          /**
 322          * Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]
 323          * @private
 324          * @method _deactivateShim
 325          */
 326          _deactivateShim: function() {
 327              if (!this.shim) {
 328                  return false;
 329              }
 330              this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
 331              this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
 332              this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
 333  
 334              if (this.get('useShim')) {
 335                  this.shim.setStyles({
 336                      top: '-999px',
 337                      left: '-999px',
 338                      zIndex: '1'
 339                  });
 340              }
 341              this.overTarget = false;
 342          },
 343          /**
 344          * Activates the shim and adds some interaction CSS classes
 345          * @private
 346          * @method _activateShim
 347          */
 348          _activateShim: function() {
 349              if (!DDM.activeDrag) {
 350                  return false; //Nothing is dragging, no reason to activate.
 351              }
 352              if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
 353                  return false;
 354              }
 355              if (this.get('lock')) {
 356                  return false;
 357              }
 358              var node = this.get(NODE);
 359              //TODO Visibility Check..
 360              //if (this.inGroup(DDM.activeDrag.get('groups')) && this.get(NODE).isVisible()) {
 361              if (this.inGroup(DDM.activeDrag.get('groups'))) {
 362                  node.removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
 363                  node.addClass(DDM.CSS_PREFIX + '-drop-active-valid');
 364                  DDM._addValid(this);
 365                  this.overTarget = false;
 366                  if (!this.get('useShim')) {
 367                      this.shim = this.get(NODE);
 368                  }
 369                  this.sizeShim();
 370              } else {
 371                  DDM._removeValid(this);
 372                  node.removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
 373                  node.addClass(DDM.CSS_PREFIX + '-drop-active-invalid');
 374              }
 375          },
 376          /**
 377          * Positions and sizes the shim with the raw data from the node,
 378          * this can be used to programatically adjust the Targets shim for Animation..
 379          * @method sizeShim
 380          */
 381          sizeShim: function() {
 382              if (!DDM.activeDrag) {
 383                  return false; //Nothing is dragging, no reason to activate.
 384              }
 385              if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
 386                  return false;
 387              }
 388              //if (this.get('lock') || !this.get('useShim')) {
 389              if (this.get('lock')) {
 390                  return false;
 391              }
 392              if (!this.shim) {
 393                  Y.later(100, this, this.sizeShim);
 394                  return false;
 395              }
 396              var node = this.get(NODE),
 397                  nh = node.get(OFFSET_HEIGHT),
 398                  nw = node.get(OFFSET_WIDTH),
 399                  xy = node.getXY(),
 400                  p = this.get('padding'),
 401                  dd, dH, dW;
 402  
 403  
 404              //Apply padding
 405              nw = nw + p.left + p.right;
 406              nh = nh + p.top + p.bottom;
 407              xy[0] = xy[0] - p.left;
 408              xy[1] = xy[1] - p.top;
 409  
 410  
 411              if (DDM.activeDrag.get('dragMode') === DDM.INTERSECT) {
 412                  //Intersect Mode, make the shim bigger
 413                  dd = DDM.activeDrag;
 414                  dH = dd.get(NODE).get(OFFSET_HEIGHT);
 415                  dW = dd.get(NODE).get(OFFSET_WIDTH);
 416  
 417                  nh = (nh + dH);
 418                  nw = (nw + dW);
 419                  xy[0] = xy[0] - (dW - dd.deltaXY[0]);
 420                  xy[1] = xy[1] - (dH - dd.deltaXY[1]);
 421  
 422              }
 423  
 424              if (this.get('useShim')) {
 425                  //Set the style on the shim
 426                  this.shim.setStyles({
 427                      height: nh + 'px',
 428                      width: nw + 'px',
 429                      top: xy[1] + 'px',
 430                      left: xy[0] + 'px'
 431                  });
 432              }
 433  
 434              //Create the region to be used by intersect when a drag node is over us.
 435              this.region = {
 436                  '0': xy[0],
 437                  '1': xy[1],
 438                  area: 0,
 439                  top: xy[1],
 440                  right: xy[0] + nw,
 441                  bottom: xy[1] + nh,
 442                  left: xy[0]
 443              };
 444          },
 445          /**
 446          * Creates the Target shim and adds it to the DDM's playground..
 447          * @private
 448          * @method _createShim
 449          */
 450          _createShim: function() {
 451              //No playground, defer
 452              if (!DDM._pg) {
 453                  Y.later(10, this, this._createShim);
 454                  return;
 455              }
 456              //Shim already here, cancel
 457              if (this.shim) {
 458                  return;
 459              }
 460              var s = this.get('node');
 461  
 462              if (this.get('useShim')) {
 463                  s = Y.Node.create('<div id="' + this.get(NODE).get('id') + '_shim"></div>');
 464                  s.setStyles({
 465                      height: this.get(NODE).get(OFFSET_HEIGHT) + 'px',
 466                      width: this.get(NODE).get(OFFSET_WIDTH) + 'px',
 467                      backgroundColor: 'yellow',
 468                      opacity: '.5',
 469                      zIndex: '1',
 470                      overflow: 'hidden',
 471                      top: '-900px',
 472                      left: '-900px',
 473                      position:  'absolute'
 474                  });
 475  
 476                  DDM._pg.appendChild(s);
 477  
 478                  s.on('mouseover', Y.bind(this._handleOverEvent, this));
 479                  s.on('mouseout', Y.bind(this._handleOutEvent, this));
 480              }
 481  
 482  
 483              this.shim = s;
 484          },
 485          /**
 486          * This handles the over target call made from this object or from the DDM
 487          * @private
 488          * @method _handleOverTarget
 489          */
 490          _handleTargetOver: function() {
 491              if (DDM.isOverTarget(this)) {
 492                  this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-over');
 493                  DDM.activeDrop = this;
 494                  DDM.otherDrops[this] = this;
 495                  if (this.overTarget) {
 496                      DDM.activeDrag.fire('drag:over', { drop: this, drag: DDM.activeDrag });
 497                      this.fire(EV_DROP_OVER, { drop: this, drag: DDM.activeDrag });
 498                  } else {
 499                      //Prevent an enter before a start..
 500                      if (DDM.activeDrag.get('dragging')) {
 501                          this.overTarget = true;
 502                          this.fire(EV_DROP_ENTER, { drop: this, drag: DDM.activeDrag });
 503                          DDM.activeDrag.fire('drag:enter', { drop: this, drag: DDM.activeDrag });
 504                          DDM.activeDrag.get(NODE).addClass(DDM.CSS_PREFIX + '-drag-over');
 505                          //TODO - Is this needed??
 506                          //DDM._handleTargetOver();
 507                      }
 508                  }
 509              } else {
 510                  this._handleOut();
 511              }
 512          },
 513          /**
 514          * Handles the mouseover DOM event on the Target Shim
 515          * @private
 516          * @method _handleOverEvent
 517          */
 518          _handleOverEvent: function() {
 519              this.shim.setStyle('zIndex', '999');
 520              DDM._addActiveShim(this);
 521          },
 522          /**
 523          * Handles the mouseout DOM event on the Target Shim
 524          * @private
 525          * @method _handleOutEvent
 526          */
 527          _handleOutEvent: function() {
 528              this.shim.setStyle('zIndex', '1');
 529              DDM._removeActiveShim(this);
 530          },
 531          /**
 532          * Handles out of target calls/checks
 533          * @private
 534          * @method _handleOut
 535          */
 536          _handleOut: function(force) {
 537              if (!DDM.isOverTarget(this) || force) {
 538                  if (this.overTarget) {
 539                      this.overTarget = false;
 540                      if (!force) {
 541                          DDM._removeActiveShim(this);
 542                      }
 543                      if (DDM.activeDrag) {
 544                          this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
 545                          DDM.activeDrag.get(NODE).removeClass(DDM.CSS_PREFIX + '-drag-over');
 546                          this.fire(EV_DROP_EXIT, { drop: this, drag: DDM.activeDrag });
 547                          DDM.activeDrag.fire('drag:exit', { drop: this, drag: DDM.activeDrag });
 548                          delete DDM.otherDrops[this];
 549                      }
 550                  }
 551              }
 552          }
 553      });
 554  
 555      Y.DD.Drop = Drop;
 556  
 557  
 558  
 559  
 560  }, '3.17.2', {"requires": ["dd-drag", "dd-ddm-drop"]});