examples/docs/source/CalendarDD.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 components. This provides base functionality
  17  * and is primarily for the month view -- DayViewDD adds day/week view-specific functionality.
  18  */
  19 Ext.calendar.DragZone = Ext.extend(Ext.dd.DragZone, {
  20     ddGroup: 'CalendarDD',
  21     eventSelector: '.ext-cal-evt',
  22
  23     constructor: function(el, config) {
  24         if (!Ext.calendar._statusProxyInstance) {
  25             Ext.calendar._statusProxyInstance = new Ext.calendar.StatusProxy();
  26         }
  27         this.proxy = Ext.calendar._statusProxyInstance;
  28         Ext.calendar.DragZone.superclass.constructor.call(this, el, config);
  29     },
  30
  31     getDragData: function(e) {
  32         // Check whether we are dragging on an event first
  33         var t = e.getTarget(this.eventSelector, 3);
  34         if (t) {
  35             var rec = this.view.getEventRecordFromEl(t);
  36             return {
  37                 type: 'eventdrag',
  38                 ddel: t,
  39                 eventStart: rec.data[Ext.calendar.EventMappings.StartDate.name],
  40                 eventEnd: rec.data[Ext.calendar.EventMappings.EndDate.name],
  41                 proxy: this.proxy
  42             };
  43         }
  44
  45         // If not dragging an event then we are dragging on
  46         // the calendar to add a new event
  47         t = this.view.getDayAt(e.getPageX(), e.getPageY());
  48         if (t.el) {
  49             return {
  50                 type: 'caldrag',
  51                 start: t.date,
  52                 proxy: this.proxy
  53             };
  54         }
  55         return null;
  56     },
  57
  58     onInitDrag: function(x, y) {
  59         if (this.dragData.ddel) {
  60             var ghost = this.dragData.ddel.cloneNode(true),
  61             child = Ext.fly(ghost).child('dl');
  62
  63             Ext.fly(ghost).setWidth('auto');
  64
  65             if (child) {
  66                 // for IE/Opera
  67                 child.setHeight('auto');
  68             }
  69             this.proxy.update(ghost);
  70             this.onStartDrag(x, y);
  71         }
  72         else if (this.dragData.start) {
  73             this.onStartDrag(x, y);
  74         }
  75         this.view.onInitDrag();
  76         return true;
  77     },
  78
  79     afterRepair: function() {
  80         if (Ext.enableFx && this.dragData.ddel) {
  81             Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || 'c3daf9');
  82         }
  83         this.dragging = false;
  84     },
  85
  86     getRepairXY: function(e) {
  87         if (this.dragData.ddel) {
  88             return Ext.Element.fly(this.dragData.ddel).getXY();
  89         }
  90     },
  91
  92     afterInvalidDrop: function(e, id) {
  93         Ext.select('.ext-dd-shim').hide();
  94     }
  95 });
  96
  97 /*
  98  * Internal drop zone implementation for the calendar components. This provides base functionality
  99  * and is primarily for the month view -- DayViewDD adds day/week view-specific functionality.
 100  */
 101 Ext.calendar.DropZone = Ext.extend(Ext.dd.DropZone, {
 102     ddGroup: 'CalendarDD',
 103     eventSelector: '.ext-cal-evt',
 104
 105     // private
 106     shims: [],
 107
 108     getTargetFromEvent: function(e) {
 109         var dragOffset = this.dragOffset || 0,
 110         y = e.getPageY() - dragOffset,
 111         d = this.view.getDayAt(e.getPageX(), y);
 112
 113         return d.el ? d: null;
 114     },
 115
 116     onNodeOver: function(n, dd, e, data) {
 117         var D = Ext.calendar.Date,
 118         start = data.type == 'eventdrag' ? n.date: D.min(data.start, n.date),
 119         end = data.type == 'eventdrag' ? n.date.add(Date.DAY, D.diffDays(data.eventStart, data.eventEnd)) :
 120         D.max(data.start, n.date);
 121
 122         if (!this.dragStartDate || !this.dragEndDate || (D.diffDays(start, this.dragStartDate) != 0) || (D.diffDays(end, this.dragEndDate) != 0)) {
 123             this.dragStartDate = start;
 124             this.dragEndDate = end.clearTime().add(Date.DAY, 1).add(Date.MILLI, -1);
 125             this.shim(start, end);
 126
 127             var range = start.format('n/j');
 128             if (D.diffDays(start, end) > 0) {
 129                 range += '-' + end.format('n/j');
 130             }
 131             var msg = String.format(data.type == 'eventdrag' ? this.moveText: this.createText, range);
 132             data.proxy.updateMsg(msg);
 133         }
 134         return this.dropAllowed;
 135     },
 136
 137     shim: function(start, end) {
 138         this.currWeek = -1;
 139         var dt = start.clone(),
 140             i = 0,
 141             shim,
 142             box,
 143             cnt = Ext.calendar.Date.diffDays(dt, end) + 1;
 144
 145         Ext.each(this.shims,
 146             function(shim) {
 147                 if (shim) {
 148                     shim.isActive = false;
 149                 }
 150             }
 151         );
 152
 153         while (i++<cnt) {
 154             var dayEl = this.view.getDayEl(dt);
 155
 156             // if the date is not in the current view ignore it (this
 157             // can happen when an event is dragged to the end of the
 158             // month so that it ends outside the view)
 159             if (dayEl) {
 160                 var wk = this.view.getWeekIndex(dt);
 161                 shim = this.shims[wk];
 162
 163                 if (!shim) {
 164                     shim = this.createShim();
 165                     this.shims[wk] = shim;
 166                 }
 167                 if (wk != this.currWeek) {
 168                     shim.boxInfo = dayEl.getBox();
 169                     this.currWeek = wk;
 170                 }
 171                 else {
 172                     box = dayEl.getBox();
 173                     shim.boxInfo.right = box.right;
 174                     shim.boxInfo.width = box.right - shim.boxInfo.x;
 175                 }
 176                 shim.isActive = true;
 177             }
 178             dt = dt.add(Date.DAY, 1);
 179         }
 180
 181         Ext.each(this.shims,
 182         function(shim) {
 183             if (shim) {
 184                 if (shim.isActive) {
 185                     shim.show();
 186                     shim.setBox(shim.boxInfo);
 187                 }
 188                 else if (shim.isVisible()) {
 189                     shim.hide();
 190                 }
 191             }
 192         });
 193     },
 194
 195     createShim: function() {
 196         if (!this.shimCt) {
 197             this.shimCt = Ext.get('ext-dd-shim-ct');
 198             if (!this.shimCt) {
 199                 this.shimCt = document.createElement('div');
 200                 this.shimCt.id = 'ext-dd-shim-ct';
 201                 Ext.getBody().appendChild(this.shimCt);
 202             }
 203         }
 204         var el = document.createElement('div');
 205         el.className = 'ext-dd-shim';
 206         this.shimCt.appendChild(el);
 207
 208         return new Ext.Layer({
 209             shadow: false,
 210             useDisplay: true,
 211             constrain: false
 212         },
 213         el);
 214     },
 215
 216     clearShims: function() {
 217         Ext.each(this.shims,
 218         function(shim) {
 219             if (shim) {
 220                 shim.hide();
 221             }
 222         });
 223     },
 224
 225     onContainerOver: function(dd, e, data) {
 226         return this.dropAllowed;
 227     },
 228
 229     onCalendarDragComplete: function() {
 230         delete this.dragStartDate;
 231         delete this.dragEndDate;
 232         this.clearShims();
 233     },
 234
 235     onNodeDrop: function(n, dd, e, data) {
 236         if (n && data) {
 237             if (data.type == 'eventdrag') {
 238                 var rec = this.view.getEventRecordFromEl(data.ddel),
 239                 dt = Ext.calendar.Date.copyTime(rec.data[Ext.calendar.EventMappings.StartDate.name], n.date);
 240
 241                 this.view.onEventDrop(rec, dt);
 242                 this.onCalendarDragComplete();
 243                 return true;
 244             }
 245             if (data.type == 'caldrag') {
 246                 this.view.onCalendarEndDrag(this.dragStartDate, this.dragEndDate,
 247                 this.onCalendarDragComplete.createDelegate(this));
 248                 //shims are NOT cleared here -- they stay visible until the handling
 249                 //code calls the onCalendarDragComplete callback which hides them.
 250                 return true;
 251             }
 252         }
 253         this.onCalendarDragComplete();
 254         return false;
 255     },
 256
 257     onContainerDrop: function(dd, e, data) {
 258         this.onCalendarDragComplete();
 259         return false;
 260     },
 261
 262     destroy: function() {
 263         Ext.calendar.DropZone.superclass.destroy.call(this);
 264         Ext.destroy(this.shimCt);
 265     }
 266 });
 267
 268 </pre>
 269 </body>
 270 </html>