From 5aa753ec7146931becff9cb260546b1b31c41cf8 Mon Sep 17 00:00:00 2001 From: Achim Fritz Date: Mon, 10 Mar 2025 11:26:56 +0100 Subject: [PATCH] [TASK] drag-drop for TYPO3 > 13.4.5 s. https://review.typo3.org/c/Packages/TYPO3.CMS/+/88511 --- Build/JavaScript/README.md | 2 +- Build/JavaScript/js-13.patch | 51 ++++++++++--------- Classes/Tca/ContainerConfiguration.php | 5 ++ .../PageLayout/Grid/ColumnHeader.html | 2 +- .../Private/Partials/PageLayout/Record.html | 2 +- .../Partials12/PageLayout/Grid/Column.html | 27 ++++++++++ .../PageLayout/Grid/ColumnHeader.html | 45 ++++++++++++++++ .../Private/Partials12/PageLayout/Record.html | 44 ++++++++++++++++ .../Public/JavaScript/Overrides/drag-drop.js | 2 +- 9 files changed, 151 insertions(+), 29 deletions(-) create mode 100644 Resources/Private/Partials12/PageLayout/Grid/Column.html create mode 100644 Resources/Private/Partials12/PageLayout/Grid/ColumnHeader.html create mode 100644 Resources/Private/Partials12/PageLayout/Record.html diff --git a/Build/JavaScript/README.md b/Build/JavaScript/README.md index 10deb4cc..6cf318c0 100644 --- a/Build/JavaScript/README.md +++ b/Build/JavaScript/README.md @@ -28,7 +28,7 @@ build v13 build patch file git format-patch 12.4 --stdout > js-12.patch - git format-patch 13.1 --stdout > js-13.patch + git format-patch 13.4 --stdout > js-13.patch build with docker diff --git a/Build/JavaScript/js-13.patch b/Build/JavaScript/js-13.patch index 557dd89f..bbb13ba0 100644 --- a/Build/JavaScript/js-13.patch +++ b/Build/JavaScript/js-13.patch @@ -1,69 +1,70 @@ -From 2fb0e5b5b10878b804d9845bb7baa186b140396f Mon Sep 17 00:00:00 2001 +From 1319af7e465beab4a929b18deb55e98e3b886a0d Mon Sep 17 00:00:00 2001 From: Achim Fritz -Date: Mon, 14 Oct 2024 14:35:21 +0200 -Subject: [PATCH] [PATCH] js-13-main +Date: Mon, 10 Mar 2025 16:12:13 +0100 +Subject: [PATCH] [PATH] js-13-main -Change-Id: I1b3ee3edd8fe045185268f6b17f98b150f342001 +Change-Id: I32adb943a879c3ee5b1dbdc8677daefee99919db --- - .../backend/layout-module/drag-drop.ts | 32 +++++++++++++------ - .../TypeScript/backend/layout-module/paste.ts | 23 ++++++++----- - 2 files changed, 37 insertions(+), 18 deletions(-) + .../backend/layout-module/drag-drop.ts | 34 +++++++++++++------ + 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/Build/Sources/TypeScript/backend/layout-module/drag-drop.ts b/Build/Sources/TypeScript/backend/layout-module/drag-drop.ts -index f14320f9dea..56ab0a01fc4 100644 +index cb0de0d57d2..e821f8a3e89 100644 --- a/Build/Sources/TypeScript/backend/layout-module/drag-drop.ts +++ b/Build/Sources/TypeScript/backend/layout-module/drag-drop.ts -@@ -15,20 +15,20 @@ +@@ -15,21 +15,21 @@ * Module: @typo3/backend/layout-module/drag-drop * this JS code does the drag+drop logic for the Layout module (Web => Page) */ -import DocumentService from '@typo3/core/document-service'; -import DataHandler from '../ajax-data-handler'; -import Icons from '../icons'; --import ResponseInterface from '../ajax-data-handler/response-interface'; -import RegularEvent from '@typo3/core/event/regular-event'; -import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types'; --import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip'; -import BroadcastService from '@typo3/backend/broadcast-service'; -import { BroadcastMessage } from '@typo3/backend/broadcast-message'; +-import type ResponseInterface from '../ajax-data-handler/response-interface'; +-import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip'; +-import DragDropUtility from '@typo3/backend/utility/drag-drop-utility'; +import DocumentService from '@typo3/core/document-service.js'; +import DataHandler from '@typo3/backend/ajax-data-handler.js'; +import Icons from '@typo3/backend/icons.js'; -+import ResponseInterface from '@typo3/backend/ajax-data-handler/response-interface.js'; +import RegularEvent from '@typo3/core/event/regular-event.js'; +import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types.js'; -+import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip.js'; +import BroadcastService from '@typo3/backend/broadcast-service.js'; +import { BroadcastMessage } from '@typo3/backend/broadcast-message.js'; - ++import type ResponseInterface from '@typo3/backend/ajax-data-handler/response-interface.js'; ++import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip.js'; ++import DragDropUtility from '@typo3/backend/utility/drag-drop-utility.js'; + interface Parameters { cmd?: { [key: string]: { [key: string]: any } }; data?: { [key: string]: { [key: string]: any } }; - CB?: { paste: string, update: { colPos: number | boolean, sys_language_uid: number } }; + CB?: { paste: string, update: { colPos: number | boolean, sys_language_uid: number , txContainerParent: number } }; } - + export type ContentElementDragDropData = { -@@ -175,6 +175,7 @@ class DragDrop { +@@ -153,6 +153,7 @@ class DragDrop { } - + const newColumn = this.getColumnPositionForElement(dropContainer); + const newTxContainerParent = this.getTxContainerParentPositionForElement(dropContainer); const contentElementDragDropData = JSON.parse(event.dataTransfer.getData(DataTransferTypes.content)) as ContentElementDragDropData; - + draggedElement = document.querySelector(`${Identifiers.content}[data-uid="${contentElementDragDropData.uid}"]`); -@@ -204,8 +205,10 @@ class DragDrop { +@@ -182,8 +183,10 @@ class DragDrop { } - + let colPos: number | boolean = 0; + let txContainerParent: number = 0; if (targetPid !== 0) { colPos = newColumn; + txContainerParent = newTxContainerParent; } - const isCopyAction = (event.ctrlKey || dropContainer.classList.contains('t3js-paste-copy')); + const isCopyAction = (DragDropUtility.isCopyModifierFromEvent(event) || dropContainer.classList.contains('t3js-paste-copy')); const datahandlerCommand = isCopyAction ? 'copy' : 'move'; -@@ -218,6 +221,7 @@ class DragDrop { +@@ -196,6 +199,7 @@ class DragDrop { update: { colPos: colPos, sys_language_uid: language, @@ -71,11 +72,11 @@ index f14320f9dea..56ab0a01fc4 100644 }, } } -@@ -307,6 +311,14 @@ class DragDrop { +@@ -285,6 +289,14 @@ class DragDrop { return false; } - -+ protected getTxContainerParentPositionForElement (element: HTMLElement): number { + ++ protected getTxContainerParentPositionForElement(element: HTMLElement): number { + const columnContainer = element.closest('[data-colpos]') as HTMLElement; + if (columnContainer !== null && columnContainer.dataset.txContainerParent !== undefined) { + return parseInt(columnContainer.dataset.txContainerParent, 10); diff --git a/Classes/Tca/ContainerConfiguration.php b/Classes/Tca/ContainerConfiguration.php index 0c9a1c42..4421c75a 100644 --- a/Classes/Tca/ContainerConfiguration.php +++ b/Classes/Tca/ContainerConfiguration.php @@ -94,6 +94,11 @@ public function __construct( 'EXT:backend/Resources/Private/Partials/', 'EXT:container/Resources/Private/Partials11/', ]; + } elseif ((GeneralUtility::makeInstance(Typo3Version::class))->getMajorVersion() === 12) { + $this->gridPartialPaths = [ + 'EXT:backend/Resources/Private/Partials/', + 'EXT:container/Resources/Private/Partials12/', + ]; } } diff --git a/Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html b/Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html index f0839c67..81e1d70d 100644 --- a/Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html +++ b/Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html @@ -40,6 +40,6 @@ -
+ diff --git a/Resources/Private/Partials/PageLayout/Record.html b/Resources/Private/Partials/PageLayout/Record.html index 435fdb33..c49be67f 100644 --- a/Resources/Private/Partials/PageLayout/Record.html +++ b/Resources/Private/Partials/PageLayout/Record.html @@ -40,5 +40,5 @@ -
+ diff --git a/Resources/Private/Partials12/PageLayout/Grid/Column.html b/Resources/Private/Partials12/PageLayout/Grid/Column.html new file mode 100644 index 00000000..d4e9a3ad --- /dev/null +++ b/Resources/Private/Partials12/PageLayout/Grid/Column.html @@ -0,0 +1,27 @@ + + Styling requires the colpos to be set to the string 'unused'. To preserve type safety in the + controller, the string is only used in the template by setting the below "colpos" variable. + + + + + + +
+ + + +
+ + {column.afterSectionMarkup} + diff --git a/Resources/Private/Partials12/PageLayout/Grid/ColumnHeader.html b/Resources/Private/Partials12/PageLayout/Grid/ColumnHeader.html new file mode 100644 index 00000000..f0839c67 --- /dev/null +++ b/Resources/Private/Partials12/PageLayout/Grid/ColumnHeader.html @@ -0,0 +1,45 @@ +
+ + +
+ + + +
+ {column.title} + + + + + + {column.titleUnassigned} + + + {column.titleInaccessible} + + +
+{column.beforeSectionMarkup} + +
+
+ + + + + + + + + + + + + +
+
+
+ diff --git a/Resources/Private/Partials12/PageLayout/Record.html b/Resources/Private/Partials12/PageLayout/Record.html new file mode 100644 index 00000000..435fdb33 --- /dev/null +++ b/Resources/Private/Partials12/PageLayout/Record.html @@ -0,0 +1,44 @@ +{f:if(condition: '{item.disabled} && {item.context.drawingConfiguration.showHidden} == 0', then: 'display: none;') -> f:variable(name: 'style')} +
+
+ + + + +
+ +
+ + + + +
+ +
+ + + + + + + + + + + + + +
+ +
+
diff --git a/Resources/Public/JavaScript/Overrides/drag-drop.js b/Resources/Public/JavaScript/Overrides/drag-drop.js index e0ae66ef..b7ed9184 100644 --- a/Resources/Public/JavaScript/Overrides/drag-drop.js +++ b/Resources/Public/JavaScript/Overrides/drag-drop.js @@ -10,4 +10,4 @@ * * The TYPO3 project - inspiring people to share! */ -import DocumentService from"@typo3/core/document-service.js";import DataHandler from"@typo3/backend/ajax-data-handler.js";import Icons from"@typo3/backend/icons.js";import RegularEvent from"@typo3/core/event/regular-event.js";import{DataTransferTypes}from"@typo3/backend/enum/data-transfer-types.js";import BroadcastService from"@typo3/backend/broadcast-service.js";import{BroadcastMessage}from"@typo3/backend/broadcast-message.js";var Identifiers,Classes;!function(e){e.content=".t3js-page-ce",e.draggableContent=".t3js-page-ce-sortable",e.draggableContentHandle=".t3js-page-ce-draghandle",e.dropZone=".t3js-page-ce-dropzone-available",e.column=".t3js-page-column",e.addContent=".t3js-page-new-ce"}(Identifiers||(Identifiers={})),function(e){e.validDropZoneClass="active",e.dropPossibleHoverClass="t3-page-ce-dropzone-possible"}(Classes||(Classes={}));class DragDrop{constructor(){DocumentService.ready().then((()=>{this.initialize()}))}initialize(){new RegularEvent("mousedown",((e,t)=>{const a=e.target.closest("a,img");if(null!==a&&t.contains(a))return;t.closest(Identifiers.content).querySelector(Identifiers.draggableContentHandle).draggable=!0})).delegateTo(document,Identifiers.draggableContentHandle),new RegularEvent("dragstart",this.onDragStart.bind(this)).delegateTo(document,Identifiers.draggableContentHandle),new RegularEvent("dragenter",this.onDragEnter.bind(this)).delegateTo(document,Identifiers.draggableContentHandle),new RegularEvent("dragend",this.onDragEnd.bind(this)).delegateTo(document,Identifiers.draggableContentHandle),new RegularEvent("dragenter",((e,t)=>{t.classList.add(Classes.dropPossibleHoverClass),e.dataTransfer.dropEffect=e.ctrlKey?"copy":"move"})).delegateTo(document,Identifiers.dropZone),new RegularEvent("dragover",(e=>{e.preventDefault(),e.dataTransfer.dropEffect=e.ctrlKey?"copy":"move"})).delegateTo(document,Identifiers.dropZone),new RegularEvent("dragleave",((e,t)=>{e.preventDefault(),t.classList.remove(Classes.dropPossibleHoverClass)})).delegateTo(document,Identifiers.dropZone),new RegularEvent("drop",this.onDrop.bind(this),{capture:!0,passive:!0}).delegateTo(document,Identifiers.dropZone),new RegularEvent("typo3:page-layout-drag-drop:elementChanged",this.onBroadcastElementChanged.bind(this)).bindTo(top.document)}onDragEnter(e){e.preventDefault(),e.dataTransfer.dropEffect=e.ctrlKey?"copy":"move",this.showDropZones()}onDragStart(e,t){const a=t.closest(Identifiers.content);e.dataTransfer.setData(DataTransferTypes.content,JSON.stringify({pid:this.getCurrentPageId(),uid:parseInt(a.dataset.uid,10),language:parseInt(a.dataset.languageUid,10),content:a.outerHTML,moveElementUrl:a.dataset.moveElementUrl}));const n=this.getDragTooltipMetadataFromContentElement(a);e.dataTransfer.setData(DataTransferTypes.dragTooltip,JSON.stringify(n)),e.dataTransfer.effectAllowed="copyMove",e.dataTransfer.dropEffect="copy",window.setTimeout((()=>{const e=document.createElement("span");e.classList.add("t3js-draggable-copy-message","badge","badge-secondary"),e.textContent=TYPO3.lang["dragdrop.copy.message"],a.append(e)}),0),a.querySelector(Identifiers.dropZone).hidden=!0}onDragEnd(e,t){const a=t.closest(Identifiers.content);a.draggable=!1,a.querySelector(Identifiers.dropZone).hidden=!1,a.querySelector(".t3js-draggable-copy-message").remove(),this.hideDropZones()}onDrop(e,t){let a;if(t.classList.remove(Classes.dropPossibleHoverClass),!e.dataTransfer.types.includes(DataTransferTypes.content))return;const n=this.getColumnPositionForElement(t),o=this.getTxContainerParentPositionForElement(t),r=JSON.parse(e.dataTransfer.getData(DataTransferTypes.content));if(a=document.querySelector(`${Identifiers.content}[data-uid="${r.uid}"]`),a||(a=document.createRange().createContextualFragment(r.content).firstElementChild),"number"==typeof r.uid&&r.uid>0){const s={},d=t.closest(Identifiers.content).dataset.uid;let i;i=void 0===d?parseInt(t.closest("[data-page]").dataset.page,10):0-parseInt(d,10);let l=r.language;-1!==l&&(l=parseInt(t.closest("[data-language-uid]").dataset.languageUid,10));let c=0,g=0;0!==i&&(c=n,g=o);const p=e.ctrlKey||t.classList.contains("t3js-paste-copy"),u=p?"copy":"move";s.cmd={tt_content:{[r.uid]:{[u]:{action:"paste",target:i,update:{colPos:c,sys_language_uid:l,tx_container_parent:g}}}}},this.ajaxAction(s,p).then((()=>{t.parentElement.classList.contains(Identifiers.content.substring(1))?t.closest(Identifiers.content).after(a):t.closest(Identifiers.dropZone).after(a),this.broadcast("elementChanged",{pid:r.pid,uid:r.uid,targetPid:this.getCurrentPageId(),action:p?"copy":"move"});const e=document.querySelector(`.t3-page-column-lang-name[data-language-uid="${l}"]`);if(null===e)return;const n=e.dataset.flagIdentifier,o=e.dataset.languageTitle;Icons.getIcon(n,Icons.sizes.small).then((e=>{const t=a.querySelector(".t3js-flag");t.title=o,t.innerHTML=e}))}))}}onBroadcastElementChanged(e){e.detail.payload.pid===this.getCurrentPageId()&&e.detail.payload.targetPid!==e.detail.payload.pid&&"move"===e.detail.payload.action&&document.querySelector(`${Identifiers.content}[data-uid="${e.detail.payload.uid}"]`).remove()}ajaxAction(e,t){const a=Object.keys(e.cmd).shift(),n=parseInt(Object.keys(e.cmd[a]).shift(),10),o={component:"dragdrop",action:t?"copy":"move",table:a,uid:n},r=document.querySelector(".t3-grid-container");return DataHandler.process(e,o).then((e=>{if(e.hasErrors)throw e.messages;(t||"1"===r?.dataset.defaultLanguageBinding)&&self.location.reload()}))}getColumnPositionForElement(e){const t=e.closest("[data-colpos]");return null!==t&&void 0!==t.dataset.colpos&&parseInt(t.dataset.colpos,10)}getTxContainerParentPositionForElement(e){const t=e.closest("[data-colpos]");return null!==t&&void 0!==t.dataset.txContainerParent?parseInt(t.dataset.txContainerParent,10):0}getDragTooltipMetadataFromContentElement(e){let t,a;const n=[],o=e.querySelector(".t3-page-ce-header-title").innerText,r=e.querySelector(".element-preview");r&&(t=r.innerText,t.length>80&&(t=t.substring(0,80)+"..."));const s=e.querySelector(".t3js-icon");s&&(a=s.dataset.identifier);const d=e.querySelectorAll(".preview-thumbnails-element-image img");return d.length>0&&d.forEach((e=>{n.push({src:e.src,height:e.height,width:e.width})})),{tooltipIconIdentifier:a,tooltipLabel:o,tooltipDescription:t,thumbnails:n}}getCurrentPageId(){return parseInt(document.querySelector("[data-page]").dataset.page,10)}broadcast(e,t){BroadcastService.post(new BroadcastMessage("page-layout-drag-drop",e,t||{}))}showDropZones(){document.querySelectorAll(Identifiers.dropZone).forEach((e=>{const t=e.parentElement.querySelector(Identifiers.addContent);null!==t&&(t.hidden=!0,e.classList.add(Classes.validDropZoneClass))}))}hideDropZones(){document.querySelectorAll(`${Identifiers.dropZone}.${Classes.validDropZoneClass}`).forEach((e=>{const t=e.parentElement.querySelector(Identifiers.addContent);null!==t&&(t.hidden=!1),e.classList.remove(Classes.validDropZoneClass)}))}}export default new DragDrop; \ No newline at end of file +import DocumentService from"@typo3/core/document-service.js";import DataHandler from"@typo3/backend/ajax-data-handler.js";import Icons from"@typo3/backend/icons.js";import RegularEvent from"@typo3/core/event/regular-event.js";import{DataTransferTypes}from"@typo3/backend/enum/data-transfer-types.js";import BroadcastService from"@typo3/backend/broadcast-service.js";import{BroadcastMessage}from"@typo3/backend/broadcast-message.js";import DragDropUtility from"@typo3/backend/utility/drag-drop-utility.js";var Identifiers,Classes;!function(e){e.content=".t3js-page-ce",e.draggableContentHandle='.t3js-page-ce-header[draggable="true"]',e.dropZone=".t3js-page-ce-dropzone-available",e.column=".t3js-page-column",e.addContent=".t3js-page-new-ce"}(Identifiers||(Identifiers={})),function(e){e.validDropZoneClass="active",e.dropPossibleHoverClass="t3-page-ce-dropzone-possible"}(Classes||(Classes={}));class DragDrop{constructor(){DocumentService.ready().then((()=>{this.initialize()}))}initialize(){new RegularEvent("mousedown",((e,t)=>{const a=e.target.closest("a,img");null===a||t.contains(a)})).delegateTo(document,Identifiers.draggableContentHandle),new RegularEvent("dragstart",this.onDragStart.bind(this)).delegateTo(document,Identifiers.draggableContentHandle),new RegularEvent("dragenter",this.onDragEnter.bind(this)).delegateTo(document,Identifiers.draggableContentHandle),new RegularEvent("dragend",this.onDragEnd.bind(this)).delegateTo(document,Identifiers.draggableContentHandle),new RegularEvent("dragenter",((e,t)=>{t.classList.add(Classes.dropPossibleHoverClass),DragDropUtility.updateEventAndTooltipToReflectCopyMoveIntention(e)})).delegateTo(document,Identifiers.dropZone),new RegularEvent("dragover",(e=>{e.preventDefault(),DragDropUtility.updateEventAndTooltipToReflectCopyMoveIntention(e)})).delegateTo(document,Identifiers.dropZone),new RegularEvent("dragleave",((e,t)=>{e.preventDefault(),t.classList.remove(Classes.dropPossibleHoverClass)})).delegateTo(document,Identifiers.dropZone),new RegularEvent("drop",this.onDrop.bind(this),{capture:!0,passive:!0}).delegateTo(document,Identifiers.dropZone),new RegularEvent("typo3:page-layout-drag-drop:elementChanged",this.onBroadcastElementChanged.bind(this)).bindTo(top.document)}onDragEnter(e){e.preventDefault(),DragDropUtility.updateEventAndTooltipToReflectCopyMoveIntention(e),this.showDropZones()}onDragStart(e,t){const a=t.closest(Identifiers.content);e.dataTransfer.setData(DataTransferTypes.content,JSON.stringify({pid:this.getCurrentPageId(),uid:parseInt(a.dataset.uid,10),language:parseInt(a.dataset.languageUid,10),content:a.outerHTML,moveElementUrl:a.dataset.moveElementUrl}));const n=this.getDragTooltipMetadataFromContentElement(a);e.dataTransfer.setData(DataTransferTypes.dragTooltip,JSON.stringify(n)),e.dataTransfer.effectAllowed="copyMove",DragDropUtility.updateEventAndTooltipToReflectCopyMoveIntention(e),a.querySelector(Identifiers.dropZone).hidden=!0}onDragEnd(){this.hideDropZones()}onDrop(e,t){let a;if(t.classList.remove(Classes.dropPossibleHoverClass),!e.dataTransfer.types.includes(DataTransferTypes.content))return;const n=this.getColumnPositionForElement(t),o=this.getTxContainerParentPositionForElement(t),r=JSON.parse(e.dataTransfer.getData(DataTransferTypes.content));if(a=document.querySelector(`${Identifiers.content}[data-uid="${r.uid}"]`),a||(a=document.createRange().createContextualFragment(r.content).firstElementChild),"number"==typeof r.uid&&r.uid>0){const s={},i=t.closest(Identifiers.content).dataset.uid;let d;d=void 0===i?parseInt(t.closest("[data-page]").dataset.page,10):0-parseInt(i,10);let l=r.language;-1!==l&&(l=parseInt(t.closest("[data-language-uid]").dataset.languageUid,10));let c=0,p=0;0!==d&&(c=n,p=o);const g=DragDropUtility.isCopyModifierFromEvent(e)||t.classList.contains("t3js-paste-copy"),u=g?"copy":"move";s.cmd={tt_content:{[r.uid]:{[u]:{action:"paste",target:d,update:{colPos:c,sys_language_uid:l,tx_container_parent:p}}}}},this.ajaxAction(s,g).then((()=>{t.parentElement.classList.contains(Identifiers.content.substring(1))?t.closest(Identifiers.content).after(a):t.closest(Identifiers.dropZone).after(a),this.broadcast("elementChanged",{pid:r.pid,uid:r.uid,targetPid:this.getCurrentPageId(),action:g?"copy":"move"});const e=document.querySelector(`.t3-page-column-lang-name[data-language-uid="${l}"]`);if(null===e)return;const n=e.dataset.flagIdentifier,o=e.dataset.languageTitle;Icons.getIcon(n,Icons.sizes.small).then((e=>{const t=a.querySelector(".t3js-flag");t.title=o,t.innerHTML=e}))}))}}onBroadcastElementChanged(e){e.detail.payload.pid===this.getCurrentPageId()&&e.detail.payload.targetPid!==e.detail.payload.pid&&"move"===e.detail.payload.action&&document.querySelector(`${Identifiers.content}[data-uid="${e.detail.payload.uid}"]`).remove()}ajaxAction(e,t){const a=Object.keys(e.cmd).shift(),n=parseInt(Object.keys(e.cmd[a]).shift(),10),o={component:"dragdrop",action:t?"copy":"move",table:a,uid:n},r=document.querySelector(".t3-grid-container");return DataHandler.process(e,o).then((e=>{if(e.hasErrors)throw e.messages;(t||"1"===r?.dataset.defaultLanguageBinding)&&self.location.reload()}))}getColumnPositionForElement(e){const t=e.closest("[data-colpos]");return null!==t&&void 0!==t.dataset.colpos&&parseInt(t.dataset.colpos,10)}getTxContainerParentPositionForElement(e){const t=e.closest("[data-colpos]");return null!==t&&void 0!==t.dataset.txContainerParent?parseInt(t.dataset.txContainerParent,10):0}getDragTooltipMetadataFromContentElement(e){let t,a;const n=[],o=e.querySelector(".t3-page-ce-header-title").innerText,r=e.querySelector(".element-preview");r&&(t=r.innerText,t.length>80&&(t=t.substring(0,80)+"..."));const s=e.querySelector(".t3js-icon");s&&(a=s.dataset.identifier);const i=e.querySelectorAll(".preview-thumbnails-element-image img");return i.length>0&&i.forEach((e=>{n.push({src:e.src,height:e.height,width:e.width})})),{statusIconIdentifier:"actions-move",tooltipIconIdentifier:a,tooltipLabel:o,tooltipDescription:t,thumbnails:n}}getCurrentPageId(){return parseInt(document.querySelector("[data-page]").dataset.page,10)}broadcast(e,t){BroadcastService.post(new BroadcastMessage("page-layout-drag-drop",e,t||{}))}showDropZones(){document.querySelectorAll(Identifiers.dropZone).forEach((e=>{e.hidden=!1;const t=e.parentElement.querySelector(Identifiers.addContent);null!==t&&(t.hidden=!0,e.classList.add(Classes.validDropZoneClass))}))}hideDropZones(){document.querySelectorAll(Identifiers.dropZone).forEach((e=>{e.hidden=!0;const t=e.parentElement.querySelector(Identifiers.addContent);null!==t&&(t.hidden=!1),e.classList.remove(Classes.validDropZoneClass)}))}}export default new DragDrop; \ No newline at end of file