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