From 8958732a90974ef80628e26c1aff51a19a6417bd Mon Sep 17 00:00:00 2001
From: Andreas Fernandez <a.fernandez@scripting-base.de>
Date: Sun, 4 Mar 2018 19:21:13 +0100
Subject: [PATCH] [TASK] Migrate Toolbar/ShortcutMenu to TypeScript
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>
---
.../TypeScript/Toolbar/ShortcutMenu.ts | 216 ++++++++++++++++++
.../Public/JavaScript/Toolbar/ShortcutMenu.js | 209 +----------------
2 files changed, 217 insertions(+), 208 deletions(-)
create mode 100644 typo3/sysext/backend/Resources/Private/TypeScript/Toolbar/ShortcutMenu.ts
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
index 000000000000..eb573c63fb7b
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Private/TypeScript/Toolbar/ShortcutMenu.ts
@@ -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;
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
index 3eca32db27c9..4b16c00535fc 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/Toolbar/ShortcutMenu.js
@@ -10,211 +10,4 @@
*
* 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
--
GitLab