1 /*

     2 YUI 3.10.3 (build 2fb5187)

     3 Copyright 2013 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 instanace 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         * @return {Self}

   200         * @chainable

   201         */

   202         addToGroup: function(g) {

   203             this._groups[g] = true;

   204             return this;

   205         },

   206         /**

   207         * Remove this Drop instance from a group, this should be used for on-the-fly group removals.

   208         * @method removeFromGroup

   209         * @param {String} g The group to remove this Drop Instance from.

   210         * @return {Self}

   211         * @chainable

   212         */

   213         removeFromGroup: function(g) {

   214             delete this._groups[g];

   215             return this;

   216         },

   217         /**

   218         * This method creates all the events for this Event Target and publishes them so we get Event Bubbling.

   219         * @private

   220         * @method _createEvents

   221         */

   222         _createEvents: function() {

   223 

   224             var ev = [

   225                 EV_DROP_OVER,

   226                 EV_DROP_ENTER,

   227                 EV_DROP_EXIT,

   228                 'drop:hit'

   229             ];

   230 

   231             Y.Array.each(ev, function(v) {

   232                 this.publish(v, {

   233                     type: v,

   234                     emitFacade: true,

   235                     preventable: false,

   236                     bubbles: true,

   237                     queuable: false,

   238                     prefix: 'drop'

   239                 });

   240             }, this);

   241         },

   242         /**

   243         * Flag for determining if the target is valid in this operation.

   244         * @private

   245         * @property _valid

   246         * @type Boolean

   247         */

   248         _valid: null,

   249         /**

   250         * The groups this target belongs to.

   251         * @private

   252         * @property _groups

   253         * @type Array

   254         */

   255         _groups: null,

   256         /**

   257         * Node reference to the targets shim

   258         * @property shim

   259         * @type {Object}

   260         */

   261         shim: null,

   262         /**

   263         * A region object associated with this target, used for checking regions while dragging.

   264         * @property region

   265         * @type Object

   266         */

   267         region: null,

   268         /**

   269         * This flag is tripped when a drag element is over this target.

   270         * @property overTarget

   271         * @type Boolean

   272         */

   273         overTarget: null,

   274         /**

   275         * Check if this target is in one of the supplied groups.

   276         * @method inGroup

   277         * @param {Array} groups The groups to check against

   278         * @return Boolean

   279         */

   280         inGroup: function(groups) {

   281             this._valid = false;

   282             var ret = false;

   283             Y.Array.each(groups, function(v) {

   284                 if (this._groups[v]) {

   285                     ret = true;

   286                     this._valid = true;

   287                 }

   288             }, this);

   289             return ret;

   290         },

   291         /**

   292         * Private lifecycle method

   293         * @private

   294         * @method initializer

   295         */

   296         initializer: function() {

   297             Y.later(100, this, this._createEvents);

   298 

   299             var node = this.get(NODE), id;

   300             if (!node.get('id')) {

   301                 id = Y.stamp(node);

   302                 node.set('id', id);

   303             }

   304             node.addClass(DDM.CSS_PREFIX + '-drop');

   305             //Shouldn't have to do this..

   306             this.set('groups', this.get('groups'));

   307         },

   308         /**

   309         * Lifecycle destructor, unreg the drag from the DDM and remove listeners

   310         * @private

   311         * @method destructor

   312         */

   313         destructor: function() {

   314             DDM._unregTarget(this);

   315             if (this.shim && (this.shim !== this.get(NODE))) {

   316                 this.shim.detachAll();

   317                 this.shim.remove();

   318                 this.shim = null;

   319             }

   320             this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop');

   321             this.detachAll();

   322         },

   323         /**

   324         * Removes classes from the target, resets some flags and sets the shims deactive position [-999, -999]

   325         * @private

   326         * @method _deactivateShim

   327         */

   328         _deactivateShim: function() {

   329             if (!this.shim) {

   330                 return false;

   331             }

   332             this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-valid');

   333             this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');

   334             this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');

   335 

   336             if (this.get('useShim')) {

   337                 this.shim.setStyles({

   338                     top: '-999px',

   339                     left: '-999px',

   340                     zIndex: '1'

   341                 });

   342             }

   343             this.overTarget = false;

   344         },

   345         /**

   346         * Activates the shim and adds some interaction CSS classes

   347         * @private

   348         * @method _activateShim

   349         */

   350         _activateShim: function() {

   351             if (!DDM.activeDrag) {

   352                 return false; //Nothing is dragging, no reason to activate.

   353             }

   354             if (this.get(NODE) === DDM.activeDrag.get(NODE)) {

   355                 return false;

   356             }

   357             if (this.get('lock')) {

   358                 return false;

   359             }

   360             var node = this.get(NODE);

   361             //TODO Visibility Check..

   362             //if (this.inGroup(DDM.activeDrag.get('groups')) && this.get(NODE).isVisible()) {

   363             if (this.inGroup(DDM.activeDrag.get('groups'))) {

   364                 node.removeClass(DDM.CSS_PREFIX + '-drop-active-invalid');

   365                 node.addClass(DDM.CSS_PREFIX + '-drop-active-valid');

   366                 DDM._addValid(this);

   367                 this.overTarget = false;

   368                 if (!this.get('useShim')) {

   369                     this.shim = this.get(NODE);

   370                 }

   371                 this.sizeShim();

   372             } else {

   373                 DDM._removeValid(this);

   374                 node.removeClass(DDM.CSS_PREFIX + '-drop-active-valid');

   375                 node.addClass(DDM.CSS_PREFIX + '-drop-active-invalid');

   376             }

   377         },

   378         /**

   379         * Positions and sizes the shim with the raw data from the node,

   380         * this can be used to programatically adjust the Targets shim for Animation..

   381         * @method sizeShim

   382         */

   383         sizeShim: function() {

   384             if (!DDM.activeDrag) {

   385                 return false; //Nothing is dragging, no reason to activate.

   386             }

   387             if (this.get(NODE) === DDM.activeDrag.get(NODE)) {

   388                 return false;

   389             }

   390             //if (this.get('lock') || !this.get('useShim')) {

   391             if (this.get('lock')) {

   392                 return false;

   393             }

   394             if (!this.shim) {

   395                 Y.later(100, this, this.sizeShim);

   396                 return false;

   397             }

   398             var node = this.get(NODE),

   399                 nh = node.get(OFFSET_HEIGHT),

   400                 nw = node.get(OFFSET_WIDTH),

   401                 xy = node.getXY(),

   402                 p = this.get('padding'),

   403                 dd, dH, dW;

   404 

   405 

   406             //Apply padding

   407             nw = nw + p.left + p.right;

   408             nh = nh + p.top + p.bottom;

   409             xy[0] = xy[0] - p.left;

   410             xy[1] = xy[1] - p.top;

   411 

   412 

   413             if (DDM.activeDrag.get('dragMode') === DDM.INTERSECT) {

   414                 //Intersect Mode, make the shim bigger

   415                 dd = DDM.activeDrag;

   416                 dH = dd.get(NODE).get(OFFSET_HEIGHT);

   417                 dW = dd.get(NODE).get(OFFSET_WIDTH);

   418 

   419                 nh = (nh + dH);

   420                 nw = (nw + dW);

   421                 xy[0] = xy[0] - (dW - dd.deltaXY[0]);

   422                 xy[1] = xy[1] - (dH - dd.deltaXY[1]);

   423 

   424             }

   425 

   426             if (this.get('useShim')) {

   427                 //Set the style on the shim

   428                 this.shim.setStyles({

   429                     height: nh + 'px',

   430                     width: nw + 'px',

   431                     top: xy[1] + 'px',

   432                     left: xy[0] + 'px'

   433                 });

   434             }

   435 

   436             //Create the region to be used by intersect when a drag node is over us.

   437             this.region = {

   438                 '0': xy[0],

   439                 '1': xy[1],

   440                 area: 0,

   441                 top: xy[1],

   442                 right: xy[0] + nw,

   443                 bottom: xy[1] + nh,

   444                 left: xy[0]

   445             };

   446         },

   447         /**

   448         * Creates the Target shim and adds it to the DDM's playground..

   449         * @private

   450         * @method _createShim

   451         */

   452         _createShim: function() {

   453             //No playground, defer

   454             if (!DDM._pg) {

   455                 Y.later(10, this, this._createShim);

   456                 return;

   457             }

   458             //Shim already here, cancel

   459             if (this.shim) {

   460                 return;

   461             }

   462             var s = this.get('node');

   463 

   464             if (this.get('useShim')) {

   465                 s = Y.Node.create('<div id="' + this.get(NODE).get('id') + '_shim"></div>');

   466                 s.setStyles({

   467                     height: this.get(NODE).get(OFFSET_HEIGHT) + 'px',

   468                     width: this.get(NODE).get(OFFSET_WIDTH) + 'px',

   469                     backgroundColor: 'yellow',

   470                     opacity: '.5',

   471                     zIndex: '1',

   472                     overflow: 'hidden',

   473                     top: '-900px',

   474                     left: '-900px',

   475                     position:  'absolute'

   476                 });

   477 

   478                 DDM._pg.appendChild(s);

   479 

   480                 s.on('mouseover', Y.bind(this._handleOverEvent, this));

   481                 s.on('mouseout', Y.bind(this._handleOutEvent, this));

   482             }

   483 

   484 

   485             this.shim = s;

   486         },

   487         /**

   488         * This handles the over target call made from this object or from the DDM

   489         * @private

   490         * @method _handleOverTarget

   491         */

   492         _handleTargetOver: function() {

   493             if (DDM.isOverTarget(this)) {

   494                 this.get(NODE).addClass(DDM.CSS_PREFIX + '-drop-over');

   495                 DDM.activeDrop = this;

   496                 DDM.otherDrops[this] = this;

   497                 if (this.overTarget) {

   498                     DDM.activeDrag.fire('drag:over', { drop: this, drag: DDM.activeDrag });

   499                     this.fire(EV_DROP_OVER, { drop: this, drag: DDM.activeDrag });

   500                 } else {

   501                     //Prevent an enter before a start..

   502                     if (DDM.activeDrag.get('dragging')) {

   503                         this.overTarget = true;

   504                         this.fire(EV_DROP_ENTER, { drop: this, drag: DDM.activeDrag });

   505                         DDM.activeDrag.fire('drag:enter', { drop: this, drag: DDM.activeDrag });

   506                         DDM.activeDrag.get(NODE).addClass(DDM.CSS_PREFIX + '-drag-over');

   507                         //TODO - Is this needed??

   508                         //DDM._handleTargetOver();

   509                     }

   510                 }

   511             } else {

   512                 this._handleOut();

   513             }

   514         },

   515         /**

   516         * Handles the mouseover DOM event on the Target Shim

   517         * @private

   518         * @method _handleOverEvent

   519         */

   520         _handleOverEvent: function() {

   521             this.shim.setStyle('zIndex', '999');

   522             DDM._addActiveShim(this);

   523         },

   524         /**

   525         * Handles the mouseout DOM event on the Target Shim

   526         * @private

   527         * @method _handleOutEvent

   528         */

   529         _handleOutEvent: function() {

   530             this.shim.setStyle('zIndex', '1');

   531             DDM._removeActiveShim(this);

   532         },

   533         /**

   534         * Handles out of target calls/checks

   535         * @private

   536         * @method _handleOut

   537         */

   538         _handleOut: function(force) {

   539             if (!DDM.isOverTarget(this) || force) {

   540                 if (this.overTarget) {

   541                     this.overTarget = false;

   542                     if (!force) {

   543                         DDM._removeActiveShim(this);

   544                     }

   545                     if (DDM.activeDrag) {

   546                         this.get(NODE).removeClass(DDM.CSS_PREFIX + '-drop-over');

   547                         DDM.activeDrag.get(NODE).removeClass(DDM.CSS_PREFIX + '-drag-over');

   548                         this.fire(EV_DROP_EXIT, { drop: this, drag: DDM.activeDrag });

   549                         DDM.activeDrag.fire('drag:exit', { drop: this, drag: DDM.activeDrag });

   550                         delete DDM.otherDrops[this];

   551                     }

   552                 }

   553             }

   554         }

   555     });

   556 

   557     Y.DD.Drop = Drop;

   558 

   559 

   560 

   561 

   562 }, '3.10.3', {"requires": ["dd-drag", "dd-ddm-drop"]});