@syncfusion/ej2-schedule 25.1.42 → 25.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1806,10 +1806,11 @@ class ScheduleTouch {
1806
1806
  this.touchRightDirection = this.parent.enableRtl ? 'Left' : 'Right';
1807
1807
  }
1808
1808
  scrollHandler(e) {
1809
- if (this.parent.currentView === 'Agenda' || this.parent.uiStateValues.action || !this.parent.allowSwiping ||
1810
- (e.originalEvent && e.originalEvent.target &&
1811
- (e.originalEvent.target.classList.contains(APPOINTMENT_CLASS) ||
1812
- closest(e.originalEvent.target, '.' + APPOINTMENT_CLASS)) && !this.parent.isAdaptive)) {
1809
+ const blockSwipe = !this.parent.isAdaptive && e.originalEvent && e.originalEvent.target &&
1810
+ !isNullOrUndefined(closest(e.originalEvent.target, '.' + APPOINTMENT_CLASS));
1811
+ this.parent.uiStateValues.isTouchScroll = blockSwipe && e.originalEvent.type === 'touchmove' && !this.parent.uiStateValues.action;
1812
+ if (blockSwipe || this.parent.currentView === 'Agenda' || this.parent.uiStateValues.action || !this.parent.allowSwiping ||
1813
+ this.parent.uiStateValues.isTapHold) {
1813
1814
  return;
1814
1815
  }
1815
1816
  if (!this.timeStampStart) {
@@ -1866,7 +1867,8 @@ class ScheduleTouch {
1866
1867
  }
1867
1868
  }
1868
1869
  swipeHandler(e) {
1869
- if (!this.isScrollTriggered || this.parent.uiStateValues.action || !this.parent.allowSwiping) {
1870
+ if (!this.isScrollTriggered || this.parent.uiStateValues.action || !this.parent.allowSwiping ||
1871
+ this.parent.uiStateValues.isTapHold) {
1870
1872
  return;
1871
1873
  }
1872
1874
  this.isScrollTriggered = false;
@@ -1896,11 +1898,27 @@ class ScheduleTouch {
1896
1898
  }
1897
1899
  tapHoldHandler(e) {
1898
1900
  const target = closest(e.originalEvent.target, '.' + APPOINTMENT_CLASS);
1899
- if (!isNullOrUndefined(target) && this.parent.isAdaptive) {
1900
- this.parent.quickPopup.tapHoldEventPopup(e.originalEvent);
1901
- return;
1901
+ if (!isNullOrUndefined(target)) {
1902
+ this.parent.uiStateValues.isTapHold = true;
1903
+ if (this.parent.isAdaptive) {
1904
+ if (Browser.isIos) {
1905
+ EventHandler.add(this.element, 'touchend', this.preventEventClick, this);
1906
+ }
1907
+ this.parent.quickPopup.tapHoldEventPopup(e.originalEvent);
1908
+ }
1909
+ else if (['Agenda', 'MonthAgenda', 'Year'].indexOf(this.parent.currentView) < 0) {
1910
+ this.parent.selectedElements = [];
1911
+ this.parent.eventBase.getSelectedEventElements(target);
1912
+ if (this.parent.resizeModule && closest(e.originalEvent.target, '.' + EVENT_RESIZE_CLASS)) {
1913
+ this.parent.resizeModule.resizeStart(e.originalEvent);
1914
+ }
1915
+ }
1902
1916
  }
1903
1917
  }
1918
+ preventEventClick(e) {
1919
+ e.preventDefault();
1920
+ EventHandler.remove(this.element, 'touchend', this.preventEventClick);
1921
+ }
1904
1922
  renderPanel(clsName, nextPrevType) {
1905
1923
  if (!this.currentPanel) {
1906
1924
  this.currentPanel = {
@@ -6061,6 +6079,10 @@ class EventBase {
6061
6079
  }
6062
6080
  }
6063
6081
  else if (!closest(element, '.' + POPUP_OPEN)) {
6082
+ if (this.parent.uiStateValues.isTapHold && closest(element, '.' + WORK_CELLS_CLASS + ',.' + ALLDAY_CELLS_CLASS)) {
6083
+ return;
6084
+ }
6085
+ this.parent.uiStateValues.isTapHold = false;
6064
6086
  this.removeSelectedAppointmentClass();
6065
6087
  this.parent.selectedElements = [];
6066
6088
  }
@@ -6069,7 +6091,7 @@ class EventBase {
6069
6091
  const isReadOnly = (!isNullOrUndefined(event)) ? event[this.parent.eventFields.isReadonly] : false;
6070
6092
  EventHandler.add(element, 'click', this.eventClick, this);
6071
6093
  if (!this.parent.isAdaptive && !this.parent.activeViewOptions.readonly && !isReadOnly) {
6072
- EventHandler.add(element, 'touchstart', this.eventTouchClick, this);
6094
+ EventHandler.add(element, 'touchend', this.eventTouchClick, this);
6073
6095
  EventHandler.add(element, 'dblclick', this.eventDoubleClick, this);
6074
6096
  }
6075
6097
  if (!this.parent.activeViewOptions.readonly && !isReadOnly && !isPreventCrud) {
@@ -6082,6 +6104,10 @@ class EventBase {
6082
6104
  }
6083
6105
  }
6084
6106
  eventTouchClick(e) {
6107
+ if (this.parent.uiStateValues.isTouchScroll || this.parent.uiStateValues.isTapHold || this.parent.uiStateValues.action) {
6108
+ this.parent.uiStateValues.isTouchScroll = this.parent.uiStateValues.isTapHold = false;
6109
+ return;
6110
+ }
6085
6111
  setTimeout(() => this.isDoubleTapped = false, 250);
6086
6112
  e.preventDefault();
6087
6113
  if (this.isDoubleTapped) {
@@ -6192,7 +6218,7 @@ class EventBase {
6192
6218
  if (this.parent.quickPopup) {
6193
6219
  this.parent.quickPopup.quickPopupHide(true);
6194
6220
  }
6195
- if (eventData.type === 'touchstart') {
6221
+ if (eventData.type === 'touchend') {
6196
6222
  this.activeEventData(eventData, true);
6197
6223
  }
6198
6224
  this.removeSelectedAppointmentClass();
@@ -6479,8 +6505,8 @@ class EventBase {
6479
6505
  const scheduleId = this.parent.element.id + '_';
6480
6506
  const viewName = this.parent.activeViewOptions.eventTemplateName;
6481
6507
  const templateId = scheduleId + viewName + 'eventTemplate';
6482
- const templateName = 'eventTemplate' + (isResourceEventTemplate &&
6483
- this.parent.currentView.indexOf('Year') === -1 ? '_' + resIndex : '');
6508
+ const templateName = isResourceEventTemplate && this.parent.currentView.indexOf('Year') === -1 ?
6509
+ this.parent.getEventTemplateName(resIndex) : 'eventTemplate';
6484
6510
  templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
6485
6511
  }
6486
6512
  else {
@@ -7045,7 +7071,7 @@ class VerticalEvent extends EventBase {
7045
7071
  const viewName = this.parent.activeViewOptions.eventTemplateName;
7046
7072
  const templateId = elementId + viewName + 'eventTemplate';
7047
7073
  const resIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex : resource;
7048
- const templateName = 'eventTemplate' + (this.isResourceEventTemplate ? '_' + resIndex : '');
7074
+ const templateName = this.isResourceEventTemplate ? this.parent.getEventTemplateName(resIndex) : 'eventTemplate';
7049
7075
  templateElement = this.parent.getAppointmentTemplate()(record, this.parent, templateName, templateId, false);
7050
7076
  }
7051
7077
  else {
@@ -7924,7 +7950,7 @@ class MonthEvent extends EventBase {
7924
7950
  const scheduleId = this.parent.element.id + '_';
7925
7951
  const viewName = this.parent.activeViewOptions.eventTemplateName;
7926
7952
  const templateId = scheduleId + viewName + 'eventTemplate';
7927
- const eventTemplate = 'eventTemplate' + (this.isResourceEventTemplate ? '_' + resIndex : '');
7953
+ const eventTemplate = this.isResourceEventTemplate ? this.parent.getEventTemplateName(resIndex) : 'eventTemplate';
7928
7954
  templateElement = this.parent.getAppointmentTemplate()(eventObj, this.parent, eventTemplate, templateId, false);
7929
7955
  }
7930
7956
  else {
@@ -9483,7 +9509,6 @@ class QuickPopups {
9483
9509
  }
9484
9510
  tapHoldEventPopup(e) {
9485
9511
  const target = closest(e.target, '.' + APPOINTMENT_CLASS);
9486
- this.isMultipleEventSelect = false;
9487
9512
  this.parent.selectedElements = [];
9488
9513
  this.isMultipleEventSelect = true;
9489
9514
  this.parent.eventBase.getSelectedEventElements(target);
@@ -14205,11 +14230,18 @@ class Render {
14205
14230
  }
14206
14231
  initializeLayout(viewName) {
14207
14232
  if (this.parent.activeView) {
14208
- const templates = [
14209
- 'cellTemplate', 'eventTemplate', 'tooltipTemplate', 'majorSlotTemplate', 'minorSlotTemplate',
14233
+ let templates = [
14234
+ 'cellTemplate', 'tooltipTemplate', 'majorSlotTemplate', 'minorSlotTemplate',
14210
14235
  'headerTooltipTemplate', 'dateHeaderTemplate', 'dayHeaderTemplate', 'monthHeaderTemplate',
14211
14236
  'headerIndentTemplate', 'resourceHeaderTemplate', 'cellHeaderTemplate', 'dateRangeTemplate'
14212
14237
  ];
14238
+ if (this.parent.activeEventTemplates.length > 0) {
14239
+ templates = templates.concat(this.parent.activeEventTemplates);
14240
+ this.parent.activeEventTemplates = [];
14241
+ }
14242
+ else {
14243
+ templates.push('eventTemplate');
14244
+ }
14213
14245
  this.parent.resetTemplates(templates);
14214
14246
  this.parent.activeView.removeEventListener();
14215
14247
  this.parent.activeView.destroy();
@@ -15145,6 +15177,13 @@ class WorkCellInteraction {
15145
15177
  this.parent.eventWindow.openEditor(this.parent.activeCellsData, 'Add');
15146
15178
  return;
15147
15179
  }
15180
+ const isWorkCell = target.classList.contains(WORK_CELLS_CLASS) ||
15181
+ target.classList.contains(ALLDAY_CELLS_CLASS);
15182
+ if (this.parent.uiStateValues.isTapHold && !this.parent.uiStateValues.action && isWorkCell) {
15183
+ this.parent.uiStateValues.isTapHold = false;
15184
+ this.parent.eventBase.removeSelectedAppointmentClass();
15185
+ this.parent.selectedElements = [];
15186
+ }
15148
15187
  const navigateEle = closest(e.target, '.' + NAVIGATE_CLASS);
15149
15188
  const navigateView = this.parent.getNavigateView();
15150
15189
  const sameView = this.parent.currentView === navigateView;
@@ -15160,8 +15199,6 @@ class WorkCellInteraction {
15160
15199
  closest(e.target, '.' + MORE_INDICATOR_CLASS))) {
15161
15200
  return;
15162
15201
  }
15163
- const isWorkCell = target.classList.contains(WORK_CELLS_CLASS) ||
15164
- target.classList.contains(ALLDAY_CELLS_CLASS);
15165
15202
  if (isWorkCell && e.shiftKey && e.which === 1 && this.parent.keyboardInteractionModule) {
15166
15203
  this.parent.keyboardInteractionModule.onMouseSelection(e);
15167
15204
  return;
@@ -15239,7 +15276,7 @@ class WorkCellInteraction {
15239
15276
  return true;
15240
15277
  }
15241
15278
  target = closest(e.target, '.' + HEADER_CELLS_CLASS);
15242
- if (this.parent.activeView.isTimelineView() && !isNullOrUndefined(target)) {
15279
+ if (this.parent.activeView && this.parent.activeView.isTimelineView() && !isNullOrUndefined(target)) {
15243
15280
  return true;
15244
15281
  }
15245
15282
  return false;
@@ -16336,7 +16373,8 @@ class ResourceBase {
16336
16373
  getResourceRenderDates() {
16337
16374
  // eslint-disable-next-line prefer-spread
16338
16375
  const resourceDates = [].concat.apply([], this.lastResourceLevel.map((e) => e.renderDates));
16339
- const removeDuplicateDates = (dateColl) => dateColl.filter((date, index, dates) => dates.map((dateObj) => dateObj.getTime()).indexOf(date.getTime()) === index);
16376
+ const time = resourceDates.map((dateObj) => dateObj.getTime());
16377
+ const removeDuplicateDates = (dateColl) => dateColl.filter((date, index, dates) => time.indexOf(date.getTime()) === index);
16340
16378
  const renderDates = removeDuplicateDates(resourceDates);
16341
16379
  renderDates.sort((a, b) => a.getTime() - b.getTime());
16342
16380
  return renderDates;
@@ -16496,7 +16534,8 @@ class ResourceBase {
16496
16534
  index = resource.dataSource.map((e) => e[resource.idField]).indexOf(id);
16497
16535
  }
16498
16536
  }
16499
- const offsetTarget = this.parent.element.querySelector(`.${HEADER_ROW_CLASS}:nth-child(${levelIndex + 1})`);
16537
+ const offsetTarget = this.parent.currentView === 'Month' ? this.parent.element.querySelector(`.${DATE_HEADER_WRAP_CLASS} tbody tr:nth-child(${levelIndex + 1})`)
16538
+ : this.parent.element.querySelector(`.${HEADER_ROW_CLASS}:nth-child(${levelIndex + 1})`);
16500
16539
  const offset = [].slice.call(offsetTarget.children).map((node) => node.offsetLeft);
16501
16540
  scrollElement.scrollLeft = offset[parseInt(index.toString(), 10)];
16502
16541
  }
@@ -16687,6 +16726,13 @@ let Schedule = class Schedule extends Component {
16687
16726
  this.element.appendChild(this.createElement('div', { className: TABLE_CONTAINER_CLASS }));
16688
16727
  }
16689
16728
  }
16729
+ getEventTemplateName(resIndex) {
16730
+ const templateName = 'eventTemplate_' + resIndex;
16731
+ if (this.activeEventTemplates.indexOf(templateName) < 0) {
16732
+ this.activeEventTemplates.push(templateName);
16733
+ }
16734
+ return templateName;
16735
+ }
16690
16736
  /**
16691
16737
  * Method to render react templates
16692
16738
  *
@@ -17273,6 +17319,7 @@ let Schedule = class Schedule extends Component {
17273
17319
  this.resourceCollection = [];
17274
17320
  this.currentAction = null;
17275
17321
  this.selectedElements = [];
17322
+ this.activeEventTemplates = [];
17276
17323
  this.setViewOptions();
17277
17324
  }
17278
17325
  getDefaultLocale() {
@@ -17741,7 +17788,7 @@ let Schedule = class Schedule extends Component {
17741
17788
  }
17742
17789
  onScheduleResize() {
17743
17790
  if (isNullOrUndefined(this.activeView) || ((this.isAdaptive || isMobile()) && document.activeElement
17744
- && document.activeElement.classList.contains(SUBJECT_CLASS))) {
17791
+ && document.activeElement.classList.contains(SUBJECT_CLASS)) || this.uiStateValues.isTapHold) {
17745
17792
  return;
17746
17793
  }
17747
17794
  if (this.virtualScrollModule && this.activeView.isTimelineView()) {
@@ -20070,6 +20117,10 @@ class Resize extends ActionBase {
20070
20117
  }
20071
20118
  }
20072
20119
  resizeStart(e) {
20120
+ if (e && e.type === 'touchstart' && (!this.parent.uiStateValues.isTapHold ||
20121
+ !closest(e.target, '.' + APPOINTMENT_BORDER))) {
20122
+ return;
20123
+ }
20073
20124
  this.actionObj.action = 'resize';
20074
20125
  this.actionObj.slotInterval = this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount;
20075
20126
  this.actionObj.interval = this.actionObj.slotInterval;
@@ -20133,6 +20184,9 @@ class Resize extends ActionBase {
20133
20184
  });
20134
20185
  }
20135
20186
  resizing(e) {
20187
+ if (e && e.type === 'touchmove') {
20188
+ e.preventDefault();
20189
+ }
20136
20190
  if (this.parent.quickPopup) {
20137
20191
  this.parent.quickPopup.quickPopupHide();
20138
20192
  }
@@ -20322,7 +20376,7 @@ class Resize extends ActionBase {
20322
20376
  this.removeCloneElementClasses();
20323
20377
  this.removeCloneElement();
20324
20378
  this.actionClass('removeClass');
20325
- this.parent.uiStateValues.action = false;
20379
+ this.parent.uiStateValues.action = this.parent.uiStateValues.isTapHold = false;
20326
20380
  const resizeArgs = { cancel: false, data: this.getChangedData(), element: this.actionObj.element, event: e };
20327
20381
  this.parent.trigger(resizeStop, resizeArgs, (resizeEventArgs) => {
20328
20382
  if (resizeEventArgs.cancel) {
@@ -21228,7 +21282,6 @@ class DragAndDrop extends ActionBase {
21228
21282
  abort: '.' + EVENT_RESIZE_CLASS,
21229
21283
  clone: true,
21230
21284
  isDragScroll: true,
21231
- enableTapHold: this.parent.isAdaptive,
21232
21285
  enableTailMode: (this.parent.eventDragArea) ? true : false,
21233
21286
  cursorAt: (this.parent.eventDragArea) ? { left: -20, top: -20 } : { left: 0, top: 0 },
21234
21287
  dragArea: this.dragArea,
@@ -21246,6 +21299,10 @@ class DragAndDrop extends ActionBase {
21246
21299
  this.parent.element.querySelector('.' + CONTENT_TABLE_CLASS);
21247
21300
  }
21248
21301
  dragHelper(e) {
21302
+ if (e.sender && e.sender.type === 'touchmove' && (!this.parent.uiStateValues.isTapHold ||
21303
+ !e.element.classList.contains(APPOINTMENT_BORDER))) {
21304
+ return null;
21305
+ }
21249
21306
  this.setDragActionDefaultValues();
21250
21307
  this.actionObj.element = e.element;
21251
21308
  this.actionObj.action = 'drag';
@@ -21454,6 +21511,9 @@ class DragAndDrop extends ActionBase {
21454
21511
  return this.multiData;
21455
21512
  }
21456
21513
  drag(e) {
21514
+ if (e.event && e.event.type === 'touchmove') {
21515
+ e.event.preventDefault();
21516
+ }
21457
21517
  if (this.parent.quickPopup) {
21458
21518
  this.parent.quickPopup.quickPopupHide(true);
21459
21519
  }
@@ -21543,7 +21603,7 @@ class DragAndDrop extends ActionBase {
21543
21603
  clearInterval(this.actionObj.scrollInterval);
21544
21604
  this.actionObj.scrollInterval = null;
21545
21605
  this.actionClass('removeClass');
21546
- this.parent.uiStateValues.action = false;
21606
+ this.parent.uiStateValues.action = this.parent.uiStateValues.isTapHold = false;
21547
21607
  if (this.isAllowDrop(e)) {
21548
21608
  return;
21549
21609
  }
@@ -23124,7 +23184,7 @@ class VerticalView extends ViewBase {
23124
23184
  this.parent.uiStateValues.top = target.scrollTop;
23125
23185
  }
23126
23186
  this.parent.uiStateValues.left = target.scrollLeft;
23127
- if (!isNullOrUndefined(this.parent.quickPopup)) {
23187
+ if (!isNullOrUndefined(this.parent.quickPopup) && !this.parent.uiStateValues.isTapHold) {
23128
23188
  this.parent.quickPopup.quickPopupHide();
23129
23189
  }
23130
23190
  this.setPersistence();
@@ -23484,6 +23544,10 @@ class VerticalView extends ViewBase {
23484
23544
  remove(this.element.querySelector('tbody tr'));
23485
23545
  this.renderHeader();
23486
23546
  this.parent.notify(contentReady, {});
23547
+ const dateHeader = this.element.querySelector('.' + DATE_HEADER_WRAP_CLASS);
23548
+ if (dateHeader) {
23549
+ dateHeader.scrollLeft = this.parent.uiStateValues.left;
23550
+ }
23487
23551
  }
23488
23552
  renderLayout(type) {
23489
23553
  this.setPanel(createElement('div', { className: TABLE_WRAP_CLASS }));
@@ -24185,6 +24249,10 @@ class Month extends ViewBase {
24185
24249
  remove(this.element.querySelector('tbody tr'));
24186
24250
  this.renderHeader();
24187
24251
  this.parent.notify(contentReady, {});
24252
+ const dateHeader = this.element.querySelector('.' + DATE_HEADER_WRAP_CLASS);
24253
+ if (dateHeader) {
24254
+ dateHeader.scrollLeft = this.parent.uiStateValues.left;
24255
+ }
24188
24256
  }
24189
24257
  wireCellEvents(element) {
24190
24258
  EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);