e0b0e6ca0c37374c77b472f33d47807f46d7572e
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Public / JavaScript / DebugConsole.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 * The debug console shown at the bottom of the backend
16 */
17 define('TYPO3/CMS/Backend/DebugConsole', ['jquery'], function ($) {
18 var DebugConsole = {
19 $consoleDom: null,
20 settings: {
21 autoscroll: true
22 }
23 };
24
25 /**
26 * Initializes the console
27 */
28 DebugConsole.initialize = function() {
29 DebugConsole.createDOM();
30 };
31
32 /**
33 * Create the basic DOM of the Debugger Console
34 */
35 DebugConsole.createDOM = function() {
36 if (DebugConsole.$consoleDom !== null) {
37 return DebugConsole.$consoleDom;
38 }
39
40 DebugConsole.$consoleDom =
41 $('<div />', {id: 'typo3-debug-console'}).append(
42 $('<div />', {class: 't3js-topbar topbar'}).append(
43 $('<p />', {class: 'pull-left'}).text(' TYPO3 Debug Console').prepend(
44 $('<span />', {class: 'fa fa-terminal topbar-icon'})
45 ).append(
46 $('<span />', {class: 'badge'})
47 ),
48 $('<div />', {class: 't3js-buttons btn-group pull-right'})
49 ),
50 $('<div />').append(
51 $('<div />', {role: 'tabpanel'}).append(
52 $('<ul />', {class: 'nav nav-tabs t3js-debuggroups', role: 'tablist'})
53 ),
54 $('<div />', {class: 'tab-content t3js-debugcontent'})
55 )
56 );
57
58 DebugConsole.addButton(
59 $('<button />', {class: 'btn btn-default btn-sm ' + (DebugConsole.settings.autoscroll ? 'active' : ''), title: TYPO3.lang['debuggerconsole.autoscroll']}).append(
60 $('<span />', {class: 't3-icon fa fa-magnet'})
61 ), function() {
62 $(this).button('toggle');
63 DebugConsole.settings.autoscroll = !DebugConsole.settings.autoscroll;
64 }
65 ).addButton(
66 $('<button />', {class: 'btn btn-default btn-sm', title: TYPO3.lang['debuggerconsole.toggle.collapse']}).append(
67 $('<span />', {class: 't3-icon fa fa-chevron-down'})
68 ), function() {
69 var $button = $(this),
70 $icon = $button.find('.t3-icon'),
71 $innerContainer = DebugConsole.$consoleDom.find('.t3js-topbar').next();
72 $innerContainer.toggle();
73 if ($innerContainer.is(':visible')) {
74 $button.attr('title', TYPO3.lang['debuggerconsole.toggle.collapse']);
75 $icon.toggleClass('fa-chevron-down', true).toggleClass('fa-chevron-up', false);
76 DebugConsole.resetGlobalUnreadCounter();
77 } else {
78 $button.attr('title', TYPO3.lang['debuggerconsole.toggle.expand']);
79 $icon.toggleClass('fa-chevron-down', false).toggleClass('fa-chevron-up', true);
80 }
81 }
82 ).addButton(
83 $('<button />', {class: 'btn btn-default btn-sm', title: TYPO3.lang['debuggerconsole.clear']}).append(
84 $('<span />', {class: 't3-icon fa fa-undo'})
85 ), function() {
86 DebugConsole.flush();
87 }
88 ).addButton(
89 $('<button />', {class: 'btn btn-default btn-sm', title: TYPO3.lang['debuggerconsole.close']}).append(
90 $('<span />', {class: 't3-icon fa fa-times'})
91 ), function() {
92 DebugConsole.$consoleDom.remove();
93 DebugConsole.$consoleDom = null;
94 DebugConsole.createDOM();
95 }
96 );
97 };
98
99 /**
100 * Adds a button and it's callback to the console's toolbar
101 */
102 DebugConsole.addButton = function($button, callback) {
103 $button.on('click', callback);
104 DebugConsole.$consoleDom.find('.t3js-buttons').append($button);
105
106 return DebugConsole;
107 };
108
109 /**
110 * Attach the Debugger Console to the viewport
111 */
112 DebugConsole.attachToViewport = function() {
113 var $viewport = $('#typo3-contentContainer');
114 if (!$.contains(DebugConsole.$consoleDom, $viewport)) {
115 $viewport.append(DebugConsole.$consoleDom);
116 }
117 };
118
119 /**
120 * Add the debug message to the console
121 */
122 DebugConsole.add = function(message, header, group) {
123 DebugConsole.attachToViewport();
124
125 var $line = $('<p />').html(message);
126 if (typeof header !== 'undefined' && header.length > 0) {
127 $line.prepend($('<strong />').text(header));
128 }
129
130 if (typeof group === 'undefined') {
131 group = 'Debug';
132 }
133
134 var tabIdentifier = 'debugtab-' + group.toLowerCase().replace(/\W+/g, '-'),
135 $debugTabs = DebugConsole.$consoleDom.find('.t3js-debuggroups'),
136 $tabContent = DebugConsole.$consoleDom.find('.t3js-debugcontent'),
137 $tab = DebugConsole.$consoleDom.find('.t3js-debuggroups li[data-identifier=' + tabIdentifier + ']');
138
139 // check if group tab exists
140 if ($tab.length === 0) {
141 // create new tab
142 $tab =
143 $('<li />', {role: 'presentation', 'data-identifier': tabIdentifier}).append(
144 $('<a />', {href: '#' + tabIdentifier, 'aria-controls': tabIdentifier, role: 'tab', 'data-toggle': 'tab'}).text(group + ' ').append(
145 $('<span />', {class: 'badge'})
146 )
147 ).on('shown.bs.tab', function() {
148 $(this).find('.badge').text('');
149 });
150 $debugTabs.append($tab);
151 $tabContent.append(
152 $('<div />', {role: 'tabpanel', class: 'tab-pane', id: tabIdentifier}).append(
153 $('<div />', {class: 't3js-messages messages'})
154 )
155 );
156 }
157
158 DebugConsole.identifyTabLengthPresentationIcon($debugTabs);
159
160 // activate the first tab if no one is active
161 if ($debugTabs.find('.active').length === 0) {
162 $debugTabs.find('a:first').tab('show');
163 }
164
165 DebugConsole.incrementInactiveTabCounter($tab);
166 DebugConsole.incrementUnreadMessagesIfCollapsed()
167
168 var $messageBox = $('#' + tabIdentifier + ' .t3js-messages');
169 $messageBox.append($line);
170
171 if (DebugConsole.settings.autoscroll) {
172
173 var activeTabIdentifier = $debugTabs.find('.active').data('identifier'),
174 $activeMessageBox = $('#' + activeTabIdentifier + ' .t3js-messages');
175 $activeMessageBox.scrollTop($activeMessageBox[0].scrollHeight);
176 }
177 };
178
179 /**
180 * Gets a proper console icon depending on the amount of tabs
181 */
182 DebugConsole.identifyTabLengthPresentationIcon = function($tabs) {
183 var terminalIcon1 = true,
184 terminalIcon2 = false;
185
186 if ($tabs.children().length >= 10) {
187 // too many tabs
188 // much debug
189 // so wow
190 terminalIcon1 = false;
191 terminalIcon2 = true;
192 }
193 DebugConsole.$consoleDom.find('.topbar-icon').toggleClass('fa-meh-o', terminalIcon2).toggleClass('fa-terminal', terminalIcon1);
194 };
195
196 /**
197 * Increment the counter of unread messages in the given tab
198 */
199 DebugConsole.incrementInactiveTabCounter = function($tab) {
200 if (!$tab.hasClass('active')) {
201 var $badge = $tab.find('.badge'),
202 value = parseInt($badge.text());
203
204 if (isNaN(value)) {
205 value = 0;
206 }
207 $badge.text(++value);
208 }
209 };
210
211 /**
212 * Increment the counter of unread messages in the tabbar
213 */
214 DebugConsole.incrementUnreadMessagesIfCollapsed = function() {
215 var $topbar = DebugConsole.$consoleDom.find('.t3js-topbar'),
216 $innerContainer = $topbar.next();
217
218 if ($innerContainer.is(':hidden')) {
219 var $badge = $topbar.find('.badge'),
220 value = parseInt($badge.text());
221
222 if (isNaN(value)) {
223 value = 0;
224 }
225 $badge.text(++value);
226 }
227 };
228
229 /**
230 * Reset global unread counter
231 */
232 DebugConsole.resetGlobalUnreadCounter = function() {
233 var $topbar = DebugConsole.$consoleDom.find('.t3js-topbar'),
234 $badge = $topbar.find('.badge');
235
236 $badge.text('');
237 }
238
239 /**
240 * Reset the console to it's virginity
241 */
242 DebugConsole.flush = function() {
243 var $debugTabs = DebugConsole.$consoleDom.find('.t3js-debuggroups'),
244 $tabContent = DebugConsole.$consoleDom.find('.t3js-debugcontent');
245
246 $debugTabs.children().remove();
247 $tabContent.children().remove();
248
249 DebugConsole.identifyTabLengthPresentationIcon($debugTabs);
250 };
251
252 /**
253 * Destroy everything of the console
254 */
255 DebugConsole.destroy = function() {
256 DebugConsole.$consoleDom.remove();
257 DebugConsole.$consoleDom = null;
258 };
259
260 return function () {
261 $(document).ready(function() {
262 DebugConsole.initialize();
263 });
264 TYPO3.DebugConsole = DebugConsole;
265 return DebugConsole;
266 }();
267 });