]>
git.proxmox.com Git - extjs.git/blob - extjs/examples/classic/calendar/src/dd/DropZone.js
2 * Internal drop zone implementation for the calendar components. This provides base functionality
3 * and is primarily for the month view -- DayViewDD adds day/week view-specific functionality.
5 Ext
.define('Ext.calendar.dd.DropZone', {
6 extend
: 'Ext.dd.DropZone',
9 'Ext.calendar.util.Date',
10 'Ext.calendar.data.EventMappings'
13 ddGroup
: 'CalendarDD',
14 eventSelector
: '.ext-cal-evt',
19 getTargetFromEvent: function(e
) {
20 var dragOffset
= this.dragOffset
|| 0,
21 y
= e
.getY() - dragOffset
,
22 d
= this.view
.getDayAt(e
.getX(), y
);
24 return d
.el
? d
: null;
27 onNodeOver: function(n
, dd
, e
, data
) {
28 var D
= Ext
.calendar
.util
.Date
,
29 start
= data
.type
== 'eventdrag' ? n
.date
: D
.min(data
.start
, n
.date
),
30 end
= data
.type
== 'eventdrag' ? D
.add(n
.date
, {days
: D
.diffDays(data
.eventStart
, data
.eventEnd
)}) :
31 D
.max(data
.start
, n
.date
);
33 if (!this.dragStartDate
|| !this.dragEndDate
|| (D
.diffDays(start
, this.dragStartDate
) != 0) || (D
.diffDays(end
, this.dragEndDate
) != 0)) {
34 this.dragStartDate
= start
;
35 this.dragEndDate
= D
.add(end
, {days
: 1, millis
: -1, clearTime
: true});
36 this.shim(start
, end
);
38 var range
= Ext
.Date
.format(start
, 'n/j');
39 if (D
.diffDays(start
, end
) > 0) {
40 range
+= '-' + Ext
.Date
.format(end
, 'n/j');
42 var msg
= Ext
.util
.Format
.format(data
.type
== 'eventdrag' ? this.moveText
: this.createText
, range
);
43 data
.proxy
.updateMsg(msg
);
45 return this.dropAllowed
;
48 shim: function(start
, end
) {
50 this.DDMInstance
.notifyOccluded
= true;
51 var dt
= Ext
.Date
.clone(start
),
55 D
= Ext
.calendar
.util
.Date
,
56 cnt
= D
.diffDays(dt
, end
) + 1;
61 shim
.isActive
= false;
67 var dayEl
= this.view
.getDayEl(dt
);
69 // if the date is not in the current view ignore it (this
70 // can happen when an event is dragged to the end of the
71 // month so that it ends outside the view)
73 var wk
= this.view
.getWeekIndex(dt
);
74 shim
= this.shims
[wk
];
77 shim
= this.createShim();
78 this.shims
[wk
] = shim
;
80 if (wk
!= this.currWeek
) {
81 shim
.boxInfo
= dayEl
.getBox();
86 shim
.boxInfo
.right
= box
.right
;
87 shim
.boxInfo
.width
= box
.right
- shim
.boxInfo
.x
;
91 dt
= D
.add(dt
, {days
: 1});
94 Ext
.each(this.shims
, function(shim
) {
98 shim
.setBox(shim
.boxInfo
);
100 else if (shim
.isVisible()) {
107 createShim: function() {
109 this.shimCt
= Ext
.get('ext-dd-shim-ct');
111 this.shimCt
= document
.createElement('div');
112 this.shimCt
.id
= 'ext-dd-shim-ct';
113 Ext
.getBody().appendChild(this.shimCt
);
116 var el
= document
.createElement('div');
117 el
.className
= 'ext-dd-shim';
118 this.shimCt
.appendChild(el
);
122 el
.setVisibilityMode(2);
127 clearShims: function() {
134 this.DDMInstance
.notifyOccluded
= false;
137 onContainerOver: function(dd
, e
, data
) {
138 return this.dropAllowed
;
141 onCalendarDragComplete: function() {
142 delete this.dragStartDate
;
143 delete this.dragEndDate
;
147 onNodeDrop: function(n
, dd
, e
, data
) {
149 if (data
.type
== 'eventdrag') {
150 var rec
= this.view
.getEventRecordFromEl(data
.ddel
),
151 dt
= Ext
.calendar
.util
.Date
.copyTime(rec
.data
[Ext
.calendar
.data
.EventMappings
.StartDate
.name
], n
.date
);
153 this.view
.onEventDrop(rec
, dt
);
154 this.onCalendarDragComplete();
157 if (data
.type
== 'caldrag') {
158 this.view
.onCalendarEndDrag(this.dragStartDate
, this.dragEndDate
,
159 Ext
.bind(this.onCalendarDragComplete
, this));
160 //shims are NOT cleared here -- they stay visible until the handling
161 //code calls the onCalendarDragComplete callback which hides them.
165 this.onCalendarDragComplete();
169 onContainerDrop: function(dd
, e
, data
) {
170 this.onCalendarDragComplete();