/ext-4.1.0_b3/docs/extjs/examples/calendar/src/dd/DayDropZone.js
JavaScript | 157 lines | 129 code | 15 blank | 13 comment | 26 complexity | fe786ad1ad2fd755ae58634e0d241f25 MD5 | raw file
1/*
2 * Internal drop zone implementation for the calendar day and week views.
3 */
4Ext.define('Ext.calendar.dd.DayDropZone', {
5 extend: 'Ext.calendar.dd.DropZone',
6
7 ddGroup: 'DayViewDD',
8
9 onNodeOver: function(n, dd, e, data) {
10 var dt,
11 box,
12 endDt,
13 text = this.createText,
14 curr,
15 start,
16 end,
17 evtEl,
18 dayCol;
19 if (data.type == 'caldrag') {
20 if (!this.dragStartMarker) {
21 // Since the container can scroll, this gets a little tricky.
22 // There is no el in the DOM that we can measure by default since
23 // the box is simply calculated from the original drag start (as opposed
24 // to dragging or resizing the event where the orig event box is present).
25 // To work around this we add a placeholder el into the DOM and give it
26 // the original starting time's box so that we can grab its updated
27 // box measurements as the underlying container scrolls up or down.
28 // This placeholder is removed in onNodeDrop.
29 this.dragStartMarker = n.el.parent().createChild({
30 style: 'position:absolute;'
31 });
32 this.dragStartMarker.setBox(n.timeBox);
33 this.dragCreateDt = n.date;
34 }
35 box = this.dragStartMarker.getBox();
36 box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
37
38 if (e.xy[1] < box.y) {
39 box.height += n.timeBox.height;
40 box.y = box.y - box.height + n.timeBox.height;
41 endDt = Ext.Date.add(this.dragCreateDt, Ext.Date.MINUTE, 30);
42 }
43 else {
44 n.date = Ext.Date.add(n.date, Ext.Date.MINUTE, 30);
45 }
46 this.shim(this.dragCreateDt, box);
47
48 curr = Ext.calendar.util.Date.copyTime(n.date, this.dragCreateDt);
49 this.dragStartDate = Ext.calendar.util.Date.min(this.dragCreateDt, curr);
50 this.dragEndDate = endDt || Ext.calendar.util.Date.max(this.dragCreateDt, curr);
51
52 dt = Ext.Date.format(this.dragStartDate, 'g:ia-') + Ext.Date.format(this.dragEndDate, 'g:ia');
53 }
54 else {
55 evtEl = Ext.get(data.ddel);
56 dayCol = evtEl.parent().parent();
57 box = evtEl.getBox();
58
59 box.width = dayCol.getWidth();
60
61 if (data.type == 'eventdrag') {
62 if (this.dragOffset === undefined) {
63 this.dragOffset = n.timeBox.y - box.y;
64 box.y = n.timeBox.y - this.dragOffset;
65 }
66 else {
67 box.y = n.timeBox.y;
68 }
69 dt = Ext.Date.format(n.date, 'n/j g:ia');
70 box.x = n.el.getLeft();
71
72 this.shim(n.date, box);
73 text = this.moveText;
74 }
75 if (data.type == 'eventresize') {
76 if (!this.resizeDt) {
77 this.resizeDt = n.date;
78 }
79 box.x = dayCol.getLeft();
80 box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
81 if (e.xy[1] < box.y) {
82 box.y -= box.height;
83 }
84 else {
85 n.date = Ext.Date.add(n.date, Ext.Date.MINUTE, 30);
86 }
87 this.shim(this.resizeDt, box);
88
89 curr = Ext.calendar.util.Date.copyTime(n.date, this.resizeDt);
90 start = Ext.calendar.util.Date.min(data.eventStart, curr);
91 end = Ext.calendar.util.Date.max(data.eventStart, curr);
92
93 data.resizeDates = {
94 StartDate: start,
95 EndDate: end
96 };
97 dt = Ext.Date.format(start, 'g:ia-') + Ext.Date.format(end, 'g:ia');
98 text = this.resizeText;
99 }
100 }
101
102 data.proxy.updateMsg(Ext.util.Format.format(text, dt));
103 return this.dropAllowed;
104 },
105
106 shim: function(dt, box) {
107 Ext.each(this.shims,
108 function(shim) {
109 if (shim) {
110 shim.isActive = false;
111 shim.hide();
112 }
113 });
114
115 var shim = this.shims[0];
116 if (!shim) {
117 shim = this.createShim();
118 this.shims[0] = shim;
119 }
120
121 shim.isActive = true;
122 shim.show();
123 shim.setBox(box);
124 },
125
126 onNodeDrop: function(n, dd, e, data) {
127 var rec;
128 if (n && data) {
129 if (data.type == 'eventdrag') {
130 rec = this.view.getEventRecordFromEl(data.ddel);
131 this.view.onEventDrop(rec, n.date);
132 this.onCalendarDragComplete();
133 delete this.dragOffset;
134 return true;
135 }
136 if (data.type == 'eventresize') {
137 rec = this.view.getEventRecordFromEl(data.ddel);
138 this.view.onEventResize(rec, data.resizeDates);
139 this.onCalendarDragComplete();
140 delete this.resizeDt;
141 return true;
142 }
143 if (data.type == 'caldrag') {
144 Ext.destroy(this.dragStartMarker);
145 delete this.dragStartMarker;
146 delete this.dragCreateDt;
147 this.view.onCalendarEndDrag(this.dragStartDate, this.dragEndDate,
148 Ext.bind(this.onCalendarDragComplete, this));
149 //shims are NOT cleared here -- they stay visible until the handling
150 //code calls the onCalendarDragComplete callback which hides them.
151 return true;
152 }
153 }
154 this.onCalendarDragComplete();
155 return false;
156 }
157});