/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

  1. /*
  2. * Internal drop zone implementation for the calendar day and week views.
  3. */
  4. Ext.define('Ext.calendar.dd.DayDropZone', {
  5. extend: 'Ext.calendar.dd.DropZone',
  6. ddGroup: 'DayViewDD',
  7. onNodeOver: function(n, dd, e, data) {
  8. var dt,
  9. box,
  10. endDt,
  11. text = this.createText,
  12. curr,
  13. start,
  14. end,
  15. evtEl,
  16. dayCol;
  17. if (data.type == 'caldrag') {
  18. if (!this.dragStartMarker) {
  19. // Since the container can scroll, this gets a little tricky.
  20. // There is no el in the DOM that we can measure by default since
  21. // the box is simply calculated from the original drag start (as opposed
  22. // to dragging or resizing the event where the orig event box is present).
  23. // To work around this we add a placeholder el into the DOM and give it
  24. // the original starting time's box so that we can grab its updated
  25. // box measurements as the underlying container scrolls up or down.
  26. // This placeholder is removed in onNodeDrop.
  27. this.dragStartMarker = n.el.parent().createChild({
  28. style: 'position:absolute;'
  29. });
  30. this.dragStartMarker.setBox(n.timeBox);
  31. this.dragCreateDt = n.date;
  32. }
  33. box = this.dragStartMarker.getBox();
  34. box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
  35. if (e.xy[1] < box.y) {
  36. box.height += n.timeBox.height;
  37. box.y = box.y - box.height + n.timeBox.height;
  38. endDt = Ext.Date.add(this.dragCreateDt, Ext.Date.MINUTE, 30);
  39. }
  40. else {
  41. n.date = Ext.Date.add(n.date, Ext.Date.MINUTE, 30);
  42. }
  43. this.shim(this.dragCreateDt, box);
  44. curr = Ext.calendar.util.Date.copyTime(n.date, this.dragCreateDt);
  45. this.dragStartDate = Ext.calendar.util.Date.min(this.dragCreateDt, curr);
  46. this.dragEndDate = endDt || Ext.calendar.util.Date.max(this.dragCreateDt, curr);
  47. dt = Ext.Date.format(this.dragStartDate, 'g:ia-') + Ext.Date.format(this.dragEndDate, 'g:ia');
  48. }
  49. else {
  50. evtEl = Ext.get(data.ddel);
  51. dayCol = evtEl.parent().parent();
  52. box = evtEl.getBox();
  53. box.width = dayCol.getWidth();
  54. if (data.type == 'eventdrag') {
  55. if (this.dragOffset === undefined) {
  56. this.dragOffset = n.timeBox.y - box.y;
  57. box.y = n.timeBox.y - this.dragOffset;
  58. }
  59. else {
  60. box.y = n.timeBox.y;
  61. }
  62. dt = Ext.Date.format(n.date, 'n/j g:ia');
  63. box.x = n.el.getLeft();
  64. this.shim(n.date, box);
  65. text = this.moveText;
  66. }
  67. if (data.type == 'eventresize') {
  68. if (!this.resizeDt) {
  69. this.resizeDt = n.date;
  70. }
  71. box.x = dayCol.getLeft();
  72. box.height = Math.ceil(Math.abs(e.xy[1] - box.y) / n.timeBox.height) * n.timeBox.height;
  73. if (e.xy[1] < box.y) {
  74. box.y -= box.height;
  75. }
  76. else {
  77. n.date = Ext.Date.add(n.date, Ext.Date.MINUTE, 30);
  78. }
  79. this.shim(this.resizeDt, box);
  80. curr = Ext.calendar.util.Date.copyTime(n.date, this.resizeDt);
  81. start = Ext.calendar.util.Date.min(data.eventStart, curr);
  82. end = Ext.calendar.util.Date.max(data.eventStart, curr);
  83. data.resizeDates = {
  84. StartDate: start,
  85. EndDate: end
  86. };
  87. dt = Ext.Date.format(start, 'g:ia-') + Ext.Date.format(end, 'g:ia');
  88. text = this.resizeText;
  89. }
  90. }
  91. data.proxy.updateMsg(Ext.util.Format.format(text, dt));
  92. return this.dropAllowed;
  93. },
  94. shim: function(dt, box) {
  95. Ext.each(this.shims,
  96. function(shim) {
  97. if (shim) {
  98. shim.isActive = false;
  99. shim.hide();
  100. }
  101. });
  102. var shim = this.shims[0];
  103. if (!shim) {
  104. shim = this.createShim();
  105. this.shims[0] = shim;
  106. }
  107. shim.isActive = true;
  108. shim.show();
  109. shim.setBox(box);
  110. },
  111. onNodeDrop: function(n, dd, e, data) {
  112. var rec;
  113. if (n && data) {
  114. if (data.type == 'eventdrag') {
  115. rec = this.view.getEventRecordFromEl(data.ddel);
  116. this.view.onEventDrop(rec, n.date);
  117. this.onCalendarDragComplete();
  118. delete this.dragOffset;
  119. return true;
  120. }
  121. if (data.type == 'eventresize') {
  122. rec = this.view.getEventRecordFromEl(data.ddel);
  123. this.view.onEventResize(rec, data.resizeDates);
  124. this.onCalendarDragComplete();
  125. delete this.resizeDt;
  126. return true;
  127. }
  128. if (data.type == 'caldrag') {
  129. Ext.destroy(this.dragStartMarker);
  130. delete this.dragStartMarker;
  131. delete this.dragCreateDt;
  132. this.view.onCalendarEndDrag(this.dragStartDate, this.dragEndDate,
  133. Ext.bind(this.onCalendarDragComplete, this));
  134. //shims are NOT cleared here -- they stay visible until the handling
  135. //code calls the onCalendarDragComplete callback which hides them.
  136. return true;
  137. }
  138. }
  139. this.onCalendarDragComplete();
  140. return false;
  141. }
  142. });