mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-21 23:43:17 +01:00
Replace jquery-ui dnd with egw-touch-dnd package
This commit is contained in:
Hadi Nategh
parent
8ca0d0c197
commit
19cf0faf60
@ -19,7 +19,7 @@
|
|||||||
import {egwAction,egwActionImplementation} from "./egw_action.js";
|
import {egwAction,egwActionImplementation} from "./egw_action.js";
|
||||||
import {getPopupImplementation} from "./egw_action_popup.js";
|
import {getPopupImplementation} from "./egw_action_popup.js";
|
||||||
import {EGW_AI_DRAG_OUT, EGW_AI_DRAG_OVER, EGW_AO_EXEC_THIS} from "./egw_action_constants.js";
|
import {EGW_AI_DRAG_OUT, EGW_AI_DRAG_OVER, EGW_AO_EXEC_THIS} from "./egw_action_constants.js";
|
||||||
|
import 'egw-touch-dnd/touch-dnd.js';
|
||||||
/**
|
/**
|
||||||
* Register the drag and drop handlers
|
* Register the drag and drop handlers
|
||||||
*/
|
*/
|
||||||
@ -317,85 +317,76 @@ export function egwDragActionImplementation()
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
jQuery(node).draggable(
|
let $draggable = jQuery(node).draggable({
|
||||||
{
|
delay: 250,
|
||||||
"distance": 20,
|
clone: function(e) {
|
||||||
"cursor": "move",
|
// The helper function is called before the start function
|
||||||
"cursorAt": { top: -12, left: -12 },
|
// is evoked. Call the given callback function. The callback
|
||||||
"helper": function(e) {
|
// function will gather the selected elements and action links
|
||||||
// The helper function is called before the start function
|
// and call the doExecuteImplementation function. This
|
||||||
// is evoked. Call the given callback function. The callback
|
// will call the onExecute function of the first action
|
||||||
// function will gather the selected elements and action links
|
// in order to obtain the helper object (stored in ai.helper)
|
||||||
// and call the doExecuteImplementation function. This
|
// and the multiple dragDropTypes (ai.ddTypes)
|
||||||
// will call the onExecute function of the first action
|
_callback.call(_context, false, ai);
|
||||||
// in order to obtain the helper object (stored in ai.helper)
|
|
||||||
// and the multiple dragDropTypes (ai.ddTypes)
|
|
||||||
_callback.call(_context, false, ai);
|
|
||||||
|
|
||||||
jQuery(node).data("ddTypes", ai.ddTypes);
|
jQuery(node).data("ddTypes", ai.ddTypes);
|
||||||
jQuery(node).data("selected", ai.selected);
|
jQuery(node).data("selected", ai.selected);
|
||||||
|
|
||||||
if (ai.helper)
|
if (ai.helper)
|
||||||
{
|
|
||||||
// Add a basic class to the helper in order to standardize the background layout
|
|
||||||
ai.helper.addClass('et2_egw_action_ddHelper');
|
|
||||||
|
|
||||||
// Append the helper object to the body element - this
|
|
||||||
// fixes a bug in IE: If the element isn't inserted into
|
|
||||||
// the DOM-tree jquery appends it to the parent node.
|
|
||||||
// In case this is a table it doesn't work correctly
|
|
||||||
jQuery("body").append(ai.helper);
|
|
||||||
return ai.helper;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Return an empty div if the helper dom node is not set
|
|
||||||
return ai.defaultDDHelper(ai.selected);//jQuery(document.createElement("div")).addClass('et2_egw_action_ddHelper');
|
|
||||||
},
|
|
||||||
"start": function(e) {
|
|
||||||
return ai.helper != null;
|
|
||||||
},
|
|
||||||
revert: function(valid)
|
|
||||||
{
|
{
|
||||||
var dTarget = this;
|
// Add a basic class to the helper in order to standardize the background layout
|
||||||
if (!valid)
|
ai.helper.addClass('et2_egw_action_ddHelper');
|
||||||
|
|
||||||
|
// Append the helper object to the body element - this
|
||||||
|
// fixes a bug in IE: If the element isn't inserted into
|
||||||
|
// the DOM-tree jquery appends it to the parent node.
|
||||||
|
// In case this is a table it doesn't work correctly
|
||||||
|
jQuery("body").append(ai.helper);
|
||||||
|
return ai.helper;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return an empty div if the helper dom node is not set
|
||||||
|
return ai.defaultDDHelper(ai.selected);//jQuery(document.createElement("div")).addClass('et2_egw_action_ddHelper');
|
||||||
|
},
|
||||||
|
revert: function(valid)
|
||||||
|
{
|
||||||
|
var dTarget = this;
|
||||||
|
if (!valid)
|
||||||
|
{
|
||||||
|
// Tolerance value of pixels arround the draggable target
|
||||||
|
// to distinguish whether the action was intended for dragging or selecting content.
|
||||||
|
var tipTelorance = 10;
|
||||||
|
var helperTop = ai.helper.position().top;
|
||||||
|
|
||||||
|
if (helperTop >= dTarget.offset().top
|
||||||
|
&& helperTop <= (dTarget.height() + dTarget.offset().top) + tipTelorance)
|
||||||
{
|
{
|
||||||
// Tolerance value of pixels arround the draggable target
|
var key = ["Mac68K","MacPPC","MacIntel"].indexOf(window.navigator.platform) < 0 ?
|
||||||
// to distinguish whether the action was intended for dragging or selecting content.
|
egw.lang("Ctrl") : egw.lang("Command ⌘");
|
||||||
var tipTelorance = 10;
|
// We can not use Ctrl key for FF because FF has specific function
|
||||||
var helperTop = ai.helper.position().top;
|
// for element selection bound to ctrl key and it would confilicts
|
||||||
|
// with our selection functionallity. Therefore, we use Alt key when
|
||||||
if (helperTop >= dTarget.offset().top
|
// it comes to FF regardless of OS.
|
||||||
&& helperTop <= (dTarget.height() + dTarget.offset().top) + tipTelorance)
|
if (window.navigator.userAgent.match(/firefox/i)) key = egw.lang("Alt");
|
||||||
{
|
egw.message(egw.lang('Hold [%1] key to select text eg. to copy it', key), 'info');
|
||||||
var key = ["Mac68K","MacPPC","MacIntel"].indexOf(window.navigator.platform) < 0 ?
|
|
||||||
egw.lang("Ctrl") : egw.lang("Command ⌘");
|
|
||||||
// We can not use Ctrl key for FF because FF has specific function
|
|
||||||
// for element selection bound to ctrl key and it would confilicts
|
|
||||||
// with our selection functionallity. Therefore, we use Alt key when
|
|
||||||
// it comes to FF regardless of OS.
|
|
||||||
if (window.navigator.userAgent.match(/firefox/i)) key = egw.lang("Alt");
|
|
||||||
egw.message(egw.lang('Hold [%1] key to select text eg. to copy it', key), 'info');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Invalid target
|
|
||||||
return true;
|
|
||||||
}
|
}
|
||||||
else
|
|
||||||
{
|
|
||||||
// Valid target
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Solves problem with scroll position changing in the grid
|
|
||||||
// component
|
|
||||||
"refreshPositions": true,
|
|
||||||
"scroll": false,
|
|
||||||
//"containment": "document",
|
|
||||||
"iframeFix": true,
|
|
||||||
"delay": 300
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
|
// Invalid target
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
// Valid target
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Solves problem with scroll position changing in the grid
|
||||||
|
// component
|
||||||
|
// "refreshPositions": true,
|
||||||
|
});
|
||||||
|
$draggable.on('draggable:start', function(e) {
|
||||||
|
return ai.helper != null;
|
||||||
|
});
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
@ -550,124 +541,118 @@ export function egwDropActionImplementation()
|
|||||||
|
|
||||||
if (node)
|
if (node)
|
||||||
{
|
{
|
||||||
jQuery(node).droppable(
|
let $droppable = jQuery(node).droppable({
|
||||||
|
accept: function(_draggable) {
|
||||||
|
if (typeof _draggable.data("ddTypes") != "undefined")
|
||||||
|
{
|
||||||
|
let accepted = self._fetchAccepted(
|
||||||
|
_callback.call(_context, "links", self, EGW_AO_EXEC_THIS));
|
||||||
|
|
||||||
|
// Check whether all drag types of the selected objects
|
||||||
|
// are accepted
|
||||||
|
let ddTypes = _draggable.data("ddTypes");
|
||||||
|
|
||||||
|
for (let i = 0; i < ddTypes.length; i++)
|
||||||
|
{
|
||||||
|
if (accepted.indexOf(ddTypes[i]) != -1)
|
||||||
|
{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hoverClass: "drop-hover",
|
||||||
|
});
|
||||||
|
$droppable.on('droppable:drop', function(event, ui) {
|
||||||
|
let draggable = ui.item;
|
||||||
|
let ddTypes = draggable.data("ddTypes");
|
||||||
|
let selected = draggable.data("selected");
|
||||||
|
|
||||||
|
let links = _callback.call(_context, "links", self, EGW_AO_EXEC_THIS);
|
||||||
|
|
||||||
|
// Disable all links which only accept types which are not
|
||||||
|
// inside ddTypes
|
||||||
|
for (let k in links)
|
||||||
{
|
{
|
||||||
"accept": function(_draggable) {
|
let accepted = links[k].actionObj.acceptedTypes;
|
||||||
if (typeof _draggable.data("ddTypes") != "undefined")
|
|
||||||
|
let enabled = false;
|
||||||
|
for (let i = 0; i < ddTypes.length; i++)
|
||||||
|
{
|
||||||
|
if (accepted.indexOf(ddTypes[i]) != -1)
|
||||||
{
|
{
|
||||||
var accepted = self._fetchAccepted(
|
enabled = true;
|
||||||
_callback.call(_context, "links", self, EGW_AO_EXEC_THIS));
|
break;
|
||||||
|
|
||||||
// Check whether all drag types of the selected objects
|
|
||||||
// are accepted
|
|
||||||
var ddTypes = _draggable.data("ddTypes");
|
|
||||||
|
|
||||||
for (var i = 0; i < ddTypes.length; i++)
|
|
||||||
{
|
|
||||||
if (accepted.indexOf(ddTypes[i]) != -1)
|
|
||||||
{
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
"drop": function(event, ui) {
|
// Check for allowing multiple selected
|
||||||
var draggable = ui.draggable;
|
if(!links[k].actionObj.allowOnMultiple && selected.length > 1)
|
||||||
var ddTypes = draggable.data("ddTypes");
|
{
|
||||||
var selected = draggable.data("selected");
|
enabled = false;
|
||||||
|
}
|
||||||
var links = _callback.call(_context, "links", self, EGW_AO_EXEC_THIS);
|
if(!enabled)
|
||||||
|
{
|
||||||
// Disable all links which only accept types which are not
|
links[k].enabled = false;
|
||||||
// inside ddTypes
|
links[k].visible = !links[k].actionObj.hideOnDisabled;
|
||||||
for (var k in links)
|
}
|
||||||
{
|
|
||||||
var accepted = links[k].actionObj.acceptedTypes;
|
|
||||||
|
|
||||||
var enabled = false;
|
|
||||||
for (var i = 0; i < ddTypes.length; i++)
|
|
||||||
{
|
|
||||||
if (accepted.indexOf(ddTypes[i]) != -1)
|
|
||||||
{
|
|
||||||
enabled = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Check for allowing multiple selected
|
|
||||||
if(!links[k].actionObj.allowOnMultiple && selected.length > 1)
|
|
||||||
{
|
|
||||||
enabled = false;
|
|
||||||
}
|
|
||||||
if(!enabled)
|
|
||||||
{
|
|
||||||
links[k].enabled = false;
|
|
||||||
links[k].visible = !links[k].actionObj.hideOnDisabled;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check whether there is only one link
|
|
||||||
var cnt = 0;
|
|
||||||
var lnk = null;
|
|
||||||
for (var k in links)
|
|
||||||
{
|
|
||||||
if (links[k].enabled && links[k].visible)
|
|
||||||
{
|
|
||||||
lnk = links[k];
|
|
||||||
cnt += 1 + links[k].actionObj.children.length;
|
|
||||||
|
|
||||||
// Add ui, so you know what happened where
|
|
||||||
lnk.actionObj.ui = ui;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cnt == 1)
|
|
||||||
{
|
|
||||||
window.setTimeout(function() {
|
|
||||||
lnk.actionObj.execute(selected, _context);
|
|
||||||
},0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (cnt > 1)
|
|
||||||
{
|
|
||||||
// More than one drop action link is associated
|
|
||||||
// to the drop event - show those as a popup menu
|
|
||||||
// and let the user decide which one to use.
|
|
||||||
// This is possible as the popup and the popup action
|
|
||||||
// object and the drop action object share same
|
|
||||||
// set of properties.
|
|
||||||
var popup = getPopupImplementation();
|
|
||||||
var pos = popup._getPageXY(event.originalEvent);
|
|
||||||
|
|
||||||
// Don't add paste actions, this is a drop
|
|
||||||
popup.auto_paste = false;
|
|
||||||
|
|
||||||
window.setTimeout(function() {
|
|
||||||
popup.doExecuteImplementation(pos, selected, links,
|
|
||||||
_context);
|
|
||||||
// Reset, popup is reused
|
|
||||||
popup.auto_paste = true;
|
|
||||||
}, 0); // Timeout is needed to have it working in IE
|
|
||||||
}
|
|
||||||
// Set cursor back to auto. Seems FF can't handle cursor reversion
|
|
||||||
jQuery('body').css({cursor:'auto'});
|
|
||||||
|
|
||||||
_aoi.triggerEvent(EGW_AI_DRAG_OUT,{event: event,ui:ui});
|
|
||||||
},
|
|
||||||
"over": function(event, ui) {
|
|
||||||
_aoi.triggerEvent(EGW_AI_DRAG_OVER,{event: event,ui:ui});
|
|
||||||
},
|
|
||||||
"out": function(event,ui) {
|
|
||||||
_aoi.triggerEvent(EGW_AI_DRAG_OUT,{event: event,ui:ui});
|
|
||||||
},
|
|
||||||
"tolerance": "pointer",
|
|
||||||
hoverClass: "drop-hover",
|
|
||||||
// Greedy is for nested droppables - children consume the action
|
|
||||||
greedy: true
|
|
||||||
}
|
}
|
||||||
);
|
|
||||||
|
// Check whether there is only one link
|
||||||
|
let cnt = 0;
|
||||||
|
let lnk = null;
|
||||||
|
for (let k in links)
|
||||||
|
{
|
||||||
|
if (links[k].enabled && links[k].visible)
|
||||||
|
{
|
||||||
|
lnk = links[k];
|
||||||
|
cnt += 1 + links[k].actionObj.children.length;
|
||||||
|
|
||||||
|
// Add ui, so you know what happened where
|
||||||
|
lnk.actionObj.ui = ui;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cnt == 1)
|
||||||
|
{
|
||||||
|
window.setTimeout(function() {
|
||||||
|
lnk.actionObj.execute(selected, _context);
|
||||||
|
},0);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cnt > 1)
|
||||||
|
{
|
||||||
|
// More than one drop action link is associated
|
||||||
|
// to the drop event - show those as a popup menu
|
||||||
|
// and let the user decide which one to use.
|
||||||
|
// This is possible as the popup and the popup action
|
||||||
|
// object and the drop action object share same
|
||||||
|
// set of properties.
|
||||||
|
let popup = getPopupImplementation();
|
||||||
|
let pos = popup._getPageXY(event);
|
||||||
|
|
||||||
|
// Don't add paste actions, this is a drop
|
||||||
|
popup.auto_paste = false;
|
||||||
|
|
||||||
|
window.setTimeout(function() {
|
||||||
|
popup.doExecuteImplementation(pos, selected, links,
|
||||||
|
_context);
|
||||||
|
// Reset, popup is reused
|
||||||
|
popup.auto_paste = true;
|
||||||
|
}, 0); // Timeout is needed to have it working in IE
|
||||||
|
}
|
||||||
|
// Set cursor back to auto. Seems FF can't handle cursor reversion
|
||||||
|
jQuery('body').css({cursor:'auto'});
|
||||||
|
_aoi.triggerEvent(EGW_AI_DRAG_OUT,{event: event,ui:ui});
|
||||||
|
});
|
||||||
|
$droppable.on('droppable:out', function(event,ui) {
|
||||||
|
_aoi.triggerEvent(EGW_AI_DRAG_OUT,{event: event,ui:ui});
|
||||||
|
});
|
||||||
|
$droppable.on('droppable:over', function(event, ui) {
|
||||||
|
_aoi.triggerEvent(EGW_AI_DRAG_OVER,{event: event,ui:ui});
|
||||||
|
});
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -241,7 +241,6 @@ class Bundle
|
|||||||
// generate api bundle
|
// generate api bundle
|
||||||
$inc_mgr->include_js_file('/vendor/bower-asset/jquery/dist/jquery.js');
|
$inc_mgr->include_js_file('/vendor/bower-asset/jquery/dist/jquery.js');
|
||||||
$inc_mgr->include_js_file('/api/js/jquery/jquery.noconflict.js');
|
$inc_mgr->include_js_file('/api/js/jquery/jquery.noconflict.js');
|
||||||
$inc_mgr->include_js_file('/vendor/bower-asset/jquery-ui/jquery-ui.js');
|
|
||||||
$inc_mgr->include_js_file('/api/js/jsapi/jsapi.js');
|
$inc_mgr->include_js_file('/api/js/jsapi/jsapi.js');
|
||||||
$inc_mgr->include_js_file('/api/js/egw_json.js');
|
$inc_mgr->include_js_file('/api/js/egw_json.js');
|
||||||
$inc_mgr->include_js_file('/api/js/jsapi/egw.js');
|
$inc_mgr->include_js_file('/api/js/jsapi/egw.js');
|
||||||
|
|||||||
3500
package-lock.json
generated
3500
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -16,6 +16,7 @@
|
|||||||
"@rollup/plugin-typescript": "^8.2.1",
|
"@rollup/plugin-typescript": "^8.2.1",
|
||||||
"@types/jquery": "^3.5.5",
|
"@types/jquery": "^3.5.5",
|
||||||
"@types/jqueryui": "^1.12.14",
|
"@types/jqueryui": "^1.12.14",
|
||||||
|
"@types/sortablejs": "1.10.0",
|
||||||
"grunt": "^1.3.0",
|
"grunt": "^1.3.0",
|
||||||
"grunt-contrib-cssmin": "^2.2.1",
|
"grunt-contrib-cssmin": "^2.2.1",
|
||||||
"grunt-newer": "^1.3.0",
|
"grunt-newer": "^1.3.0",
|
||||||
@ -49,7 +50,8 @@
|
|||||||
"carbon-web-components": "^1.14.1",
|
"carbon-web-components": "^1.14.1",
|
||||||
"lit-element": "^2.5.1",
|
"lit-element": "^2.5.1",
|
||||||
"lit-html": "^1.4.1",
|
"lit-html": "^1.4.1",
|
||||||
"sortablejs": "^1.14.0"
|
"sortablejs": "^1.14.0",
|
||||||
|
"egw-touch-dnd": "^1.2.2"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user