extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-01-05 13:39:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Replace the drag out trigger key from Ctrl (or Command key in Mac) to Shift key.

Browse Source 
- Make Ctrl key as a standard dnd action disabling, and being able to select content by holding Ctrl key.
This commit is contained in:
Hadi Nategh 2014-10-21 11:48:25 +00:00
parent 5391fd1674
commit c1c4b7c682
1 changed files with 81 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
phpgwapi/js/egw_action/egw_action_dragdrop.js
View File

@ -132,12 +132,11 @@ function egwDragActionImplementation()
var text = $j(document.createElement('div')).addClass('et2_egw_action_ddHelper_tip'); var text = $j(document.createElement('div')).addClass('et2_egw_action_ddHelper_tip');
div.append(text); div.append(text);
// Add notice of Ctrl key, if supported // Add notice of Shift key, if supported
if('draggable' in document.createElement('span') && if('draggable' in document.createElement('span') &&
navigator && navigator.userAgent.indexOf('Chrome') >= 0) navigator && navigator.userAgent.indexOf('Chrome') >= 0)
{ {
var key = ["Mac68K","MacPPC","MacIntel"].indexOf(window.navigator.platform) < 0 ? 'Ctrl' : 'Command'; text.text(egw.lang('Hold Shift to drag %1 to your computer', itemLabel));
text.text(egw.lang('Hold %1 to drag %2 to your computer',key, itemLabel));
} }
// Final html DOM return as helper structor // Final html DOM return as helper structor
return div; return div;
@ -174,93 +173,106 @@ function egwDragActionImplementation()
} }
if(action) if(action)
{ {
// As we are planning to remove this trigger key for drag out action in the future, and as
// we have a standard key (ctrl or command key in Mac) in nm context menu to be able to
// disable the context menu, therefore, we will make the Ctrl key a standard key to disabling dd actions too,
// which means user also would be able to select content by holding ctrl key.
/** /**
* We found an action with dragType 'file', so by holding Ctrl * We found an action with dragType 'file', so by holding Shift
* key & dragging, user can drag from browser to system. * key & dragging, user can drag from browser to system.
* The global data store must provide a full, absolute URL in 'download_url' * The global data store must provide a full, absolute URL in 'download_url'
* and a mime in 'mime'. * and a mime in 'mime'.
* *
* Unfortunately, Native DnD to drag the file conflicts with jQueryUI draggable, * Unfortunately, Native DnD to drag the file conflicts with jQueryUI draggable,
* which handles all the other DnD actions. We get around this by: * which handles all the other DnD actions. We get around this by:
* 1. Require the user indicate a file drag with Ctrl key * 1. Require the user indicate a file drag with Shift key
* 2. Disable jQueryUI draggable, then turn on native draggable attribute * 2. Disable jQueryUI draggable, then turn on native draggable attribute
* This way we can at least toggle which one is operating, so they * This way we can at least toggle which one is operating, so they
* both work alternately if not together. * both work alternately if not together.
*/ */
// Native DnD - Doesn't play nice with jQueryUI Sortable // Native DnD - Doesn't play nice with jQueryUI Sortable
// Tell jQuery to include this property // Tell jQuery to include this property
jQuery.event.props.push('dataTransfer'); jQuery.event.props.push('dataTransfer');
$j(node).off("mousedown") $j(node).off("mousedown")
.on("mousedown", function(event) { .on("mousedown", function(event) {
$j(node).draggable("option","disabled",event.ctrlKey || event.metaKey); $j(node).draggable("option","disabled",event.shiftKey || event.metaKey || event.ctrlKey);
$j(this).attr("draggable", event.ctrlKey || event.metaKey ? "true" : ""); $j(this).attr("draggable", event.shiftKey || event.metaKey ? "true" : "");
// Disabling draggable adds some UI classes, but we don't care so remove them // Disabling draggable adds some UI classes, but we don't care so remove them
$j(node).removeClass("ui-draggable-disabled ui-state-disabled"); $j(node).removeClass("ui-draggable-disabled ui-state-disabled");
if(!(event.ctrlKey || event.metaKey) || !this.addEventListener) return; if(!(event.shiftKey || event.metaKey) || !this.addEventListener) return;
}) })
.on("dragstart", function(event) { .on("dragstart", function(event) {
if(event.dataTransfer == null) { if(event.dataTransfer == null) {
return; return;
} }
event.dataTransfer.effectAllowed="copy"; event.dataTransfer.effectAllowed="copy";
// Get all selected // Get all selected
// Multiples aren't supported by event.dataTransfer, yet, so // Multiples aren't supported by event.dataTransfer, yet, so
// select only the row they clicked on. // select only the row they clicked on.
// var selected = _context.getSelectedLinks('drag'); // var selected = _context.getSelectedLinks('drag');
var selected = [_context]; var selected = [_context];
_context.parent.setAllSelected(false); _context.parent.setAllSelected(false);
_context.setSelected(true); _context.setSelected(true);
// Set file data // Set file data
for(var i = 0; i < selected.length; i++) for(var i = 0; i < selected.length; i++)
{
var data = selected[i].data || egw.dataGetUIDdata(selected[i].id).data || {};
if(data && data.mime && data.download_url)
{ {
var url = data.download_url; var data = selected[i].data || egw.dataGetUIDdata(selected[i].id).data || {};
if(data && data.mime && data.download_url)
// NEED an absolute URL
if (url[0] == '/') url = egw.link(url);
// egw.link adds the webserver, but that might not be an absolute URL - try again
if (url[0] == '/') url = window.location.origin+url;
// Unfortunately, dragging files is currently only supported by Chrome
if(navigator && navigator.userAgent.indexOf('Chrome'))
{ {
event.dataTransfer.setData("DownloadURL", data.mime+':'+data.name+':'+url); var url = data.download_url;
}
else // NEED an absolute URL
{ if (url[0] == '/') url = egw.link(url);
// Include URL as a fallback // egw.link adds the webserver, but that might not be an absolute URL - try again
event.dataTransfer.setData("text/uri-list", url); if (url[0] == '/') url = window.location.origin+url;
// Unfortunately, dragging files is currently only supported by Chrome
if(navigator && navigator.userAgent.indexOf('Chrome'))
{
event.dataTransfer.setData("DownloadURL", data.mime+':'+data.name+':'+url);
}
else
{
// Include URL as a fallback
event.dataTransfer.setData("text/uri-list", url);
}
} }
} }
} if(event.dataTransfer.types.length == 0)
if(event.dataTransfer.types.length == 0) {
{ // No file data? Abort: drag does nothing
// No file data? Abort: drag does nothing event.preventDefault();
event.preventDefault(); return;
return; }
}
// Create drag icon // Create drag icon
_callback.call(_context, _context, ai); _callback.call(_context, _context, ai);
// Drag icon must be visible for setDragImage() - we'll remove it on drag // Drag icon must be visible for setDragImage() - we'll remove it on drag
$j("body").append(ai.helper); $j("body").append(ai.helper);
event.dataTransfer.setDragImage(ai.helper[0],-12,-12); event.dataTransfer.setDragImage(ai.helper[0],-12,-12);
}) })
.on("drag", function(e) { .on("drag", function(e) {
// Remove the helper, it has been copied into the dataTransfer object now // Remove the helper, it has been copied into the dataTransfer object now
// Hopefully user didn't notice it... // Hopefully user didn't notice it...
if(e.dataTransfer != null) if(e.dataTransfer != null)
{ {
ai.helper.remove(); ai.helper.remove();
} }
}); });
} }
else
{
//Disable dragging to be able to select content of item by holding Ctrl then selecting content
$j(node).off("mousedown")
.on("mousedown", function(event) {
$j(node).draggable("option","disabled",event.ctrlKey || event.metaKey);
});
}
$j(node).draggable( $j(node).draggable(
{ {
"distance": 20, "distance": 20,