examples/docs/source/DayViewDD.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 /*
  16  * Internal drag zone implementation for the calendar day and week views.
  17  */
  18 Ext.calendar.DayViewDragZone = Ext.extend(Ext.calendar.DragZone, {
  19     ddGroup: 'DayViewDD',
  20     resizeSelector: '.ext-evt-rsz',
  21
  22     getDragData: function(e) {
  23         var t = e.getTarget(this.resizeSelector, 2, true),
  24             p,
  25             rec;
  26         if (t) {
  27             p = t.parent(this.eventSelector);
  28             rec = this.view.getEventRecordFromEl(p);
  29
  30             return {
  31                 type: 'eventresize',
  32                 ddel: p.dom,
  33                 eventStart: rec.data[Ext.calendar.EventMappings.StartDate.name],
  34                 eventEnd: rec.data[Ext.calendar.EventMappings.EndDate.name],
  35                 proxy: this.proxy
  36             };
  37         }
  38         t = e.getTarget(this.eventSelector, 3);
  39         if (t) {
  40             rec = this.view.getEventRecordFromEl(t);
  41             return {
  42                 type: 'eventdrag',
  43                 ddel: t,
  44                 eventStart: rec.data[Ext.calendar.EventMappings.StartDate.name],
  45                 eventEnd: rec.data[Ext.calendar.EventMappings.EndDate.name],
  46                 proxy: this.proxy
  47             };
  48         }
  49
  50         // If not dragging/resizing an event then we are dragging on
  51         // the calendar to add a new event
  52         t = this.view.getDayAt(e.getPageX(), e.getPageY());
  53         if (t.el) {
  54             return {
  55                 type: 'caldrag',
  56                 dayInfo: t,
  57                 proxy: this.proxy
  58             };
  59         }
  60         return null;
  61     }
  62 });
  63
  64 /*
  65  * Internal drop zone implementation for the calendar day and week views.
  66  */
  67 Ext.calendar.DayViewDropZone = Ext.extend(Ext.calendar.DropZone, {
  68     ddGroup: 'DayViewDD',
  69
  70     onNodeOver: function(n, dd, e, data) {
  71         var dt,
  72             box,
  73             endDt,
  74             text = this.createText,
  75             curr,
  76             start,
  77             end,
  78             evtEl,
  79             dayCol;
  80         if (data.type == 'caldrag') {
  81             if (!this.dragStartMarker) {
  82                 // Since the container can scroll, this gets a little tricky.
  83                 // There is no el in the DOM that we can measure by default since
  84                 // the box is simply calculated from the original drag start (as opposed
  85                 // to dragging or resizing the event where the orig event box is present).
  86                 // To work around this we add a placeholder el into the DOM and give it
  87                 // the original starting time's box so that we can grab its updated
  88                 // box measurements as the underlying container scrolls up or down.
  89                 // This placeholder is removed in onNodeDrop.
  90                 this.dragStartMarker = n.el.parent().createChild({
  91                     style: 'position:absolute;'
  92                 });
  93                 this.dragStartMarker.setBox(n.timeBox);
  94                 this.dragCreateDt = n.date;
  95             }
  96             box = this.dragStartMarker.getBox();
  97             box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
  98
  99             if (e.xy[1] < box.y) {
 100                 box.height += n.timeBox.height;
 101                 box.y = box.y - box.height + n.timeBox.height;
 102                 endDt = this.dragCreateDt.add(Date.MINUTE, 30);
 103             }
 104             else {
 105                 n.date = n.date.add(Date.MINUTE, 30);
 106             }
 107             this.shim(this.dragCreateDt, box);
 108
 109             curr = Ext.calendar.Date.copyTime(n.date, this.dragCreateDt);
 110             this.dragStartDate = Ext.calendar.Date.min(this.dragCreateDt, curr);
 111             this.dragEndDate = endDt || Ext.calendar.Date.max(this.dragCreateDt, curr);
 112
 113             dt = this.dragStartDate.format('g:ia-') + this.dragEndDate.format('g:ia');
 114         }
 115         else {
 116             evtEl = Ext.get(data.ddel);
 117             dayCol = evtEl.parent().parent();
 118             box = evtEl.getBox();
 119
 120             box.width = dayCol.getWidth();
 121
 122             if (data.type == 'eventdrag') {
 123                 if (this.dragOffset === undefined) {
 124                     this.dragOffset = n.timeBox.y - box.y;
 125                     box.y = n.timeBox.y - this.dragOffset;
 126                 }
 127                 else {
 128                     box.y = n.timeBox.y;
 129                 }
 130                 dt = n.date.format('n/j g:ia');
 131                 box.x = n.el.getLeft();
 132
 133                 this.shim(n.date, box);
 134                 text = this.moveText;
 135             }
 136             if (data.type == 'eventresize') {
 137                 if (!this.resizeDt) {
 138                     this.resizeDt = n.date;
 139                 }
 140                 box.x = dayCol.getLeft();
 141                 box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
 142                 if (e.xy[1] < box.y) {
 143                     box.y -= box.height;
 144                 }
 145                 else {
 146                     n.date = n.date.add(Date.MINUTE, 30);
 147                 }
 148                 this.shim(this.resizeDt, box);
 149
 150                 curr = Ext.calendar.Date.copyTime(n.date, this.resizeDt);
 151                 start = Ext.calendar.Date.min(data.eventStart, curr);
 152                 end = Ext.calendar.Date.max(data.eventStart, curr);
 153
 154                 data.resizeDates = {
 155                     StartDate: start,
 156                     EndDate: end
 157                 };
 158                 dt = start.format('g:ia-') + end.format('g:ia');
 159                 text = this.resizeText;
 160             }
 161         }
 162
 163         data.proxy.updateMsg(String.format(text, dt));
 164         return this.dropAllowed;
 165     },
 166
 167     shim: function(dt, box) {
 168         Ext.each(this.shims,
 169         function(shim) {
 170             if (shim) {
 171                 shim.isActive = false;
 172                 shim.hide();
 173             }
 174         });
 175
 176         var shim = this.shims[0];
 177         if (!shim) {
 178             shim = this.createShim();
 179             this.shims[0] = shim;
 180         }
 181
 182         shim.isActive = true;
 183         shim.show();
 184         shim.setBox(box);
 185     },
 186
 187     onNodeDrop: function(n, dd, e, data) {
 188         var rec;
 189         if (n && data) {
 190             if (data.type == 'eventdrag') {
 191                 rec = this.view.getEventRecordFromEl(data.ddel);
 192                 this.view.onEventDrop(rec, n.date);
 193                 this.onCalendarDragComplete();
 194                 delete this.dragOffset;
 195                 return true;
 196             }
 197             if (data.type == 'eventresize') {
 198                 rec = this.view.getEventRecordFromEl(data.ddel);
 199                 this.view.onEventResize(rec, data.resizeDates);
 200                 this.onCalendarDragComplete();
 201                 delete this.resizeDt;
 202                 return true;
 203             }
 204             if (data.type == 'caldrag') {
 205                 Ext.destroy(this.dragStartMarker);
 206                 delete this.dragStartMarker;
 207                 delete this.dragCreateDt;
 208                 this.view.onCalendarEndDrag(this.dragStartDate, this.dragEndDate,
 209                 this.onCalendarDragComplete.createDelegate(this));
 210                 //shims are NOT cleared here -- they stay visible until the handling
 211                 //code calls the onCalendarDragComplete callback which hides them.
 212                 return true;
 213             }
 214         }
 215         this.onCalendarDragComplete();
 216         return false;
 217     }
 218 });
 219 </pre>
 220 </body>
 221 </html>