From 0e011c63e792a7bd519431c53ef8d5a686d9622a 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 1c9c49dbb2..12c4260ad0 100644 --- a/calendar/js/et2_widget_event.ts +++ b/calendar/js/et2_widget_event.ts @@ -1040,6 +1040,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 10aa2a858b..078bcf4c78 100644 --- a/calendar/js/et2_widget_timegrid.ts +++ b/calendar/js/et2_widget_timegrid.ts @@ -1971,7 +1971,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 @@ -2123,34 +2123,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); } /** @@ -2160,7 +2169,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) { @@ -2178,7 +2190,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); } /**