Skip to content

Commit 5aa753e

Browse files
committed
[TASK] drag-drop for TYPO3 > 13.4.5
s. https://review.typo3.org/c/Packages/TYPO3.CMS/+/88511
1 parent 7dafe2e commit 5aa753e

File tree

9 files changed

+151
-29
lines changed

9 files changed

+151
-29
lines changed

Build/JavaScript/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ build v13
2828
build patch file
2929

3030
git format-patch 12.4 --stdout > js-12.patch
31-
git format-patch 13.1 --stdout > js-13.patch
31+
git format-patch 13.4 --stdout > js-13.patch
3232

3333
build with docker
3434

Build/JavaScript/js-13.patch

+26-25
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,82 @@
1-
From 2fb0e5b5b10878b804d9845bb7baa186b140396f Mon Sep 17 00:00:00 2001
1+
From 1319af7e465beab4a929b18deb55e98e3b886a0d Mon Sep 17 00:00:00 2001
22
From: Achim Fritz <[email protected]>
3-
Date: Mon, 14 Oct 2024 14:35:21 +0200
4-
Subject: [PATCH] [PATCH] js-13-main
3+
Date: Mon, 10 Mar 2025 16:12:13 +0100
4+
Subject: [PATCH] [PATH] js-13-main
55

6-
Change-Id: I1b3ee3edd8fe045185268f6b17f98b150f342001
6+
Change-Id: I32adb943a879c3ee5b1dbdc8677daefee99919db
77
---
8-
.../backend/layout-module/drag-drop.ts | 32 +++++++++++++------
9-
.../TypeScript/backend/layout-module/paste.ts | 23 ++++++++-----
10-
2 files changed, 37 insertions(+), 18 deletions(-)
8+
.../backend/layout-module/drag-drop.ts | 34 +++++++++++++------
9+
1 file changed, 23 insertions(+), 11 deletions(-)
1110

