extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-22 07:53:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nathan 2022-05-24 16:52:16 -06:00
parent ece3813459
commit 12d2a65466
1 changed files with 90 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
calendar/js/et2_widget_planner.ts
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,118 +187,105 @@ 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 {
planner._get_event_info(this); // Load the event
var that = this; planner._get_event_info(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. /**
* * If dragging to resize an event, abort drag to create
* @param {event} event *
* @param {Object} ui * @param {InteractEvent} event
*/ */
create:function(event, ui) onstart: function(event : InteractEvent)
{
if(planner.drag_create.start)
{ {
var resizeHelper = event.target.getAttribute('data-resize'); // Abort drag to create, we're dragging to resize
if (resizeHelper == 'WD' || resizeHelper == 'WDS') planner._drag_create_end({});
{ }
jQuery(this).resizable('destroy'); event.target.classList.add("resizing");
} },
},
/** /**
* If dragging to resize an event, abort drag to create * Triggered at the end of resizing the calEvent.
* *
* @param {jQuery.Event} event * @param {InteractEvent} event
* @param {Object} ui */
*/ onend: function(event : InteractEvent)
start: function(event, ui) {
interact(this).unset();
var e = new jQuery.Event('change');
e.originalEvent = event;
e.data = {duration: 0};
var event_data = planner._get_event_info(this);
var event_widget = planner.getWidgetById(event_data.widget_id);
var sT = event_widget.options.value.start_m;
if(typeof this.dropEnd != 'undefined')
{ {
if(planner.drag_create.start) var eT = parseInt(this.dropEnd.getUTCHours() * 60) + parseInt(this.dropEnd.getUTCMinutes());
{ e.data.duration = ((eT - sT) / 60) * 3600;
// Abort drag to create, we're dragging to resize
planner._drag_create_end({});
}
},
/**
* Triggered at the end of resizing the calEvent.
*
* @param {event} event
* @param {Object} ui
*/
stop:function(event, ui)
{
var e = new jQuery.Event('change');
e.originalEvent = event;
e.data = {duration: 0};
var event_data = planner._get_event_info(this);
var event_widget = planner.getWidgetById(event_data.widget_id);
var sT = event_widget.options.value.start_m;
if (typeof this.dropEnd != 'undefined')
{
var eT = parseInt(this.dropEnd.getUTCHours() * 60) + parseInt(this.dropEnd.getUTCMinutes());
e.data.duration = ((eT - sT)/60) * 3600;
if(event_widget)
{
event_widget.options.value.end_m = eT;
event_widget.options.value.duration = e.data.duration;
}
// Leave the helper there until the update is done
var loading = ui.helper.clone().appendTo(ui.helper.parent());
// and add a loading icon so user knows something is happening
jQuery('.calendar_timeDemo',loading).after('<div class="loading"></div>');
jQuery(this).trigger(e);
// That cleared the resize handles, so remove for re-creation...
jQuery(this).resizable('destroy');
// Remove loading, done or not
loading.remove();
}
// Clear the helper, re-draw
if(event_widget) if(event_widget)
{ {
(<et2_calendar_planner_row>event_widget.getParent()).position_event(event_widget); event_widget.options.value.end_m = eT;
event_widget.options.value.duration = e.data.duration;
} }
},
/** // Leave the helper there until the update is done
* Triggered during the resize, on the drag of the resize handler var loading = event_data.event_node;
*
* @param {event} event // and add a loading icon so user knows something is happening
* @param {Object} ui jQuery('.calendar_timeDemo', loading).after('<div class="loading"></div>');
*/
resize:function(event, ui) jQuery(this).trigger(e);
{
let position; // Remove loading, done or not
if(planner.options.group_by == 'month') loading.remove();
{
position = {left: event.clientX, top: event.clientY};
}
else
{
position = {top: ui.position.top, left: ui.position.left + ui.helper.width()};
}
planner._drag_helper(this,position,ui.helper.outerHeight());
} }
}); // Clear the helper, re-draw
}) if(event_widget)
.on('mousemove', function(event) { {
(<et2_calendar_planner_row>event_widget.getParent()).position_event(event_widget);
}
}.bind(this),
/**
* Triggered during the resize, on the drag of the resize handler
*
* @param {InteractEvent} event
*/
onmove: function(event : InteractEvent)
{
event.target.style.width = event.rect.width + "px";
let position;
if(planner.options.group_by == 'month')
{
position = {left: event.clientX, top: event.clientY};
}
else
{
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, event.rect.height);
}.bind(this)
});
});
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)
{ {