/ext-4.1.0_b3/docs/extjs/examples/calendar/src/dd/DayDropZone.js

  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});