/hippo/src/main/webapp/ext/src/dd/DragSource.js

  1/*!
  2 * Ext JS Library 3.0.0
  3 * Copyright(c) 2006-2009 Ext JS, LLC
  4 * licensing@extjs.com
  5 * http://www.extjs.com/license
  6 */
  7/**
  8 * @class Ext.dd.DragSource
  9 * @extends Ext.dd.DDProxy
 10 * A simple class that provides the basic implementation needed to make any element draggable.
 11 * @constructor
 12 * @param {Mixed} el The container element
 13 * @param {Object} config
 14 */
 15Ext.dd.DragSource = function(el, config){
 16    this.el = Ext.get(el);
 17    if(!this.dragData){
 18        this.dragData = {};
 19    }
 20    
 21    Ext.apply(this, config);
 22    
 23    if(!this.proxy){
 24        this.proxy = new Ext.dd.StatusProxy();
 25    }
 26    Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
 27          {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
 28    
 29    this.dragging = false;
 30};
 31
 32Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {
 33    /**
 34     * @cfg {String} ddGroup
 35     * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
 36     * interact with other drag drop objects in the same group (defaults to undefined).
 37     */
 38    /**
 39     * @cfg {String} dropAllowed
 40     * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
 41     */
 42    dropAllowed : "x-dd-drop-ok",
 43    /**
 44     * @cfg {String} dropNotAllowed
 45     * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
 46     */
 47    dropNotAllowed : "x-dd-drop-nodrop",
 48
 49    /**
 50     * Returns the data object associated with this drag source
 51     * @return {Object} data An object containing arbitrary data
 52     */
 53    getDragData : function(e){
 54        return this.dragData;
 55    },
 56
 57    // private
 58    onDragEnter : function(e, id){
 59        var target = Ext.dd.DragDropMgr.getDDById(id);
 60        this.cachedTarget = target;
 61        if(this.beforeDragEnter(target, e, id) !== false){
 62            if(target.isNotifyTarget){
 63                var status = target.notifyEnter(this, e, this.dragData);
 64                this.proxy.setStatus(status);
 65            }else{
 66                this.proxy.setStatus(this.dropAllowed);
 67            }
 68            
 69            if(this.afterDragEnter){
 70                /**
 71                 * An empty function by default, but provided so that you can perform a custom action
 72                 * when the dragged item enters the drop target by providing an implementation.
 73                 * @param {Ext.dd.DragDrop} target The drop target
 74                 * @param {Event} e The event object
 75                 * @param {String} id The id of the dragged element
 76                 * @method afterDragEnter
 77                 */
 78                this.afterDragEnter(target, e, id);
 79            }
 80        }
 81    },
 82
 83    /**
 84     * An empty function by default, but provided so that you can perform a custom action
 85     * before the dragged item enters the drop target and optionally cancel the onDragEnter.
 86     * @param {Ext.dd.DragDrop} target The drop target
 87     * @param {Event} e The event object
 88     * @param {String} id The id of the dragged element
 89     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
 90     */
 91    beforeDragEnter : function(target, e, id){
 92        return true;
 93    },
 94
 95    // private
 96    alignElWithMouse: function() {
 97        Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
 98        this.proxy.sync();
 99    },
100
101    // private
102    onDragOver : function(e, id){
103        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
104        if(this.beforeDragOver(target, e, id) !== false){
105            if(target.isNotifyTarget){
106                var status = target.notifyOver(this, e, this.dragData);
107                this.proxy.setStatus(status);
108            }
109
110            if(this.afterDragOver){
111                /**
112                 * An empty function by default, but provided so that you can perform a custom action
113                 * while the dragged item is over the drop target by providing an implementation.
114                 * @param {Ext.dd.DragDrop} target The drop target
115                 * @param {Event} e The event object
116                 * @param {String} id The id of the dragged element
117                 * @method afterDragOver
118                 */
119                this.afterDragOver(target, e, id);
120            }
121        }
122    },
123
124    /**
125     * An empty function by default, but provided so that you can perform a custom action
126     * while the dragged item is over the drop target and optionally cancel the onDragOver.
127     * @param {Ext.dd.DragDrop} target The drop target
128     * @param {Event} e The event object
129     * @param {String} id The id of the dragged element
130     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
131     */
132    beforeDragOver : function(target, e, id){
133        return true;
134    },
135
136    // private
137    onDragOut : function(e, id){
138        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
139        if(this.beforeDragOut(target, e, id) !== false){
140            if(target.isNotifyTarget){
141                target.notifyOut(this, e, this.dragData);
142            }
143            this.proxy.reset();
144            if(this.afterDragOut){
145                /**
146                 * An empty function by default, but provided so that you can perform a custom action
147                 * after the dragged item is dragged out of the target without dropping.
148                 * @param {Ext.dd.DragDrop} target The drop target
149                 * @param {Event} e The event object
150                 * @param {String} id The id of the dragged element
151                 * @method afterDragOut
152                 */
153                this.afterDragOut(target, e, id);
154            }
155        }
156        this.cachedTarget = null;
157    },
158
159    /**
160     * An empty function by default, but provided so that you can perform a custom action before the dragged
161     * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
162     * @param {Ext.dd.DragDrop} target The drop target
163     * @param {Event} e The event object
164     * @param {String} id The id of the dragged element
165     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
166     */
167    beforeDragOut : function(target, e, id){
168        return true;
169    },
170    
171    // private
172    onDragDrop : function(e, id){
173        var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
174        if(this.beforeDragDrop(target, e, id) !== false){
175            if(target.isNotifyTarget){
176                if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
177                    this.onValidDrop(target, e, id);
178                }else{
179                    this.onInvalidDrop(target, e, id);
180                }
181            }else{
182                this.onValidDrop(target, e, id);
183            }
184            
185            if(this.afterDragDrop){
186                /**
187                 * An empty function by default, but provided so that you can perform a custom action
188                 * after a valid drag drop has occurred by providing an implementation.
189                 * @param {Ext.dd.DragDrop} target The drop target
190                 * @param {Event} e The event object
191                 * @param {String} id The id of the dropped element
192                 * @method afterDragDrop
193                 */
194                this.afterDragDrop(target, e, id);
195            }
196        }
197        delete this.cachedTarget;
198    },
199
200    /**
201     * An empty function by default, but provided so that you can perform a custom action before the dragged
202     * item is dropped onto the target and optionally cancel the onDragDrop.
203     * @param {Ext.dd.DragDrop} target The drop target
204     * @param {Event} e The event object
205     * @param {String} id The id of the dragged element
206     * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
207     */
208    beforeDragDrop : function(target, e, id){
209        return true;
210    },
211
212    // private
213    onValidDrop : function(target, e, id){
214        this.hideProxy();
215        if(this.afterValidDrop){
216            /**
217             * An empty function by default, but provided so that you can perform a custom action
218             * after a valid drop has occurred by providing an implementation.
219             * @param {Object} target The target DD 
220             * @param {Event} e The event object
221             * @param {String} id The id of the dropped element
222             * @method afterInvalidDrop
223             */
224            this.afterValidDrop(target, e, id);
225        }
226    },
227
228    // private
229    getRepairXY : function(e, data){
230        return this.el.getXY();  
231    },
232
233    // private
234    onInvalidDrop : function(target, e, id){
235        this.beforeInvalidDrop(target, e, id);
236        if(this.cachedTarget){
237            if(this.cachedTarget.isNotifyTarget){
238                this.cachedTarget.notifyOut(this, e, this.dragData);
239            }
240            this.cacheTarget = null;
241        }
242        this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
243
244        if(this.afterInvalidDrop){
245            /**
246             * An empty function by default, but provided so that you can perform a custom action
247             * after an invalid drop has occurred by providing an implementation.
248             * @param {Event} e The event object
249             * @param {String} id The id of the dropped element
250             * @method afterInvalidDrop
251             */
252            this.afterInvalidDrop(e, id);
253        }
254    },
255
256    // private
257    afterRepair : function(){
258        if(Ext.enableFx){
259            this.el.highlight(this.hlColor || "c3daf9");
260        }
261        this.dragging = false;
262    },
263
264    /**
265     * An empty function by default, but provided so that you can perform a custom action after an invalid
266     * drop has occurred.
267     * @param {Ext.dd.DragDrop} target The drop target
268     * @param {Event} e The event object
269     * @param {String} id The id of the dragged element
270     * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
271     */
272    beforeInvalidDrop : function(target, e, id){
273        return true;
274    },
275
276    // private
277    handleMouseDown : function(e){
278        if(this.dragging) {
279            return;
280        }
281        var data = this.getDragData(e);
282        if(data && this.onBeforeDrag(data, e) !== false){
283            this.dragData = data;
284            this.proxy.stop();
285            Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
286        } 
287    },
288
289    /**
290     * An empty function by default, but provided so that you can perform a custom action before the initial
291     * drag event begins and optionally cancel it.
292     * @param {Object} data An object containing arbitrary data to be shared with drop targets
293     * @param {Event} e The event object
294     * @return {Boolean} isValid True if the drag event is valid, else false to cancel
295     */
296    onBeforeDrag : function(data, e){
297        return true;
298    },
299
300    /**
301     * An empty function by default, but provided so that you can perform a custom action once the initial
302     * drag event has begun.  The drag cannot be canceled from this function.
303     * @param {Number} x The x position of the click on the dragged object
304     * @param {Number} y The y position of the click on the dragged object
305     */
306    onStartDrag : Ext.emptyFn,
307
308    // private override
309    startDrag : function(x, y){
310        this.proxy.reset();
311        this.dragging = true;
312        this.proxy.update("");
313        this.onInitDrag(x, y);
314        this.proxy.show();
315    },
316
317    // private
318    onInitDrag : function(x, y){
319        var clone = this.el.dom.cloneNode(true);
320        clone.id = Ext.id(); // prevent duplicate ids
321        this.proxy.update(clone);
322        this.onStartDrag(x, y);
323        return true;
324    },
325
326    /**
327     * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
328     * @return {Ext.dd.StatusProxy} proxy The StatusProxy
329     */
330    getProxy : function(){
331        return this.proxy;  
332    },
333
334    /**
335     * Hides the drag source's {@link Ext.dd.StatusProxy}
336     */
337    hideProxy : function(){
338        this.proxy.hide();  
339        this.proxy.reset(true);
340        this.dragging = false;
341    },
342
343    // private
344    triggerCacheRefresh : function(){
345        Ext.dd.DDM.refreshCache(this.groups);
346    },
347
348    // private - override to prevent hiding
349    b4EndDrag: function(e) {
350    },
351
352    // private - override to prevent moving
353    endDrag : function(e){
354        this.onEndDrag(this.dragData, e);
355    },
356
357    // private
358    onEndDrag : function(data, e){
359    },
360    
361    // private - pin to cursor
362    autoOffset : function(x, y) {
363        this.setDelta(-12, -20);
364    }    
365});