[TASK] Migrate Toolbar/ShortcutMenu to TypeScript
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / TypeScript / Toolbar / ShortcutMenu.ts
1 /*
2  * This file is part of the TYPO3 CMS project.
3  *
4  * It is free software; you can redistribute it and/or modify it under
5  * the terms of the GNU General Public License, either version 2
6  * of the License, or any later version.
7  *
8  * For the full copyright and license information, please read the
9  * LICENSE.txt file that was distributed with this source code.
10  *
11  * The TYPO3 project - inspiring people to share!
12  */
13
14 import * as $ from 'jquery';
15 import Icons = require('../Icons');
16 import Modal = require('../Modal');
17 import Notification = require('../Notification');
18 import Viewport = require('../Viewport');
19
20 enum Identifiers {
21   containerSelector = '#typo3-cms-backend-backend-toolbaritems-shortcuttoolbaritem',
22   toolbarIconSelector = '.dropdown-toggle span.icon',
23   toolbarMenuSelector = '.dropdown-menu',
24
25   shortcutItemSelector = '.t3js-topbar-shortcut',
26   shortcutDeleteSelector = '.t3js-shortcut-delete',
27   shortcutEditSelector = '.t3js-shortcut-edit',
28
29   shortcutFormTitleSelector = 'input[name="shortcut-title"]',
30   shortcutFormGroupSelector = 'select[name="shortcut-group"]',
31   shortcutFormSaveSelector = '.shortcut-form-save',
32   shortcutFormCancelSelector = '.shortcut-form-cancel',
33   shortcutFormSelector = '.shortcut-form'
34 }
35
36 /**
37  * Module =TYPO3/CMS/Backend/Toolbar/ShortcutMenu
38  * shortcut menu logic to add new shortcut, remove a shortcut
39  * and edit a shortcut
40  */
41 class ShortcutMenu {
42   constructor() {
43     Viewport.Topbar.Toolbar.registerEvent(this.initializeEvents);
44   }
45
46   /**
47    * makes a call to the backend class to create a new shortcut,
48    * when finished it reloads the menu
49    *
50    * @param {String} moduleName
51    * @param {String} url
52    * @param {String} confirmationText
53    * @param {String} motherModule
54    * @param {Object} shortcutButton
55    * @param {String} displayName
56    */
57   public createShortcut(
58     moduleName: string,
59     url: string,
60     confirmationText: string,
61     motherModule: string,
62     shortcutButton: JQuery,
63     displayName: string
64   ): void {
65     if (typeof confirmationText !== 'undefined') {
66       Modal.confirm(TYPO3.lang['bookmark.create'], confirmationText).on('confirm.button.ok', (e: JQueryEventObject): void => {
67         const $toolbarItemIcon = $(Identifiers.toolbarIconSelector, Identifiers.containerSelector);
68         const $existingIcon = $toolbarItemIcon.clone();
69
70         Icons.getIcon('spinner-circle-light', Icons.sizes.small).done((spinner: string): void => {
71           $toolbarItemIcon.replaceWith(spinner);
72         });
73
74         $.ajax({
75           url: TYPO3.settings.ajaxUrls.shortcut_create,
76           type: 'post',
77           data: {
78             module: moduleName,
79             url: url,
80             motherModName: motherModule,
81             displayName: displayName
82           },
83           cache: false
84         }).done((): void => {
85           this.refreshMenu();
86           $(Identifiers.toolbarIconSelector, Identifiers.containerSelector).replaceWith($existingIcon);
87           if (typeof shortcutButton === 'object') {
88             Icons.getIcon('actions-system-shortcut-active', Icons.sizes.small).done((icon: string): void => {
89               $(shortcutButton).html(icon);
90             });
91             $(shortcutButton).addClass('active');
92             $(shortcutButton).attr('title', null);
93             $(shortcutButton).attr('onclick', null);
94           }
95         });
96         $(e.currentTarget).trigger('modal-dismiss');
97       })
98       .on('confirm.button.cancel', (e: JQueryEventObject): void => {
99         $(e.currentTarget).trigger('modal-dismiss');
100       });
101     }
102   }
103
104   private initializeEvents = (): void => {
105     $(Identifiers.containerSelector).on('click', Identifiers.shortcutDeleteSelector, (evt: JQueryEventObject): void => {
106       evt.preventDefault();
107       evt.stopImmediatePropagation();
108       this.deleteShortcut($(evt.currentTarget).closest(Identifiers.shortcutItemSelector));
109     }).on('click', Identifiers.shortcutFormGroupSelector, (evt: JQueryEventObject): void => {
110       evt.preventDefault();
111       evt.stopImmediatePropagation();
112     }).on('click', Identifiers.shortcutEditSelector, (evt: JQueryEventObject): void => {
113       evt.preventDefault();
114       evt.stopImmediatePropagation();
115       this.editShortcut($(evt.currentTarget).closest(Identifiers.shortcutItemSelector));
116     }).on('click', Identifiers.shortcutFormSaveSelector, (evt: JQueryEventObject): void => {
117       evt.preventDefault();
118       evt.stopImmediatePropagation();
119       this.saveShortcutForm($(evt.currentTarget).closest(Identifiers.shortcutFormSelector));
120     }).on('submit', Identifiers.shortcutFormSelector, (evt: JQueryEventObject): void => {
121       evt.preventDefault();
122       evt.stopImmediatePropagation();
123       this.saveShortcutForm($(evt.currentTarget).closest(Identifiers.shortcutFormSelector));
124     }).on('click', Identifiers.shortcutFormCancelSelector, (evt: JQueryEventObject): void => {
125       evt.preventDefault();
126       evt.stopImmediatePropagation();
127       this.refreshMenu();
128     });
129   }
130
131   /**
132    * Removes an existing short by sending an AJAX call
133    *
134    * @param {JQuery} $shortcutRecord
135    */
136   private deleteShortcut($shortcutRecord: JQuery): void {
137     Modal.confirm(TYPO3.lang['bookmark.delete'], TYPO3.lang['bookmark.confirmDelete'])
138       .on('confirm.button.ok', (e: JQueryEventObject): void => {
139         $.ajax({
140           url: TYPO3.settings.ajaxUrls.shortcut_remove,
141           data: {
142             shortcutId: $shortcutRecord.data('shortcutid')
143           },
144           type: 'post',
145           cache: false
146         }).done((): void => {
147           // a reload is used in order to restore the original behaviour
148           // e.g. remove groups that are now empty because the last one in the group
149           // was removed
150           this.refreshMenu();
151         });
152         $(e.currentTarget).trigger('modal-dismiss');
153       })
154       .on('confirm.button.cancel', (e: JQueryEventObject): void => {
155         $(e.currentTarget).trigger('modal-dismiss');
156       });
157   }
158
159   /**
160    * Build the in-place-editor for a shortcut
161    *
162    * @param {JQuery} $shortcutRecord
163    */
164   private editShortcut($shortcutRecord: JQuery): void {
165     // load the form
166     $.ajax({
167       url: TYPO3.settings.ajaxUrls.shortcut_editform,
168       data: {
169         shortcutId: $shortcutRecord.data('shortcutid'),
170         shortcutGroup: $shortcutRecord.data('shortcutgroup')
171       },
172       cache: false
173     }).done((data: string): void => {
174       $(Identifiers.containerSelector).find(Identifiers.toolbarMenuSelector).html(data);
175     });
176   }
177
178   /**
179    * Save the data from the in-place-editor for a shortcut
180    *
181    * @param {JQuery} $shortcutForm
182    */
183   private saveShortcutForm($shortcutForm: JQuery): void {
184     $.ajax({
185       url: TYPO3.settings.ajaxUrls.shortcut_saveform,
186       data: {
187         shortcutId: $shortcutForm.data('shortcutid'),
188         shortcutTitle: $shortcutForm.find(Identifiers.shortcutFormTitleSelector).val(),
189         shortcutGroup: $shortcutForm.find(Identifiers.shortcutFormGroupSelector).val()
190       },
191       type: 'post',
192       cache: false
193     }).done((): void => {
194       Notification.success(TYPO3.lang['bookmark.savedTitle'], TYPO3.lang['bookmark.savedMessage']);
195       this.refreshMenu();
196     });
197   }
198
199   /**
200    * Reloads the menu after an update
201    */
202   private refreshMenu(): void {
203     $.ajax({
204       url: TYPO3.settings.ajaxUrls.shortcut_list,
205       type: 'get',
206       cache: false
207     }).done((data: string): void => {
208       $(Identifiers.toolbarMenuSelector, Identifiers.containerSelector).html(data);
209     });
210   }
211 }
212
213 let shortcutMenuObject = new ShortcutMenu();
214 TYPO3.ShortcutMenu = shortcutMenuObject;
215
216 export = shortcutMenuObject;