egroupware_official/api/js/egw_action/egw_action_dragdrop.js

/**
 * eGroupWare egw_action framework - egw action framework
 *
 * @link http://www.egroupware.org
 * @author Andreas Stöckel <as@stylite.de>
 * @copyright 2011 by Andreas Stöckel
 * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
 * @package egw_action
 */

/*egw:uses
	egw_action;
	egw_action_common;
	egw_action_popup;
	vendor.bower-asset.jquery.dist.jquery;
*/

import {egwAction,egwActionImplementation, egw_getObjectManager} from "./egw_action.js";
import {getPopupImplementation} from "./egw_action_popup.js";
import {EGW_AI_DRAG_OUT, EGW_AI_DRAG_OVER, EGW_AO_EXEC_THIS, EGW_AI_DRAG_ENTER} from "./egw_action_constants.js";

/**
 * Register the drag and drop handlers
 */
if (typeof window._egwActionClasses == "undefined")
	window._egwActionClasses = {};
_egwActionClasses["drag"] = {
	"actionConstructor": egwDragAction,
	"implementation": getDragImplementation
};
_egwActionClasses["drop"] = {
	"actionConstructor": egwDropAction,
	"implementation": getDropImplementation
};

/**
 * The egwDragAction class overwrites the egwAction class and adds the new
 * "dragType" propery. The "onExecute" event of the drag action will be called
 * whenever dragging starts. The onExecute JS handler should return the
 * drag-drop helper object - otherwise an default helper will be generated.
 *
 * @param {egwAction} _id
 * @param {string} _handler
 * @param {string} _caption
 * @param {string} _icon
 * @param {(string|function)} _onExecute
 * @param {bool} _allowOnMultiple
 * @returns {egwDragAction}
 */
export function egwDragAction(_id, _handler, _caption, _icon, _onExecute, _allowOnMultiple)
{
	var action = new egwAction(_id, _handler, _caption, _icon, _onExecute, _allowOnMultiple);

	action.type = "drag";
	action.dragType = "default";
	action.hideOnDisabled = true;

	action.set_dragType = function(_value) {
		action.dragType = _value;
	};

	return action;
}


var
	_dragActionImpl = null;

export function getDragImplementation()
{
	if (!_dragActionImpl)
	{
		_dragActionImpl = new egwDragActionImplementation();
	}
	return _dragActionImpl;
}

