[TASK] Migrate Toolbar/ShortcutMenu to TypeScript 04/56004/2
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Sun, 4 Mar 2018 18:21:13 +0000 (19:21 +0100)
committerBenni Mack <benni@typo3.org>
Mon, 5 Mar 2018 06:50:17 +0000 (07:50 +0100)
Resolves: #84128
Releases: master
Change-Id: I1bb613a5662071ef1003ee030389527904c771fb
Reviewed-on: https://review.typo3.org/56004
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Reviewed-by: Benni Mack <benni@typo3.org>
Tested-by: Benni Mack <benni@typo3.org>
typo3/sysext/backend/Resources/Private/TypeScript/Toolbar/ShortcutMenu.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js

diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/Toolbar/ShortcutMenu.ts b/typo3/sysext/backend/Resources/Private/TypeScript/Toolbar/ShortcutMenu.ts
new file mode 100644 (file)
index 0000000..eb573c6
--- /dev/null
@@ -0,0 +1,216 @@
+/*
+ * 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 * as $ from 'jquery';
+import Icons = require('../Icons');
+import Modal = require('../Modal');
+import Notification = require('../Notification');
+import Viewport = require('../Viewport');
+
+enum Identifiers {
+  containerSelector = '#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem',
+  toolbarIconSelector = '.dropdown-toggle span.icon',
+  toolbarMenuSelector = '.dropdown-menu',
+
+  shortcutItemSelector = '.t3js-topbar-shortcut',
+  shortcutDeleteSelector = '.t3js-shortcut-delete',
+  shortcutEditSelector = '.t3js-shortcut-edit',
+
+  shortcutFormTitleSelector = 'input[name="shortcut-title"]',
+  shortcutFormGroupSelector = 'select[name="shortcut-group"]',
+  shortcutFormSaveSelector = '.shortcut-form-save',
+  shortcutFormCancelSelector = '.shortcut-form-cancel',
+  shortcutFormSelector = '.shortcut-form'
+}
+
+/**
+ * Module =TYPO3/CMS/Backend/Toolbar/ShortcutMenu
+ * shortcut menu logic to add new shortcut, remove a shortcut
+ * and edit a shortcut
+ */
+class ShortcutMenu {
+  constructor() {
+    Viewport.Topbar.Toolbar.registerEvent(this.initializeEvents);
+  }
+
+  /**
+   * makes a call to the backend class to create a new shortcut,
+   * when finished it reloads the menu
+   *
+   * @param {String} moduleName
+   * @param {String} url
+   * @param {String} confirmationText
+   * @param {String} motherModule
+   * @param {Object} shortcutButton
+   * @param {String} displayName
+   */
+  public createShortcut(
+    moduleName: string,
+    url: string,
+    confirmationText: string,
+    motherModule: string,
+    shortcutButton: JQuery,
+    displayName: string
+  ): void {
+    if (typeof confirmationText !== 'undefined') {
+      Modal.confirm(TYPO3.lang['bookmark.create'], confirmationText).on('confirm.button.ok', (e: JQueryEventObject): void => {
+        const $toolbarItemIcon = $(Identifiers.toolbarIconSelector, Identifiers.containerSelector);
+        const $existingIcon = $toolbarItemIcon.clone();
+
+        Icons.getIcon('spinner-circle-light', Icons.sizes.small).done((spinner: string): void => {
+          $toolbarItemIcon.replaceWith(spinner);
+        });
+
+        $.ajax({
+          url: TYPO3.settings.ajaxUrls.shortcut_create,
+          type: 'post',
+          data: {
+            module: moduleName,
+            url: url,
+            motherModName: motherModule,
+            displayName: displayName
+          },
+          cache: false
+        }).done((): void => {
+          this.refreshMenu();
+          $(Identifiers.toolbarIconSelector, Identifiers.containerSelector).replaceWith($existingIcon);
+          if (typeof shortcutButton === 'object') {
+            Icons.getIcon('actions-system-shortcut-active', Icons.sizes.small).done((icon: string): void => {
+              $(shortcutButton).html(icon);
+            });
+            $(shortcutButton).addClass('active');
+            $(shortcutButton).attr('title', null);
+            $(shortcutButton).attr('onclick', null);
+          }
+        });
+        $(e.currentTarget).trigger('modal-dismiss');
+      })
+      .on('confirm.button.cancel', (e: JQueryEventObject): void => {
+        $(e.currentTarget).trigger('modal-dismiss');
+      });
+    }
+  }
+
+  private initializeEvents = (): void => {
+    $(Identifiers.containerSelector).on('click', Identifiers.shortcutDeleteSelector, (evt: JQueryEventObject): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      this.deleteShortcut($(evt.currentTarget).closest(Identifiers.shortcutItemSelector));
+    }).on('click', Identifiers.shortcutFormGroupSelector, (evt: JQueryEventObject): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+    }).on('click', Identifiers.shortcutEditSelector, (evt: JQueryEventObject): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      this.editShortcut($(evt.currentTarget).closest(Identifiers.shortcutItemSelector));
+    }).on('click', Identifiers.shortcutFormSaveSelector, (evt: JQueryEventObject): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      this.saveShortcutForm($(evt.currentTarget).closest(Identifiers.shortcutFormSelector));
+    }).on('submit', Identifiers.shortcutFormSelector, (evt: JQueryEventObject): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      this.saveShortcutForm($(evt.currentTarget).closest(Identifiers.shortcutFormSelector));
+    }).on('click', Identifiers.shortcutFormCancelSelector, (evt: JQueryEventObject): void => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      this.refreshMenu();
+    });
+  }
+
+  /**
+   * Removes an existing short by sending an AJAX call
+   *
+   * @param {JQuery} $shortcutRecord
+   */
+  private deleteShortcut($shortcutRecord: JQuery): void {
+    Modal.confirm(TYPO3.lang['bookmark.delete'], TYPO3.lang['bookmark.confirmDelete'])
+      .on('confirm.button.ok', (e: JQueryEventObject): void => {
+        $.ajax({
+          url: TYPO3.settings.ajaxUrls.shortcut_remove,
+          data: {
+            shortcutId: $shortcutRecord.data('shortcutid')
+          },
+          type: 'post',
+          cache: false
+        }).done((): void => {
+          // a reload is used in order to restore the original behaviour
+          // e.g. remove groups that are now empty because the last one in the group
+          // was removed
+          this.refreshMenu();
+        });
+        $(e.currentTarget).trigger('modal-dismiss');
+      })
+      .on('confirm.button.cancel', (e: JQueryEventObject): void => {
+        $(e.currentTarget).trigger('modal-dismiss');
+      });
+  }
+
+  /**
+   * Build the in-place-editor for a shortcut
+   *
+   * @param {JQuery} $shortcutRecord
+   */
+  private editShortcut($shortcutRecord: JQuery): void {
+    // load the form
+    $.ajax({
+      url: TYPO3.settings.ajaxUrls.shortcut_editform,
+      data: {
+        shortcutId: $shortcutRecord.data('shortcutid'),
+        shortcutGroup: $shortcutRecord.data('shortcutgroup')
+      },
+      cache: false
+    }).done((data: string): void => {
+      $(Identifiers.containerSelector).find(Identifiers.toolbarMenuSelector).html(data);
+    });
+  }
+
+  /**
+   * Save the data from the in-place-editor for a shortcut
+   *
+   * @param {JQuery} $shortcutForm
+   */
+  private saveShortcutForm($shortcutForm: JQuery): void {
+    $.ajax({
+      url: TYPO3.settings.ajaxUrls.shortcut_saveform,
+      data: {
+        shortcutId: $shortcutForm.data('shortcutid'),
+        shortcutTitle: $shortcutForm.find(Identifiers.shortcutFormTitleSelector).val(),
+        shortcutGroup: $shortcutForm.find(Identifiers.shortcutFormGroupSelector).val()
+      },
+      type: 'post',
+      cache: false
+    }).done((): void => {
+      Notification.success(TYPO3.lang['bookmark.savedTitle'], TYPO3.lang['bookmark.savedMessage']);
+      this.refreshMenu();
+    });
+  }
+
+  /**
+   * Reloads the menu after an update
+   */
+  private refreshMenu(): void {
+    $.ajax({
+      url: TYPO3.settings.ajaxUrls.shortcut_list,
+      type: 'get',
+      cache: false
+    }).done((data: string): void => {
+      $(Identifiers.toolbarMenuSelector, Identifiers.containerSelector).html(data);
+    });
+  }
+}
+
+let shortcutMenuObject = new ShortcutMenu();
+TYPO3.ShortcutMenu = shortcutMenuObject;
+
+export = shortcutMenuObject;
index 3eca32d..4b16c00 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/Toolbar/ShortcutMenu
- * shortcut menu logic to add new shortcut, remove a shortcut
- * and edit a shortcut
- */
-define(['jquery',
-  'TYPO3/CMS/Backend/Modal',
-  'TYPO3/CMS/Backend/Icons',
-  'TYPO3/CMS/Backend/Notification',
-  'TYPO3/CMS/Backend/Viewport'
-], function($, Modal, Icons, Notification, Viewport) {
-  'use strict';
-
-  /**
-   *
-   * @type {{options: {containerSelector: string, toolbarIconSelector: string, toolbarMenuSelector: string, shortcutItemSelector: string, shortcutDeleteSelector: string, shortcutEditSelector: string, shortcutFormTitleSelector: string, shortcutFormGroupSelector: string, shortcutFormSaveSelector: string, shortcutFormCancelSelector: string}}}
-   * @exports TYPO3/CMS/Backend/Toolbar/ShortcutMenu
-   */
-  var ShortcutMenu = {
-    options: {
-      containerSelector: '#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem',
-      toolbarIconSelector: '.dropdown-toggle span.icon',
-      toolbarMenuSelector: '.dropdown-menu',
-
-      shortcutItemSelector: '.t3js-topbar-shortcut',
-      shortcutDeleteSelector: '.t3js-shortcut-delete',
-      shortcutEditSelector: '.t3js-shortcut-edit',
-
-      shortcutFormTitleSelector: 'input[name="shortcut-title"]',
-      shortcutFormGroupSelector: 'select[name="shortcut-group"]',
-      shortcutFormSaveSelector: '.shortcut-form-save',
-      shortcutFormCancelSelector: '.shortcut-form-cancel',
-      shortcutFormSelector: '.shortcut-form'
-    }
-  };
-
-  /**
-   * build the in-place-editor for a shortcut
-   *
-   * @param {Object} $shortcutRecord
-   */
-  ShortcutMenu.editShortcut = function($shortcutRecord) {
-    // load the form
-    $.ajax({
-      url: TYPO3.settings.ajaxUrls['shortcut_editform'],
-      data: {
-        shortcutId: $shortcutRecord.data('shortcutid'),
-        shortcutGroup: $shortcutRecord.data('shortcutgroup')
-      },
-      cache: false
-    }).done(function(data) {
-      $(ShortcutMenu.options.containerSelector).find(ShortcutMenu.options.toolbarMenuSelector).html(data);
-    });
-  };
-
-  /**
-   * Save the data from the in-place-editor for a shortcut
-   *
-   * @param {Object} $shortcutForm
-   */
-  ShortcutMenu.saveShortcutForm = function($shortcutForm) {
-    $.ajax({
-      url: TYPO3.settings.ajaxUrls['shortcut_saveform'],
-      data: {
-        shortcutId: $shortcutForm.data('shortcutid'),
-        shortcutTitle: $shortcutForm.find(ShortcutMenu.options.shortcutFormTitleSelector).val(),
-        shortcutGroup: $shortcutForm.find(ShortcutMenu.options.shortcutFormGroupSelector).val()
-      },
-      type: 'post',
-      cache: false
-    }).done(function(data) {
-      Notification.success(TYPO3.lang['bookmark.savedTitle'], TYPO3.lang['bookmark.savedMessage']);
-      ShortcutMenu.refreshMenu();
-    });
-  };
-
-  /**
-   * removes an existing short by sending an AJAX call
-   *
-   * @param {Object} $shortcutRecord
-   */
-  ShortcutMenu.deleteShortcut = function($shortcutRecord) {
-    Modal.confirm(TYPO3.lang['bookmark.delete'], TYPO3.lang['bookmark.confirmDelete'])
-      .on('confirm.button.ok', function() {
-        $.ajax({
-          url: TYPO3.settings.ajaxUrls['shortcut_remove'],
-          data: {
-            shortcutId: $shortcutRecord.data('shortcutid')
-          },
-          type: 'post',
-          cache: false
-        }).done(function() {
-          // a reload is used in order to restore the original behaviour
-          // e.g. remove groups that are now empty because the last one in the group
-          // was removed
-          ShortcutMenu.refreshMenu();
-        });
-        $(this).trigger('modal-dismiss');
-      })
-      .on('confirm.button.cancel', function() {
-        $(this).trigger('modal-dismiss');
-      });
-  };
-
-  /**
-   * makes a call to the backend class to create a new shortcut,
-   * when finished it reloads the menu
-   *
-   * @param {String} moduleName
-   * @param {String} url
-   * @param {String} confirmationText
-   * @param {String} motherModule
-   * @param {Object} shortcutButton
-   * @param {String} displayName
-   */
-  ShortcutMenu.createShortcut = function(moduleName, url, confirmationText, motherModule, shortcutButton, displayName) {
-    if (typeof confirmationText !== 'undefined') {
-      Modal.confirm(TYPO3.lang['bookmark.create'], confirmationText)
-        .on('confirm.button.ok', function() {
-          var $toolbarItemIcon = $(ShortcutMenu.options.toolbarIconSelector, ShortcutMenu.options.containerSelector),
-            $existingIcon = $toolbarItemIcon.clone();
-
-          Icons.getIcon('spinner-circle-light', Icons.sizes.small).done(function(spinner) {
-            $toolbarItemIcon.replaceWith(spinner);
-          });
-
-          $.ajax({
-            url: TYPO3.settings.ajaxUrls['shortcut_create'],
-            type: 'post',
-            data: {
-              module: moduleName,
-              url: url,
-              motherModName: motherModule,
-              displayName: displayName
-            },
-            cache: false
-          }).done(function() {
-            ShortcutMenu.refreshMenu();
-            $(ShortcutMenu.options.toolbarIconSelector, ShortcutMenu.options.containerSelector).replaceWith($existingIcon);
-            if (typeof shortcutButton === 'object') {
-              Icons.getIcon('actions-system-shortcut-active', Icons.sizes.small).done(function(icons) {
-                $(shortcutButton).html(icons['actions-system-shortcut-active']);
-              });
-              $(shortcutButton).addClass('active');
-              $(shortcutButton).attr('title', null);
-              $(shortcutButton).attr('onclick', null);
-            }
-          });
-          $(this).trigger('modal-dismiss');
-        })
-        .on('confirm.button.cancel', function() {
-          $(this).trigger('modal-dismiss');
-        });
-    }
-
-  };
-
-  /**
-   * reloads the menu after an update
-   */
-  ShortcutMenu.refreshMenu = function() {
-    $.ajax({
-      url: TYPO3.settings.ajaxUrls['shortcut_list'],
-      type: 'get',
-      cache: false
-    }).done(function(data) {
-      $(ShortcutMenu.options.toolbarMenuSelector, ShortcutMenu.options.containerSelector).html(data);
-    });
-  };
-
-  /**
-   * Registers listeners
-   */
-  ShortcutMenu.initializeEvents = function() {
-    $(ShortcutMenu.options.containerSelector).on('click', ShortcutMenu.options.shortcutDeleteSelector, function(evt) {
-      evt.preventDefault();
-      evt.stopImmediatePropagation();
-      ShortcutMenu.deleteShortcut($(this).closest(ShortcutMenu.options.shortcutItemSelector));
-    }).on('click', ShortcutMenu.options.shortcutFormGroupSelector, function(evt) {
-      evt.preventDefault();
-      evt.stopImmediatePropagation();
-    }).on('click', ShortcutMenu.options.shortcutEditSelector, function(evt) {
-      evt.preventDefault();
-      evt.stopImmediatePropagation();
-      ShortcutMenu.editShortcut($(this).closest(ShortcutMenu.options.shortcutItemSelector));
-    }).on('click', ShortcutMenu.options.shortcutFormSaveSelector, function(evt) {
-      evt.preventDefault();
-      evt.stopImmediatePropagation();
-      ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutFormSelector));
-    }).on('submit', ShortcutMenu.options.shortcutFormSelector, function(evt) {
-      evt.preventDefault();
-      evt.stopImmediatePropagation();
-      ShortcutMenu.saveShortcutForm($(this).closest(ShortcutMenu.options.shortcutFormSelector));
-    }).on('click', ShortcutMenu.options.shortcutFormCancelSelector, function(evt) {
-      evt.preventDefault();
-      evt.stopImmediatePropagation();
-      ShortcutMenu.refreshMenu();
-    });
-  };
-
-  Viewport.Topbar.Toolbar.registerEvent(ShortcutMenu.initializeEvents);
-
-  // expose as global object
-  TYPO3.ShortcutMenu = ShortcutMenu;
-
-  return ShortcutMenu;
-});
+define(["require","exports","jquery","../Icons","../Modal","../Notification","../Viewport"],function(t,e,o,r,c,n,a){"use strict";var s,i;(i=s||(s={})).containerSelector="#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem",i.toolbarIconSelector=".dropdown-toggle span.icon",i.toolbarMenuSelector=".dropdown-menu",i.shortcutItemSelector=".t3js-topbar-shortcut",i.shortcutDeleteSelector=".t3js-shortcut-delete",i.shortcutEditSelector=".t3js-shortcut-edit",i.shortcutFormTitleSelector='input[name="shortcut-title"]',i.shortcutFormGroupSelector='select[name="shortcut-group"]',i.shortcutFormSaveSelector=".shortcut-form-save",i.shortcutFormCancelSelector=".shortcut-form-cancel",i.shortcutFormSelector=".shortcut-form";var u=new(function(){function t(){var t=this;this.initializeEvents=function(){o(s.containerSelector).on("click",s.shortcutDeleteSelector,function(e){e.preventDefault(),e.stopImmediatePropagation(),t.deleteShortcut(o(e.currentTarget).closest(s.shortcutItemSelector))}).on("click",s.shortcutFormGroupSelector,function(t){t.preventDefault(),t.stopImmediatePropagation()}).on("click",s.shortcutEditSelector,function(e){e.preventDefault(),e.stopImmediatePropagation(),t.editShortcut(o(e.currentTarget).closest(s.shortcutItemSelector))}).on("click",s.shortcutFormSaveSelector,function(e){e.preventDefault(),e.stopImmediatePropagation(),t.saveShortcutForm(o(e.currentTarget).closest(s.shortcutFormSelector))}).on("submit",s.shortcutFormSelector,function(e){e.preventDefault(),e.stopImmediatePropagation(),t.saveShortcutForm(o(e.currentTarget).closest(s.shortcutFormSelector))}).on("click",s.shortcutFormCancelSelector,function(e){e.preventDefault(),e.stopImmediatePropagation(),t.refreshMenu()})},a.Topbar.Toolbar.registerEvent(this.initializeEvents)}return t.prototype.createShortcut=function(t,e,n,a,i,u){var l=this;void 0!==n&&c.confirm(TYPO3.lang["bookmark.create"],n).on("confirm.button.ok",function(c){var n=o(s.toolbarIconSelector,s.containerSelector),h=n.clone();r.getIcon("spinner-circle-light",r.sizes.small).done(function(t){n.replaceWith(t)}),o.ajax({url:TYPO3.settings.ajaxUrls.shortcut_create,type:"post",data:{module:t,url:e,motherModName:a,displayName:u},cache:!1}).done(function(){l.refreshMenu(),o(s.toolbarIconSelector,s.containerSelector).replaceWith(h),"object"==typeof i&&(r.getIcon("actions-system-shortcut-active",r.sizes.small).done(function(t){o(i).html(t)}),o(i).addClass("active"),o(i).attr("title",null),o(i).attr("onclick",null))}),o(c.currentTarget).trigger("modal-dismiss")}).on("confirm.button.cancel",function(t){o(t.currentTarget).trigger("modal-dismiss")})},t.prototype.deleteShortcut=function(t){var e=this;c.confirm(TYPO3.lang["bookmark.delete"],TYPO3.lang["bookmark.confirmDelete"]).on("confirm.button.ok",function(r){o.ajax({url:TYPO3.settings.ajaxUrls.shortcut_remove,data:{shortcutId:t.data("shortcutid")},type:"post",cache:!1}).done(function(){e.refreshMenu()}),o(r.currentTarget).trigger("modal-dismiss")}).on("confirm.button.cancel",function(t){o(t.currentTarget).trigger("modal-dismiss")})},t.prototype.editShortcut=function(t){o.ajax({url:TYPO3.settings.ajaxUrls.shortcut_editform,data:{shortcutId:t.data("shortcutid"),shortcutGroup:t.data("shortcutgroup")},cache:!1}).done(function(t){o(s.containerSelector).find(s.toolbarMenuSelector).html(t)})},t.prototype.saveShortcutForm=function(t){var e=this;o.ajax({url:TYPO3.settings.ajaxUrls.shortcut_saveform,data:{shortcutId:t.data("shortcutid"),shortcutTitle:t.find(s.shortcutFormTitleSelector).val(),shortcutGroup:t.find(s.shortcutFormGroupSelector).val()},type:"post",cache:!1}).done(function(){n.success(TYPO3.lang["bookmark.savedTitle"],TYPO3.lang["bookmark.savedMessage"]),e.refreshMenu()})},t.prototype.refreshMenu=function(){o.ajax({url:TYPO3.settings.ajaxUrls.shortcut_list,type:"get",cache:!1}).done(function(t){o(s.toolbarMenuSelector,s.containerSelector).html(t)})},t}());return TYPO3.ShortcutMenu=u,u});
\ No newline at end of file