extjs/examples/classic/calendar/src/dd/DropZone.js

   1 /*
   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.
   4  */
   5 Ext.define('Ext.calendar.dd.DropZone', {
   6     extend: 'Ext.dd.DropZone',
   7
   8     requires: [
   9         'Ext.calendar.util.Date',
  10         'Ext.calendar.data.EventMappings'
  11     ],
  12
  13     ddGroup: 'CalendarDD',
  14     eventSelector: '.ext-cal-evt',
  15
  16     // private
  17     shims: [],
  18
  19     getTargetFromEvent: function(e) {
  20         var dragOffset = this.dragOffset || 0,
  21         y = e.getY() - dragOffset,
  22         d = this.view.getDayAt(e.getX(), y);
  23
  24         return d.el ? d: null;
  25     },
  26
  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);
  32
  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);
  37
  38             var range = Ext.Date.format(start, 'n/j');
  39             if (D.diffDays(start, end) > 0) {
  40                 range += '-' + Ext.Date.format(end, 'n/j');
  41             }
  42             var msg = Ext.util.Format.format(data.type == 'eventdrag' ? this.moveText: this.createText, range);
  43             data.proxy.updateMsg(msg);
  44         }
  45         return this.dropAllowed;
  46     },
  47
  48     shim: function(start, end) {
  49         this.currWeek = -1;
  50         this.DDMInstance.notifyOccluded = true;
  51         var dt = Ext.Date.clone(start),
  52             i = 0,
  53             shim,
  54             box,
  55             D = Ext.calendar.util.Date,
  56             cnt = D.diffDays(dt, end) + 1;
  57
  58         Ext.each(this.shims,
  59             function(shim) {
  60                 if (shim) {
  61                     shim.isActive = false;
  62                 }
  63             }
  64         );
  65
  66         while (i++<cnt) {
  67             var dayEl = this.view.getDayEl(dt);
  68
  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)
  72             if (dayEl) {
  73                 var wk = this.view.getWeekIndex(dt);
  74                 shim = this.shims[wk];
  75
  76                 if (!shim) {
  77                     shim = this.createShim();
  78                     this.shims[wk] = shim;
  79                 }
  80                 if (wk != this.currWeek) {
  81                     shim.boxInfo = dayEl.getBox();
  82                     this.currWeek = wk;
  83                 }
  84                 else {
  85                     box = dayEl.getBox();
  86                     shim.boxInfo.right = box.right;
  87                     shim.boxInfo.width = box.right - shim.boxInfo.x;
  88                 }
  89                 shim.isActive = true;
  90             }
  91             dt = D.add(dt, {days: 1});
  92         }
  93
  94         Ext.each(this.shims, function(shim) {
  95             if (shim) {
  96                 if (shim.isActive) {
  97                     shim.show();
  98                     shim.setBox(shim.boxInfo);
  99                 }
 100                 else if (shim.isVisible()) {
 101                     shim.hide();
 102                 }
 103             }
 104         });
 105     },
 106
 107     createShim: function() {
 108         if (!this.shimCt) {
 109             this.shimCt = Ext.get('ext-dd-shim-ct');
 110             if (!this.shimCt) {
 111                 this.shimCt = document.createElement('div');
 112                 this.shimCt.id = 'ext-dd-shim-ct';
 113                 Ext.getBody().appendChild(this.shimCt);
 114             }
 115         }
 116         var el = document.createElement('div');
 117         el.className = 'ext-dd-shim';
 118         this.shimCt.appendChild(el);
 119
 120         el = Ext.get(el);
 121
 122         el.setVisibilityMode(2);
 123
 124         return el;
 125     },
 126
 127     clearShims: function() {
 128         Ext.each(this.shims,
 129         function(shim) {
 130             if (shim) {
 131                 shim.hide();
 132             }
 133         });
 134         this.DDMInstance.notifyOccluded = false;
 135     },
 136
 137     onContainerOver: function(dd, e, data) {
 138         return this.dropAllowed;
 139     },
 140
 141     onCalendarDragComplete: function() {
 142         delete this.dragStartDate;
 143         delete this.dragEndDate;
 144         this.clearShims();
 145     },
 146
 147     onNodeDrop: function(n, dd, e, data) {
 148         if (n && 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);
 152
 153                 this.view.onEventDrop(rec, dt);
 154                 this.onCalendarDragComplete();
 155                 return true;
 156             }
 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.
 162                 return true;
 163             }
 164         }
 165         this.onCalendarDragComplete();
 166         return false;
 167     },
 168
 169     onContainerDrop: function(dd, e, data) {
 170         this.onCalendarDragComplete();
 171         return false;
 172     }
 173 });