export function egwDragActionImplementation()
{
	var ai = new egwActionImplementation();

	ai.type = "drag";

	ai.helper = null;
	ai.ddTypes = [];
	ai.selected = [];

	// Define default helper DOM
	// default helper also can be called later in application code in order to customization
	ai.defaultDDHelper = function (_selected)
	{
		// Table containing clone of rows
		var table = jQuery(document.createElement("table")).addClass('egwGridView_grid et2_egw_action_ddHelper_row');
		// tr element to use as last row to show lable more ...
		var moreRow = jQuery(document.createElement('tr')).addClass('et2_egw_action_ddHelper_moreRow');
		// Main div helper container
		var div = jQuery(document.createElement("div")).append(table);

		var rows = [];
		// Maximum number of rows to show
		var maxRows = 3;
		// item label
		var itemLabel = egw.lang(egw.link_get_registry(egw.app_name(),_selected.length > 1?'entries':'entry')||egw.app_name());

		var index = 0;

		// Take select all into account when counting number of rows, because they may not be
		// in _selected object
		var pseudoNumRows = (_selected[0] && _selected[0]._context && _selected[0]._context._selectionMgr &&
				_selected[0]._context._selectionMgr._selectAll) ?
				_selected[0]._context._selectionMgr._total : _selected.length;

		for (var i = 0; i < _selected.length;i++)
		{
			var row = jQuery(_selected[i].iface.getDOMNode()).clone();
			if (row)
			{
				rows.push(row);
				table.append(row);
			}
			index++;
			if (index == maxRows)
			{
				// Lable to show number of items
				var spanCnt = jQuery(document.createElement('span'))
						.addClass('et2_egw_action_ddHelper_itemsCnt')
						.appendTo(div);

				spanCnt.text(pseudoNumRows +' '+ itemLabel);
				// Number of not shown rows
				var restRows = pseudoNumRows - maxRows;
				if (restRows)
				{
					moreRow.text(egw.lang("%1 more %2 selected ...", (pseudoNumRows - maxRows), itemLabel));
				}
				table.append(moreRow);
				break;
			}
		}

		var text = jQuery(document.createElement('div')).addClass('et2_egw_action_ddHelper_tip');
		div.append(text);

		// Add notice of Ctrl key, if supported
		if('draggable' in document.createElement('span') &&
			navigator && navigator.userAgent.indexOf('Chrome') >= 0 && egw.app_name() == 'filemanager') // currently only filemanager supports drag out
		{
			var key = ["Mac68K","MacPPC","MacIntel"].indexOf(window.navigator.platform) < 0 ?
				egw.lang('Alt') : egw.lang('Command ⌘');
			text.text(egw.lang('Hold [%1] and [%2] key to drag %3 to your desktop', key, egw.lang('Shift ⇧'), itemLabel));
		}
		// Final html DOM return as helper structor
		return div;
	};

	ai.doRegisterAction = function(_aoi, _callback, _context)
	{
		var node = _aoi.getDOMNode() && _aoi.getDOMNode()[0] ? _aoi.getDOMNode()[0] : _aoi.getDOMNode();

		if (node)
		{
			// Prevent selection
			node.onselectstart = function () {
				return false;
			};
			if (!(window.FileReader && 'draggable' in document.createElement('span')))
			{
				// No DnD support
				return;
			}

			// It shouldn't be so hard to get the action...
			var action = null;
			var groups = _context.getActionImplementationGroups();
			if (!groups.drag)
			{
				return;
			}
			// Disable file drag and drop, it conflicts with normal drag and drop
			for (var i = 0; false && i < groups.drag.length; i++)
			{
				// dragType 'file' says it can be dragged as a file
				if(groups.drag[i].link.actionObj.dragType == 'file' || groups.drag[i].link.actionObj.dragType.indexOf('file') > -1)
				{
					action = groups.drag[i].link.actionObj;
					break;
				}
			}

			if(!action)
			{
				// Use Ctrl key in order to select content
				jQuery(node).off("mousedown")
						.on({
							mousedown: function(event){
								if (_context.isSelection(event)){
									node.setAttribute("draggable", false);
								}
								else if(event.which != 3)
								{
									document.getSelection().removeAllRanges();
								}
							},
							mouseup: function (event){
								if (_context.isSelection(event) && document.getSelection().type === 'Range'){
									//let the draggable be reactivated by another click up as the range selection is
									// not working as expected in shadow-dom as expected in all browsers
								}
								else
								{
									node.setAttribute("draggable", true);
								}

								// Set cursor back to auto. Seems FF can't handle cursor reversion
								jQuery('body').css({cursor:'auto'});
							}
				});
			}

			node.setAttribute('draggable', true);
			const dragstart = function(event) {
				if (action) {
					if (_context.isSelection(event)) return;

					// Get all selected
					// Multiples aren't supported by event.dataTransfer, yet, so
					// select only the row they clicked on.
					var selected = [_context];
					_context.parent.setAllSelected(false);
					_context.setSelected(true);

					// Set file data
					for (let i = 0; i < selected.length; i++) {
						let d = selected[i].data || egw.dataGetUIDdata(selected[i].id).data || {};
						if (d && d.mime && d.download_url) {
							var url = d.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", d.mime + ':' + d.name + ':' + url);
							} else {
								// Include URL as a fallback
								event.dataTransfer.setData("text/uri-list", url);
							}
						}
					}
					event.dataTransfer.effectAllowed = 'copy';

					if (event.dataTransfer.types.length == 0) {
						// No file data? Abort: drag does nothing
						event.preventDefault();
						return;
					}
				} else {
					event.dataTransfer.effectAllowed = 'linkMove';
				}
				// The helper function is called before the start function
				// is evoked. Call the given callback function. The callback
				// function will gather the selected elements and action links
				// and call the doExecuteImplementation function. This
				// will call the onExecute function of the first action
				// in order to obtain the helper object (stored in ai.helper)
				// and the multiple dragDropTypes (ai.ddTypes)
				_callback.call(_context, false, ai);

				const data = {
					ddTypes: ai.ddTypes,
					selected: ai.selected.map((item) => {
						return {id: item.id}
					})
				};

				if (!ai.helper) {
					ai.helper = ai.defaultDDHelper(ai.selected);
				}
				// Add a basic class to the helper in order to standardize the background layout
				ai.helper[0].classList.add('et2_egw_action_ddHelper', 'ui-draggable-dragging');
				document.body.append(ai.helper[0]);
				this.classList.add('drag--moving');

				event.dataTransfer.setData('application/json', JSON.stringify(data))

				event.dataTransfer.setDragImage(ai.helper[0], 12, 12);

				this.setAttribute('data-egwActionObjID', JSON.stringify(data.selected));
			};

			const dragend = function(event){
				const helper = document.querySelector('.et2_egw_action_ddHelper');
				if (helper) helper.remove();
				const draggable = document.querySelector('.drag--moving');
				if (draggable) draggable.classList.remove('drag--moving');
			};

			// Drag Event listeners
			node.addEventListener('dragstart', dragstart , false);
			node.addEventListener('dragend', dragend, false);


			return true;
		}
		return false;
	};

	ai.doUnregisterAction = function(_aoi)
	{
		var node = _aoi.getDOMNode();

		if (node){
			node.setAttribute('draggable', false);
		}
	};

	/**
	 * Builds the context menu and shows it at the given position/DOM-Node.
	 *
	 * @param {string} _context
	 * @param {array} _selected
	 * @param {object} _links
	 */
	ai.doExecuteImplementation = function(_context, _selected, _links)
	{
		// Reset the helper object of the action implementation
		this.helper = null;
		var hasLink = false;

		// Store the drag-drop types
		this.ddTypes = [];
		this.selected = _selected;

		// Call the onExecute event of the first actionObject
		for (var k in _links)
		{
			if (_links[k].visible)
			{
				hasLink = true;

				// Only execute the following code if a JS function is registered
				// for the action and this is the first action link
				if (!this.helper && _links[k].actionObj.onExecute.hasHandler())
				{
					this.helper = _links[k].actionObj.execute(_selected);
				}

				// Push the dragType of the associated action object onto the
				// drag type list - this allows an element to support multiple
				// drag/drop types.
				var type = jQuery.isArray(_links[k].actionObj.dragType) ? _links[k].actionObj.dragType : [_links[k].actionObj.dragType];
				for(var i = 0; i < type.length; i++)
				{
					if (this.ddTypes.indexOf(type[i]) == -1)
					{
						this.ddTypes.push(type[i]);
					}
				}
			}
		}

		// If no helper has been defined, create an default one
		if (!this.helper && hasLink)
		{
			this.helper = ai.defaultDDHelper(_selected);
		}

		return true;
	};

	return ai;
}