1211
diff --git a/Build/Sources/TypeScript/backend/layout-module/drag-drop.ts b/Build/Sources/TypeScript/backend/layout-module/drag-drop.ts
13-
index f14320f9dea..56ab0a01fc4 100644
12+
index cb0de0d57d2..e821f8a3e89 100644
1413
--- a/Build/Sources/TypeScript/backend/layout-module/drag-drop.ts
1514
+++ b/Build/Sources/TypeScript/backend/layout-module/drag-drop.ts
16-
@@ -15,20 +15,20 @@
15+
@@ -15,21 +15,21 @@
1716
* Module: @typo3/backend/layout-module/drag-drop
1817
* this JS code does the drag+drop logic for the Layout module (Web => Page)
1918
*/
2019
-import DocumentService from '@typo3/core/document-service';
2120
-import DataHandler from '../ajax-data-handler';
2221
-import Icons from '../icons';
23-
-import ResponseInterface from '../ajax-data-handler/response-interface';
2422
-import RegularEvent from '@typo3/core/event/regular-event';
2523
-import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types';
26-
-import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip';
2724
-import BroadcastService from '@typo3/backend/broadcast-service';
2825
-import { BroadcastMessage } from '@typo3/backend/broadcast-message';
26+
-import type ResponseInterface from '../ajax-data-handler/response-interface';
27+
-import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip';
28+
-import DragDropUtility from '@typo3/backend/utility/drag-drop-utility';
2929
+import DocumentService from '@typo3/core/document-service.js';
3030
+import DataHandler from '@typo3/backend/ajax-data-handler.js';
3131
+import Icons from '@typo3/backend/icons.js';
32-
+import ResponseInterface from '@typo3/backend/ajax-data-handler/response-interface.js';
3332
+import RegularEvent from '@typo3/core/event/regular-event.js';
3433
+import { DataTransferTypes } from '@typo3/backend/enum/data-transfer-types.js';
35-
+import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip.js';
3634
+import BroadcastService from '@typo3/backend/broadcast-service.js';
3735
+import { BroadcastMessage } from '@typo3/backend/broadcast-message.js';
38-
36+
+import type ResponseInterface from '@typo3/backend/ajax-data-handler/response-interface.js';
37+
+import type { DragDropThumbnail, DragTooltipMetadata } from '@typo3/backend/drag-tooltip.js';
38+
+import DragDropUtility from '@typo3/backend/utility/drag-drop-utility.js';
39+
3940
interface Parameters {
4041
cmd?: { [key: string]: { [key: string]: any } };
4142
data?: { [key: string]: { [key: string]: any } };
4243
- CB?: { paste: string, update: { colPos: number | boolean, sys_language_uid: number } };
4344
+ CB?: { paste: string, update: { colPos: number | boolean, sys_language_uid: number , txContainerParent: number } };
4445
}
45-
46+
4647
export type ContentElementDragDropData = {
47-
@@ -175,6 +175,7 @@ class DragDrop {
48+
@@ -153,6 +153,7 @@ class DragDrop {
4849
}
49-
50+
5051
const newColumn = this.getColumnPositionForElement(dropContainer);
5152
+ const newTxContainerParent = this.getTxContainerParentPositionForElement(dropContainer);
5253
const contentElementDragDropData = JSON.parse(event.dataTransfer.getData(DataTransferTypes.content)) as ContentElementDragDropData;
53-
54+
5455
draggedElement = document.querySelector(`${Identifiers.content}[data-uid="${contentElementDragDropData.uid}"]`);
55-
@@ -204,8 +205,10 @@ class DragDrop {
56+
@@ -182,8 +183,10 @@ class DragDrop {
5657
}
57-
58+
5859
let colPos: number | boolean = 0;
5960
+ let txContainerParent: number = 0;
6061
if (targetPid !== 0) {
6162
colPos = newColumn;
6263
+ txContainerParent = newTxContainerParent;
6364
}
64-
const isCopyAction = (event.ctrlKey || dropContainer.classList.contains('t3js-paste-copy'));
65+
const isCopyAction = (DragDropUtility.isCopyModifierFromEvent(event) || dropContainer.classList.contains('t3js-paste-copy'));
6566
const datahandlerCommand = isCopyAction ? 'copy' : 'move';
66-
@@ -218,6 +221,7 @@ class DragDrop {
67+
@@ -196,6 +199,7 @@ class DragDrop {
6768
update: {
6869
colPos: colPos,
6970
sys_language_uid: language,
7071
+ tx_container_parent: txContainerParent,
7172
},
7273
}
7374
}
74-
@@ -307,6 +311,14 @@ class DragDrop {
75+
@@ -285,6 +289,14 @@ class DragDrop {
7576
return false;
7677
}
77-
78-
+ protected getTxContainerParentPositionForElement (element: HTMLElement): number {
78+
79+
+ protected getTxContainerParentPositionForElement(element: HTMLElement): number {
7980
+ const columnContainer = element.closest('[data-colpos]') as HTMLElement;
8081
+ if (columnContainer !== null && columnContainer.dataset.txContainerParent !== undefined) {
8182
+ return parseInt(columnContainer.dataset.txContainerParent, 10);

Classes/Tca/ContainerConfiguration.php

+5
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,11 @@ public function __construct(
9494
'EXT:backend/Resources/Private/Partials/',
9595
'EXT:container/Resources/Private/Partials11/',
9696
];
97+
} elseif ((GeneralUtility::makeInstance(Typo3Version::class))->getMajorVersion() === 12) {
98+
$this->gridPartialPaths = [
99+
'EXT:backend/Resources/Private/Partials/',
100+
'EXT:container/Resources/Private/Partials12/',
101+
];
97102
}
98103
}
99104

Resources/Private/Partials/PageLayout/Grid/ColumnHeader.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,6 @@
4040
</f:else>
4141
</f:if>
4242
</div>
43-
<div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available"></div>
43+
<div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available" hidden></div>
4444
</div>
4545
</f:if>

Resources/Private/Partials/PageLayout/Record.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,5 @@
4040
</f:if>
4141
</div>
4242
</f:if>
43-
<div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available"></div>
43+
<div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available" hidden></div>
4444
</div>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<f:comment>
2+
Styling requires the colpos to be set to the string 'unused'. To preserve type safety in the
3+
controller, the string is only used in the template by setting the below "colpos" variable.
4+
</f:comment>
5+
<f:variable name="colpos" value="{f:if(condition: column.unused, then: 'unused', else: column.columnNumber)}"/>
6+
7+
<td valign="top" colspan="{column.colSpan}" rowspan="{column.rowSpan}"
8+
data-colpos="{column.columnNumber}" data-tx-container-parent="{column.containerUid}" data-language-uid="{column.context.siteLanguage.languageId}"
9+
class="t3js-page-lang-column-{column.context.siteLanguage.languageId} t3js-page-column t3-grid-cell t3-page-column t3-page-column-{colpos}
10+
{f:if(condition: column.unassigned, then: 't3-grid-cell-unassigned')}
11+
{f:if(condition: '!{column.active} && !{column.unused}', then: 't3-grid-cell-restricted')}
12+
{f:if(condition: '!{column.active} && {hideRestrictedColumns} && !{column.unused}', then: 't3-grid-cell-hidden')}
13+
t3-gridCell-width{column.colSpan}
14+
t3-gridCell-height{column.rowSpan}">
15+
<f:render partial="PageLayout/Grid/ColumnHeader" arguments="{_all}" />
16+
<f:if condition="{column.active} || {column.unused}">
17+
<div data-colpos="{column.columnNumber}" data-language-uid="{column.context.siteLanguage.languageId}"
18+
data-tx-container-parent="{column.containerUid}"
19+
class="t3js-sortable t3js-sortable-lang t3js-sortable-lang-{column.context.siteLanguage.languageId} t3-page-ce-wrapper
20+
{f:if(condition: column.items, else: 't3-page-ce-empty')}">
21+
<f:for each="{column.items}" as="item">
22+
<f:render partial="PageLayout/Record" arguments="{_all}" />
23+
</f:for>
24+
</div>
25+
</f:if>
26+
<f:format.raw>{column.afterSectionMarkup}</f:format.raw>
27+
</td>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<div class="t3-page-column-header">
2+
<f:if condition="{column.active}">
3+
<f:then>
4+
<div class="t3-page-column-header-icons">
5+
<f:if condition="{allowEditContent} && {column.editUrl}">
6+
<a href="{column.editUrl}" title="{column.editLinkTitle}"><core:icon identifier="actions-document-open" /></a>
7+
</f:if>
8+
</div>
9+
{column.title}
10+
</f:then>
11+
<f:else if="{column.unused}">
12+
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:unusedColPos"/>
13+
</f:else>
14+
<f:else if="{column.unassigned}">
15+
{column.titleUnassigned}
16+
</f:else>
17+
<f:else>
18+
{column.titleInaccessible}
19+
</f:else>
20+
</f:if>
21+
</div>
22+
<f:format.raw>{column.beforeSectionMarkup}</f:format.raw>
23+
<f:if condition="{allowEditContent} && {column.contentEditable} && {column.allowNewContent} && {column.active}">
24+
<div class="t3-page-ce t3js-page-ce" data-page="{column.context.pageId}" id="{column.uniqueId}">
25+
<div class="t3-page-ce-actions t3js-page-new-ce" id="colpos-{column.columnNumber}-page-{column.context.pageId}-{column.uniqueId}">
26+
<f:if condition="{column.newContentElementWizardShouldBeSkipped}">
27+
<f:then>
28+
<a href="{column.newContentUrl}" title="{newContentTitle}" class="btn btn-default btn-sm">
29+
<core:icon identifier="actions-add" />
30+
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
31+
</a>
32+
</f:then>
33+
<f:else>
34+
<typo3-backend-new-content-element-wizard-button url="{column.newContentUrl}" subject="{newContentTitle}">
35+
<button type="button" class="btn btn-default btn-sm">
36+
<core:icon identifier="actions-add" />
37+
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
38+
</button>
39+
</typo3-backend-new-content-element-wizard-button>
40+
</f:else>
41+
</f:if>
42+
</div>
43+
<div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available"></div>
44+
</div>
45+
</f:if>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{f:if(condition: '{item.disabled} && {item.context.drawingConfiguration.showHidden} == 0', then: 'display: none;') -> f:variable(name: 'style')}
2+
<div class="t3-page-ce {item.wrapperClassName} t3js-page-ce t3js-page-ce-sortable"
3+
id="element-tt_content-{item.record.uid}"
4+
data-table="tt_content"
5+
data-uid="{item.record.uid}"
6+
data-language-uid="{item.record.sys_language_uid}"
7+
data-move-element-url="{f:be.uri(route: 'move_element', parameters: '{uid: item.record.uid, originalPid: item.record.pid, expandPage: item.record.pid, returnUrl: context.returnUrl}')}"
8+
style="{style}"
9+
>
10+
<div class="t3-page-ce-element t3-page-ce-dragitem t3js-page-ce-dragitem" id="{item.uniqueId}">
11+
<f:render partial="PageLayout/Record/{item.record.CType}/Header" arguments="{_all}" optional="1">
12+
<f:render partial="PageLayout/RecordDefault/Header" arguments="{_all}" />
13+
</f:render>
14+
<f:spaceless>
15+
<div class="t3-page-ce-body">
16+
<f:render partial="PageLayout/RecordDefault/Preview" arguments="{_all}" />
17+
</div>
18+
</f:spaceless>
19+
<f:render partial="PageLayout/Record/{item.record.CType}/Footer" arguments="{_all}" optional="1">
20+
<f:render partial="PageLayout/RecordDefault/Footer" arguments="{_all}" />
21+
</f:render>
22+
</div>
23+
<f:if condition="{allowEditContent} && {item.column.contentEditable} && {item.column.allowNewContent} && {column.active}">
24+
<div class="t3-page-ce-actions t3js-page-new-ce" id="colpos-{item.column.columnNumber}-page-{item.context.pageId}-{item.column.uniqueId}">
25+
<f:if condition="{column.newContentElementWizardShouldBeSkipped}">
26+
<f:then>
27+
<a href="{item.newContentAfterUrl}" title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:newContentElement')}" class="btn btn-default btn-sm">
28+
<core:icon identifier="actions-add" />
29+
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
30+
</a>
31+
</f:then>
32+
<f:else>
33+
<typo3-backend-new-content-element-wizard-button url="{item.newContentAfterUrl}" subject="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:newContentElement')}">
34+
<button type="button" class="btn btn-default btn-sm">
35+
<core:icon identifier="actions-add" />
36+
<f:translate key="LLL:EXT:backend/Resources/Private/Language/locallang_layout.xlf:createNewContent" />
37+
</button>
38+
</typo3-backend-new-content-element-wizard-button>
39+
</f:else>
40+
</f:if>
41+
</div>
42+
</f:if>
43+
<div class="t3-page-ce-dropzone t3js-page-ce-dropzone-available"></div>
44+
</div>

0 commit comments

Comments
 (0)