From ece38134591c3f5dcc2c28f6ac0ee99232613a94 Mon Sep 17 00:00:00 2001 From: nathan Date: Tue, 24 May 2022 14:53:11 -0600 Subject: [PATCH] Remove jQueryUI for moving events in timegrid view --- api/js/egw_action/egw_action_dragdrop.js | 2 +- calendar/js/et2_widget_event.ts | 36 ++++---- calendar/js/et2_widget_timegrid.ts | 101 +++++++++++++---------- 3 files changed, 79 insertions(+), 60 deletions(-) diff --git a/api/js/egw_action/egw_action_dragdrop.js b/api/js/egw_action/egw_action_dragdrop.js index a4f8f0ddf9..437ec9bcaf 100644 --- a/api/js/egw_action/egw_action_dragdrop.js +++ b/api/js/egw_action/egw_action_dragdrop.js @@ -215,7 +215,7 @@ export function egwDragActionImplementation() node.setAttribute('draggable', true); const dragstart = function(event) { - event.stopImmediatePropagation(); + //event.stopImmediatePropagation(); if (action) { if (_context.isSelection(event)) return; diff --git a/calendar/js/et2_widget_event.ts b/calendar/js/et2_widget_event.ts index 5a2bd3e336..5f9065bcf2 100644 --- a/calendar/js/et2_widget_event.ts +++ b/calendar/js/et2_widget_event.ts @@ -111,23 +111,27 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached window.setTimeout(function () { jQuery('body .egw_tooltip') - .css('border', 'none') - .on('mouseenter', function () + .css('border', 'none') + .on('mouseenter', function() + { + if(event.div) { - event.div.off('mouseleave.tooltip'); - jQuery('body.egw_tooltip').remove(); - jQuery('body').append(this); - jQuery(this).stop(true).fadeTo(400, 1) - .on('mouseleave', function () - { - jQuery(this).fadeOut('400', function () - { - jQuery(this).remove(); - // Set up to work again - event.set_statustext(event._tooltip()); - }); - }); - }); + event.div.off('mouseleave.tooltip'); + } + + jQuery('body.egw_tooltip').remove(); + jQuery('body').append(this); + jQuery(this).stop(true).fadeTo(400, 1) + .on('mouseleave', function() + { + jQuery(this).fadeOut('400', function() + { + jQuery(this).remove(); + // Set up to work again + event.set_statustext(event._tooltip()); + }); + }); + }); }, 105); }); diff --git a/calendar/js/et2_widget_timegrid.ts b/calendar/js/et2_widget_timegrid.ts index 50ad75d2ba..f71738ec37 100644 --- a/calendar/js/et2_widget_timegrid.ts +++ b/calendar/js/et2_widget_timegrid.ts @@ -356,22 +356,26 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet // Customize and override some draggable settings this.div - .on('dragcreate','.calendar_calEvent', function(event, ui) { - jQuery(this).draggable('option','cancel','.rowNoEdit'); + .on('dragcreate', '.calendar_calEvent', function(event, ui) + { + jQuery(this).draggable('option', 'cancel', '.rowNoEdit'); // Act like you clicked the header, makes it easier to position // but put it to the side (-5) so we can still do the hover - jQuery(this).draggable('option','cursorAt', {top: 5, left: -5}); + jQuery(this).draggable('option', 'cursorAt', {top: 5, left: -5}); }) - .on('dragstart', '.calendar_calEvent', function(event,ui) { - jQuery('.calendar_calEvent', ui.helper).width(jQuery(this).width()) - .height(jQuery(this).outerHeight()) - .css('top', '').css('left', '') - .appendTo(ui.helper); - ui.helper.width(jQuery(this).width()); - + .on('dragstart', '.calendar_calEvent', function(event, ui) + { // Cancel drag to create, we're dragging an existing event timegrid.drag_create.start = null; timegrid._drag_create_end(); + timegrid.div.on("drag.timegrid", (e) => + { + timegrid._get_time_from_position(e.clientX, e.clientY); + }) + }) + .on("dragend", () => + { + timegrid.div.off("drag.timegrid"); }) .on('mousemove', function(event) { @@ -508,23 +512,17 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet } // Leave the helper there until the update is done - var loading = ui.helper.clone(true).appendTo(jQuery('body')); + var loading = event_data.event_node; // and add a loading icon so user knows something is happening - if(jQuery('.calendar_timeDemo',loading).length == 0) - { - jQuery('.calendar_calEventHeader',loading).addClass('loading'); - } - else - { - jQuery('.calendar_timeDemo',loading).after('
'); - } + jQuery('.calendar_calEventHeader', event_widget.div).addClass('loading'); - event_widget.recur_prompt(function(button_id) { + event_widget.recur_prompt(function(button_id) + { if(button_id === 'cancel' || !button_id) { // Need to refresh the event with original info to clean up - var app_id = event_widget.options.value.app_id ? event_widget.options.value.app_id : event_widget.options.value.id + (event_widget.options.value.recur_type ? ':'+event_widget.options.value.recur_date : ''); - egw().dataStoreUID('calendar::'+app_id,egw.dataGetUIDdata('calendar::'+app_id).data); + var app_id = event_widget.options.value.app_id ? event_widget.options.value.app_id : event_widget.options.value.id + (event_widget.options.value.recur_type ? ':' + event_widget.options.value.recur_date : ''); + egw().dataStoreUID('calendar::' + app_id, egw.dataGetUIDdata('calendar::' + app_id).data); loading.remove(); return; } @@ -539,7 +537,11 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet // If it is an integrated infolog event we need to edit infolog entry egw().json('stylite_infolog_calendar_integration::ajax_moveInfologEvent', [event_data.app_id, target_date || false, duration], - function() {loading.remove();} + function() + { + debugger; + loading.remove(); + } ).sendRequest(true); } else @@ -560,13 +562,16 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet var start = new Date(target_date); egw().json('calendar.calendar_uiforms.ajax_moveEvent', [ - button_id==='series' ? event_data.id : event_data.app_id,event_data.owner, + button_id === 'series' ? event_data.id : event_data.app_id, event_data.owner, start, - timegrid.options.owner||egw.user('account_id'), + timegrid.options.owner || egw.user('account_id'), duration, series_instance ], - function() { loading.remove();} + function() + { + loading.remove(); + } ).sendRequest(true); }; @@ -1269,11 +1274,18 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet widget_object.getActionLink('egw_link_drop').enabled = !enabled; }; - aoi.doTriggerEvent = function(_event, _data) { + aoi.doTriggerEvent = function(_event, _data) + { // Determine target node var event = _data.event || false; - if(!event) return; - if(_data.ui.draggable.hasClass('rowNoEdit')) return; + if(!event) + { + return; + } + if(_data.ui.draggable.classList.contains('rowNoEdit')) + { + return; + } /* We have to handle the drop in the normal event stream instead of waiting @@ -1282,16 +1294,18 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet if(event.type === 'drop') { var dropEnd = false; - var helper = jQuery('.calendar_d-n-d_timeCounter',_data.ui.helper)[0]; + var helper = jQuery('.calendar_d-n-d_timeCounter', _data.ui.helper)[0]; if(helper && helper.dropEnd && helper.dropEnd.length >= 1) - if (typeof this.dropEnd !== 'undefined' && this.dropEnd.length >= 1) { - dropEnd = helper.dropEnd[0].dataset || false; + if(typeof this.dropEnd !== 'undefined' && this.dropEnd.length >= 1) + { + dropEnd = helper.dropEnd[0].dataset || false; + } } - this.getWidget()._event_drop.call(jQuery('.calendar_d-n-d_timeCounter',_data.ui.helper)[0],this.getWidget(),event, _data.ui, dropEnd); + this.getWidget()._event_drop.call(jQuery('.calendar_d-n-d_timeCounter', _data.ui.helper)[0], this.getWidget(), event, _data.ui, dropEnd); } var drag_listener = function(_event, ui) { - aoi.getWidget()._drag_helper(jQuery('.calendar_d-n-d_timeCounter',ui.helper)[0],ui.helper[0],0); + aoi.getWidget()._drag_helper(jQuery('.calendar_d-n-d_timeCounter', _data.ui.helper)[0], _data.ui.helper[0], 0); if(aoi.getWidget().daily_owner) { _invite_enabled( @@ -1301,24 +1315,25 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet ); } }; - var time = jQuery('.calendar_d-n-d_timeCounter',_data.ui.helper); + var time = jQuery('.calendar_d-n-d_timeCounter', _data.ui.helper); switch(_event) { // Triggered once, when something is dragged into the timegrid's div case EGW_AI_DRAG_OVER: // Listen to the drag and update the helper with the time // This part lets us drag between different timegrids - _data.ui.draggable.on('drag.et2_timegrid'+widget_object.id, drag_listener); - _data.ui.draggable.on('dragend.et2_timegrid'+widget_object.id, function() { - _data.ui.draggable.off('drag.et2_timegrid' + widget_object.id); + jQuery(_data.ui.draggable).on('drag.et2_timegrid' + widget_object.id, drag_listener); + jQuery(_data.ui.draggable).on('dragend.et2_timegrid' + widget_object.id, function() + { + jQuery(_data.ui.draggable).off('drag.et2_timegrid' + widget_object.id); }); // Remove formatting for out-of-view events (full day non-blocking) - jQuery('.calendar_calEventHeader',_data.ui.helper).css('top',''); - jQuery('.calendar_calEventBody',_data.ui.helper).css('padding-top',''); + jQuery('.calendar_calEventHeader', _data.ui.helper).css('top', ''); + jQuery('.calendar_calEventBody', _data.ui.helper).css('padding-top', ''); // Disable invite / change actions for same calendar or already participant - var event = _data.ui.draggable.data('selected')[0]; + var event = _data.ui.selected[0]; if(!event || event.id && event.id.indexOf('calendar') !== 0) { event = false; @@ -1339,7 +1354,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet } else { - _data.ui.helper.prepend('
'); + jQuery(_data.ui.helper).prepend('
'); } break; @@ -1347,7 +1362,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet // Triggered once, when something is dragged out of the timegrid case EGW_AI_DRAG_OUT: // Stop listening - _data.ui.draggable.off('drag.et2_timegrid'+widget_object.id); + jQuery(_data.ui.draggable).off('drag.et2_timegrid' + widget_object.id); // Remove highlighted time square var timegrid = aoi.getWidget(); timegrid.gridHover.hide();