[TASK] Emit `typo3:datahandler:process` after drag&drop in page module

To give extension authors the possibility to react on drag&drop events
happening in the page module, AjaxDataHandler now emits the
`typo3:datahandler:process` event.

Resolves: #95069
Releases: master, 10.4
Change-Id: I07956357afa301e77b1bed033113bd8b9dca662d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/70859


Tested-by: core-ci <typo3@b13.com>
Tested-by: Stefan Froemken <froemken@gmail.com>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Stefan Froemken <froemken@gmail.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/LayoutModule/DragDrop.ts

@@ -23,8 +23,8 @@ import Icons = require('../Icons');
 import ResponseInterface from '../AjaxDataHandler/ResponseInterface';
 
 interface Parameters {
-  cmd?: { tt_content: { [key: string]: any } };
-  data?: { tt_content: { [key: string]: any } };
+  cmd?: { [key: string]: { [key: string]: any } };
+  data?: { [key: string]: { [key: string]: any } };
   CB?: { paste: string, update: { colPos: number | boolean, sys_language_uid: number }};
 }
 
@@ -246,7 +246,11 @@ class DragDrop {
    * @private
    */
   public static ajaxAction($droppableElement: JQuery, $draggableElement: JQuery, parameters: Parameters, isCopyAction: boolean): Promise<any> {
-    return DataHandler.process(parameters).then((result: ResponseInterface): void => {
+    const table: string = Object.keys(parameters.cmd).shift();
+    const uid: number = parseInt(Object.keys(parameters.cmd[table]).shift(), 10);
+    const eventData = {component: 'dragdrop', action: isCopyAction ? 'copy' : 'move', table, uid};
+
+    return DataHandler.process(parameters, eventData).then((result: ResponseInterface): void => {
       if (result.hasErrors) {
         throw result.messages;
       }

typo3/sysext/backend/Resources/Public/JavaScript/LayoutModule/DragDrop.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","jquery","../AjaxDataHandler","../Icons","jquery-ui/droppable"],(function(e,t,a,o,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),a=__importDefault(a);class s{static initialize(){a.default(s.contentIdentifier).draggable({handle:s.dragHeaderIdentifier,scope:"tt_content",cursor:"move",distance:20,revert:"invalid",zIndex:100,start:e=>{s.onDragStart(a.default(e.target))},stop:e=>{s.onDragStop(a.default(e.target))}}),a.default(s.dropZoneIdentifier).droppable({accept:this.contentIdentifier,scope:"tt_content",tolerance:"pointer",over:(e,t)=>{s.onDropHoverOver(a.default(t.draggable),a.default(e.target))},out:(e,t)=>{s.onDropHoverOut(a.default(t.draggable),a.default(e.target))},drop:(e,t)=>{s.onDrop(a.default(t.draggable),a.default(e.target),e)}})}static onDragStart(e){s.originalStyles=e.get(0).style.cssText,e.children(s.dragIdentifier).addClass("dragitem-shadow"),e.append('<div class="ui-draggable-copy-message">'+TYPO3.lang["dragdrop.copy.message"]+"</div>"),e.children(s.dropZoneIdentifier).addClass("drag-start"),e.closest(s.columnIdentifier).removeClass("active"),e.find(s.dropZoneIdentifier).hide(),a.default(s.dropZoneIdentifier).each((e,t)=>{const o=a.default(t);o.parent().find(".t3js-toggle-new-content-element-wizard").length?o.addClass(s.validDropZoneClass):o.closest(s.contentIdentifier).find("> "+s.addContentIdentifier+", > > "+s.addContentIdentifier).show()})}static onDragStop(e){e.children(s.dragIdentifier).removeClass("dragitem-shadow"),e.children(s.dropZoneIdentifier).removeClass("drag-start"),e.closest(s.columnIdentifier).addClass("active"),e.find(s.dropZoneIdentifier).show(),e.find(".ui-draggable-copy-message").remove(),e.get(0).style.cssText=s.originalStyles,a.default(s.dropZoneIdentifier+"."+s.validDropZoneClass).removeClass(s.validDropZoneClass)}static onDropHoverOver(e,t){t.hasClass(s.validDropZoneClass)&&t.addClass(s.dropPossibleHoverClass)}static onDropHoverOut(e,t){t.removeClass(s.dropPossibleHoverClass)}static onDrop(e,t,o){const r=s.getColumnPositionForElement(t);t.removeClass(s.dropPossibleHoverClass);const d=parseInt(e.data("uid"),10);if("number"==typeof d&&d>0){let i={};const l=t.closest(s.contentIdentifier).data("uid");let c=0;c=void 0===l?parseInt(o.target.offsetParent.getAttribute("data-page"),10):0-parseInt(l,10);let g=parseInt(e.data("language-uid"),10);-1!==g&&(g=parseInt(t.closest("[data-language-uid]").data("language-uid"),10));let p=0;0!==c&&(p=r);const f=o&&o.originalEvent.ctrlKey||t.hasClass("t3js-paste-copy"),u=f?"copy":"move";i.cmd={tt_content:{[d]:{[u]:{action:"paste",target:c,update:{colPos:p,sys_language_uid:g}}}}},s.ajaxAction(t,e,i,f).then(()=>{const t=a.default(`.t3-page-column-lang-name[data-language-uid="${g}"]`);if(0===t.length)return;const o=t.data("flagIdentifier"),s=t.data("languageTitle");e.find(".t3js-language-title").text(s),n.getIcon(o,n.sizes.small).then(t=>{e.find(".t3js-flag").attr("title",s).html(t)})})}}static ajaxAction(e,t,a,n){return o.process(a).then(a=>{if(a.hasErrors)throw a.messages;e.parent().hasClass(s.contentIdentifier.substring(1))?t.detach().css({top:0,left:0}).insertAfter(e.closest(s.contentIdentifier)):t.detach().css({top:0,left:0}).insertAfter(e.closest(s.dropZoneIdentifier)),n&&self.location.reload()})}static getColumnPositionForElement(e){const t=e.closest("[data-colpos]");return!(!t.length||"undefined"===t.data("colpos"))&&t.data("colpos")}}s.contentIdentifier=".t3js-page-ce",s.dragIdentifier=".t3-page-ce-dragitem",s.dragHeaderIdentifier=".t3js-page-ce-draghandle",s.dropZoneIdentifier=".t3js-page-ce-dropzone-available",s.columnIdentifier=".t3js-page-column",s.validDropZoneClass="active",s.dropPossibleHoverClass="t3-page-ce-dropzone-possible",s.addContentIdentifier=".t3js-page-new-ce",s.originalStyles="",t.default=s,a.default(s.initialize)}));
\ No newline at end of file
+var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};define(["require","exports","jquery","../AjaxDataHandler","../Icons","jquery-ui/droppable"],(function(e,t,a,o,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),a=__importDefault(a);class s{static initialize(){a.default(s.contentIdentifier).draggable({handle:s.dragHeaderIdentifier,scope:"tt_content",cursor:"move",distance:20,revert:"invalid",zIndex:100,start:e=>{s.onDragStart(a.default(e.target))},stop:e=>{s.onDragStop(a.default(e.target))}}),a.default(s.dropZoneIdentifier).droppable({accept:this.contentIdentifier,scope:"tt_content",tolerance:"pointer",over:(e,t)=>{s.onDropHoverOver(a.default(t.draggable),a.default(e.target))},out:(e,t)=>{s.onDropHoverOut(a.default(t.draggable),a.default(e.target))},drop:(e,t)=>{s.onDrop(a.default(t.draggable),a.default(e.target),e)}})}static onDragStart(e){s.originalStyles=e.get(0).style.cssText,e.children(s.dragIdentifier).addClass("dragitem-shadow"),e.append('<div class="ui-draggable-copy-message">'+TYPO3.lang["dragdrop.copy.message"]+"</div>"),e.children(s.dropZoneIdentifier).addClass("drag-start"),e.closest(s.columnIdentifier).removeClass("active"),e.find(s.dropZoneIdentifier).hide(),a.default(s.dropZoneIdentifier).each((e,t)=>{const o=a.default(t);o.parent().find(".t3js-toggle-new-content-element-wizard").length?o.addClass(s.validDropZoneClass):o.closest(s.contentIdentifier).find("> "+s.addContentIdentifier+", > > "+s.addContentIdentifier).show()})}static onDragStop(e){e.children(s.dragIdentifier).removeClass("dragitem-shadow"),e.children(s.dropZoneIdentifier).removeClass("drag-start"),e.closest(s.columnIdentifier).addClass("active"),e.find(s.dropZoneIdentifier).show(),e.find(".ui-draggable-copy-message").remove(),e.get(0).style.cssText=s.originalStyles,a.default(s.dropZoneIdentifier+"."+s.validDropZoneClass).removeClass(s.validDropZoneClass)}static onDropHoverOver(e,t){t.hasClass(s.validDropZoneClass)&&t.addClass(s.dropPossibleHoverClass)}static onDropHoverOut(e,t){t.removeClass(s.dropPossibleHoverClass)}static onDrop(e,t,o){const r=s.getColumnPositionForElement(t);t.removeClass(s.dropPossibleHoverClass);const d=parseInt(e.data("uid"),10);if("number"==typeof d&&d>0){let i={};const l=t.closest(s.contentIdentifier).data("uid");let c=0;c=void 0===l?parseInt(o.target.offsetParent.getAttribute("data-page"),10):0-parseInt(l,10);let g=parseInt(e.data("language-uid"),10);-1!==g&&(g=parseInt(t.closest("[data-language-uid]").data("language-uid"),10));let p=0;0!==c&&(p=r);const f=o&&o.originalEvent.ctrlKey||t.hasClass("t3js-paste-copy"),u=f?"copy":"move";i.cmd={tt_content:{[d]:{[u]:{action:"paste",target:c,update:{colPos:p,sys_language_uid:g}}}}},s.ajaxAction(t,e,i,f).then(()=>{const t=a.default(`.t3-page-column-lang-name[data-language-uid="${g}"]`);if(0===t.length)return;const o=t.data("flagIdentifier"),s=t.data("languageTitle");e.find(".t3js-language-title").text(s),n.getIcon(o,n.sizes.small).then(t=>{e.find(".t3js-flag").attr("title",s).html(t)})})}}static ajaxAction(e,t,a,n){const r=Object.keys(a.cmd).shift(),d=parseInt(Object.keys(a.cmd[r]).shift(),10),i={component:"dragdrop",action:n?"copy":"move",table:r,uid:d};return o.process(a,i).then(a=>{if(a.hasErrors)throw a.messages;e.parent().hasClass(s.contentIdentifier.substring(1))?t.detach().css({top:0,left:0}).insertAfter(e.closest(s.contentIdentifier)):t.detach().css({top:0,left:0}).insertAfter(e.closest(s.dropZoneIdentifier)),n&&self.location.reload()})}static getColumnPositionForElement(e){const t=e.closest("[data-colpos]");return!(!t.length||"undefined"===t.data("colpos"))&&t.data("colpos")}}s.contentIdentifier=".t3js-page-ce",s.dragIdentifier=".t3-page-ce-dragitem",s.dragHeaderIdentifier=".t3js-page-ce-draghandle",s.dropZoneIdentifier=".t3js-page-ce-dropzone-available",s.columnIdentifier=".t3js-page-column",s.validDropZoneClass="active",s.dropPossibleHoverClass="t3-page-ce-dropzone-possible",s.addContentIdentifier=".t3js-page-new-ce",s.originalStyles="",t.default=s,a.default(s.initialize)}));
\ No newline at end of file