[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                  this.addTarget(t);
 169                  return t;
 170              }
 171          },
 172          /**
 173          * Use the Drop shim. Default: true
 174          * @deprecated
 175          * @attribute useShim
 176          * @type Boolean
 177          */
 178          useShim: {
 179              value: true,
 180              setter: function(v) {
 181                  Y.DD.DDM._noShim = !v;
 182                  return v;
 183              }
 184          }
 185      };
 186  
 187      Y.extend(Drop, Y.Base, {
 188          /**
 189          * The default bubbleTarget for this object. Default: Y.DD.DDM
 190          * @private
 191          * @property _bubbleTargets
 192          */
 193          _bubbleTargets: Y.DD.DDM,
 194          /**
 195          * Add this Drop instance to a group, this should be used for on-the-fly group additions.
 196          * @method addToGroup
 197          * @param {String} g The group to add this Drop Instance to.
 198          * @chainable
 199          */
 200          addToGroup: function(g) {
 201              this._groups[g] = true;
 202              return this;
 203          },
 204          /**
 205          * Remove this Drop instance from a group, this should be used for on-the-fly group removals.
 206          * @method removeFromGroup
 207          * @param {String} g The group to remove this Drop Instance from.
 208          * @chainable
 209          */
 210          removeFromGroup: function(g) {
 211              delete this._groups[g];
 212              return this;
 213          },
 214          /**
 215          * This method creates all the events for this Event Target and publishes them so we get Event Bubbling.
 216          * @private
 217          * @method _createEvents
 218          */
 219          _createEvents: function() {
 220  
 221              var ev = [
 222                  EV_DROP_OVER,
 223                  EV_DROP_ENTER,
 224                  EV_DROP_EXIT,
 225                  'drop:hit'
 226              ];
 227  
 228              Y.Array.each(ev, function(v) {
 229                  this.publish(v, {
 230                      type: v,
 231                      emitFacade: true,
 232                      preventable: false,
 233                      bubbles: true,
 234                      queuable: false,
 235                      prefix: 'drop'
 236                  });
 237              }, this);
 238          },
 239          /**
 240          * Flag for determining if the target is valid in this operation.
 241          * @private
 242          * @property _valid
 243          * @type Boolean
 244          */
 245          _valid: null,
 246          /**
 247          * The groups this target belongs to.
 248          * @private
 249          * @property _groups
 250          * @type Array
 251          */
 252          _groups: null,
 253          /**
 254          * Node reference to the targets shim
 255          * @property shim
 256          * @type {Object}
 257          */
 258          shim: null,
 259          /**
 260          * A region object associated with this target, used for checking regions while dragging.
 261          * @property region
 262          * @type Object
 263          */
 264          region: null,
 265          /**
 266          * This flag is tripped when a drag element is over this target.
 267          * @property overTarget
 268          * @type Boolean
 269          */
 270          overTarget: null,
 271          /**
 272          * Check if this target is in one of the supplied groups.
 273          * @method inGroup
 274          * @param {Array} groups The groups to check against
 275          * @return Boolean
 276          */
 277          inGroup: function(groups) {
 278              this._valid = false;
 279              var ret = false;
 280              Y.Array.each(groups, function(v) {
 281                  if (this._groups[v]) {
 282                      ret = true;
 283                      this._valid = true;
 284                  }
 285              }, this);
 286              return ret;
 287          },
 288          /**
 289          * Private lifecycle method
 290          * @private
 291          * @method initializer
 292          */
 293          initializer: function() {
 294              Y.later(100, this, this._createEvents);
 295  
 296              var node = this.get(NODE), id;
 297              if (!node.get('id')) {
 298                  id = Y.stamp(node);
 299                  node.set('id', id);
 300              }
 301              node.addClass(DDM.CSS_PREFIX + '-drop');
 302              //Shouldn't have to do this..
 303              this.set('groups', this.get('groups'));
 304          },
 305          /**
 306          * Lifecycle destructor, unreg the drag from the DDM and remove listeners
 307          * @private
 308          * @method destructor
 309          */
 310          destructor: function() {
 311              DDM._unregTarget(this);
 312              if (this.shim && (this.shim !== this.get(NODE))) {
 313                  this.shim.detachAll();
 314                  this.shim.remove();
 315                  this.shim = null;
 316              }
 317              this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop');
 318              this.detachAll();
 319          },
 320          /**
 321          * Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]
 322          * @private
 323          * @method _deactivateShim
 324          */
 325          _deactivateShim: function() {
 326              if (!this.shim) {
 327                  return false;
 328              }
 329              this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
 330              this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
 331              this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
 332  
 333              if (this.get('useShim')) {
 334                  this.shim.setStyles({
 335                      top: '-999px',
 336                      left: '-999px',
 337                      zIndex: '1'
 338                  });
 339              }
 340              this.overTarget = false;
 341          },
 342          /**
 343          * Activates the shim and adds some interaction CSS classes
 344          * @private
 345          * @method _activateShim
 346          */
 347          _activateShim: function() {
 348              if (!DDM.activeDrag) {
 349                  return false; //Nothing is dragging, no reason to activate.
 350              }
 351              if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
 352                  return false;
 353              }
 354              if (this.get('lock')) {
 355                  return false;
 356              }
 357              var node = this.get(NODE);
 358              //TODO Visibility Check..
 359              //if (this.inGroup(DDM.activeDrag.get('groups')) && this.get(NODE).isVisible()) {
 360              if (this.inGroup(DDM.activeDrag.get('groups'))) {
 361                  node.removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');
 362                  node.addClass(DDM.CSS_PREFIX + '-drop-active-valid');
 363                  DDM._addValid(this);
 364                  this.overTarget = false;
 365                  if (!this.get('useShim')) {
 366                      this.shim = this.get(NODE);
 367                  }
 368                  this.sizeShim();
 369              } else {
 370                  DDM._removeValid(this);
 371                  node.removeClass(DDM.CSS_PREFIX + '-drop-active-valid');
 372                  node.addClass(DDM.CSS_PREFIX + '-drop-active-invalid');
 373              }
 374          },
 375          /**
 376          * Positions and sizes the shim with the raw data from the node,
 377          * this can be used to programatically adjust the Targets shim for Animation..
 378          * @method sizeShim
 379          */
 380          sizeShim: function() {
 381              if (!DDM.activeDrag) {
 382                  return false; //Nothing is dragging, no reason to activate.
 383              }
 384              if (this.get(NODE) === DDM.activeDrag.get(NODE)) {
 385                  return false;
 386              }
 387              //if (this.get('lock') || !this.get('useShim')) {
 388              if (this.get('lock')) {
 389                  return false;
 390              }
 391              if (!this.shim) {
 392                  Y.later(100, this, this.sizeShim);
 393                  return false;
 394              }
 395              var node = this.get(NODE),
 396                  nh = node.get(OFFSET_HEIGHT),
 397                  nw = node.get(OFFSET_WIDTH),
 398                  xy = node.getXY(),
 399                  p = this.get('padding'),
 400                  dd, dH, dW;
 401  
 402  
 403              //Apply padding
 404              nw = nw + p.left + p.right;
 405              nh = nh + p.top + p.bottom;
 406              xy[0] = xy[0] - p.left;
 407              xy[1] = xy[1] - p.top;
 408  
 409  
 410              if (DDM.activeDrag.get('dragMode') === DDM.INTERSECT) {
 411                  //Intersect Mode, make the shim bigger
 412                  dd = DDM.activeDrag;
 413                  dH = dd.get(NODE).get(OFFSET_HEIGHT);
 414                  dW = dd.get(NODE).get(OFFSET_WIDTH);
 415  
 416                  nh = (nh + dH);
 417                  nw = (nw + dW);
 418                  xy[0] = xy[0] - (dW - dd.deltaXY[0]);
 419                  xy[1] = xy[1] - (dH - dd.deltaXY[1]);
 420  
 421              }
 422  
 423              if (this.get('useShim')) {
 424                  //Set the style on the shim
 425                  this.shim.setStyles({
 426                      height: nh + 'px',
 427                      width: nw + 'px',
 428                      top: xy[1] + 'px',
 429                      left: xy[0] + 'px'
 430                  });
 431              }
 432  
 433              //Create the region to be used by intersect when a drag node is over us.
 434              this.region = {
 435                  '0': xy[0],
 436                  '1': xy[1],
 437                  area: 0,
 438                  top: xy[1],
 439                  right: xy[0] + nw,
 440                  bottom: xy[1] + nh,
 441                  left: xy[0]
 442              };
 443          },
 444          /**
 445          * Creates the Target shim and adds it to the DDM's playground..
 446          * @private
 447          * @method _createShim
 448          */
 449          _createShim: function() {
 450              //No playground, defer
 451              if (!DDM._pg) {
 452                  Y.later(10, this, this._createShim);
 453                  return;
 454              }
 455              //Shim already here, cancel
 456              if (this.shim) {
 457                  return;
 458              }
 459              var s = this.get('node');
 460  
 461              if (this.get('useShim')) {
 462                  s = Y.Node.create('<div id="' + this.get(NODE).get('id') + '_shim"></div>');
 463                  s.setStyles({
 464                      height: this.get(NODE).get(OFFSET_HEIGHT) + 'px',
 465                      width: this.get(NODE).get(OFFSET_WIDTH) + 'px',
 466                      backgroundColor: 'yellow',
 467                      opacity: '.5',
 468                      zIndex: '1',
 469                      overflow: 'hidden',
 470                      top: '-900px',
 471                      left: '-900px',
 472                      position:  'absolute'
 473                  });
 474  
 475                  DDM._pg.appendChild(s);
 476  
 477                  s.on('mouseover', Y.bind(this._handleOverEvent, this));
 478                  s.on('mouseout', Y.bind(this._handleOutEvent, this));
 479              }
 480  
 481  
 482              this.shim = s;
 483          },
 484          /**
 485          * This handles the over target call made from this object or from the DDM
 486          * @private
 487          * @method _handleOverTarget
 488          */
 489          _handleTargetOver: function() {
 490              if (DDM.isOverTarget(this)) {
 491                  this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-over');
 492                  DDM.activeDrop = this;
 493                  DDM.otherDrops[this] = this;
 494                  if (this.overTarget) {
 495                      DDM.activeDrag.fire('drag:over', { drop: this, drag: DDM.activeDrag });
 496                      this.fire(EV_DROP_OVER, { drop: this, drag: DDM.activeDrag });
 497                  } else {
 498                      //Prevent an enter before a start..
 499                      if (DDM.activeDrag.get('dragging')) {
 500                          this.overTarget = true;
 501                          this.fire(EV_DROP_ENTER, { drop: this, drag: DDM.activeDrag });
 502                          DDM.activeDrag.fire('drag:enter', { drop: this, drag: DDM.activeDrag });
 503                          DDM.activeDrag.get(NODE).addClass(DDM.CSS_PREFIX + '-drag-over');
 504                          //TODO - Is this needed??
 505                          //DDM._handleTargetOver();
 506                      }
 507                  }
 508              } else {
 509                  this._handleOut();
 510              }
 511          },
 512          /**
 513          * Handles the mouseover DOM event on the Target Shim
 514          * @private
 515          * @method _handleOverEvent
 516          */
 517          _handleOverEvent: function() {
 518              this.shim.setStyle('zIndex', '999');
 519              DDM._addActiveShim(this);
 520          },
 521          /**
 522          * Handles the mouseout DOM event on the Target Shim
 523          * @private
 524          * @method _handleOutEvent
 525          */
 526          _handleOutEvent: function() {
 527              this.shim.setStyle('zIndex', '1');
 528              DDM._removeActiveShim(this);
 529          },
 530          /**
 531          * Handles out of target calls/checks
 532          * @private
 533          * @method _handleOut
 534          */
 535          _handleOut: function(force) {
 536              if (!DDM.isOverTarget(this) || force) {
 537                  if (this.overTarget) {
 538                      this.overTarget = false;
 539                      if (!force) {
 540                          DDM._removeActiveShim(this);
 541                      }
 542                      if (DDM.activeDrag) {
 543                          this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');
 544                          DDM.activeDrag.get(NODE).removeClass(DDM.CSS_PREFIX + '-drag-over');
 545                          this.fire(EV_DROP_EXIT, { drop: this, drag: DDM.activeDrag });
 546                          DDM.activeDrag.fire('drag:exit', { drop: this, drag: DDM.activeDrag });
 547                          delete DDM.otherDrops[this];
 548                      }
 549                  }
 550              }
 551          }
 552      });
 553  
 554      Y.DD.Drop = Drop;
 555  
 556  
 557  
 558  
 559  }, '3.17.2', {"requires": ["dd-drag", "dd-ddm-drop"]});