Files
cms-filelist/Resources/Public/JavaScript/file-list-dragdrop.js
T

14 lines
3.1 KiB
JavaScript

/*
* This file is part of the TYPO3 CMS project.
*
* It is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License, either version 2
* of the License, or any later version.
*
* For the full copyright and license information, please read the
* LICENSE.txt file that was distributed with this source code.
*
* The TYPO3 project - inspiring people to share!
*/
import i from"@typo3/core/event/regular-event.js";import{MultiRecordSelectionSelectors as v}from"@typo3/backend/multi-record-selection.js";import{FileListActionSelector as l,FileListActionUtility as n}from"@typo3/filelist/file-list-actions.js";import{DataTransferTypes as f}from"@typo3/backend/enum/data-transfer-types.js";var c;(function(m){m.transfer="typo3:filelist:resource:dragdrop:transfer"})(c||(c={}));class w{constructor(){this.previewSize=32;const t=l.elementSelector+'[draggable="true"]';new i("dragstart",(e,r)=>{const s=[];let d="",u="";const g=document.querySelectorAll(v.checkboxSelector+":checked");if(g.length)g.forEach(a=>{if(a.checked){const o=a.closest(l.elementSelector);o.dataset.filelistDragdropTransferItem="true";const h=n.getResourceForElement(o);s.push(h),u=o.dataset.filelistName,d=o.dataset.filelistIcon}});else{const a=r.closest(l.elementSelector);a.dataset.filelistDragdropTransferItem="true";const o=n.getResourceForElement(a);s.push(o),u=a.dataset.filelistName,d=a.dataset.filelistIcon}e.dataTransfer.effectAllowed="move",e.dataTransfer.setData(f.falResources,JSON.stringify(s));const p={tooltipIconIdentifier:s.length>1?"apps-clipboard-images":d,tooltipLabel:s.length>1?this.getPreviewLabel(s):u,thumbnails:this.getPreviewItems(s)};e.dataTransfer.setData(f.dragTooltip,JSON.stringify(p))}).delegateTo(document,t),new i("dragover",(e,r)=>{const s=n.getResourceForElement(r);this.isDropAllowedOnResoruce(s)&&(e.dataTransfer.dropEffect="move",e.preventDefault(),r.classList.add("success"))},{capture:!0}).delegateTo(document,t),new i("drop",(e,r)=>{const s={action:"transfer",resources:JSON.parse(e.dataTransfer.getData(f.falResources)??"{}"),target:n.getResourceForElement(r)};top.document.dispatchEvent(new CustomEvent(c.transfer,{detail:s}))},{capture:!0,passive:!0}).delegateTo(document,t),new i("dragend",()=>{this.reset()},{capture:!0,passive:!0}).delegateTo(document,t),new i("dragleave",(e,r)=>{r.classList.remove("success")},{capture:!0,passive:!0}).delegateTo(document,t)}getPreviewItems(t){return t.filter(e=>e.hasPreview).map(e=>{const r=new URL(top.TYPO3.settings.Resource.thumbnailUrl,window.origin);return r.searchParams.set("identifier",e.uid.toString(10)),{src:r.toString(),width:this.previewSize,height:this.previewSize}})}getPreviewLabel(t){const e=t.filter(s=>s.hasPreview),r=t.length-e.length;return r>0?(e.length>0?"+":"")+r.toString():""}reset(){document.querySelectorAll(l.elementSelector).forEach(t=>{delete t.dataset.filelistDragdropTransferItem,t.classList.remove("success")})}isDropAllowedOnResoruce(t){return!("filelistDragdropTransferItem"in document.querySelector(l.elementSelector+'[data-filelist-identifier="'+t.identifier+'"]').dataset)&&t.type==="folder"}}var S=new w;export{c as FileListDragDropEvent,S as default};