62135ebd3b99e0727156a9898ee6fee4277837b9
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Public / JavaScript / shortcutmenu.js
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
15 /**
16 * class to handle the shortcut menu
17 */
18 var ShortcutMenu = Class.create({
19
20 /**
21 * registers for resize event listener and executes on DOM ready
22 */
23 initialize: function() {
24 Ext.onReady(function() {
25 Event.observe(
26 window, 'resize',
27 function() { TYPO3BackendToolbarManager.positionMenu('shortcut-menu'); }
28 );
29 TYPO3BackendToolbarManager.positionMenu('shortcut-menu');
30
31 this.toolbarItemIcon = $$('#shortcut-menu .toolbar-item span.t3-icon')[0];
32
33 Event.observe($$('#shortcut-menu .toolbar-item')[0], 'click', this.toggleMenu);
34 this.initControls();
35 }, this);
36 },
37
38 /**
39 * initializes the controls to follow, edit, and delete shortcuts
40 *
41 */
42 initControls: function() {
43
44 $$('.shortcut-label a').each(function(element) {
45 var shortcutId = element.up('tr.shortcut').identify().slice(9);
46
47 // map InPlaceEditor to edit icons
48 var edit = new Ajax.InPlaceEditor('shortcut-label-' + shortcutId, TYPO3.settings.ajaxUrls['ShortcutMenu::saveShortcut'], {
49 externalControl : 'shortcut-edit-' + shortcutId,
50 externalControlOnly : true,
51 highlightcolor : '#f9f9f9',
52 highlightendcolor : '#f9f9f9',
53 onFormCustomization : this.addGroupSelect,
54 onComplete : this.reRenderMenu.bind(this),
55 callback : function(form, nameInputFieldValue) {
56 var params = form.serialize();
57 params += '&shortcutId=' + shortcutId;
58
59 return params;
60 },
61 textBetweenControls : ' ',
62 cancelControl : 'button',
63 clickToEditText : '',
64 htmlResponse : true
65 });
66
67 // follow/execute shortcuts
68 element.observe('click', function(event) {
69 this.toggleMenu();
70 }.bind(this));
71
72 }.bind(this));
73
74 // activate delete icon
75 $$('.shortcut-delete img').each(function(element) {
76 element.observe('click', function(event) {
77 if (confirm('Do you really want to remove this bookmark?')) {
78 var deleteControl = event.element();
79 var shortcutId = deleteControl.up('tr.shortcut').identify().slice(9);
80
81 var del = new Ajax.Request(TYPO3.settings.ajaxUrls['ShortcutMenu::delete'], {
82 parameters : '&shortcutId=' + shortcutId,
83 onComplete : this.reRenderMenu.bind(this)
84 });
85 }
86 }.bind(this));
87 }.bind(this));
88
89 },
90
91 /**
92 * toggles the visibility of the menu and places it under the toolbar icon
93 */
94 toggleMenu: function(event) {
95 var toolbarItem = $$('#shortcut-menu > a')[0];
96 var menu = $$('#shortcut-menu .toolbar-item-menu')[0];
97 toolbarItem.blur();
98
99 if (!toolbarItem.hasClassName('toolbar-item-active')) {
100 toolbarItem.addClassName('toolbar-item-active');
101 Effect.Appear(menu, {duration: 0.2});
102 TYPO3BackendToolbarManager.hideOthers(toolbarItem);
103 } else {
104 toolbarItem.removeClassName('toolbar-item-active');
105 Effect.Fade(menu, {duration: 0.1});
106 }
107 },
108
109 /**
110 * adds a select field for the groups
111 */
112 addGroupSelect: function(inPlaceEditor, inPlaceEditorForm) {
113 var selectField = $(document.createElement('select'));
114
115 // determine the shortcut id
116 var shortcutId = inPlaceEditorForm.identify().slice(9, -14);
117
118 // now determine the shortcut's group id
119 var shortcut = $('shortcut-' + shortcutId).up('tr.shortcut');
120 var firstInGroup = null;
121 var shortcutGroupId = 0;
122
123 if (shortcut.hasClassName('first-row')) {
124 firstInGroup = shortcut;
125 } else {
126 firstInGroup = shortcut.previous('.first-row');
127 }
128
129 if (undefined !== firstInGroup) {
130 shortcutGroupId = firstInGroup.previous().identify().slice(15);
131 }
132
133 selectField.name = 'shortcut-group';
134 selectField.id = 'shortcut-group-select-' + shortcutId;
135 selectField.size = 1;
136 selectField.setStyle({marginBottom: '5px'});
137
138 // create options
139 var option;
140 // first create an option for "no group"
141 option = document.createElement('option');
142 option.value = 0;
143 option.selected = (shortcutGroupId === 0 ? true : false);
144 option.appendChild(document.createTextNode('No Group'));
145 selectField.appendChild(option);
146
147 // get the groups
148 var getGroups = new Ajax.Request(TYPO3.settings.ajaxUrls['ShortcutMenu::getGroups'], {
149 method: 'get',
150 asynchronous: false, // needs to be synchronous to build the options before adding the selectfield
151 requestHeaders: {Accept: 'application/json'},
152 onSuccess: function(transport, json) {
153 var shortcutGroups = transport.responseText.evalJSON(true);
154
155 // explicitly make the object a Hash
156 shortcutGroups = $H(json.shortcutGroups);
157 shortcutGroups.each(function(group) {
158 option = document.createElement('option');
159 option.value = group.key
160 option.selected = (shortcutGroupId === group.key ? true : false);
161 option.appendChild(document.createTextNode(group.value));
162 selectField.appendChild(option);
163 });
164
165 }
166 });
167
168 inPlaceEditor._form.appendChild(document.createElement('br'));
169 inPlaceEditor._form.appendChild(selectField);
170 inPlaceEditor._form.appendChild(document.createElement('br'));
171 },
172
173 /**
174 * gets called when the update was succesfull, fetches the complete menu to
175 * honor changes in group assignments
176 */
177 reRenderMenu: function(transport, element, backPath) {
178 var container = $$('#shortcut-menu .toolbar-item-menu')[0];
179 if (!backPath) {
180 var backPath = '';
181 }
182
183
184 container.setStyle({
185 height: container.getHeight() + 'px'
186 });
187 container.update('LOADING');
188
189 var render = new Ajax.Updater(
190 container,
191 backPath + TYPO3.settings.ajaxUrls['ShortcutMenu::render'],
192 {
193 asynchronous : false
194 }
195 );
196
197 container.setStyle({
198 height: 'auto'
199 });
200
201 this.initControls();
202 },
203
204 /**
205 * makes a call to the backend class to create a new shortcut,
206 * when finished it reloads the menu
207 */
208 createShortcut: function(backPath, moduleName, url) {
209 var toolbarItemIcon = $$('#shortcut-menu .toolbar-item span.t3-icon')[0];
210
211 var parent = Element.up(toolbarItemIcon);
212 var spinner = new Element('span').addClassName('spinner');
213 var oldIcon = toolbarItemIcon.replace(spinner);
214
215 // synchrous call to wait for it to complete and call the render
216 // method with backpath _afterwards_
217 var call = new Ajax.Request(backPath + TYPO3.settings.ajaxUrls['ShortcutMenu::create'], {
218 parameters : 'module=' + moduleName + '&url=' + url,
219 asynchronous : false
220 });
221
222 this.reRenderMenu(null, null, backPath);
223 spinner.replace(oldIcon);
224 }
225
226 });
227
228 var TYPO3BackendShortcutMenu = new ShortcutMenu();