Make et2link file type draggable

This commit is contained in:
hadi 2023-05-22 11:45:56 +02:00
parent 58fd61ad31
commit b5f46c1bad
2 changed files with 46 additions and 46 deletions

View File

@ -189,7 +189,7 @@ export class Et2Link extends ExposeMixin<Et2Widget>(Et2Widget(LitElement)) imple
.replace(/ /g, '\u00a0');
}
return html`
<div part="base" class="link et2_link">
<div part="base" class="link et2_link" draggable="${this.app == 'file'}" @dragstart=${this._handleDragStart.bind(this, this.dataset)}>
${this._thumbnailTemplate({id: this.entryId, app: this.app, ...this.dataset})}
<span part="title" class="link__title">${title}</span>
<span part="remark" class="link__remark">${this.dataset.remark}</span>
@ -330,6 +330,49 @@ export class Et2Link extends ExposeMixin<Et2Widget>(Et2Widget(LitElement)) imple
}
}
/**
* Handle dragstart event for dragging out a file
*
* @param _data
* @param _ev
* @protected
*/
protected _handleDragStart (_data, _ev)
{
// // Unfortunately, dragging files is currently only supported by Chrome
if(navigator && navigator.userAgent.indexOf('Chrome') >= 0) {
if (_ev.dataTransfer == null) {
return;
}
if (_data && _data.type && _data.download_url) {
_ev.dataTransfer.dropEffect = "copy";
_ev.dataTransfer.effectAllowed = "copy";
let url = _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')) {
_ev.dataTransfer.setData("DownloadURL", _data.type + ':' + _data.title + ':' + url);
}
// Include URL as a fallback
_ev.dataTransfer.setData("text/uri-list", url);
}
if (_ev.dataTransfer.types.length == 0) {
// No file data? Abort: drag does nothing
_ev.preventDefault();
return;
}
}
}
_handleClick(_ev : MouseEvent) : boolean
{
// If we don't have app & entryId, nothing we can do

View File

@ -207,57 +207,14 @@ export class Et2LinkList extends Et2LinkString
protected _rowTemplate(link) : TemplateResult
{
return html`
<div id="${this._get_row_id(link)}" draggable="${link.app == 'file'}"
@dragstart=${this._handleDragStart.bind(this, link)}
@mouseover=${this._handleRowHover}
<div id="${this._get_row_id(link)}"
@mouseover=${this._handleRowHover}
@mouseout=${this._handleRowHover}
@contextmenu=${this._handleRowContext}>
<slot name="${this._get_row_id(link)}"></slot>
</div>`;
}
/**
* Handle dragstart event for dragging out a file
*
* @param _data
* @param _ev
* @protected
*/
protected _handleDragStart (_data, _ev)
{
// // Unfortunately, dragging files is currently only supported by Chrome
if(navigator && navigator.userAgent.indexOf('Chrome') >= 0) {
if (_ev.dataTransfer == null) {
return;
}
if (_data && _data.type && _data.download_url) {
_ev.dataTransfer.dropEffect = "copy";
_ev.dataTransfer.effectAllowed = "copy";
let url = _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')) {
_ev.dataTransfer.setData("DownloadURL", _data.type + ':' + _data.title + ':' + url);
}
// Include URL as a fallback
_ev.dataTransfer.setData("text/uri-list", url);
}
if (_ev.dataTransfer.types.length == 0) {
// No file data? Abort: drag does nothing
_ev.preventDefault();
return;
}
}
}
/**
* Handle show/hide delete button