dd-ddm-drop.js revision 8a6b21bbf4ce4b186b37c9f3623a198acd13b950
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * Extends the dd-ddm Class to add support for the placement of Drop Target shims inside the viewport shim. It also handles all Drop Target related events and interactions.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @module dd
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @submodule dd-ddm-drop
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @namespace DD
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync //TODO CSS class name for the bestMatch..
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property _noShim
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description This flag turns off the use of the mouseover/mouseout shim. It should not be used unless you know what you are doing.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type {Boolean}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property _activeShims
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Placeholder for all active shims on the page
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type {Array}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method _hasActiveShim
5f79d7b33f1fd754c9127a3a849fad6f090f3025vboxsync * @description This method checks the _activeShims Object to see if there is a shim active.
44466d3efa47355c96b36674966f89397db5e540vboxsync * @return {Boolean}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync return true;
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method _addActiveShim
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Adds a Drop Target to the list of active shims
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @param {Object} d The Drop instance to add to the list.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync _addActiveShim: function(d) {
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method _removeActiveShim
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Removes a Drop Target to the list of active shims
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @param {Object} d The Drop instance to remove from the list.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync var s = [];
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method syncActiveShims
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description This method will sync the position of the shims on the Drop Targets that are currently active.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @param {Boolean} force Resize/sync all Targets.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync var drops = ((force) ? this.targets : this._lookup());
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property mode
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description The mode that the drag operations will run in 0 for Point, 1 for Intersect, 2 for Strict
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type Number
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property POINT
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description In point mode, a Drop is targeted by the cursor being over the Target
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type Number
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property INTERSECT
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description In intersect mode, a Drop is targeted by "part" of the drag node being over the Target
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type Number
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property STRICT
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description In strict mode, a Drop is targeted by the "entire" drag node being over the Target
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type Number
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property useHash
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Should we only check targets that are in the viewport on drags (for performance), default: true
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type {Boolean}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property activeDrop
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description A reference to the active Drop Target
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type {Object}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property validDrops
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description An array of the valid Drop Targets for this interaction.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type {Array}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync //TODO Change array/object literals to be in sync..
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @property otherDrops
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description An object literal of Other Drop Targets that we encountered during this interaction (in the case of overlapping Drop Targets)
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type {Object}
44466d3efa47355c96b36674966f89397db5e540vboxsync * @property targets
44466d3efa47355c96b36674966f89397db5e540vboxsync * @description All of the Targets
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @type {Array}
44466d3efa47355c96b36674966f89397db5e540vboxsync * @method _addValid
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Add a Drop Target to the list of Valid Targets. This list get's regenerated on each new drag operation.
44466d3efa47355c96b36674966f89397db5e540vboxsync * @param {Object} drop
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @return {Self}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @chainable
44466d3efa47355c96b36674966f89397db5e540vboxsync return this;
44466d3efa47355c96b36674966f89397db5e540vboxsync * @method _removeValid
810abff21f47a26419662724750d5e82a8897c05vboxsync * @description Removes a Drop Target from the list of Valid Targets. This list get's regenerated on each new drag operation.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @param {Object} drop
44466d3efa47355c96b36674966f89397db5e540vboxsync * @return {Self}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @chainable
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync if (v !== drop) {
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync return this;
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method isOverTarget
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Check to see if the Drag element is over the target, method varies on current mode
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @param {Object} drop The drop to check against
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @return {Boolean}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync var xy = this.activeDrag.mouseXY, r, dMode = this.activeDrag.get('dragMode'),
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync return this.activeDrag.get('dragNode').inRegion(drop.region, true, aRegion);
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync r = ((aRegion) ? aRegion : this.activeDrag.get('node'));
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync return drop.get('node').intersect(r, drop.region).inRegion;
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync return false;
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync return false;
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync return false;
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method clearCache
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Clears the cache data used for this interaction.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync clearCache: function() {
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method _activateTargets
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Clear the cache and activate the shims of all the targets
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync this._noShim = true;
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync this._noShim = false;
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method getBestMatch
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description This method will gather the area for all potential targets and see which has the hightest covered area and return it.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @param {Array} drops An Array of drops to scan for the best match.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @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.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @return {Object or Array}
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync var inter = this.activeDrag.get('dragNode').intersect(v.get('node'));
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync //TODO Sort the others in numeric order by area covered..
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync if (v !== biggest) {
44466d3efa47355c96b36674966f89397db5e540vboxsync * @method _deactivateTargets
44466d3efa47355c96b36674966f89397db5e540vboxsync * @description This method fires the drop:hit, drag:drophit, drag:dropmiss methods and deactivates the shims..
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync //TODO why is this check so hard??
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync if (activeDrag && activeDrop && this.otherDrops[activeDrop]) {
44466d3efa47355c96b36674966f89397db5e540vboxsync //TODO otherDrops -- private..
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync activeDrag.get('node').removeClass(this.CSS_PREFIX + '-drag-over');
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync activeDrop.fire('drop:hit', { drag: activeDrag, drop: activeDrop, others: other });
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync activeDrag.fire('drag:drophit', { drag: activeDrag, drop: activeDrop, others: other });
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync } else if (activeDrag && activeDrag.get('dragging')) {
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync activeDrag.get('node').removeClass(this.CSS_PREFIX + '-drag-over');
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync activeDrag.fire('drag:dropmiss', { pageX: activeDrag.lastXY[0], pageY: activeDrag.lastXY[1] });
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method _dropMove
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description This method is called when the move method is called on the Drag Object.
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync _dropMove: function() {
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @method _lookup
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @description Filters the list of Drops down to those in the viewport.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync * @return {Array} The valid Drop Targets that are in the viewport.
89edcb4f68deee74e393c7af9c759bb9d2a92076vboxsync _lookup: function() {
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync //Only scan drop shims that are in the Viewport
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync if (v.shim && v.shim.inViewportRegion(false, v.region)) {
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @method _handleTargetOver
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @description This method execs _handleTargetOver on all valid Drop Targets
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @method _regTarget
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @description Add the passed in Target to the targets collection
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @param {Object} t The Target to add to the targets collection
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync _regTarget: function(t) {
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @method _unregTarget
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @description Remove the passed in Target from the targets collection
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @param {Object} drop The Target to remove from the targets collection
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync if (v != drop) {
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync if (v !== drop) {
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @method getDrop
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @description Get a valid Drop instance back from a Node or a selector string, false otherwise
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @param {String/Object} node The Node instance or Selector string to check for a valid Drop Object
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync * @return {Object}
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync var drop = false,
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync if (n instanceof Y.Node) {
e7c839f79dcdc6f2ac9419d367544271828884cavboxsync}, '@VERSION@' ,{skinnable:false, requires:['dd-ddm']});