/ext-4.1.0_b3/docs/extjs/examples/calendar/src/dd/DayDropZone.js
https://bitbucket.org/srogerf/javascript · JavaScript · 157 lines · 129 code · 15 blank · 13 comment · 26 complexity · fe786ad1ad2fd755ae58634e0d241f25 MD5 · raw file
- /*
- * Internal drop zone implementation for the calendar day and week views.
- */
- Ext.define('Ext.calendar.dd.DayDropZone', {
- extend: 'Ext.calendar.dd.DropZone',
- 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.getLeft();
- this.shim(n.date, box);
- text = this.moveText;
- }
- if (data.type == 'eventresize') {
- if (!this.resizeDt) {
- this.resizeDt = n.date;
- }
- box.x = dayCol.getLeft();
- 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);
- },
- 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;
- }
- });