[TASK] Migrate PageActions to TypeScript 02/55902/3
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Mon, 26 Feb 2018 08:41:10 +0000 (09:41 +0100)
committerBenni Mack <benni@typo3.org>
Mon, 26 Feb 2018 21:52:41 +0000 (22:52 +0100)
Change-Id: I070facc7961d59b2151178810f3b77e6928607e0
Resolves: #82601
Releases: master
Reviewed-on: https://review.typo3.org/55902
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
typo3/sysext/backend/Classes/View/PageLayoutView.php
typo3/sysext/backend/Resources/Private/TypeScript/Enum/KeyTypes.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Private/TypeScript/PageActions.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/Enum/KeyTypes.js [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/PageActions.js
typo3/sysext/recordlist/Classes/RecordList.php

index 20115d7..b1a8ff0 100644 (file)
@@ -863,7 +863,6 @@ class PageLayoutView implements LoggerAwareInterface
             $pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/PageActions', 'function(PageActions) {
                 PageActions.setPageId(' . (int)$this->id . ');
                 PageActions.setLanguageOverlayId(' . $languageOverlayId . ');
-                PageActions.initializePageTitleRenaming();
             }');
         }
         // Get labels for CTypes and tt_content element fields in general:
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/Enum/KeyTypes.ts b/typo3/sysext/backend/Resources/Private/TypeScript/Enum/KeyTypes.ts
new file mode 100644 (file)
index 0000000..92e5635
--- /dev/null
@@ -0,0 +1,17 @@
+/*
+ * 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!
+ */
+
+export enum KeyTypesEnum {
+  ENTER = 13,
+  ESCAPE = 27
+}
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/PageActions.ts b/typo3/sysext/backend/Resources/Private/TypeScript/PageActions.ts
new file mode 100644 (file)
index 0000000..027879d
--- /dev/null
@@ -0,0 +1,237 @@
+/*
+ * 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 {KeyTypesEnum} from './Enum/KeyTypes';
+import * as $ from 'jquery';
+import PersistentStorage = require('./Storage/Persistent');
+import NewContentElement = require('./Wizard/NewContentElement');
+
+enum IdentifierEnum {
+  pageTitle = '.t3js-title-inlineedit',
+  hiddenElements = '.t3js-hidden-record',
+  newButton = '.t3js-toggle-new-content-element-wizard'
+}
+
+/**
+ * Module: TYPO3/CMS/Backend/PageActions
+ * JavaScript implementations for page actions
+ */
+class PageActions {
+  private pageId: number = 0;
+  private pageOverlayId: number = 0;
+  private $pageTitle: JQuery = null;
+  private $showHiddenElementsCheckbox: JQuery = null;
+
+  constructor() {
+    $((): void => {
+      this.initializeElements();
+      this.initializeEvents();
+      this.initializeNewContentElementWizard();
+      this.initializePageTitleRenaming();
+    });
+  }
+
+  /**
+   * Set the page id (used in the RequireJS callback)
+   *
+   * @param {number} pageId
+   */
+  public setPageId(pageId: number): void {
+    this.pageId = pageId;
+  }
+
+  /**
+   * Set the overlay id
+   *
+   * @param {number} overlayId
+   */
+  public setLanguageOverlayId(overlayId: number): void {
+    this.pageOverlayId = overlayId;
+  }
+
+  /**
+   * Initialize page title renaming
+   */
+  public initializePageTitleRenaming(): void {
+    if (!$.isReady) {
+      $((): void => {
+        this.initializePageTitleRenaming();
+      });
+      return;
+    }
+    if (this.pageId <= 0) {
+      return;
+    }
+
+    const $editActionLink = $('<a class="hidden" href="#" data-action="edit"><span class="t3-icon fa fa-pencil"></span></a>');
+    $editActionLink.on('click', (e: JQueryEventObject): void => {
+      e.preventDefault();
+      this.editPageTitle();
+    });
+    this.$pageTitle
+      .on('dblclick',  (): void => {
+        this.editPageTitle();
+      })
+      .on('mouseover', (): void => {
+        $editActionLink.removeClass('hidden');
+      })
+      .on('mouseout', (): void => {
+        $editActionLink.addClass('hidden');
+      })
+      .append($editActionLink);
+  }
+
+  /**
+   * Initialize elements
+   */
+  private initializeElements(): void {
+    this.$pageTitle = $(IdentifierEnum.pageTitle + ':first');
+    this.$showHiddenElementsCheckbox = $('#checkTt_content_showHidden');
+  }
+
+  /**
+   * Initialize events
+   */
+  private initializeEvents(): void {
+    this.$showHiddenElementsCheckbox.on('change', this.toggleContentElementVisibility);
+  }
+
+  /**
+   * Toggles the "Show hidden content elements" checkbox
+   */
+  private toggleContentElementVisibility(e: JQueryEventObject): void {
+    const $me = $(e.currentTarget);
+    const $hiddenElements = $(IdentifierEnum.hiddenElements);
+
+    // show a spinner to show activity
+    const $spinner = $('<span />', {class: 'checkbox-spinner fa fa-circle-o-notch fa-spin'});
+    $me.hide().after($spinner);
+
+    if ($me.prop('checked')) {
+      $hiddenElements.slideDown();
+    } else {
+      $hiddenElements.slideUp();
+    }
+
+    PersistentStorage.set('moduleData.web_layout.tt_content_showHidden', String($me.prop('checked'))).done((): void => {
+      $spinner.remove();
+      $me.show();
+    });
+  }
+
+  /**
+   * Changes the h1 to an edit form
+   */
+  private editPageTitle(): void {
+    const $inputFieldWrap = $(
+      '<form>' +
+      '<div class="form-group">' +
+      '<div class="input-group input-group-lg">' +
+      '<input class="form-control">' +
+      '<span class="input-group-btn">' +
+      '<button class="btn btn-default" type="button" data-action="submit"><span class="t3-icon fa fa-floppy-o"></span></button> ' +
+      '</span>' +
+      '<span class="input-group-btn">' +
+      '<button class="btn btn-default" type="button" data-action="cancel"><span class="t3-icon fa fa-times"></span></button> ' +
+      '</span>' +
+      '</div>' +
+      '</div>' +
+      '</form>'
+      ),
+      $inputField = $inputFieldWrap.find('input');
+
+    $inputFieldWrap.find('[data-action=cancel]').on('click', (): void => {
+      $inputFieldWrap.replaceWith(this.$pageTitle);
+      this.initializePageTitleRenaming();
+    });
+
+    $inputFieldWrap.find('[data-action=submit]').on('click', (): void => {
+      const newPageTitle = $.trim($inputField.val());
+      if (newPageTitle !== '' && this.$pageTitle.text() !== newPageTitle) {
+        this.saveChanges($inputField);
+      } else {
+        $inputFieldWrap.find('[data-action=cancel]').trigger('click');
+      }
+    });
+
+    // the form stuff is a wacky workaround to prevent the submission of the docheader form
+    $inputField.parents('form').on('submit', (e: JQueryEventObject): boolean => {
+      e.preventDefault();
+      return false;
+    });
+
+    const $h1 = this.$pageTitle;
+    $h1.children().last().remove();
+    $h1.replaceWith($inputFieldWrap);
+    $inputField.val($h1.text()).focus();
+
+    $inputField.on('keyup', (e: JQueryEventObject): void => {
+      switch (e.which) {
+        case KeyTypesEnum.ENTER:
+          $inputFieldWrap.find('[data-action="submit"]').trigger('click');
+          break;
+        case KeyTypesEnum.ESCAPE:
+          $inputFieldWrap.find('[data-action="cancel"]').trigger('click');
+          break;
+        default:
+      }
+    });
+  }
+
+  /**
+   * Save the changes and reload the page tree
+   *
+   * @param {JQuery} $field
+   */
+  private saveChanges($field: JQuery): void {
+    const $inputFieldWrap = $field.parents('form');
+    $inputFieldWrap.find('button').addClass('disabled');
+    $field.attr('disabled', 'disabled');
+
+    let parameters: {[k: string]: any} = {};
+    let recordUid;
+
+    if (this.pageOverlayId > 0) {
+      recordUid = this.pageOverlayId;
+    } else {
+      recordUid = this.pageId;
+    }
+
+    parameters.data = {};
+    parameters.data.pages = {};
+    parameters.data.pages[recordUid] = {title: $field.val()};
+
+    require(['TYPO3/CMS/Backend/AjaxDataHandler'], (DataHandler: any): void => {
+      DataHandler.process(parameters).done((): void => {
+        $inputFieldWrap.find('[data-action=cancel]').trigger('click');
+        this.$pageTitle.text($field.val());
+        this.initializePageTitleRenaming();
+        top.TYPO3.Backend.NavigationContainer.PageTree.refreshTree();
+      }).fail((): void => {
+        $inputFieldWrap.find('[data-action=cancel]').trigger('click');
+      });
+    });
+  }
+
+  /**
+   * Activate New Content Element Wizard
+   */
+  private initializeNewContentElementWizard(): void {
+    $(IdentifierEnum.newButton).click((e: JQueryEventObject): void => {
+      const $me = $(e.currentTarget);
+      NewContentElement.wizard($me.data('url'), $me.data('title'));
+    });
+  }
+}
+
+export = new PageActions();
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Enum/KeyTypes.js b/typo3/sysext/backend/Resources/Public/JavaScript/Enum/KeyTypes.js
new file mode 100644 (file)
index 0000000..0f8ac5e
--- /dev/null
@@ -0,0 +1,13 @@
+/*
+ * 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!
+ */
+define(["require","exports"],function(a,b){"use strict";Object.defineProperty(b,"__esModule",{value:!0});var c;!function(a){a[a.ENTER=13]="ENTER",a[a.ESCAPE=27]="ESCAPE"}(c=b.KeyTypesEnum||(b.KeyTypesEnum={}))});
\ No newline at end of file
index d89a014..f53a7ae 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/PageActions
- * JavaScript implementations for page actions
- */
-define(['jquery', 'TYPO3/CMS/Backend/Storage/Persistent', 'TYPO3/CMS/Backend/Wizard/NewContentElement'], function($, PersistentStorage, NewContentElement) {
-  'use strict';
-
-  /**
-   *
-   * @type {{settings: {pageId: number, language: {pageOverlayId: number}}, identifier: {pageTitle: string, hiddenElements: string}, elements: {$pageTitle: null, $showHiddenElementsCheckbox: null}, documentIsReady: boolean}}
-   * @exports TYPO3/CMS/Backend/PageActions
-   */
-  var PageActions = {
-    settings: {
-      pageId: 0,
-      language: {
-        pageOverlayId: 0
-      }
-    },
-    identifier: {
-      pageTitle: '.t3js-title-inlineedit',
-      hiddenElements: '.t3js-hidden-record',
-      newButton: '.t3js-toggle-new-content-element-wizard'
-    },
-    elements: {
-      $pageTitle: null,
-      $showHiddenElementsCheckbox: null
-    },
-    documentIsReady: false
-  };
-
-  /**
-   * Initialize page title renaming
-   */
-  PageActions.initializePageTitleRenaming = function() {
-    if (!PageActions.documentIsReady) {
-      $(function() {
-        PageActions.initializePageTitleRenaming();
-      });
-      return;
-    }
-    if (PageActions.settings.pageId <= 0) {
-      return;
-    }
-
-    var $editActionLink = $('<a class="hidden" href="#" data-action="edit"><span class="t3-icon fa fa-pencil"></span></a>');
-    $editActionLink.on('click', function(e) {
-      e.preventDefault();
-      PageActions.editPageTitle();
-    });
-    PageActions.elements.$pageTitle
-      .on('dblclick', PageActions.editPageTitle)
-      .on('mouseover', function() {
-        $editActionLink.removeClass('hidden');
-      })
-      .on('mouseout', function() {
-        $editActionLink.addClass('hidden');
-      })
-      .append($editActionLink);
-  };
-
-  /**
-   * Initialize elements
-   */
-  PageActions.initializeElements = function() {
-    PageActions.elements.$pageTitle = $(PageActions.identifier.pageTitle + ':first');
-    PageActions.elements.$showHiddenElementsCheckbox = $('#checkTt_content_showHidden');
-  };
-
-  /**
-   * Initialize events
-   */
-  PageActions.initializeEvents = function() {
-    PageActions.elements.$showHiddenElementsCheckbox.on('change', PageActions.toggleContentElementVisibility);
-  };
-
-  /**
-   * Toggles the "Show hidden content elements" checkbox
-   */
-  PageActions.toggleContentElementVisibility = function() {
-    var $me = $(this),
-      $hiddenElements = $(PageActions.identifier.hiddenElements);
-
-    // show a spinner to show activity
-    var $spinner = $('<span />', {class: 'checkbox-spinner fa fa-circle-o-notch fa-spin'});
-    $me.hide().after($spinner);
-
-    if ($me.prop('checked')) {
-      $hiddenElements.slideDown();
-    } else {
-      $hiddenElements.slideUp();
-    }
-
-    PersistentStorage.set('moduleData.web_layout.tt_content_showHidden', $me.prop('checked') ? 1 : 0).done(function() {
-      $spinner.remove();
-      $me.show();
-    });
-  };
-
-  /**
-   * Changes the h1 to an edit form
-   */
-  PageActions.editPageTitle = function() {
-    var $inputFieldWrap = $(
-      '<form>' +
-      '<div class="form-group">' +
-      '<div class="input-group input-group-lg">' +
-      '<input class="form-control">' +
-      '<span class="input-group-btn">' +
-      '<button class="btn btn-default" type="button" data-action="submit"><span class="t3-icon fa fa-floppy-o"></span></button> ' +
-      '</span>' +
-      '<span class="input-group-btn">' +
-      '<button class="btn btn-default" type="button" data-action="cancel"><span class="t3-icon fa fa-times"></span></button> ' +
-      '</span>' +
-      '</div>' +
-      '</div>' +
-      '</form>'
-      ),
-      $inputField = $inputFieldWrap.find('input');
-
-    $inputFieldWrap.find('[data-action=cancel]').on('click', function() {
-      $inputFieldWrap.replaceWith(PageActions.elements.$pageTitle);
-      PageActions.initializePageTitleRenaming();
-    });
-
-    $inputFieldWrap.find('[data-action=submit]').on('click', function() {
-      var newPageTitle = $.trim($inputField.val());
-      if (newPageTitle !== '' && PageActions.elements.$pageTitle.text() !== newPageTitle) {
-        PageActions.saveChanges($inputField);
-      } else {
-        $inputFieldWrap.find('[data-action=cancel]').trigger('click');
-      }
-    });
-
-    // the form stuff is a wacky workaround to prevent the submission of the docheader form
-    $inputField.parents('form').on('submit', function(e) {
-      e.preventDefault();
-      return false;
-    });
-
-    var $h1 = PageActions.elements.$pageTitle;
-    $h1.children().last().remove();
-    $h1.replaceWith($inputFieldWrap);
-    $inputField.val($h1.text()).focus();
-
-    $inputField.on('keyup', function(e) {
-      switch (e.which) {
-        case 13: // enter
-          $inputFieldWrap.find('[data-action=submit]').trigger('click');
-          break;
-        case 27: // escape
-          $inputFieldWrap.find('[data-action=cancel]').trigger('click');
-          break;
-      }
-    });
-  };
-
-  /**
-   * Set the page id (used in the RequireJS callback)
-   *
-   * @param {Number} pageId
-   */
-  PageActions.setPageId = function(pageId) {
-    PageActions.settings.pageId = pageId;
-  };
-
-  /**
-   * Set the overlay id
-   *
-   * @param {Number} overlayId
-   */
-  PageActions.setLanguageOverlayId = function(overlayId) {
-    PageActions.settings.language.pageOverlayId = overlayId;
-  };
-
-  /**
-   * Activate New Content Element Wizard
-   */
-  PageActions.initializeNewContentElementWizard = function() {
-    $(PageActions.identifier.newButton).click(function() {
-      NewContentElement.wizard($(this).data('url'), $(this).data('title'));
-    });
-  };
-
-  /**
-   * Save the changes and reload the page tree
-   *
-   * @param {Object} $field
-   */
-  PageActions.saveChanges = function($field) {
-    var $inputFieldWrap = $field.parents('form');
-    $inputFieldWrap.find('button').addClass('disabled');
-    $field.attr('disabled', 'disabled');
-
-    var parameters = {},
-      recordUid;
-
-    if (PageActions.settings.language.pageOverlayId === 0) {
-      recordUid = PageActions.settings.pageId;
-    } else {
-      recordUid = PageActions.settings.language.pageOverlayId;
-    }
-
-    parameters.data = {};
-    parameters.data['pages'] = {};
-    parameters.data['pages'][recordUid] = {title: $field.val()};
-
-    require(['TYPO3/CMS/Backend/AjaxDataHandler'], function(DataHandler) {
-      DataHandler.process(parameters).done(function() {
-        $inputFieldWrap.find('[data-action=cancel]').trigger('click');
-        PageActions.elements.$pageTitle.text($field.val());
-        PageActions.initializePageTitleRenaming();
-        top.TYPO3.Backend.NavigationContainer.PageTree.refreshTree();
-      }).fail(function() {
-        $inputFieldWrap.find('[data-action=cancel]').trigger('click');
-      });
-    });
-  };
-
-  $(function() {
-    PageActions.initializeElements();
-    PageActions.initializeEvents();
-    PageActions.initializeNewContentElementWizard();
-    PageActions.documentIsReady = true;
-  });
-
-  return PageActions;
-});
+define(["require","exports","./Enum/KeyTypes","jquery","./Storage/Persistent","./Wizard/NewContentElement"],function(a,b,c,d,e,f){"use strict";var g;!function(a){a.pageTitle=".t3js-title-inlineedit",a.hiddenElements=".t3js-hidden-record",a.newButton=".t3js-toggle-new-content-element-wizard"}(g||(g={}));var h=function(){function b(){var a=this;this.pageId=0,this.pageOverlayId=0,this.$pageTitle=null,this.$showHiddenElementsCheckbox=null,d(function(){a.initializeElements(),a.initializeEvents(),a.initializeNewContentElementWizard(),a.initializePageTitleRenaming()})}return b.prototype.setPageId=function(a){this.pageId=a},b.prototype.setLanguageOverlayId=function(a){this.pageOverlayId=a},b.prototype.initializePageTitleRenaming=function(){var a=this;if(!d.isReady)return void d(function(){a.initializePageTitleRenaming()});if(!(this.pageId<=0)){var b=d('<a class="hidden" href="#" data-action="edit"><span class="t3-icon fa fa-pencil"></span></a>');b.on("click",function(b){b.preventDefault(),a.editPageTitle()}),this.$pageTitle.on("dblclick",function(){a.editPageTitle()}).on("mouseover",function(){b.removeClass("hidden")}).on("mouseout",function(){b.addClass("hidden")}).append(b)}},b.prototype.initializeElements=function(){this.$pageTitle=d(g.pageTitle+":first"),this.$showHiddenElementsCheckbox=d("#checkTt_content_showHidden")},b.prototype.initializeEvents=function(){this.$showHiddenElementsCheckbox.on("change",this.toggleContentElementVisibility)},b.prototype.toggleContentElementVisibility=function(a){var b=d(a.currentTarget),c=d(g.hiddenElements),f=d("<span />",{class:"checkbox-spinner fa fa-circle-o-notch fa-spin"});b.hide().after(f),b.prop("checked")?c.slideDown():c.slideUp(),e.set("moduleData.web_layout.tt_content_showHidden",String(b.prop("checked"))).done(function(){f.remove(),b.show()})},b.prototype.editPageTitle=function(){var a=this,b=d('<form><div class="form-group"><div class="input-group input-group-lg"><input class="form-control"><span class="input-group-btn"><button class="btn btn-default" type="button" data-action="submit"><span class="t3-icon fa fa-floppy-o"></span></button> </span><span class="input-group-btn"><button class="btn btn-default" type="button" data-action="cancel"><span class="t3-icon fa fa-times"></span></button> </span></div></div></form>'),e=b.find("input");b.find("[data-action=cancel]").on("click",function(){b.replaceWith(a.$pageTitle),a.initializePageTitleRenaming()}),b.find("[data-action=submit]").on("click",function(){var c=d.trim(e.val());""!==c&&a.$pageTitle.text()!==c?a.saveChanges(e):b.find("[data-action=cancel]").trigger("click")}),e.parents("form").on("submit",function(a){return a.preventDefault(),!1});var f=this.$pageTitle;f.children().last().remove(),f.replaceWith(b),e.val(f.text()).focus(),e.on("keyup",function(a){switch(a.which){case c.KeyTypesEnum.ENTER:b.find('[data-action="submit"]').trigger("click");break;case c.KeyTypesEnum.ESCAPE:b.find('[data-action="cancel"]').trigger("click")}})},b.prototype.saveChanges=function(b){var c=this,d=b.parents("form");d.find("button").addClass("disabled"),b.attr("disabled","disabled");var e,f={};e=this.pageOverlayId>0?this.pageOverlayId:this.pageId,f.data={},f.data.pages={},f.data.pages[e]={title:b.val()},a(["TYPO3/CMS/Backend/AjaxDataHandler"],function(a){a.process(f).done(function(){d.find("[data-action=cancel]").trigger("click"),c.$pageTitle.text(b.val()),c.initializePageTitleRenaming(),top.TYPO3.Backend.NavigationContainer.PageTree.refreshTree()}).fail(function(){d.find("[data-action=cancel]").trigger("click")})})},b.prototype.initializeNewContentElementWizard=function(){d(g.newButton).click(function(a){var b=d(a.currentTarget);f.wizard(b.data("url"),b.data("title"))})},b}();return new h});
\ No newline at end of file
index a15533e..84c7495 100644 (file)
@@ -288,7 +288,6 @@ class RecordList
         if ($userCanEditPage) {
             $this->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Backend/PageActions', 'function(PageActions) {
                 PageActions.setPageId(' . (int)$this->id . ');
-                PageActions.initializePageTitleRenaming();
             }');
         }
         $this->getPageRenderer()->loadRequireJsModule('TYPO3/CMS/Recordlist/Tooltip');