/*
|
* Internal drop zone implementation for the calendar day and week views.
|
*/
|
Ext.define('Ext.calendar.dd.DayDropZone', {
|
extend: 'Ext.calendar.dd.DropZone',
|
requires: [
|
'Ext.calendar.util.Date'
|
],
|
|
ddGroup: 'DayViewDD',
|
|
onNodeOver: function(n, dd, e, data) {
|
var dt,
|
box,
|
endDt,
|
text = this.createText,
|
curr,
|
start,
|
end,
|
evtEl,
|
dayCol;
|
if (data.type == 'caldrag') {
|
if (!this.dragStartMarker) {
|
// Since the container can scroll, this gets a little tricky.
|
// There is no el in the DOM that we can measure by default since
|
// the box is simply calculated from the original drag start (as opposed
|
// to dragging or resizing the event where the orig event box is present).
|
// To work around this we add a placeholder el into the DOM and give it
|
// the original starting time's box so that we can grab its updated
|
// box measurements as the underlying container scrolls up or down.
|
// This placeholder is removed in onNodeDrop.
|
this.dragStartMarker = n.el.parent().createChild({
|
style: 'position:absolute;'
|
});
|
this.dragStartMarker.setBox(n.timeBox);
|
this.dragCreateDt = n.date;
|
}
|
box = this.dragStartMarker.getBox();
|
box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
|
|
if (e.xy[1] < box.y) {
|
box.height += n.timeBox.height;
|
box.y = box.y - box.height + n.timeBox.height;
|
endDt = Ext.Date.add(this.dragCreateDt, Ext.Date.MINUTE, 30);
|
}
|
else {
|
n.date = Ext.Date.add(n.date, Ext.Date.MINUTE, 30);
|
}
|
this.shim(this.dragCreateDt, box);
|
|
curr = Ext.calendar.util.Date.copyTime(n.date, this.dragCreateDt);
|
this.dragStartDate = Ext.calendar.util.Date.min(this.dragCreateDt, curr);
|
this.dragEndDate = endDt || Ext.calendar.util.Date.max(this.dragCreateDt, curr);
|
|
dt = Ext.Date.format(this.dragStartDate, 'g:ia-') + Ext.Date.format(this.dragEndDate, 'g:ia');
|
}
|
else {
|
evtEl = Ext.get(data.ddel);
|
dayCol = evtEl.parent().parent();
|
box = evtEl.getBox();
|
|
box.width = dayCol.getWidth();
|
|
if (data.type == 'eventdrag') {
|
if (this.dragOffset === undefined) {
|
this.dragOffset = n.timeBox.y - box.y;
|
box.y = n.timeBox.y - this.dragOffset;
|
}
|
else {
|
box.y = n.timeBox.y;
|
}
|
dt = Ext.Date.format(n.date, 'n/j g:ia');
|
box.x = n.el.getX();
|
|
this.shim(n.date, box);
|
text = this.moveText;
|
}
|
if (data.type == 'eventresize') {
|
if (!this.resizeDt) {
|
this.resizeDt = n.date;
|
}
|
box.x = dayCol.getX();
|
box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
|
if (e.xy[1] < box.y) {
|
box.y -= box.height;
|
}
|
else {
|
n.date = Ext.Date.add(n.date, Ext.Date.MINUTE, 30);
|
}
|
this.shim(this.resizeDt, box);
|
|
curr = Ext.calendar.util.Date.copyTime(n.date, this.resizeDt);
|
start = Ext.calendar.util.Date.min(data.eventStart, curr);
|
end = Ext.calendar.util.Date.max(data.eventStart, curr);
|
|
data.resizeDates = {
|
StartDate: start,
|
EndDate: end
|
};
|
dt = Ext.Date.format(start, 'g:ia-') + Ext.Date.format(end, 'g:ia');
|
text = this.resizeText;
|
}
|
}
|
|
data.proxy.updateMsg(Ext.util.Format.format(text, dt));
|
return this.dropAllowed;
|
},
|
|
shim: function(dt, box) {
|
Ext.each(this.shims,
|
function(shim) {
|
if (shim) {
|
shim.isActive = false;
|
shim.hide();
|
}
|
}
|
);
|
|
var shim = this.shims[0];
|
if (!shim) {
|
shim = this.createShim();
|
this.shims[0] = shim;
|
}
|
|
shim.isActive = true;
|
shim.show();
|
shim.setBox(box);
|
this.DDMInstance.notifyOccluded = true;
|
},
|
|
onNodeDrop: function(n, dd, e, data) {
|
var rec;
|
if (n && data) {
|
if (data.type == 'eventdrag') {
|
rec = this.view.getEventRecordFromEl(data.ddel);
|
this.view.onEventDrop(rec, n.date);
|
this.onCalendarDragComplete();
|
delete this.dragOffset;
|
return true;
|
}
|
if (data.type == 'eventresize') {
|
rec = this.view.getEventRecordFromEl(data.ddel);
|
this.view.onEventResize(rec, data.resizeDates);
|
this.onCalendarDragComplete();
|
delete this.resizeDt;
|
return true;
|
}
|
if (data.type == 'caldrag') {
|
Ext.destroy(this.dragStartMarker);
|
delete this.dragStartMarker;
|
delete this.dragCreateDt;
|
this.view.onCalendarEndDrag(this.dragStartDate, this.dragEndDate,
|
Ext.bind(this.onCalendarDragComplete, this));
|
//shims are NOT cleared here -- they stay visible until the handling
|
//code calls the onCalendarDragComplete callback which hides them.
|
return true;
|
}
|
}
|
this.onCalendarDragComplete();
|
return false;
|
}
|
});
|