/**
 * The egwDropAction class overwrites the egwAction class and adds the "acceptedTypes"
 * property. This array should contain all "dragTypes" the drop action is allowed to
 *
 * @param {egwAction} _id
 * @param {string} _handler
 * @param {string} _caption
 * @param {string} _icon
 * @param {(string|function)} _onExecute
 * @param {bool} _allowOnMultiple
 * @returns {egwDropAction}
 */
export function egwDropAction(_id, _handler, _caption, _icon, _onExecute, _allowOnMultiple)
{
	var action = new egwAction(_id, _handler, _caption, _icon, _onExecute, _allowOnMultiple);

	action.type = "drop";
	action.acceptedTypes = ["default"];
	action.canHaveChildren = ["drag","popup"];
	action["default"] = false;
	action.order = 0;
	action.group = 0;

	action.set_default = function(_value) {
		action["default"] = _value;
	};

	action.set_order = function(_value) {
		action.order = _value;
	};

	action.set_group = function(_value) {
		action.group = _value;
	};

	/**
	 * The acceptType property allows strings as well as arrays - strings are
	 * automatically included in an array.
	 *
	 * @param {(string|array)} _value
	 */
	action.set_acceptedTypes = function(_value) {
		if (_value instanceof Array)
		{
			action.acceptedTypes = _value;
		}
		else
		{
			action.acceptedTypes = [_value];
		}
	};

	return action;
}

var
	_dropActionImpl = null;

export function getDropImplementation()
{
	if (!_dropActionImpl)
	{
		_dropActionImpl = new egwDropActionImplementation();
	}
	return _dropActionImpl;
}

