[BUGFIX] Check correctly for allowed localization action
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / Resources / Public / JavaScript / Modules / SelectImage.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 * Module: TYPO3/CMS/Rtehtmlarea/HTMLArea/Modules/SelectImage
16 * This module is used by the RTE SelectImage module
17 */
18 define(function () {
19 'use strict';
20
21 /**
22 *
23 * @type {{editorNo: string, act: string, sys_language_content: string, RTEtsConfigParams: string, bparams: string, classesImage: boolean, labels: {}, initEventListeners: Function, jumpToUrl: Function}}
24 * @exports TYPO3/CMS/Rtehtmlarea/HTMLArea/Modules/SelectImage
25 */
26 var SelectImage = {
27 // The id of the current editor
28 editorNo: '',
29 // The current action
30 act: '',
31 // The uid of the language of the content element
32 sys_language_content: '',
33 // The RTE config parameters
34 RTEtsConfigParams: '',
35 // The browser parameters
36 bparams: '',
37 // Whether a class selector should be rendered for the image
38 classesImage: false,
39 // Some labels localized on the server side
40 labels: {},
41
42 /**
43 * Initialize an event handler for dropping an image in WebKit browsers
44 *
45 * @return void
46 * @deprecated since TYPO3 CMS 7, will be removed in TYPO3 CMS 8
47 */
48 initEventListeners: function() {
49 if (typeof console !== 'undefined') {
50 console.log('SelectImage.initEventListeners() is deprecated since TYPO3 CMS 7, will be removed in TYPO3 CMS 8');
51 }
52 require(
53 ['TYPO3/CMS/Rtehtmlarea/HTMLArea/UserAgent/UserAgent', 'TYPO3/CMS/Rtehtmlarea/HTMLArea/Event/Event'],
54 function (UserAgent, Event) {
55 if (UserAgent.isWebKit) {
56 Event.one(window.document.body, 'dragend.TYPO3Image', function (event) { SelectImage.Plugin.get().onDrop(event); });
57 }
58 }
59 );
60 },
61
62 /**
63 * Jump to the specified url after adding some parameters specific to the RTE context
64 *
65 * @return bool
66 */
67 jumpToUrl: function(URL, anchor) {
68 var selectedImageRef = SelectImage.CurrentImage.get();
69 var add_act = URL.indexOf('act=') === -1 ? '&act=' + this.act : '';
70 var add_editorNo = URL.indexOf('editorNo=') === -1 ? '&editorNo=' + this.editorNo : '';
71 var add_sys_language_content = URL.indexOf('sys_language_content=') === -1 ? '&sys_language_content=' + this.sys_language_content : '';
72 var RTEtsConfigParams = '&RTEtsConfigParams=' + this.RTEtsConfigParams;
73 var bparams = URL.indexOf('bparams=') === -1 ? '&bparams=' + this.bparams : '';
74
75 var cur_width = selectedImageRef ? '&cWidth=' + selectedImageRef.style.width : '';
76 var cur_height = selectedImageRef ? '&cHeight=' + selectedImageRef.style.height : '';
77 var addModifyTab = selectedImageRef ? '&addModifyTab=1' : '';
78
79 window.location.href = URL + add_act + add_editorNo + add_sys_language_content + RTEtsConfigParams + bparams + addModifyTab + cur_width + cur_height + (typeof anchor === 'string' ? anchor : '');
80 return false;
81 }
82 };
83
84 SelectImage.Plugin = {
85 /**
86 * Get a reference to the TYPO3Image plugin instance
87 *
88 * @returns {Object} a reference to the plugin instance
89 */
90 get: function() {
91 return window.parent.RTEarea[SelectImage.editorNo].editor.getPlugin('TYPO3Image');
92 }
93 };
94
95 /**
96 * Actions on the current image
97 */
98 SelectImage.CurrentImage = {
99
100 /**
101 * Get a reference to the current image as established by the plugin
102 *
103 * @return {Object|null} a reference to the current image
104 */
105 get: function() {
106 var plugin = SelectImage.Plugin.get();
107 if (plugin.image) {
108 return plugin.image;
109 }
110 return null;
111 },
112
113 /**
114 * Set the properties of the current image based on the data collected in the form
115 *
116 * @return void
117 */
118 setProperties: function () {
119 var selectedImageRef = this.get();
120 if (!selectedImageRef) {
121 return;
122 }
123 var imageData = document.imageData;
124 if (imageData.iWidth) {
125 if (imageData.iWidth.value && parseInt(imageData.iWidth.value)) {
126 selectedImageRef.style.width = "";
127 selectedImageRef.width = parseInt(imageData.iWidth.value);
128 }
129 }
130 if (imageData.iHeight) {
131 if (imageData.iHeight.value && parseInt(imageData.iHeight.value)) {
132 selectedImageRef.style.height = "";
133 selectedImageRef.height = parseInt(imageData.iHeight.value);
134 }
135 }
136 if (imageData.iPaddingTop) {
137 if (imageData.iPaddingTop.value !== "" && !isNaN(parseInt(imageData.iPaddingTop.value))) {
138 selectedImageRef.style.paddingTop = parseInt(imageData.iPaddingTop.value) + "px";
139 } else {
140 selectedImageRef.style.paddingTop = "";
141 }
142 }
143 if (imageData.iPaddingRight) {
144 if (imageData.iPaddingRight.value !== "" && !isNaN(parseInt(imageData.iPaddingRight.value))) {
145 selectedImageRef.style.paddingRight = parseInt(imageData.iPaddingRight.value) + "px";
146 } else {
147 selectedImageRef.style.paddingRight = "";
148 }
149 }
150 if (imageData.iPaddingBottom) {
151 if (imageData.iPaddingBottom.value !== "" && !isNaN(parseInt(imageData.iPaddingBottom.value))) {
152 selectedImageRef.style.paddingBottom = parseInt(imageData.iPaddingBottom.value) + "px";
153 } else {
154 selectedImageRef.style.paddingBottom = "";
155 }
156 }
157 if (imageData.iPaddingLeft) {
158 if (imageData.iPaddingLeft.value !== "" && !isNaN(parseInt(imageData.iPaddingLeft.value))) {
159 selectedImageRef.style.paddingLeft = parseInt(imageData.iPaddingLeft.value) + "px";
160 } else {
161 selectedImageRef.style.paddingLeft = "";
162 }
163 }
164 if (imageData.iTitle) {
165 selectedImageRef.title = imageData.iTitle.value;
166 }
167 if (imageData.iAlt) {
168 selectedImageRef.alt = imageData.iAlt.value;
169 }
170 if (imageData.iBorder) {
171 selectedImageRef.style.borderStyle = "";
172 selectedImageRef.style.borderWidth = "";
173 selectedImageRef.style.border = ""; // this statement ignored by Mozilla 1.3.1
174 selectedImageRef.style.borderTopStyle = "";
175 selectedImageRef.style.borderRightStyle = "";
176 selectedImageRef.style.borderBottomStyle = "";
177 selectedImageRef.style.borderLeftStyle = "";
178 selectedImageRef.style.borderTopWidth = "";
179 selectedImageRef.style.borderRightWidth = "";
180 selectedImageRef.style.borderBottomWidth = "";
181 selectedImageRef.style.borderLeftWidth = "";
182 if (imageData.iBorder.checked) {
183 selectedImageRef.style.borderStyle = "solid";
184 selectedImageRef.style.borderWidth = "thin";
185 }
186 selectedImageRef.removeAttribute("border");
187 }
188 if (imageData.iFloat) {
189 var iFloat = imageData.iFloat.options[imageData.iFloat.selectedIndex].value;
190 selectedImageRef.style.cssFloat = iFloat ? iFloat : "";
191 }
192 if (SelectImage.classesImage && imageData.iClass) {
193 var iClass;
194 if (imageData.iClass.options.length > 0) {
195 iClass = imageData.iClass.options[imageData.iClass.selectedIndex].value;
196 }
197 if (iClass || selectedImageRef.attributes["class"] && selectedImageRef.attributes["class"].value) {
198 selectedImageRef.className = iClass;
199 } else {
200 selectedImageRef.className = "";
201 }
202 }
203 if (imageData.iLang) {
204 var iLang = imageData.iLang.options[imageData.iLang.selectedIndex].value;
205 var languageObject = SelectImage.Plugin.get().editor.getPlugin("Language");
206 if (iLang || languageObject.getLanguageAttribute(selectedImageRef)) {
207 languageObject.setLanguageAttributes(selectedImageRef, iLang);
208 } else {
209 languageObject.setLanguageAttributes(selectedImageRef, "none");
210 }
211 }
212 if (imageData.iClickEnlarge) {
213 if (imageData.iClickEnlarge.checked) {
214 selectedImageRef.setAttribute("data-htmlarea-clickenlarge","1");
215 } else {
216 selectedImageRef.removeAttribute("data-htmlarea-clickenlarge");
217 selectedImageRef.removeAttribute("clickenlarge");
218 }
219 }
220 SelectImage.Plugin.get().close();
221 }
222 };
223
224 /**
225 * Actions on the form
226 */
227 SelectImage.Form = {
228
229 /**
230 * Build the form and append it to the body of the document
231 *
232 * @param {String} classesImageJSOptions options of the class selector
233 * @param {array} removedProperties array of properties configured to be rmoved
234 * @param {bool} lockPlainWidth true if the plain image width is locked
235 * @param {bool} lockPlainHeight true if the plain image height is locked
236 * @return void
237 */
238 build: function(classesImageJSOptions, removedProperties, lockPlainWidth, lockPlainHeight) {
239 var plugin = SelectImage.Plugin.get();
240 var selectedImageRef = SelectImage.CurrentImage.get();
241 var styleSelector = '';
242 if (SelectImage.classesImage) {
243 styleSelector = '<select id="iClass" name="iClass" style="width:140px;">' + classesImageJSOptions + '</select>';
244 }
245 var floatSelector = '<select id="iFloat" name="iFloat">'
246 + '<option value="">' + SelectImage.labels['notSet'] + '</option>'
247 + '<option value="none">' + SelectImage.labels['nonFloating'] + '</option>'
248 + '<option value="left">' + SelectImage.labels['left'] + '</option>'
249 + '<option value="right">' + SelectImage.labels['right'] + '</option>'
250 + '</select>';
251 var languageSelector = '';
252 if (plugin.getButton('Language')) {
253 languageSelector = '<select id="iLang" name="iLang">';
254 var options = plugin.getButton('Language').getOptions();
255 for (var i = 0, n = options.length; i < n; i++) {
256 languageSelector += '<option value="' + options[i].value + '">' + options[i].innerHTML + '</option>';
257 }
258 languageSelector += '</select>';
259 }
260 var sz = '';
261 sz += '<form name="imageData"><table class="htmlarea-window-table">';
262 if (removedProperties.indexOf('class') === -1 && SelectImage.classesImage) {
263 sz += '<tr><td><label for="iClass">' + SelectImage.labels['class'] + ': </label></td><td>' + styleSelector + '</td></tr>';
264 }
265 if (removedProperties.indexOf('width') === -1 && !(selectedImageRef && selectedImageRef.src.indexOf('RTEmagic') === -1 && lockPlainWidth)) {
266 sz += '<tr><td><label for="iWidth">' + SelectImage.labels['width'] + ': </label></td><td><input type="text" id="iWidth" name="iWidth" value="" style="width: 39px;" maxlength="4" /></td></tr>';
267 }
268 if (removedProperties.indexOf('height') === -1 && !(selectedImageRef && selectedImageRef.src.indexOf('RTEmagic') === -1 && lockPlainHeight)) {
269 sz += '<tr><td><label for="iHeight">' + SelectImage.labels['height'] + ': </label></td><td><input type="text" id="iHeight" name="iHeight" value="" style="width: 39px;" maxlength="4" /></td></tr>';
270 }
271 if (removedProperties.indexOf('border') === -1) {
272 sz += '<tr><td><label for="iBorder">' + SelectImage.labels['border'] + ': </label></td><td><input type="checkbox" id="iBorder" name="iBorder" value="1" /></td></tr>';
273 }
274 if (removedProperties.indexOf('float') === -1) {
275 sz += '<tr><td><label for="iFloat">' + SelectImage.labels['float'] + ': </label></td><td>' + floatSelector + '</td></tr>';
276 }
277 if (removedProperties.indexOf('paddingTop') === -1) {
278 sz += '<tr><td><label for="iPaddingTop">' + SelectImage.labels['padding_top'] + ': </label></td><td><input type="text" id="iPaddingTop" name="iPaddingTop" value="" style="width: 39px;" maxlength="4" /></td></tr>';
279 }
280 if (removedProperties.indexOf('paddingRight') === -1) {
281 sz += '<tr><td><label for="iPaddingRight">' + SelectImage.labels['padding_right'] + ': </label></td><td><input type="text" id="iPaddingRight" name="iPaddingRight" value="" style="width: 39px;" maxlength="4" /></td></tr>';
282 }
283 if (removedProperties.indexOf('paddingBottom') === -1) {
284 sz += '<tr><td><label for="iPaddingBottom">' + SelectImage.labels['padding_bottom'] + ': </label></td><td><input type="text" id="iPaddingBottom" name="iPaddingBottom" value="" style="width: 39px;" maxlength="4" /></td></tr>';
285 }
286 if (removedProperties.indexOf('paddingLeft') === -1) {
287 sz += '<tr><td><label for="iPaddingLeft">' + SelectImage.labels['padding_left'] + ': </label></td><td><input type="text" id="iPaddingLeft" name="iPaddingLeft" value="" style="width: 39px;" maxlength="4" /></td></tr>';
288 }
289 if (removedProperties.indexOf('title') === -1) {
290 sz += '<tr><td><label for="iTitle">' + SelectImage.labels['title'] + ': </label></td><td><input type="text" id="iTitle" name="iTitle" style="width:192px;" maxlength="256" /></td></tr>';
291 }
292 if (removedProperties.indexOf('alt') === -1) {
293 sz += '<tr><td><label for="iAlt">' + SelectImage.labels['alt'] + ': </label></td><td><input type="text" id="iAlt" name="iAlt" style="width:192px;" maxlength="256" /></td></tr>';
294 }
295 if (removedProperties.indexOf('lang') === -1 && plugin.getButton('Language')) {
296 sz += '<tr><td><label for="iLang">' + plugin.getPluginInstance('Language').localize('Language-Tooltip') + ': </label></td><td>' + languageSelector + '</td></tr>';
297 }
298 if (removedProperties.indexOf('data-htmlarea-clickenlarge') === -1 && removedProperties.indexOf('clickenlarge') === -1 ) {
299 sz += '<tr><td><label for="iClickEnlarge">' + SelectImage.labels['image_zoom'] + ' </label></td><td><input type="checkbox" name="iClickEnlarge" id="iClickEnlarge" value="0" /></td></tr>';
300 }
301 sz += '<tr><td></td><td><input class="btn btn-default" type="submit" value="' + SelectImage.labels['update'] + '" onclick="SelectImage.CurrentImage.setProperties(SelectImage.classesImage)"></td></tr>';
302 sz += '</table></form>';
303
304 var div = document.createElement('div');
305 div.innerHTML = sz;
306 document.body.appendChild(div);
307 },
308
309 /**
310 * Insert current image properties into the fields of the form
311 * @return void
312 */
313 insertImageProperties: function () {
314 var plugin = SelectImage.Plugin.get();
315 var selectedImageRef = SelectImage.CurrentImage.get();
316 if (selectedImageRef) {
317 var styleWidth, styleHeight, padding;
318 if (document.imageData.iWidth) {
319 styleWidth = selectedImageRef.style.width ? selectedImageRef.style.width : selectedImageRef.width;
320 styleWidth = parseInt(styleWidth);
321 if (!isNaN(styleWidth) && styleWidth !== 0) {
322 document.imageData.iWidth.value = styleWidth;
323 }
324 }
325 if (document.imageData.iHeight) {
326 styleHeight = selectedImageRef.style.height ? selectedImageRef.style.height : selectedImageRef.height;
327 styleHeight = parseInt(styleHeight);
328 if (!isNaN(styleHeight) && styleHeight !== 0) {
329 document.imageData.iHeight.value = styleHeight;
330 }
331 }
332 if (document.imageData.iPaddingTop) {
333 padding = selectedImageRef.style.paddingTop ? selectedImageRef.style.paddingTop : selectedImageRef.vspace;
334 padding = parseInt(padding);
335 if (isNaN(padding) || padding <= 0) { padding = ""; }
336 document.imageData.iPaddingTop.value = padding;
337 }
338 if (document.imageData.iPaddingRight) {
339 padding = selectedImageRef.style.paddingRight ? selectedImageRef.style.paddingRight : selectedImageRef.hspace;
340 padding = parseInt(padding);
341 if (isNaN(padding) || padding <= 0) { padding = ""; }
342 document.imageData.iPaddingRight.value = padding;
343 }
344 if (document.imageData.iPaddingBottom) {
345 padding = selectedImageRef.style.paddingBottom ? selectedImageRef.style.paddingBottom : selectedImageRef.vspace;
346 padding = parseInt(padding);
347 if (isNaN(padding) || padding <= 0) { padding = ""; }
348 document.imageData.iPaddingBottom.value = padding;
349 }
350 if (document.imageData.iPaddingLeft) {
351 padding = selectedImageRef.style.paddingLeft ? selectedImageRef.style.paddingLeft : selectedImageRef.hspace;
352 padding = parseInt(padding);
353 if (isNaN(padding) || padding <= 0) { padding = ""; }
354 document.imageData.iPaddingLeft.value = padding;
355 }
356 if (document.imageData.iTitle) {
357 document.imageData.iTitle.value = selectedImageRef.title;
358 }
359 if (document.imageData.iAlt) {
360 document.imageData.iAlt.value = selectedImageRef.alt;
361 }
362 if (document.imageData.iBorder) {
363 if((selectedImageRef.style.borderStyle && selectedImageRef.style.borderStyle != "none" && selectedImageRef.style.borderStyle != "none none none none") || selectedImageRef.border) {
364 document.imageData.iBorder.checked = 1;
365 }
366 }
367 var fObj, value, a;
368 if (document.imageData.iFloat) {
369 fObj = document.imageData.iFloat;
370 value = selectedImageRef.style.cssFloat ? selectedImageRef.style.cssFloat : selectedImageRef.style.styleFloat;
371 for (a = 0; a < fObj.length; a++) {
372 if (fObj.options[a].value == value) {
373 fObj.selectedIndex = a;
374 }
375 }
376 }
377 if (SelectImage.classesImage && document.imageData.iClass) {
378 fObj = document.imageData.iClass;
379 value = selectedImageRef.className;
380 for (a = 0; a < fObj.length; a++) {
381 if (fObj.options[a].value == value) {
382 fObj.selectedIndex = a;
383 }
384 }
385 }
386 if (document.imageData.iLang) {
387 fObj = document.imageData.iLang;
388 value = plugin.editor.getPlugin("Language").getLanguageAttribute(selectedImageRef);
389 for (var i = 0, n = fObj.length; i < n; i++) {
390 if (fObj.options[i].value == value) {
391 fObj.selectedIndex = i;
392 if (i) {
393 fObj.options[0].text = plugin.editor.getPlugin("Language").localize("Remove language mark");
394 }
395 }
396 }
397 }
398 if (document.imageData.iClickEnlarge) {
399 document.imageData.iClickEnlarge.checked = selectedImageRef.getAttribute("data-htmlarea-clickenlarge") === "1" || selectedImageRef.getAttribute("clickenlarge") === "1";
400 }
401 }
402 }
403 };
404
405 // public usage
406 window.SelectImage = SelectImage;
407
408 return SelectImage;
409 });