From cdd15139c23bd24156083399bb62ea3a79823f09 Mon Sep 17 00:00:00 2001 From: nathan Date: Thu, 20 Jul 2023 16:33:17 -0600 Subject: [PATCH] Calendar: More work on drag vs jiggle click Now user must drag into the next time block to start drag to create. Any movement inside the same time block is treated as a click. --- calendar/js/et2_widget_event.ts | 1 + calendar/js/et2_widget_timegrid.ts | 59 +++++++++++++++++++++--------- calendar/js/et2_widget_view.ts | 8 ++-- 3 files changed, 48 insertions(+), 20 deletions(-) diff --git a/calendar/js/et2_widget_event.ts b/calendar/js/et2_widget_event.ts index 0d512ff39a..b5a1084596 100644 --- a/calendar/js/et2_widget_event.ts +++ b/calendar/js/et2_widget_event.ts @@ -1039,6 +1039,7 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached result = this.onclick.apply(this, args); } + _ev.stopImmediatePropagation(); return result; } diff --git a/calendar/js/et2_widget_timegrid.ts b/calendar/js/et2_widget_timegrid.ts index 5f4126f90e..1179d8fbd6 100644 --- a/calendar/js/et2_widget_timegrid.ts +++ b/calendar/js/et2_widget_timegrid.ts @@ -1974,7 +1974,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet if(_ev.target.dataset.id || jQuery(_ev.target).parents('.calendar_calEvent').length) { // Event came from inside, maybe a calendar event - var event = this._get_event_info(_ev.originalEvent.target); + var event = this._get_event_info(_ev.target.closest(".calendar_calEvent")); if(typeof this.onclick == 'function') { // Make sure function gets a reference to the widget, splice it in as 2. argument if not @@ -2126,34 +2126,43 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet var timegrid = this; this.div.on('mousemove.dragcreate', function() { + var end = jQuery.extend({}, timegrid.gridHover[0].dataset); + let date = timegrid.date_helper(end.date); + if(end.hour) + { + date.setUTCHours(end.hour); + } + if(end.minute) + { + date.setUTCMinutes(end.minute); + } + if(!timegrid.drag_create.event && date.toJSON() != start.date.toJSON()) + { + timegrid._drag_create_start(start); + // Create the event immediately + timegrid._drag_create_event(); + } if(timegrid.drag_create.event && timegrid.drag_create.parent && timegrid.drag_create.end) { - var end = jQuery.extend({}, timegrid.gridHover[0].dataset); - if(end.date) + + timegrid.drag_create.end.date = date; + if(timegrid.drag_create.start.date.toJSON() == timegrid.drag_create.end.date.toJSON()) { - let date = timegrid.date_helper(end.date); - if(end.hour) - { - date.setUTCHours(end.hour); - } - if(end.minute) - { - date.setUTCMinutes(end.minute); - } - timegrid.drag_create.end.date = date; + // Minimum drag size is time granularity or default + timegrid.drag_create.end.date.setUTCMinutes(timegrid.drag_create.end.date.getUTCMinutes() + (timegrid.options.granularity || timegrid.egw().preference("defaultlength", "calendar"))); } + try { timegrid._drag_update_event(); } - catch (e) + catch(e) { timegrid._drag_create_end(); } } }); } - return this._drag_create_start(start); } /** @@ -2163,7 +2172,10 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet */ _mouse_up(event) { - if (this.options.readonly) return; + if(this.options.readonly) + { + return; + } let end = {...this.gridHover[0].dataset}; if(end.date) { @@ -2181,7 +2193,20 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet this.div.off('mousemove.dragcreate'); this.gridHover.css('cursor', ''); - this._drag_create_end(this.drag_create.event ? {date: end.date} : undefined); + if(this.drag_create.end) + { + this._drag_create_end(this.drag_create.end); + } + else + { + // Not dragged enough to count, but Firefox will still count it as a click + if(navigator.userAgent.toLowerCase().indexOf('firefox') == -1) + { + // Fake a click for non-ff + event.stopImmediatePropagation(); + this.gridHover[0].dispatchEvent(new Event("click")); + } + } } /** diff --git a/calendar/js/et2_widget_view.ts b/calendar/js/et2_widget_view.ts index 10c3cadabb..690fd110f4 100644 --- a/calendar/js/et2_widget_view.ts +++ b/calendar/js/et2_widget_view.ts @@ -519,12 +519,14 @@ export class et2_calendar_view extends et2_valueWidget */ _drag_create_start(start) { - this.drag_create.start = jQuery.extend({},start); + this.drag_create.start = jQuery.extend({}, start); if(!this.drag_create.start.date) { this.drag_create.start = null; } - this.drag_create.end = start; + this.drag_create.end = {...start, date: new Date(start.date.valueOf())}; + // Begin at default duration + this.drag_create.end.date.setUTCMinutes(this.drag_create.end.date.getUTCMinutes() + (this.egw().preference("defaultlength", "calendar") ?? 60)); // Clear some stuff, if last time did not complete if(this.drag_create.event) @@ -540,7 +542,7 @@ export class et2_calendar_view extends et2_valueWidget { // Create event this._drag_create_event() - }, 500); + }, 100); } /**