[TASK] Migrate LayoutModule/Paste.js to TypeScript 80/56280/5
authorAndreas Wolf <dev@a-w.io>
Sat, 17 Mar 2018 10:00:43 +0000 (11:00 +0100)
committerFrank Naegler <frank.naegler@typo3.org>
Wed, 31 Oct 2018 12:42:58 +0000 (13:42 +0100)
Change-Id: I1eb5996b08a6aaaac8ef5d179c2e509f68c15cb3
Resolves: #84169
Releases: master
Reviewed-on: https://review.typo3.org/56280
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Build/types/TYPO3/index.d.ts
typo3/sysext/backend/Resources/Private/TypeScript/LayoutModule/DragDrop.ts
typo3/sysext/backend/Resources/Private/TypeScript/LayoutModule/Paste.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Private/TypeScript/Modal.ts
typo3/sysext/backend/Resources/Public/JavaScript/LayoutModule/Paste.js

index 57f0700..3e420a6 100644 (file)
@@ -89,6 +89,11 @@ interface Window {
   currentModuleLoaded: string;
   fsMod: { [key: string]: any };
   nextLoadModuleUrl: string;
+
+  // required for Paste.ts
+  // TODO these should be passed as data attributes
+  pasteAfterLinkTemplate: string;
+  pasteIntoLinkTemplate: string;
 }
 
 /**
index 7080c97..0f54eae 100644 (file)
@@ -19,7 +19,7 @@
 import * as $ from 'jquery';
 import 'jquery-ui/droppable';
 import DataHandler = require('../AjaxDataHandler');
-import ResponseInterface from 'TYPO3/CMS/Backend/AjaxDataHandler/ResponseInterface';
+import ResponseInterface from '../AjaxDataHandler/ResponseInterface';
 
 
 interface Parameters {
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/LayoutModule/Paste.ts b/typo3/sysext/backend/Resources/Private/TypeScript/LayoutModule/Paste.ts
new file mode 100644 (file)
index 0000000..9ae2a43
--- /dev/null
@@ -0,0 +1,185 @@
+/*
+ * 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!
+ */
+
+/**
+ * Module: TYPO3/CMS/Backend/LayoutModule/Paste
+ * this JS code does the paste logic for the Layout module (Web => Page)
+ * based on jQuery UI
+ */
+import * as $ from 'jquery';
+import ResponseInterface from '../AjaxDataHandler/ResponseInterface';
+import DataHandler = require('../AjaxDataHandler');
+import Modal = require('../Modal');
+import Severity = require('../Severity');
+
+interface Button {
+  text: string;
+  active?: boolean;
+  btnClass: string;
+  trigger: () => void;
+}
+
+class Paste {
+  private elementIdentifier: string = '.t3js-page-ce';
+
+  /**
+   * @param {JQuery} $element
+   * @return number
+   */
+  private static determineColumn($element: JQuery): number {
+    const $columnContainer = $element.closest('[data-colpos]');
+    if ($columnContainer.length && $columnContainer.data('colpos') !== 'undefined') {
+      return $columnContainer.data('colpos');
+    }
+
+    return 0;
+  }
+
+  /**
+   * initializes paste icons for all content elements on the page
+   */
+  constructor() {
+    $((): void => {
+      if ($('.t3js-page-columns').length) {
+        this.activatePasteIcons();
+      }
+    });
+  }
+
+  /**
+   * activates the paste into / paste after icons outside of the context menus
+   */
+  private activatePasteIcons(): void {
+    const me = this;
+
+    $('.t3-page-ce-wrapper-new-ce').each((index: number, el: HTMLElement): void => {
+      if (!$(el).find('.t3js-toggle-new-content-element-wizard').length) {
+        return;
+      }
+      $('.t3js-page-lang-column .t3-page-ce > .t3-page-ce').removeClass('t3js-page-ce');
+      if (top.pasteAfterLinkTemplate && top.pasteIntoLinkTemplate) {
+        const parent = $(el).parent();
+        if (parent.data('page')) {
+          $(el).append(top.pasteIntoLinkTemplate);
+        } else {
+          $(el).append(top.pasteAfterLinkTemplate);
+        }
+        $(el).find('.t3js-paste').on('click', (evt: Event): void => {
+          evt.preventDefault();
+          me.activatePasteModal($(evt.currentTarget));
+        });
+      }
+    });
+  }
+
+  /**
+   * generates the paste into / paste after modal
+   */
+  private activatePasteModal(element: JQuery): void {
+    const me = this;
+    const $element = $(element);
+    const url = $element.data('url') || null;
+    const title = (TYPO3.lang['paste.modal.title.paste'] || 'Paste record') + ': "' + $element.data('title') + '"';
+    const severity = (typeof top.TYPO3.Severity[$element.data('severity')] !== 'undefined') ?
+      top.TYPO3.Severity[$element.data('severity')] :
+      top.TYPO3.Severity.info;
+
+    let content: string = '';
+    let buttons: Array<Button> = [];
+    if ($element.hasClass('t3js-paste-copy')) {
+      content = TYPO3.lang['paste.modal.pastecopy'] || 'Do you want to copy the record to this position?';
+      buttons = [
+        {
+          text: TYPO3.lang['paste.modal.button.cancel'] || 'Cancel',
+          active: true,
+          btnClass: 'btn-default',
+          trigger: (): void => {
+            Modal.currentModal.trigger('modal-dismiss');
+          }
+        },
+        {
+          text: TYPO3.lang['paste.modal.button.pastecopy'] || 'Copy',
+          btnClass: 'btn-' + Severity.getCssClass(severity),
+          trigger: (): void => {
+            Modal.currentModal.trigger('modal-dismiss');
+            me.execute($element);
+          }
+        }
+      ];
+    } else {
+      content = TYPO3.lang['paste.modal.paste'] || 'Do you want to move the record to this position?';
+      buttons = [
+        {
+          text: TYPO3.lang['paste.modal.button.cancel'] || 'Cancel',
+          active: true,
+          btnClass: 'btn-default',
+          trigger: (): void => {
+            Modal.currentModal.trigger('modal-dismiss');
+          }
+        },
+        {
+          text: TYPO3.lang['paste.modal.button.paste'] || 'Move',
+          btnClass: 'btn-' + Severity.getCssClass(severity),
+          trigger: (): void => {
+            Modal.currentModal.trigger('modal-dismiss');
+            me.execute($element);
+          }
+        }
+      ];
+    }
+    if (url !== null) {
+      const separator = (url.indexOf('?') > -1) ? '&' : '?';
+      const params = $.param({data: $element.data()});
+      Modal.loadUrl(title, severity, buttons, url + separator + params);
+    } else {
+      Modal.show(title, content, severity, buttons);
+    }
+  }
+
+  /**
+   * Send an AJAX requst via the AjaxDataHandler
+   *
+   * @param {JQuery} $element
+   */
+  private execute($element: JQuery): void {
+    const colPos = Paste.determineColumn($element);
+    const closestElement = $element.closest(this.elementIdentifier);
+    const targetFound = closestElement.data('uid');
+    let targetPid;
+    if (typeof targetFound === 'undefined') {
+      targetPid = parseInt(closestElement.data('page'), 10);
+    } else {
+      targetPid = 0 - parseInt(targetFound, 10);
+    }
+    const language = parseInt($element.closest('[data-language-uid]').data('language-uid'), 10);
+    const parameters = {
+      CB: {
+        paste: 'tt_content|' + targetPid,
+        update: {
+          colPos: colPos,
+          sys_language_uid: language
+        }
+      }
+    };
+
+    DataHandler.process(parameters).done((result: ResponseInterface): void => {
+      if (result.hasErrors) {
+        return;
+      }
+
+      window.location.reload(true);
+    });
+  }
+}
+
+export = new Paste();
index 6f81e44..af282dc 100644 (file)
@@ -199,8 +199,8 @@ class Modal {
                  severity: SeverityEnum = SeverityEnum.info,
                  buttons: Array<Object>,
                  url: string,
-                 callback: Function,
-                 target: string
+                 callback?: Function,
+                 target?: string
   ): JQuery {
     return this.advanced({
       type: Types.ajax,
index 3f1834b..7e0a3d3 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/LayoutModule/Paste
- * this JS code does the paste logic for the Layout module (Web => Page)
- * based on jQuery UI
- */
-define(['jquery',
-  'TYPO3/CMS/Backend/AjaxDataHandler',
-  'TYPO3/CMS/Backend/Modal',
-  'TYPO3/CMS/Backend/Severity'
-], function($, DataHandler, Modal, Severity) {
-  'use strict';
-
-  /**
-   *
-   * @type {{}}
-   * @exports TYPO3/CMS/Backend/LayoutModule/Paste
-   */
-  var Paste = {
-    openedPopupWindow: [],
-    elementIdentifier: '.t3js-page-ce'
-  };
-
-  /**
-   * initializes paste icons for all content elements on the page
-   */
-  Paste.initialize = function() {
-    if ($('.t3js-page-columns').length) {
-      Paste.activatePasteIcons();
-    }
-  };
-
-  /**
-   * activates the paste into / paste after icons outside of the context menus
-   */
-  Paste.activatePasteIcons = function() {
-    $('.t3-page-ce-wrapper-new-ce').each(function() {
-      if (!$(this).find('.t3js-toggle-new-content-element-wizard').length) {
-        return true;
-      }
-      $('.t3js-page-lang-column .t3-page-ce > .t3-page-ce').removeClass('t3js-page-ce');
-      if (top.pasteAfterLinkTemplate && top.pasteIntoLinkTemplate) {
-        var parent = $(this).parent();
-        if (parent.data('page')) {
-          $(this).append(top.pasteIntoLinkTemplate);
-        } else {
-          $(this).append(top.pasteAfterLinkTemplate);
-        }
-        $(this).find('.t3js-paste').on('click', function(evt) {
-          evt.preventDefault();
-          Paste.activatePasteModal($(this));
-        });
-      }
-    });
-  };
-
-  /**
-   * generates the paste into / paste after modal
-   */
-  Paste.activatePasteModal = function(element) {
-    var $element = $(element);
-    var url = $element.data('url') || null;
-    var title = (TYPO3.lang['paste.modal.title.paste'] || 'Paste record') + ': "' + $element.data('title') + '"';
-    var severity = (typeof top.TYPO3.Severity[$element.data('severity')] !== 'undefined') ? top.TYPO3.Severity[$element.data('severity')] : top.TYPO3.Severity.info;
-    if ($element.hasClass('t3js-paste-copy')) {
-      var content = TYPO3.lang['paste.modal.pastecopy'] || 'Do you want to copy the record to this position?';
-      var buttons = [
-        {
-          text: TYPO3.lang['paste.modal.button.cancel'] || 'Cancel',
-          active: true,
-          btnClass: 'btn-default',
-          trigger: function() {
-            Modal.currentModal.trigger('modal-dismiss');
-          }
-        },
-        {
-          text: TYPO3.lang['paste.modal.button.pastecopy'] || 'Copy',
-          btnClass: 'btn-' + Severity.getCssClass(severity),
-          trigger: function() {
-            Modal.currentModal.trigger('modal-dismiss');
-            Paste.execute($element);
-          }
-        }
-      ];
-    } else {
-      var content = TYPO3.lang['paste.modal.paste'] || 'Do you want to move the record to this position?';
-      var buttons = [
-        {
-          text: TYPO3.lang['paste.modal.button.cancel'] || 'Cancel',
-          active: true,
-          btnClass: 'btn-default',
-          trigger: function() {
-            Modal.currentModal.trigger('modal-dismiss');
-          }
-        },
-        {
-          text: TYPO3.lang['paste.modal.button.paste'] || 'Move',
-          btnClass: 'btn-' + Severity.getCssClass(severity),
-          trigger: function() {
-            Modal.currentModal.trigger('modal-dismiss');
-            Paste.execute($element);
-          }
-        }
-      ];
-    }
-    if (url !== null) {
-      var separator = (url.indexOf('?') > -1) ? '&' : '?';
-      var params = $.param({data: $element.data()});
-      Modal.loadUrl(title, severity, buttons, url + separator + params);
-    } else {
-      Modal.show(title, content, severity, buttons);
-    }
-  };
-
-  /**
-   * @param {jQuery} $element
-   * @returns number
-   */
-  Paste.determineColumn = function($element) {
-    const $columnContainer = $element.closest('[data-colpos]');
-    if ($columnContainer.length && $columnContainer.data('colpos') !== 'undefined') {
-      return $columnContainer.data('colpos');
-    }
-
-    return 0;
-  };
-
-  /**
-   * Send an AJAX requst via the AjaxDataHandler
-   *
-   * @param {jQuery} $element
-   */
-  Paste.execute = function($element) {
-    const colPos = Paste.determineColumn($element);
-    const closestElement = $element.closest(Paste.elementIdentifier);
-    const targetFound = closestElement.data('uid');
-    let targetPid;
-    if (typeof targetFound === 'undefined') {
-      targetPid = parseInt(closestElement.data('page'), 10);
-    } else {
-      targetPid = 0 - parseInt(targetFound, 10);
-    }
-    const language = parseInt($element.closest('[data-language-uid]').data('language-uid'), 10);
-    const parameters = {
-      CB: {
-        paste: 'tt_content|' + targetPid,
-        update: {
-          colPos: colPos,
-          sys_language_uid: language
-        }
-      }
-    };
-
-    DataHandler.process(parameters).done(function(result) {
-      if (result.hasErrors) {
-        return;
-      }
-
-      window.location.reload(true);
-    });
-  };
-
-  $(Paste.initialize);
-  return Paste;
-});
+define(["require","exports","jquery","../AjaxDataHandler","../Modal","../Severity"],function(t,e,a,n,o,s){"use strict";return new(function(){function t(){var t=this;this.elementIdentifier=".t3js-page-ce",a(function(){a(".t3js-page-columns").length&&t.activatePasteIcons()})}return t.determineColumn=function(t){var e=t.closest("[data-colpos]");return e.length&&"undefined"!==e.data("colpos")?e.data("colpos"):0},t.prototype.activatePasteIcons=function(){var t=this;a(".t3-page-ce-wrapper-new-ce").each(function(e,n){a(n).find(".t3js-toggle-new-content-element-wizard").length&&(a(".t3js-page-lang-column .t3-page-ce > .t3-page-ce").removeClass("t3js-page-ce"),top.pasteAfterLinkTemplate&&top.pasteIntoLinkTemplate&&(a(n).parent().data("page")?a(n).append(top.pasteIntoLinkTemplate):a(n).append(top.pasteAfterLinkTemplate),a(n).find(".t3js-paste").on("click",function(e){e.preventDefault(),t.activatePasteModal(a(e.currentTarget))})))})},t.prototype.activatePasteModal=function(t){var e=this,n=a(t),i=n.data("url")||null,r=(TYPO3.lang["paste.modal.title.paste"]||"Paste record")+': "'+n.data("title")+'"',l=void 0!==top.TYPO3.Severity[n.data("severity")]?top.TYPO3.Severity[n.data("severity")]:top.TYPO3.Severity.info,p="",c=[];if(n.hasClass("t3js-paste-copy")?(p=TYPO3.lang["paste.modal.pastecopy"]||"Do you want to copy the record to this position?",c=[{text:TYPO3.lang["paste.modal.button.cancel"]||"Cancel",active:!0,btnClass:"btn-default",trigger:function(){o.currentModal.trigger("modal-dismiss")}},{text:TYPO3.lang["paste.modal.button.pastecopy"]||"Copy",btnClass:"btn-"+s.getCssClass(l),trigger:function(){o.currentModal.trigger("modal-dismiss"),e.execute(n)}}]):(p=TYPO3.lang["paste.modal.paste"]||"Do you want to move the record to this position?",c=[{text:TYPO3.lang["paste.modal.button.cancel"]||"Cancel",active:!0,btnClass:"btn-default",trigger:function(){o.currentModal.trigger("modal-dismiss")}},{text:TYPO3.lang["paste.modal.button.paste"]||"Move",btnClass:"btn-"+s.getCssClass(l),trigger:function(){o.currentModal.trigger("modal-dismiss"),e.execute(n)}}]),null!==i){var d=i.indexOf("?")>-1?"&":"?",u=a.param({data:n.data()});o.loadUrl(r,l,c,i+d+u)}else o.show(r,p,l,c)},t.prototype.execute=function(e){var a=t.determineColumn(e),o=e.closest(this.elementIdentifier),s=o.data("uid"),i={CB:{paste:"tt_content|"+(void 0===s?parseInt(o.data("page"),10):0-parseInt(s,10)),update:{colPos:a,sys_language_uid:parseInt(e.closest("[data-language-uid]").data("language-uid"),10)}}};n.process(i).done(function(t){t.hasErrors||window.location.reload(!0)})},t}())});
\ No newline at end of file