]>
Commit | Line | Data |
---|---|---|
947f0963 TL |
1 | /* |
2 | * This is a derivative of the similarly named class in the YUI Library. | |
3 | * The original license: | |
4 | * Copyright (c) 2006, Yahoo! Inc. All rights reserved. | |
5 | * Code licensed under the BSD License: | |
6 | * http://developer.yahoo.net/yui/license.txt | |
7 | */ | |
8 | ||
9 | /** | |
10 | * Defines the interface and base operation of items that that can be | |
11 | * dragged or can be drop targets. It was designed to be extended, overriding | |
12 | * the event handlers for startDrag, onDrag, onDragOver and onDragOut. | |
13 | * Up to three html elements can be associated with a DragDrop instance: | |
14 | * | |
15 | * - linked element: the element that is passed into the constructor. | |
16 | * This is the element which defines the boundaries for interaction with | |
17 | * other DragDrop objects. | |
18 | * | |
19 | * - handle element(s): The drag operation only occurs if the element that | |
20 | * was clicked matches a handle element. By default this is the linked | |
21 | * element, but there are times that you will want only a portion of the | |
22 | * linked element to initiate the drag operation, and the setHandleElId() | |
23 | * method provides a way to define this. | |
24 | * | |
25 | * - drag element: this represents the element that would be moved along | |
26 | * with the cursor during a drag operation. By default, this is the linked | |
27 | * element itself as in {@link Ext.dd.DD}. setDragElId() lets you define | |
28 | * a separate element that would be moved, as in {@link Ext.dd.DDProxy}. | |
29 | * | |
30 | * This class should not be instantiated until the onload event to ensure that | |
31 | * the associated elements are available. | |
32 | * The following would define a DragDrop obj that would interact with any | |
33 | * other DragDrop obj in the "group1" group: | |
34 | * | |
35 | * dd = new Ext.dd.DragDrop("div1", "group1"); | |
36 | * | |
37 | * Since none of the event handlers have been implemented, nothing would | |
38 | * actually happen if you were to run the code above. Normally you would | |
39 | * override this class or one of the default implementations, but you can | |
40 | * also override the methods you want on an instance of the class... | |
41 | * | |
42 | * dd.onDragDrop = function(e, id) { | |
43 | * alert("dd was dropped on " + id); | |
44 | * } | |
45 | * | |
46 | */ | |
47 | Ext.define('Ext.dd.DragDrop', { | |
48 | requires: ['Ext.dd.DragDropManager'], | |
49 | ||
50 | /** | |
51 | * Creates new DragDrop. | |
52 | * @param {String} id of the element that is linked to this instance | |
53 | * @param {String} sGroup the group of related DragDrop objects | |
54 | * @param {Object} config an object containing configurable attributes. | |
55 | * Valid properties for DragDrop: | |
56 | * | |
57 | * - padding | |
58 | * - isTarget | |
59 | * - maintainOffset | |
60 | * - primaryButtonOnly | |
61 | */ | |
62 | constructor: function(id, sGroup, config) { | |
63 | if (id) { | |
64 | this.init(id, sGroup, config); | |
65 | } | |
66 | }, | |
67 | ||
68 | /** | |
69 | * @property {Boolean} ignoreSelf | |
70 | * Set to false to enable a DragDrop object to fire drag events while dragging | |
71 | * over its own Element. Defaults to true - DragDrop objects do not by default | |
72 | * fire drag events to themselves. | |
73 | */ | |
74 | ||
75 | /** | |
76 | * @property {String} id | |
77 | * The id of the element associated with this object. This is what we | |
78 | * refer to as the "linked element" because the size and position of | |
79 | * this element is used to determine when the drag and drop objects have | |
80 | * interacted. | |
81 | */ | |
82 | id: null, | |
83 | ||
84 | /** | |
85 | * @property {Object} config | |
86 | * Configuration attributes passed into the constructor | |
87 | */ | |
88 | config: null, | |
89 | ||
90 | /** | |
91 | * @property {String} dragElId | |
92 | * The id of the element that will be dragged. By default this is same | |
93 | * as the linked element, but could be changed to another element. Ex: | |
94 | * Ext.dd.DDProxy | |
95 | * @private | |
96 | */ | |
97 | dragElId: null, | |
98 | ||
99 | /** | |
100 | * @property {String} handleElId | |
101 | * The ID of the element that initiates the drag operation. By default | |
102 | * this is the linked element, but could be changed to be a child of this | |
103 | * element. This lets us do things like only starting the drag when the | |
104 | * header element within the linked html element is clicked. | |
105 | * @private | |
106 | */ | |
107 | handleElId: null, | |
108 | ||
109 | /** | |
110 | * @property {Object} invalidHandleTypes | |
111 | * An object who's property names identify HTML tags to be considered invalid as drag handles. | |
112 | * A non-null property value identifies the tag as invalid. Defaults to the | |
113 | * following value which prevents drag operations from being initiated by `<a>` elements: | |
114 | * | |
115 | * { | |
116 | * A: "A" | |
117 | * } | |
118 | */ | |
119 | invalidHandleTypes: null, | |
120 | ||
121 | /** | |
122 | * @property {Object} invalidHandleIds | |
123 | * An object who's property names identify the IDs of elements to be considered invalid | |
124 | * as drag handles. A non-null property value identifies the ID as invalid. For example, | |
125 | * to prevent dragging from being initiated on element ID "foo", use: | |
126 | * | |
127 | * { | |
128 | * foo: true | |
129 | * } | |
130 | */ | |
131 | invalidHandleIds: null, | |
132 | ||
133 | /** | |
134 | * @property {String[]} invalidHandleClasses | |
135 | * An Array of CSS class names for elements to be considered in valid as drag handles. | |
136 | */ | |
137 | invalidHandleClasses: null, | |
138 | ||
139 | /** | |
140 | * @property {Number} startPageX | |
141 | * The linked element's absolute X position at the time the drag was | |
142 | * started | |
143 | * @private | |
144 | */ | |
145 | startPageX: 0, | |
146 | ||
147 | /** | |
148 | * @property {Number} startPageY | |
149 | * The linked element's absolute X position at the time the drag was | |
150 | * started | |
151 | * @private | |
152 | */ | |
153 | startPageY: 0, | |
154 | ||
155 | /** | |
156 | * @property {Object} groups | |
157 | * The group defines a logical collection of DragDrop objects that are | |
158 | * related. Instances only get events when interacting with other | |
159 | * DragDrop object in the same group. This lets us define multiple | |
160 | * groups using a single DragDrop subclass if we want. | |
161 | * | |
162 | * An object in the format {'group1':true, 'group2':true} | |
163 | */ | |
164 | groups: null, | |
165 | ||
166 | /** | |
167 | * @property {Boolean} locked | |
168 | * Individual drag/drop instances can be locked. This will prevent | |
169 | * onmousedown start drag. | |
170 | * @private | |
171 | */ | |
172 | locked: false, | |
173 | ||
174 | /** | |
175 | * Locks this instance | |
176 | */ | |
177 | lock: function() { | |
178 | this.locked = true; | |
179 | }, | |
180 | ||
181 | /** | |
182 | * @property {Boolean} moveOnly | |
183 | * When set to true, other DD objects in cooperating DDGroups do not receive | |
184 | * notification events when this DD object is dragged over them. | |
185 | */ | |
186 | moveOnly: false, | |
187 | ||
188 | /** | |
189 | * Unlocks this instace | |
190 | */ | |
191 | unlock: function() { | |
192 | this.locked = false; | |
193 | }, | |
194 | ||
195 | /** | |
196 | * @property {Boolean} isTarget | |
197 | * By default, all instances can be a drop target. This can be disabled by | |
198 | * setting isTarget to false. | |
199 | */ | |
200 | isTarget: true, | |
201 | ||
202 | /** | |
203 | * @property {Number[]} padding | |
204 | * The padding configured for this drag and drop object for calculating | |
205 | * the drop zone intersection with this object. | |
206 | * An array containing the 4 padding values: [top, right, bottom, left] | |
207 | */ | |
208 | padding: null, | |
209 | ||
210 | /** | |
211 | * @property _domRef | |
212 | * Cached reference to the linked element | |
213 | * @private | |
214 | */ | |
215 | _domRef: null, | |
216 | ||
217 | /** | |
218 | * @property __ygDragDrop | |
219 | * Internal typeof flag | |
220 | * @private | |
221 | */ | |
222 | __ygDragDrop: true, | |
223 | ||
224 | /** | |
225 | * @property {Boolean} constrainX | |
226 | * Set to true when horizontal contraints are applied | |
227 | * @private | |
228 | */ | |
229 | constrainX: false, | |
230 | ||
231 | /** | |
232 | * @property {Boolean} constrainY | |
233 | * Set to true when vertical contraints are applied | |
234 | * @private | |
235 | */ | |
236 | constrainY: false, | |
237 | ||
238 | /** | |
239 | * @property {Number} minX | |
240 | * The left constraint | |
241 | * @private | |
242 | */ | |
243 | minX: 0, | |
244 | ||
245 | /** | |
246 | * @property {Number} maxX | |
247 | * The right constraint | |
248 | * @private | |
249 | */ | |
250 | maxX: 0, | |
251 | ||
252 | /** | |
253 | * @property {Number} minY | |
254 | * The up constraint | |
255 | * @private | |
256 | */ | |
257 | minY: 0, | |
258 | ||
259 | /** | |
260 | * @property {Number} maxY | |
261 | * The down constraint | |
262 | * @private | |
263 | */ | |
264 | maxY: 0, | |
265 | ||
266 | /** | |
267 | * @property {Boolean} maintainOffset | |
268 | * Maintain offsets when we resetconstraints. Set to true when you want | |
269 | * the position of the element relative to its parent to stay the same | |
270 | * when the page changes | |
271 | */ | |
272 | maintainOffset: false, | |
273 | ||
274 | /** | |
275 | * @property {Number[]} xTicks | |
276 | * Array of pixel locations the element will snap to if we specified a | |
277 | * horizontal graduation/interval. This array is generated automatically | |
278 | * when you define a tick interval. | |
279 | */ | |
280 | xTicks: null, | |
281 | ||
282 | /** | |
283 | * @property {Number[]} yTicks | |
284 | * Array of pixel locations the element will snap to if we specified a | |
285 | * vertical graduation/interval. This array is generated automatically | |
286 | * when you define a tick interval. | |
287 | */ | |
288 | yTicks: null, | |
289 | ||
290 | /** | |
291 | * @property {Boolean} primaryButtonOnly | |
292 | * By default the drag and drop instance will only respond to the primary | |
293 | * button click (left button for a right-handed mouse). Set to true to | |
294 | * allow drag and drop to start with any mouse click that is propogated | |
295 | * by the browser | |
296 | */ | |
297 | primaryButtonOnly: true, | |
298 | ||
299 | /** | |
300 | * @property {Boolean} available | |
301 | * The available property is false until the linked dom element is accessible. | |
302 | */ | |
303 | available: false, | |
304 | ||
305 | /** | |
306 | * @property {Boolean} hasOuterHandles | |
307 | * By default, drags can only be initiated if the mousedown occurs in the | |
308 | * region the linked element is. This is done in part to work around a | |
309 | * bug in some browsers that mis-report the mousedown if the previous | |
310 | * mouseup happened outside of the window. This property is set to true | |
311 | * if outer handles are defined. Defaults to false. | |
312 | */ | |
313 | hasOuterHandles: false, | |
314 | ||
315 | triggerEvent: 'mousedown', | |
316 | ||
317 | /** | |
318 | * Code that executes immediately before the startDrag event | |
319 | * @private | |
320 | */ | |
321 | b4StartDrag: function(x, y) { }, | |
322 | ||
323 | /** | |
324 | * Abstract method called after a drag/drop object is clicked | |
325 | * and the drag or mousedown time thresholds have beeen met. | |
326 | * @param {Number} x X click location | |
327 | * @param {Number} y Y click location | |
328 | */ | |
329 | startDrag: function(x, y) { /* override this */ }, | |
330 | ||
331 | /** | |
332 | * Code that executes immediately before the onDrag event | |
333 | * @private | |
334 | */ | |
335 | b4Drag: function(e) { }, | |
336 | ||
337 | /** | |
338 | * Abstract method called during the onMouseMove event while dragging an | |
339 | * object. | |
340 | * @param {Event} e the mousemove event | |
341 | */ | |
342 | onDrag: function(e) { /* override this */ }, | |
343 | ||
344 | /** | |
345 | * Abstract method called when this element fist begins hovering over | |
346 | * another DragDrop obj | |
347 | * @param {Event} e the mousemove event | |
348 | * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element | |
349 | * id this is hovering over. In INTERSECT mode, an array of one or more | |
350 | * dragdrop items being hovered over. | |
351 | */ | |
352 | onDragEnter: function(e, id) { /* override this */ }, | |
353 | ||
354 | /** | |
355 | * Code that executes immediately before the onDragOver event | |
356 | * @private | |
357 | */ | |
358 | b4DragOver: function(e) { }, | |
359 | ||
360 | /** | |
361 | * Abstract method called when this element is hovering over another | |
362 | * DragDrop obj | |
363 | * @param {Event} e the mousemove event | |
364 | * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element | |
365 | * id this is hovering over. In INTERSECT mode, an array of dd items | |
366 | * being hovered over. | |
367 | */ | |
368 | onDragOver: function(e, id) { /* override this */ }, | |
369 | ||
370 | /** | |
371 | * Code that executes immediately before the onDragOut event | |
372 | * @private | |
373 | */ | |
374 | b4DragOut: function(e) { }, | |
375 | ||
376 | /** | |
377 | * Abstract method called when we are no longer hovering over an element | |
378 | * @param {Event} e the mousemove event | |
379 | * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element | |
380 | * id this was hovering over. In INTERSECT mode, an array of dd items | |
381 | * that the mouse is no longer over. | |
382 | */ | |
383 | onDragOut: function(e, id) { /* override this */ }, | |
384 | ||
385 | /** | |
386 | * Code that executes immediately before the onDragDrop event | |
387 | * @private | |
388 | */ | |
389 | b4DragDrop: function(e) { }, | |
390 | ||
391 | /** | |
392 | * Abstract method called when this item is dropped on another DragDrop | |
393 | * obj | |
394 | * @param {Event} e the mouseup event | |
395 | * @param {String/Ext.dd.DragDrop[]} id In POINT mode, the element | |
396 | * id this was dropped on. In INTERSECT mode, an array of dd items this | |
397 | * was dropped on. | |
398 | */ | |
399 | onDragDrop: function(e, id) { /* override this */ }, | |
400 | ||
401 | /** | |
402 | * Abstract method called when this item is dropped on an area with no | |
403 | * drop target | |
404 | * @param {Event} e the mouseup event | |
405 | */ | |
406 | onInvalidDrop: function(e) { /* override this */ }, | |
407 | ||
408 | /** | |
409 | * Code that executes immediately before the endDrag event | |
410 | * @private | |
411 | */ | |
412 | b4EndDrag: function(e) { }, | |
413 | ||
414 | /** | |
415 | * Called when we are done dragging the object | |
416 | * @param {Event} e the mouseup event | |
417 | */ | |
418 | endDrag: function(e) { /* override this */ }, | |
419 | ||
420 | /** | |
421 | * Code executed immediately before the onMouseDown event | |
422 | * @param {Event} e the mousedown event | |
423 | * @private | |
424 | */ | |
425 | b4MouseDown: function(e) { }, | |
426 | ||
427 | /** | |
428 | * Called when a drag/drop obj gets a mousedown | |
429 | * @param {Event} e the mousedown event | |
430 | */ | |
431 | onMouseDown: function(e) { /* override this */ }, | |
432 | ||
433 | /** | |
434 | * Called when a drag/drop obj gets a mouseup | |
435 | * @param {Event} e the mouseup event | |
436 | */ | |
437 | onMouseUp: function(e) { /* override this */ }, | |
438 | ||
439 | /** | |
440 | * Override the onAvailable method to do what is needed after the initial | |
441 | * position was determined. | |
442 | */ | |
443 | onAvailable: function() { }, | |
444 | ||
445 | /** | |
446 | * @property {Object} defaultPadding | |
447 | * Provides default constraint padding to "constrainTo" elements. | |
448 | */ | |
449 | defaultPadding: { | |
450 | left: 0, | |
451 | right: 0, | |
452 | top: 0, | |
453 | bottom: 0 | |
454 | }, | |
455 | ||
456 | /** | |
457 | * Initializes the drag drop object's constraints to restrict movement to a certain element. | |
458 | * | |
459 | * Usage: | |
460 | * | |
461 | * var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest", | |
462 | * { dragElId: "existingProxyDiv" }); | |
463 | * dd.startDrag = function(){ | |
464 | * this.constrainTo("parent-id"); | |
465 | * }; | |
466 | * | |
467 | * Or you can initalize it using the {@link Ext.dom.Element} object: | |
468 | * | |
469 | * Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, { | |
470 | * startDrag : function(){ | |
471 | * this.constrainTo("parent-id"); | |
472 | * } | |
473 | * }); | |
474 | * | |
475 | * @param {String/HTMLElement/Ext.dom.Element} constrainTo The element or element ID | |
476 | * to constrain to. | |
477 | * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" | |
478 | * of the constraints, and can be either a number for symmetrical padding (4 would be equal to | |
479 | * `{ left: 4, right: 4, top: 4, bottom: 4 }`) or an object containing the sides to pad. | |
480 | * For example: `{ right: 10, bottom: 10 }` | |
481 | * @param {Boolean} inContent (optional) Constrain the draggable in the content box | |
482 | * of the element (inside padding and borders) | |
483 | */ | |
484 | constrainTo: function(constrainTo, pad, inContent) { | |
485 | if (Ext.isNumber(pad)) { | |
486 | pad = { left: pad, right: pad, top: pad, bottom: pad }; | |
487 | } | |
488 | ||
489 | pad = pad || this.defaultPadding; | |
490 | ||
491 | // eslint-disable-next-line vars-on-top | |
492 | var ddBox = Ext.get(this.getEl()).getBox(), | |
493 | constrainEl = Ext.get(constrainTo), | |
494 | s = constrainEl.getScroll(), | |
495 | constrainDom = constrainEl.dom, | |
496 | c, xy, topSpace, leftSpace; | |
497 | ||
498 | if (constrainDom === document.body) { | |
499 | c = { | |
500 | x: s.left, | |
501 | y: s.top, | |
502 | width: Ext.Element.getViewportWidth(), | |
503 | height: Ext.Element.getViewportHeight() | |
504 | }; | |
505 | } | |
506 | else { | |
507 | xy = constrainEl.getXY(); | |
508 | c = { | |
509 | x: xy[0], | |
510 | y: xy[1], | |
511 | width: constrainDom.clientWidth, | |
512 | height: constrainDom.clientHeight | |
513 | }; | |
514 | } | |
515 | ||
516 | topSpace = ddBox.y - c.y; | |
517 | leftSpace = ddBox.x - c.x; | |
518 | ||
519 | this.resetConstraints(); | |
520 | ||
521 | this.setXConstraint( | |
522 | leftSpace - (pad.left || 0), // left | |
523 | c.width - leftSpace - ddBox.width - (pad.right || 0), // right | |
524 | this.xTickSize | |
525 | ); | |
526 | ||
527 | this.setYConstraint( | |
528 | topSpace - (pad.top || 0), // top | |
529 | c.height - topSpace - ddBox.height - (pad.bottom || 0), // bottom | |
530 | this.yTickSize | |
531 | ); | |
532 | }, | |
533 | ||
534 | /** | |
535 | * Returns a reference to the linked element | |
536 | * @return {HTMLElement} the html element | |
537 | */ | |
538 | getEl: function() { | |
539 | if (!this._domRef) { | |
540 | this._domRef = Ext.getDom(this.id); | |
541 | } | |
542 | ||
543 | return this._domRef; | |
544 | }, | |
545 | ||
546 | /** | |
547 | * Returns a reference to the actual element to drag. By default this is | |
548 | * the same as the html element, but it can be assigned to another | |
549 | * element. An example of this can be found in Ext.dd.DDProxy | |
550 | * @return {HTMLElement} the html element | |
551 | */ | |
552 | getDragEl: function() { | |
553 | return Ext.getDom(this.dragElId); | |
554 | }, | |
555 | ||
556 | /** | |
557 | * Sets up the DragDrop object. Must be called in the constructor of any | |
558 | * Ext.dd.DragDrop subclass | |
559 | * @param {String} id the id of the linked element | |
560 | * @param {String} sGroup the group of related items | |
561 | * @param {Object} config configuration attributes | |
562 | */ | |
563 | init: function(id, sGroup, config) { | |
564 | var me = this; | |
565 | ||
566 | me.el = me.el || Ext.get(id); // subclass may have already set "el" | |
567 | ||
568 | me.initTarget(id, sGroup, config); | |
569 | Ext.get(me.id).on(me.triggerEvent, me.handleMouseDown, me); | |
570 | ||
571 | // Longpress fires contextmenu in some touch platforms, so if we are using longpress | |
572 | // inhibit the contextmenu on this element | |
573 | if (Ext.supports.Touch && me.triggerEvent === 'longpress') { | |
574 | Ext.get(me.id).swallowEvent('contextmenu', true); | |
575 | } | |
576 | }, | |
577 | ||
578 | /** | |
579 | * Initializes Targeting functionality only... the object does not | |
580 | * get a mousedown handler. | |
581 | * @param {String} id the id of the linked element | |
582 | * @param {String} sGroup the group of related items | |
583 | * @param {Object} config configuration attributes | |
584 | */ | |
585 | initTarget: function(id, sGroup, config) { | |
586 | // configuration attributes | |
587 | this.config = config || {}; | |
588 | ||
589 | // create a local reference to the drag and drop manager | |
590 | this.DDMInstance = Ext.dd.DragDropManager; | |
591 | // initialize the groups array | |
592 | this.groups = {}; | |
593 | ||
594 | // assume that we have an element reference instead of an id if the | |
595 | // parameter is not a string | |
596 | if (typeof id !== "string") { | |
597 | id = Ext.id(id); | |
598 | } | |
599 | ||
600 | // set the id | |
601 | this.id = id; | |
602 | ||
603 | // add to an interaction group | |
604 | this.addToGroup((sGroup) ? sGroup : "default"); | |
605 | ||
606 | // We don't want to register this as the handle with the manager | |
607 | // so we just set the id rather than calling the setter. | |
608 | this.handleElId = id; | |
609 | ||
610 | // the linked element is the element that gets dragged by default | |
611 | this.setDragElId(id); | |
612 | ||
613 | // by default, clicked anchors will not start drag operations. | |
614 | this.invalidHandleTypes = { A: "A" }; | |
615 | this.invalidHandleIds = {}; | |
616 | this.invalidHandleClasses = []; | |
617 | ||
618 | this.applyConfig(); | |
619 | ||
620 | this.handleOnAvailable(); | |
621 | }, | |
622 | ||
623 | /** | |
624 | * Applies the configuration parameters that were passed into the constructor. | |
625 | * This is supposed to happen at each level through the inheritance chain. So | |
626 | * a DDProxy implentation will execute apply config on DDProxy, DD, and | |
627 | * DragDrop in order to get all of the parameters that are available in | |
628 | * each object. | |
629 | */ | |
630 | applyConfig: function() { | |
631 | ||
632 | // configurable properties: | |
633 | // padding, isTarget, maintainOffset, primaryButtonOnly | |
634 | this.padding = this.config.padding || [0, 0, 0, 0]; | |
635 | this.isTarget = (this.config.isTarget !== false); | |
636 | this.maintainOffset = (this.config.maintainOffset); | |
637 | this.primaryButtonOnly = (this.config.primaryButtonOnly !== false); | |
638 | }, | |
639 | ||
640 | /** | |
641 | * Executed when the linked element is available | |
642 | * @private | |
643 | */ | |
644 | handleOnAvailable: function() { | |
645 | this.available = true; | |
646 | this.resetConstraints(); | |
647 | this.onAvailable(); | |
648 | }, | |
649 | ||
650 | /** | |
651 | * Configures the padding for the target zone in px. Effectively expands | |
652 | * (or reduces) the virtual object size for targeting calculations. | |
653 | * Supports css-style shorthand; if only one parameter is passed, all sides | |
654 | * will have that padding, and if only two are passed, the top and bottom | |
655 | * will have the first param, the left and right the second. | |
656 | * @param {Number} iTop Top pad | |
657 | * @param {Number} iRight Right pad | |
658 | * @param {Number} iBot Bot pad | |
659 | * @param {Number} iLeft Left pad | |
660 | */ | |
661 | setPadding: function(iTop, iRight, iBot, iLeft) { | |
662 | // this.padding = [iLeft, iRight, iTop, iBot]; | |
663 | if (!iRight && 0 !== iRight) { | |
664 | this.padding = [iTop, iTop, iTop, iTop]; | |
665 | } | |
666 | else if (!iBot && 0 !== iBot) { | |
667 | this.padding = [iTop, iRight, iTop, iRight]; | |
668 | } | |
669 | else { | |
670 | this.padding = [iTop, iRight, iBot, iLeft]; | |
671 | } | |
672 | }, | |
673 | ||
674 | /** | |
675 | * Stores the initial placement of the linked element. | |
676 | * @param {Number} diffX the X offset, default 0 | |
677 | * @param {Number} diffY the Y offset, default 0 | |
678 | */ | |
679 | setInitPosition: function(diffX, diffY) { | |
680 | var el = this.getEl(), | |
681 | dx, dy, p; | |
682 | ||
683 | if (!this.DDMInstance.verifyEl(el)) { | |
684 | return; | |
685 | } | |
686 | ||
687 | dx = diffX || 0; | |
688 | dy = diffY || 0; | |
689 | ||
690 | p = Ext.fly(el).getXY(); | |
691 | ||
692 | this.initPageX = p[0] - dx; | |
693 | this.initPageY = p[1] - dy; | |
694 | ||
695 | this.lastPageX = p[0]; | |
696 | this.lastPageY = p[1]; | |
697 | ||
698 | this.setStartPosition(p); | |
699 | }, | |
700 | ||
701 | /** | |
702 | * Sets the start position of the element. This is set when the obj | |
703 | * is initialized, the reset when a drag is started. | |
704 | * @param pos current position (from previous lookup) | |
705 | * @private | |
706 | */ | |
707 | setStartPosition: function(pos) { | |
708 | var p = pos || Ext.fly(this.getEl()).getXY(); | |
709 | ||
710 | this.deltaSetXY = null; | |
711 | ||
712 | this.startPageX = p[0]; | |
713 | this.startPageY = p[1]; | |
714 | }, | |
715 | ||
716 | /** | |
717 | * Adds this instance to a group of related drag/drop objects. All | |
718 | * instances belong to at least one group, and can belong to as many | |
719 | * groups as needed. | |
720 | * @param {String} sGroup the name of the group | |
721 | */ | |
722 | addToGroup: function(sGroup) { | |
723 | this.groups[sGroup] = true; | |
724 | this.DDMInstance.regDragDrop(this, sGroup); | |
725 | }, | |
726 | ||
727 | /** | |
728 | * Removes this instance from the supplied interaction group | |
729 | * @param {String} sGroup The group to drop | |
730 | */ | |
731 | removeFromGroup: function(sGroup) { | |
732 | if (this.groups[sGroup]) { | |
733 | delete this.groups[sGroup]; | |
734 | } | |
735 | ||
736 | this.DDMInstance.removeDDFromGroup(this, sGroup); | |
737 | }, | |
738 | ||
739 | /** | |
740 | * Allows you to specify that an element other than the linked element | |
741 | * will be moved with the cursor during a drag | |
742 | * @param {String} id the id of the element that will be used to initiate the drag | |
743 | */ | |
744 | setDragElId: function(id) { | |
745 | this.dragElId = id; | |
746 | }, | |
747 | ||
748 | /** | |
749 | * Allows you to specify a child of the linked element that should be | |
750 | * used to initiate the drag operation. An example of this would be if | |
751 | * you have a content div with text and links. Clicking anywhere in the | |
752 | * content area would normally start the drag operation. Use this method | |
753 | * to specify that an element inside of the content div is the element | |
754 | * that starts the drag operation. | |
755 | * @param {String} id the id of the element that will be used to | |
756 | * initiate the drag. | |
757 | */ | |
758 | setHandleElId: function(id) { | |
759 | if (typeof id !== "string") { | |
760 | id = Ext.id(id); | |
761 | } | |
762 | ||
763 | this.handleElId = id; | |
764 | this.DDMInstance.regHandle(this.id, id); | |
765 | }, | |
766 | ||
767 | /** | |
768 | * Allows you to set an element outside of the linked element as a drag | |
769 | * handle | |
770 | * @param {String} id the id of the element that will be used to initiate the drag | |
771 | */ | |
772 | setOuterHandleElId: function(id) { | |
773 | if (typeof id !== "string") { | |
774 | id = Ext.id(id); | |
775 | } | |
776 | ||
777 | Ext.get(id).on(this.triggerEvent, this.handleMouseDown, this); | |
778 | this.setHandleElId(id); | |
779 | ||
780 | this.hasOuterHandles = true; | |
781 | }, | |
782 | ||
783 | /** | |
784 | * Removes all drag and drop hooks for this element | |
785 | */ | |
786 | unreg: function() { | |
787 | var me = this, | |
788 | el; | |
789 | ||
790 | if (me._domRef) { | |
791 | el = Ext.fly(me.id); | |
792 | ||
793 | if (el) { | |
794 | el.un(me.triggerEvent, me.handleMouseDown, me); | |
795 | } | |
796 | } | |
797 | ||
798 | me._domRef = null; | |
799 | me.DDMInstance._remove(me, me.autoGroup); | |
800 | }, | |
801 | ||
802 | destroy: function() { | |
803 | this.unreg(); | |
804 | this.callParent(); | |
805 | }, | |
806 | ||
807 | /** | |
808 | * Returns true if this instance is locked, or the drag drop mgr is locked | |
809 | * (meaning that all drag/drop is disabled on the page.) | |
810 | * @return {Boolean} true if this obj or all drag/drop is locked, else | |
811 | * false | |
812 | */ | |
813 | isLocked: function() { | |
814 | return (this.DDMInstance.isLocked() || this.locked); | |
815 | }, | |
816 | ||
817 | /** | |
818 | * Called when this object is clicked | |
819 | * @param {Event} e | |
820 | * @param {Ext.dd.DragDrop} oDD the clicked dd object (this dd obj) | |
821 | * @private | |
822 | */ | |
823 | handleMouseDown: function(e, oDD) { | |
824 | var me = this; | |
825 | ||
826 | if ((me.primaryButtonOnly && e.button) || me.isLocked()) { | |
827 | return; | |
828 | } | |
829 | ||
830 | me.DDMInstance.refreshCache(me.groups); | |
831 | ||
832 | if (me.hasOuterHandles || me.DDMInstance.isOverTarget(e.getPoint(), me)) { | |
833 | if (me.clickValidator(e)) { | |
834 | // set the initial element position | |
835 | me.setStartPosition(); | |
836 | me.b4MouseDown(e); | |
837 | me.onMouseDown(e); | |
838 | ||
839 | me.DDMInstance.handleMouseDown(e, me); | |
840 | ||
841 | me.DDMInstance.stopEvent(e); | |
842 | } | |
843 | } | |
844 | }, | |
845 | ||
846 | clickValidator: function(e) { | |
847 | var target = e.getTarget(); | |
848 | ||
849 | return (this.isValidHandleChild(target) && | |
850 | (this.id === this.handleElId || | |
851 | this.DDMInstance.handleWasClicked(target, this.id))); | |
852 | }, | |
853 | ||
854 | /** | |
855 | * Allows you to specify a tag name that should not start a drag operation | |
856 | * when clicked. This is designed to facilitate embedding links within a | |
857 | * drag handle that do something other than start the drag. | |
858 | * @method addInvalidHandleType | |
859 | * @param {String} tagName the type of element to exclude | |
860 | */ | |
861 | addInvalidHandleType: function(tagName) { | |
862 | var type = tagName.toUpperCase(); | |
863 | ||
864 | this.invalidHandleTypes[type] = type; | |
865 | }, | |
866 | ||
867 | /** | |
868 | * Lets you to specify an element id for a child of a drag handle | |
869 | * that should not initiate a drag | |
870 | * @method addInvalidHandleId | |
871 | * @param {String} id the element id of the element you wish to ignore | |
872 | */ | |
873 | addInvalidHandleId: function(id) { | |
874 | if (typeof id !== "string") { | |
875 | id = Ext.id(id); | |
876 | } | |
877 | ||
878 | this.invalidHandleIds[id] = id; | |
879 | }, | |
880 | ||
881 | /** | |
882 | * Lets you specify a css class of elements that will not initiate a drag | |
883 | * @param {String} cssClass the class of the elements you wish to ignore | |
884 | */ | |
885 | addInvalidHandleClass: function(cssClass) { | |
886 | this.invalidHandleClasses.push(cssClass); | |
887 | }, | |
888 | ||
889 | /** | |
890 | * Unsets an excluded tag name set by addInvalidHandleType | |
891 | * @param {String} tagName the type of element to unexclude | |
892 | */ | |
893 | removeInvalidHandleType: function(tagName) { | |
894 | var type = tagName.toUpperCase(); | |
895 | ||
896 | // this.invalidHandleTypes[type] = null; | |
897 | delete this.invalidHandleTypes[type]; | |
898 | }, | |
899 | ||
900 | /** | |
901 | * Unsets an invalid handle id | |
902 | * @param {String} id the id of the element to re-enable | |
903 | */ | |
904 | removeInvalidHandleId: function(id) { | |
905 | if (typeof id !== "string") { | |
906 | id = Ext.id(id); | |
907 | } | |
908 | ||
909 | delete this.invalidHandleIds[id]; | |
910 | }, | |
911 | ||
912 | /** | |
913 | * Unsets an invalid css class | |
914 | * @param {String} cssClass the class of the element(s) you wish to | |
915 | * re-enable | |
916 | */ | |
917 | removeInvalidHandleClass: function(cssClass) { | |
918 | var invalidHandleClasses = this.invalidHandleClasses, | |
919 | len = invalidHandleClasses.length, | |
920 | i; | |
921 | ||
922 | for (i = 0; i < len; ++i) { | |
923 | if (invalidHandleClasses[i] === cssClass) { | |
924 | delete invalidHandleClasses[i]; | |
925 | } | |
926 | } | |
927 | }, | |
928 | ||
929 | /** | |
930 | * Checks the tag exclusion list to see if this click should be ignored | |
931 | * @param {HTMLElement} node the HTMLElement to evaluate | |
932 | * @return {Boolean} true if this is a valid tag type, false if not | |
933 | */ | |
934 | isValidHandleChild: function(node) { | |
935 | ||
936 | var valid = true, | |
937 | nodeName, | |
938 | i, len; | |
939 | ||
940 | // var n = (node.nodeName == "#text") ? node.parentNode : node; | |
941 | try { | |
942 | nodeName = node.nodeName.toUpperCase(); | |
943 | } | |
944 | catch (e) { | |
945 | nodeName = node.nodeName; | |
946 | } | |
947 | ||
948 | valid = valid && !this.invalidHandleTypes[nodeName]; | |
949 | valid = valid && !this.invalidHandleIds[node.id]; | |
950 | ||
951 | for (i = 0, len = this.invalidHandleClasses.length; valid && i < len; ++i) { | |
952 | valid = !Ext.fly(node).hasCls(this.invalidHandleClasses[i]); | |
953 | } | |
954 | ||
955 | return valid; | |
956 | ||
957 | }, | |
958 | ||
959 | /** | |
960 | * Creates the array of horizontal tick marks if an interval was specified | |
961 | * in setXConstraint(). | |
962 | * @private | |
963 | */ | |
964 | setXTicks: function(iStartX, iTickSize) { | |
965 | var tickMap = {}, | |
966 | i; | |
967 | ||
968 | this.xTicks = []; | |
969 | this.xTickSize = iTickSize; | |
970 | ||
971 | for (i = this.initPageX; i >= this.minX; i = i - iTickSize) { | |
972 | if (!tickMap[i]) { | |
973 | this.xTicks[this.xTicks.length] = i; | |
974 | tickMap[i] = true; | |
975 | } | |
976 | } | |
977 | ||
978 | for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) { | |
979 | if (!tickMap[i]) { | |
980 | this.xTicks[this.xTicks.length] = i; | |
981 | tickMap[i] = true; | |
982 | } | |
983 | } | |
984 | ||
985 | Ext.Array.sort(this.xTicks, this.DDMInstance.numericSort); | |
986 | }, | |
987 | ||
988 | /** | |
989 | * Creates the array of vertical tick marks if an interval was specified in | |
990 | * setYConstraint(). | |
991 | * @private | |
992 | */ | |
993 | setYTicks: function(iStartY, iTickSize) { | |
994 | var tickMap = {}, | |
995 | i; | |
996 | ||
997 | this.yTicks = []; | |
998 | this.yTickSize = iTickSize; | |
999 | ||
1000 | for (i = this.initPageY; i >= this.minY; i = i - iTickSize) { | |
1001 | if (!tickMap[i]) { | |
1002 | this.yTicks[this.yTicks.length] = i; | |
1003 | tickMap[i] = true; | |
1004 | } | |
1005 | } | |
1006 | ||
1007 | for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) { | |
1008 | if (!tickMap[i]) { | |
1009 | this.yTicks[this.yTicks.length] = i; | |
1010 | tickMap[i] = true; | |
1011 | } | |
1012 | } | |
1013 | ||
1014 | Ext.Array.sort(this.yTicks, this.DDMInstance.numericSort); | |
1015 | }, | |
1016 | ||
1017 | /** | |
1018 | * By default, the element can be dragged any place on the screen. Use | |
1019 | * this method to limit the horizontal travel of the element. Pass in | |
1020 | * 0,0 for the parameters if you want to lock the drag to the y axis. | |
1021 | * @param {Number} iLeft the number of pixels the element can move to the left | |
1022 | * @param {Number} iRight the number of pixels the element can move to the | |
1023 | * right | |
1024 | * @param {Number} iTickSize (optional) parameter for specifying that the | |
1025 | * element should move iTickSize pixels at a time. | |
1026 | */ | |
1027 | setXConstraint: function(iLeft, iRight, iTickSize) { | |
1028 | this.leftConstraint = iLeft; | |
1029 | this.rightConstraint = iRight; | |
1030 | ||
1031 | this.minX = this.initPageX - iLeft; | |
1032 | this.maxX = this.initPageX + iRight; | |
1033 | ||
1034 | if (iTickSize) { | |
1035 | this.setXTicks(this.initPageX, iTickSize); | |
1036 | } | |
1037 | ||
1038 | this.constrainX = true; | |
1039 | }, | |
1040 | ||
1041 | /** | |
1042 | * Clears any constraints applied to this instance. Also clears ticks | |
1043 | * since they can't exist independent of a constraint at this time. | |
1044 | */ | |
1045 | clearConstraints: function() { | |
1046 | this.constrainX = false; | |
1047 | this.constrainY = false; | |
1048 | this.clearTicks(); | |
1049 | }, | |
1050 | ||
1051 | /** | |
1052 | * Clears any tick interval defined for this instance | |
1053 | */ | |
1054 | clearTicks: function() { | |
1055 | this.xTicks = null; | |
1056 | this.yTicks = null; | |
1057 | this.xTickSize = 0; | |
1058 | this.yTickSize = 0; | |
1059 | }, | |
1060 | ||
1061 | /** | |
1062 | * By default, the element can be dragged any place on the screen. Set | |
1063 | * this to limit the vertical travel of the element. Pass in 0,0 for the | |
1064 | * parameters if you want to lock the drag to the x axis. | |
1065 | * @param {Number} iUp the number of pixels the element can move up | |
1066 | * @param {Number} iDown the number of pixels the element can move down | |
1067 | * @param {Number} iTickSize (optional) parameter for specifying that the | |
1068 | * element should move iTickSize pixels at a time. | |
1069 | */ | |
1070 | setYConstraint: function(iUp, iDown, iTickSize) { | |
1071 | this.topConstraint = iUp; | |
1072 | this.bottomConstraint = iDown; | |
1073 | ||
1074 | this.minY = this.initPageY - iUp; | |
1075 | this.maxY = this.initPageY + iDown; | |
1076 | ||
1077 | if (iTickSize) { | |
1078 | this.setYTicks(this.initPageY, iTickSize); | |
1079 | } | |
1080 | ||
1081 | this.constrainY = true; | |
1082 | ||
1083 | }, | |
1084 | ||
1085 | /** | |
1086 | * Must be called if you manually reposition a dd element. | |
1087 | * @param {Boolean} maintainOffset | |
1088 | */ | |
1089 | resetConstraints: function() { | |
1090 | var dx, dy; | |
1091 | ||
1092 | // Maintain offsets if necessary | |
1093 | if (this.initPageX || this.initPageX === 0) { | |
1094 | // figure out how much this thing has moved | |
1095 | dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0; | |
1096 | dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0; | |
1097 | ||
1098 | this.setInitPosition(dx, dy); | |
1099 | ||
1100 | // This is the first time we have detected the element's position | |
1101 | } | |
1102 | else { | |
1103 | this.setInitPosition(); | |
1104 | } | |
1105 | ||
1106 | if (this.constrainX) { | |
1107 | this.setXConstraint(this.leftConstraint, | |
1108 | this.rightConstraint, | |
1109 | this.xTickSize); | |
1110 | } | |
1111 | ||
1112 | if (this.constrainY) { | |
1113 | this.setYConstraint(this.topConstraint, | |
1114 | this.bottomConstraint, | |
1115 | this.yTickSize); | |
1116 | } | |
1117 | }, | |
1118 | ||
1119 | /** | |
1120 | * Normally the drag element is moved pixel by pixel, but we can specify | |
1121 | * that it move a number of pixels at a time. This method resolves the | |
1122 | * location when we have it set up like this. | |
1123 | * @param {Number} val where we want to place the object | |
1124 | * @param {Number[]} tickArray sorted array of valid points | |
1125 | * @return {Number} the closest tick | |
1126 | * @private | |
1127 | */ | |
1128 | getTick: function(val, tickArray) { | |
1129 | var i, len, next, diff1, diff2; | |
1130 | ||
1131 | if (!tickArray) { | |
1132 | // If tick interval is not defined, it is effectively 1 pixel, | |
1133 | // so we return the value passed to us. | |
1134 | return val; | |
1135 | } | |
1136 | else if (tickArray[0] >= val) { | |
1137 | // The value is lower than the first tick, so we return the first | |
1138 | // tick. | |
1139 | return tickArray[0]; | |
1140 | } | |
1141 | else { | |
1142 | for (i = 0, len = tickArray.length; i < len; ++i) { | |
1143 | next = i + 1; | |
1144 | ||
1145 | if (tickArray[next] && tickArray[next] >= val) { | |
1146 | diff1 = val - tickArray[i]; | |
1147 | diff2 = tickArray[next] - val; | |
1148 | ||
1149 | return (diff2 > diff1) ? tickArray[i] : tickArray[next]; | |
1150 | } | |
1151 | } | |
1152 | ||
1153 | // The value is larger than the last tick, so we return the last | |
1154 | // tick. | |
1155 | return tickArray[tickArray.length - 1]; | |
1156 | } | |
1157 | }, | |
1158 | ||
1159 | /** | |
1160 | * toString method | |
1161 | * @return {String} string representation of the dd obj | |
1162 | */ | |
1163 | toString: function() { | |
1164 | return ("DragDrop " + this.id); | |
1165 | } | |
1166 | }); |