extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-10-06 02:02:24 +02: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

67
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 {formatDate, formatTime} from "../../api/js/etemplate/Et2Date/Et2Date";
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
@ -185,58 +187,45 @@ export class et2_calendar_planner extends et2_calendar_view implements et2_IDeta
* they can adjust the length. Should be a little better on resources
* 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);
var that = this;
//Resizable event handler
jQuery(this).resizable
interact(this).resizable
({
distance: 10,
grid: [5, 10000],
autoHide: false,
handles: 'e',
invert: "reposition",
edges: {right: true},
startAxis: "x",
lockAxis: "x",
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
*
* @param {jQuery.Event} event
* @param {Object} ui
* @param {InteractEvent} event
*/
start: function(event, ui)
onstart: function(event : InteractEvent)
{
if(planner.drag_create.start)
{
// Abort drag to create, we're dragging to resize
planner._drag_create_end({});
}
event.target.classList.add("resizing");
},
/**
* Triggered at the end of resizing the calEvent.
*
* @param {event} event
* @param {Object} ui
* @param {InteractEvent} event
*/
stop:function(event, ui)
onend: function(event : InteractEvent)
{
interact(this).unset();
var e = new jQuery.Event('change');
e.originalEvent = event;
e.data = {duration: 0};
@ -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
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
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();
}
@ -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);
}
},
}.bind(this),
/**
* Triggered during the resize, on the drag of the resize handler
*
* @param {event} event
* @param {Object} ui
* @param {InteractEvent} event
*/
resize:function(event, ui)
onmove: function(event : InteractEvent)
{
event.target.style.width = event.rect.width + "px";
let position;
if(planner.options.group_by == 'month')
{
@ -290,13 +276,16 @@ export class et2_calendar_planner extends et2_calendar_view implements et2_IDeta
}
else
{
position = {top: ui.position.top, left: ui.position.left + ui.helper.width()};
}
planner._drag_helper(this,position,ui.helper.outerHeight());
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)
});
})
.on('mousemove', function(event) {
});
this.div
.on('mousemove', function(event)
{
// Ignore headers
if(planner.headers.has(event.target).length !== 0)
{