export function egwDropActionImplementation()
{
	var ai = new egwActionImplementation();

	//keeps track of current drop element where dragged item's entered.
	// it's necessary for dragenter/dragleave issue correction.
	var currentDropEl = null;

	ai.type = "drop";

	ai.doRegisterAction = function(_aoi, _callback, _context)
	{
		var node = _aoi.getDOMNode() && _aoi.getDOMNode()[0] ? _aoi.getDOMNode()[0] : _aoi.getDOMNode();
		var self = this;
		if (node)
		{
			node.classList.add('et2dropzone');
			const dragover = function (event) {
				if (event.preventDefault) {
					event.preventDefault();
				}
				if (!self.getTheDraggedDOM()) return ;

				const data = {
					event: event,
					ui: self.getTheDraggedData()
				};
				_aoi.triggerEvent(EGW_AI_DRAG_OVER, data);

				return true;

			};

			const dragenter = function (event) {
				event.stopImmediatePropagation();
				// don't trigger dragenter if we are entering the drag element
				// don't go further if the dragged element is no there (happens when a none et2 dragged element is being dragged)
				if (!self.getTheDraggedDOM() || self.isTheDraggedDOM(this) || this == currentDropEl) return;

				currentDropEl = event.currentTarget;
				event.dataTransfer.dropEffect = 'link';

				const data = {
					event: event,
					ui: self.getTheDraggedData()
				};

				_aoi.triggerEvent(EGW_AI_DRAG_ENTER, data);

				// cleanup drop hover class from all other DOMs if there's still anything left
				Array.from(document.getElementsByClassName('et2dropzone drop-hover')).forEach(_i=>{_i.classList.remove('drop-hover')})

				this.classList.add('drop-hover');

				// stop the event from being fired for its children
				event.preventDefault();
				return false;
			};

			const drop = function (event) {
				event.preventDefault();
				// don't go further if the dragged element is no there (happens when a none et2 dragged element is being dragged)
				if (!self.getTheDraggedDOM()) return ;

				// remove the hover class
				this.classList.remove('drop-hover');

				const helper = self.getHelperDOM();
				let ui = self.getTheDraggedData();
				ui.position = {top: event.clientY, left: event.clientX};
				ui.offset = {top: event.offsetY, left: event.offsetX};


				let data = JSON.parse(event.dataTransfer.getData('application/json'));

				if (!self.isAccepted(data, _context, _callback) || self.isTheDraggedDOM(this))
				{
					// clean up the helper dom
					if (helper) helper.remove();
					return;
				}

				let selected = data.selected.map((item) => {
					return egw_getObjectManager(item.id, false)
				});


				var links = _callback.call(_context, "links", self, EGW_AO_EXEC_THIS);

				// Disable all links which only accept types which are not
				// inside ddTypes
				for (var k in links) {
					var accepted = links[k].actionObj.acceptedTypes;

					var enabled = false;
					for (var i = 0; i < data.ddTypes.length; i++) {
						if (accepted.indexOf(data.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);

					// 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: self.getTheDraggedData()});

				// clean up the helper dom
				if (helper) helper.remove();
				self.getTheDraggedDOM().classList.remove('drag--moving');
			};

			const dragleave = function (event) {
				event.stopImmediatePropagation();

				// don't trigger dragleave if we are leaving the drag element
				// don't go further if the dragged element is no there (happens when a none et2 dragged element is being dragged)
				if (!self.getTheDraggedDOM() || self.isTheDraggedDOM(this) || this == currentDropEl) return;

				const data = {
					event: event,
					ui: self.getTheDraggedData()
				};

				_aoi.triggerEvent(EGW_AI_DRAG_OUT, data);

				this.classList.remove('drop-hover');

				event.preventDefault();
				return false;
			};

			// DND Event listeners
			node.addEventListener('dragover', dragover, false);

			node.addEventListener('dragenter', dragenter, false);

			node.addEventListener('drop', drop, false);

			node.addEventListener('dragleave', dragleave, false);

			return true;
		}
		return false;
	};

	ai.isTheDraggedDOM = function (_dom)
	{
		return _dom.classList.contains('drag--moving');
	}

	ai.getTheDraggedDOM = function ()
	{
		return document.querySelector('.drag--moving');
	}

	ai.getHelperDOM = function ()
	{
		return document.querySelector('.et2_egw_action_ddHelper');
	}

	ai.getTheDraggedData = function()
	{
		let data = this.getTheDraggedDOM().dataset.egwactionobjid;
		let selected = [];
		if (data)
		{
			data = JSON.parse(data);
			selected = data.map((item)=>{return egw_getObjectManager(item.id, false)});
		}
		return {
			draggable: this.getTheDraggedDOM(),
			helper: this.getHelperDOM(),
			selected: selected

		}
	}

	// check if given draggable is accepted for drop
	ai.isAccepted = function(_data, _context, _callback, _node)
	{
		if (_node && !_node.classList.contains('et2dropzone')) return false;
		if (typeof _data.ddTypes != "undefined")
		{
			const accepted = this._fetchAccepted(
				_callback.call(_context, "links", this, EGW_AO_EXEC_THIS));

			// Check whether all drag types of the selected objects
			// are accepted
			var ddTypes = _data.ddTypes;

			for (let i = 0; i < ddTypes.length; i++)
			{
				if (accepted.indexOf(ddTypes[i]) != -1)
				{
					return true;
				}
			}
		}
		return false;
	};

	ai.doUnregisterAction = function(_aoi)
	{
		var node = _aoi.getDOMNode();

		if (node) {
			node.classList.remove('et2dropzone');
		}
	};

	ai._fetchAccepted = function(_links)
	{
		// Accumulate the accepted types
		var accepted = [];
		for (var k in _links)
		{
			for (var i = 0; i < _links[k].actionObj.acceptedTypes.length; i++)
			{
				var type = _links[k].actionObj.acceptedTypes[i];

				if (accepted.indexOf(type) == -1)
				{
					accepted.push(type);
				}
			}
		}

		return accepted;
	};

	/**
	 * Builds the context menu and shows it at the given position/DOM-Node.
	 *
	 * @param {string} _context
	 * @param {array} _selected
	 * @param {object} _links
	 */
	ai.doExecuteImplementation = function(_context, _selected, _links)
	{
		if (_context == "links")
		{
			return _links;
		}
	};

	return ai;
}