42f17b77cc0ecff3b5898843d88ce2f9ef7e81e2
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3editor / Resources / Public / JavaScript / T3editor.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 define('TYPO3/CMS/T3editor/T3editor', ['jquery'], function ($) {
15
16 var T3editor = {
17 instances: {}
18 };
19
20 /**
21 * Get and initialize editors
22 */
23 T3editor.findAndInitializeEditors = function() {
24 $('div.t3editor').each(function(i) {
25 T3editor.initializeEditor($(this), i);
26 });
27 };
28
29 /**
30 * Initialize an editor
31 */
32 T3editor.initializeEditor = function($editor, index) {
33 var $textarea = $editor.find('textarea'),
34 options = {
35 labels: $textarea.data('labels'),
36 height: $textarea.height() + 'px',
37 width: $textarea.width() + 'px',
38 content: $textarea.val(),
39 parserfile: $textarea.data('parserfile'),
40 stylesheet: $textarea.data('stylesheet'),
41 path: $textarea.data('codemirror-path'),
42 saveFunction: T3editor.saveFunction,
43 autoMatchParens: true,
44 lineNumbers: true,
45 originalTextarea: $textarea,
46 ajaxSaveType: $textarea.data('ajaxsavetype')
47 };
48
49 $editor.find('.t3e_statusbar_title').text($textarea.attr('alt'));
50 $editor.find('.t3e_statusbar_status').text('');
51
52 var codemirror = new CodeMirror($editor.find('.t3e_iframe_wrap')[0], options);
53 T3editor.initializeEditorEvents(codemirror);
54 T3editor.setAjaxSavetypeCallback(codemirror);
55
56 $editor.find('.t3e_modalOverlay').fadeOut({
57 complete: function() {
58 T3editor.resize(codemirror, $textarea.width(), $textarea.height());
59 $(document).trigger('t3editor:init', [codemirror, $editor.find('.t3e_wrap')]);
60 T3editor.instances[index] = codemirror;
61 $textarea.hide();
62 }
63 });
64 };
65
66 /**
67 * Initializes editor events
68 */
69 T3editor.initializeEditorEvents = function(codemirror) {
70 $('input[type="submit"], input[type="image"]').on('click', function(e) {
71 codemirror.options.originalTextarea.val(codemirror.editor.getCode());
72 });
73
74 $(codemirror.win.document).on('keydown', function(e) {
75 if ((e.ctrlKey || e.metaKey) && e.which === 122) { // 122 is F11
76 e.preventDefault();
77 T3editor.toggleFullscreen(codemirror);
78 }
79 });
80 };
81
82 /**
83 * Set the ajax save callback
84 */
85 T3editor.setAjaxSavetypeCallback = function(codemirror) {
86 if (codemirror.options.ajaxSaveType !== '') {
87 $(document).on('t3editor:save', function(e, data) {
88 var params = Object.extend({
89 t3editor_savetype: codemirror.options.ajaxSaveType
90 }, data.parameters);
91
92 $.ajax({
93 url: TYPO3.settings.ajaxUrls['T3Editor::saveCode'],
94 data: params,
95 method: 'POST',
96 beforeSend: function() {
97 codemirror.options.originalTextarea.parent().find('.t3e_modalOverlay').fadeIn();
98 },
99 complete: function(jqXHR) {
100 var wasSuccessful = jqXHR.status === 200 && jqXHR.responseJSON.result === true;
101 codemirror.options.originalTextarea.parent().find('.t3e_modalOverlay').fadeOut();
102 T3editor.saveFunctionComplete(codemirror, wasSuccessful, jqXHR.responseJSON);
103 }
104 });
105 });
106 }
107 };
108
109 /**
110 * Save method called upon saving
111 */
112 T3editor.saveFunction = function(codemirror) {
113 if (!codemirror.options.ajaxSaveType || codemirror.options.ajaxSaveType === '') {
114 return;
115 }
116
117 codemirror.options.originalTextarea.val(codemirror.getCode());
118
119 var params = codemirror.options.originalTextarea.get(0).form.serialize(true);
120 params = Object.extend({t3editor_disableEditor: 'false'}, params);
121
122 $(document).trigger('t3editor:save', {parameters: params, t3editor: this});
123 };
124
125 /**
126 * Method invoked by saveFunction() on completion
127 */
128 T3editor.saveFunctionComplete = function(codemirror, wasSuccessful, returnedData) {
129 if (wasSuccessful) {
130 this.textModified = false;
131 } else {
132 if (typeof returnedData.exceptionMessage !== 'undefined') {
133 top.TYPO3.Notification.error(codemirror.labels.errorWhileSaving[0]['target'], returnedData.exceptionMessage);
134 } else {
135 top.TYPO3.Notification.error(codemirror.labels.errorWhileSaving[0]['target'], '');
136 }
137 }
138 };
139
140 /**
141 * Updates the textarea
142 */
143 T3editor.updateTextarea = function(codemirror) {
144 codemirror.options.originalTextarea.val(codemirror.editor.getCode());
145 };
146
147 /**
148 * Resize the editor
149 */
150 T3editor.resize = function(codemirror, w, h) {
151 var height = (h - 1),
152 width = (w + 11),
153 $outerDiv = codemirror.options.originalTextarea.prev('.t3e_wrap'),
154 $mirrorWrap = codemirror.options.originalTextarea.parents('div.t3editor').find('.t3e_iframe_wrap');
155
156 $outerDiv.height(h + 20).width(width);
157 $outerDiv.find('.t3e_modalOverlay').height(h).width(width);
158 $mirrorWrap.children().first().height(h).width(w - 13);
159 };
160
161 /**
162 * Toggle fullscreen mode of editor
163 */
164 T3editor.toggleFullscreen = function(codemirror) {
165 var $outerDiv = codemirror.options.originalTextarea.prev('.t3e_wrap'),
166 $parent = $outerDiv.offsetParent(),
167 parentEl = $parent.get(0),
168 w, h;
169
170 if ($outerDiv.hasClass('t3e_fullscreen')) {
171 $outerDiv.removeClass('t3e_fullscreen');
172 w = parseInt(codemirror.options.width);
173 h = parseInt(codemirror.options.height);
174 $parent.css({overflow: ''});
175 } else {
176 $outerDiv.addClass('t3e_fullscreen');
177 w = parentEl.clientWidth;
178 h = parentEl.clientHeight;
179 $parent.css({overflow: 'hidden'}).scrollTop(0);
180 }
181
182 T3editor.resize(codemirror, w, h);
183 }
184
185 /**
186 * Convert all textareas to enable tab
187 */
188 T3editor.convertTextareasEnableTab = function() {
189 var $elements = $('.enable-tab');
190 if ($elements.length) {
191 require(['taboverride'], function(taboverride) {
192 taboverride.set($elements);
193 });
194 }
195 };
196
197 /**
198 * Initialize and return the T3editor object
199 */
200 $(document).ready(function() {
201 T3editor.findAndInitializeEditors();
202 T3editor.convertTextareasEnableTab();
203 });
204
205 TYPO3.T3editor = T3editor;
206 return T3editor;
207 });