Swap jQueryUI for interact.js for resizing events in planner view

This commit is contained in:
nathan 2022-05-24 16:52:16 -06:00
parent ece3813459
commit 12d2a65466

View File

@ -33,6 +33,8 @@ import {et2_dataview_grid} from "../../api/js/etemplate/et2_dataview_view_grid";
import {et2_selectbox} from "../../api/js/etemplate/et2_widget_selectbox"; import {et2_selectbox} from "../../api/js/etemplate/et2_widget_selectbox";
import {formatDate, formatTime} from "../../api/js/etemplate/Et2Date/Et2Date"; import {formatDate, formatTime} from "../../api/js/etemplate/Et2Date/Et2Date";
import {holidays} from "../../api/js/etemplate/Et2Date/Holidays"; import {holidays} from "../../api/js/etemplate/Et2Date/Holidays";
import interact from "@interactjs/interactjs/index";
import type {InteractEvent} from "@interactjs/core/InteractEvent";
/** /**
* Class which implements the "calendar-planner" XET-Tag for displaying a longer * Class which implements the "calendar-planner" XET-Tag for displaying a longer
@ -185,68 +187,55 @@ export class et2_calendar_planner extends et2_calendar_view implements et2_IDeta
* they can adjust the length. Should be a little better on resources * they can adjust the length. Should be a little better on resources
* than binding it for every calendar event. * than binding it for every calendar event.
*/ */
this.div.on('mouseover', '.calendar_calEvent:not(.ui-resizable):not(.rowNoEdit)', function() { this.div.on('mouseover', '.calendar_calEvent:not(.ui-resizable):not(.rowNoEdit)', function()
{
// Load the event // Load the event
planner._get_event_info(this); planner._get_event_info(this);
var that = this; var that = this;
//Resizable event handler //Resizable event handler
jQuery(this).resizable interact(this).resizable
({ ({
distance: 10, invert: "reposition",
grid: [5, 10000], edges: {right: true},
autoHide: false, startAxis: "x",
handles: 'e', lockAxis: "x",
containment:'parent', containment: 'parent',
/**
* Triggered when the resizable is created.
*
* @param {event} event
* @param {Object} ui
*/
create:function(event, ui)
{
var resizeHelper = event.target.getAttribute('data-resize');
if (resizeHelper == 'WD' || resizeHelper == 'WDS')
{
jQuery(this).resizable('destroy');
}
},
/** /**
* If dragging to resize an event, abort drag to create * If dragging to resize an event, abort drag to create
* *
* @param {jQuery.Event} event * @param {InteractEvent} event
* @param {Object} ui
*/ */
start: function(event, ui) onstart: function(event : InteractEvent)
{ {
if(planner.drag_create.start) if(planner.drag_create.start)
{ {
// Abort drag to create, we're dragging to resize // Abort drag to create, we're dragging to resize
planner._drag_create_end({}); planner._drag_create_end({});
} }
event.target.classList.add("resizing");
}, },
/** /**
* Triggered at the end of resizing the calEvent. * Triggered at the end of resizing the calEvent.
* *
* @param {event} event * @param {InteractEvent} event
* @param {Object} ui
*/ */
stop:function(event, ui) onend: function(event : InteractEvent)
{ {
interact(this).unset();
var e = new jQuery.Event('change'); var e = new jQuery.Event('change');
e.originalEvent = event; e.originalEvent = event;
e.data = {duration: 0}; e.data = {duration: 0};
var event_data = planner._get_event_info(this); var event_data = planner._get_event_info(this);
var event_widget = planner.getWidgetById(event_data.widget_id); var event_widget = planner.getWidgetById(event_data.widget_id);
var sT = event_widget.options.value.start_m; var sT = event_widget.options.value.start_m;
if (typeof this.dropEnd != 'undefined') if(typeof this.dropEnd != 'undefined')
{ {
var eT = parseInt(this.dropEnd.getUTCHours() * 60) + parseInt(this.dropEnd.getUTCMinutes()); var eT = parseInt(this.dropEnd.getUTCHours() * 60) + parseInt(this.dropEnd.getUTCMinutes());
e.data.duration = ((eT - sT)/60) * 3600; e.data.duration = ((eT - sT) / 60) * 3600;
if(event_widget) if(event_widget)
{ {
@ -255,16 +244,13 @@ export class et2_calendar_planner extends et2_calendar_view implements et2_IDeta
} }
// Leave the helper there until the update is done // Leave the helper there until the update is done
var loading = ui.helper.clone().appendTo(ui.helper.parent()); var loading = event_data.event_node;
// and add a loading icon so user knows something is happening // and add a loading icon so user knows something is happening
jQuery('.calendar_timeDemo',loading).after('<div class="loading"></div>'); jQuery('.calendar_timeDemo', loading).after('<div class="loading"></div>');
jQuery(this).trigger(e); jQuery(this).trigger(e);
// That cleared the resize handles, so remove for re-creation...
jQuery(this).resizable('destroy');
// Remove loading, done or not // Remove loading, done or not
loading.remove(); loading.remove();
} }
@ -273,16 +259,16 @@ export class et2_calendar_planner extends et2_calendar_view implements et2_IDeta
{ {
(<et2_calendar_planner_row>event_widget.getParent()).position_event(event_widget); (<et2_calendar_planner_row>event_widget.getParent()).position_event(event_widget);
} }
}, }.bind(this),
/** /**
* Triggered during the resize, on the drag of the resize handler * Triggered during the resize, on the drag of the resize handler
* *
* @param {event} event * @param {InteractEvent} event
* @param {Object} ui
*/ */
resize:function(event, ui) onmove: function(event : InteractEvent)
{ {
event.target.style.width = event.rect.width + "px";
let position; let position;
if(planner.options.group_by == 'month') if(planner.options.group_by == 'month')
{ {
@ -290,13 +276,16 @@ export class et2_calendar_planner extends et2_calendar_view implements et2_IDeta
} }
else else
{ {
position = {top: ui.position.top, left: ui.position.left + ui.helper.width()}; let offset = parseInt(getComputedStyle(event.target).left) - event.rect.left;
} position = {top: event.rect.top, left: event.rect.right + offset};
planner._drag_helper(this,position,ui.helper.outerHeight());
} }
planner._drag_helper(this, position, event.rect.height);
}.bind(this)
}); });
}) });
.on('mousemove', function(event) { this.div
.on('mousemove', function(event)
{
// Ignore headers // Ignore headers
if(planner.headers.has(event.target).length !== 0) if(planner.headers.has(event.target).length !== 0)
{ {