a38d9724bda460b551707eb045fe109b6abfd923
[Packages/TYPO3.CMS.git] / typo3 / sysext / rtehtmlarea / Resources / Public / JavaScript / EditImage.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 * Module: TYPO3/CMS/Rtehtmlarea/EditImage
17 */
18 define(['jquery', 'TYPO3/CMS/Rtehtmlarea/SelectImage'], function($, SelectImage) {
19 'use strict';
20
21 /**
22 * @type {{classesImage: bool, initializeForm: Function, updateImage: Function}}
23 * @exports TYPO3/CMS/Rtehtmlarea/EditImage
24 */
25 var EditImage = {
26 classesImage: false,
27
28 /**
29 * Actions on the current image
30 */
31 updateImage: function (e) {
32 e.preventDefault();
33
34 var selectedImageRef = SelectImage.getCurrentImage();
35 if (!selectedImageRef) {
36 return;
37 }
38
39 var $element;
40 $.each({ width: 'iWidth', height: 'iHeight'}, function(index, id) {
41 $element = $('#t3js-' + id);
42 if ($element) {
43 var value = $element.val();
44 if (value) {
45 var intValue = parseInt(value);
46 if (intValue) {
47 selectedImageRef.style[index] = "";
48 $(selectedImageRef).attr(index, intValue);
49 }
50 }
51 }
52 });
53
54 $.each({
55 paddingTop: 'iPaddingTop',
56 paddingRight: 'iPaddingRight',
57 paddingBottom: 'iPaddingBottom',
58 paddingLeft: 'iPaddingLeft'
59 },
60 function(index, id) {
61 $element = $('#t3js-' + id);
62 if ($element) {
63 var value = $element.val();
64 if (value) {
65 var intValue = parseInt(value);
66 if (value !== "" && !isNaN(intValue)) {
67 selectedImageRef.style[index] = intValue + "px";
68 } else {
69 selectedImageRef.style[index] = "";
70 }
71 }
72 }
73 }
74 );
75
76 $.each({ title: 'iTitle', alt: 'iAlt' }, function(index, id) {
77 $element = $('#t3js-' + id);
78 if ($element) {
79 $(selectedImageRef).attr(index, $element.val());
80 }
81 });
82
83 $element = $('#t3js-iBorder');
84 if ($element) {
85 selectedImageRef.style.borderStyle = "";
86 selectedImageRef.style.borderWidth = "";
87 selectedImageRef.style.border = "";
88 selectedImageRef.style.borderTopStyle = "";
89 selectedImageRef.style.borderRightStyle = "";
90 selectedImageRef.style.borderBottomStyle = "";
91 selectedImageRef.style.borderLeftStyle = "";
92 selectedImageRef.style.borderTopWidth = "";
93 selectedImageRef.style.borderRightWidth = "";
94 selectedImageRef.style.borderBottomWidth = "";
95 selectedImageRef.style.borderLeftWidth = "";
96 if ($element.prop('checked')) {
97 selectedImageRef.style.borderStyle = "solid";
98 selectedImageRef.style.borderWidth = "thin";
99 }
100 selectedImageRef.removeAttribute("border");
101 }
102
103 $element = $('#t3js-iFloat');
104 if ($element) {
105 var value = $element.val();
106 selectedImageRef.style.cssFloat = value ? value : "";
107 }
108
109 if (SelectImage.classesImage) {
110 $element = $('t3js-iClass');
111 if ($element) {
112 var iClass;
113 if ($element.find('option').length > 0) {
114 iClass = $element.val();
115 }
116 if (iClass || $(selectedImageRef).attr('class')) {
117 selectedImageRef.className = iClass;
118 } else {
119 selectedImageRef.className = "";
120 }
121 }
122 }
123
124 var languageObject = SelectImage.plugin.editor.getPlugin("Language");
125 $element = $('#t3js-iLang');
126 if ($element && languageObject) {
127 var iLang = $element.val();
128 if (iLang || languageObject.getLanguageAttribute(selectedImageRef)) {
129 languageObject.setLanguageAttributes(selectedImageRef, iLang);
130 } else {
131 languageObject.setLanguageAttributes(selectedImageRef, "none");
132 }
133 }
134
135 $element = $('#t3js-iClickEnlarge');
136 if ($element) {
137 if ($element.prop('checked')) {
138 selectedImageRef.setAttribute("data-htmlarea-clickenlarge","1");
139 } else {
140 selectedImageRef.removeAttribute("data-htmlarea-clickenlarge");
141 selectedImageRef.removeAttribute("clickenlarge");
142 }
143 }
144
145 SelectImage.plugin.close();
146 },
147
148 /**
149 * Actions on the form
150 */
151 initializeForm: function() {
152
153 var plugin = SelectImage.plugin;
154 var selectedImageRef = SelectImage.getCurrentImage();
155
156 var languageButton = plugin.getButton('Language');
157 var $languageElement = $('#t3js-languageSetting');
158 if (languageButton && $languageElement) {
159 var languageSelector = '';
160 var options = languageButton.getOptions();
161 for (var i = 0, n = options.length; i < n; i++) {
162 languageSelector += '<option value="' + options[i].value + '">' + options[i].innerHTML + '</option>';
163 }
164 languageSelector += '';
165
166 $languageElement.find('label').text(plugin.getPluginInstance('Language').localize('Language-Tooltip') + ': ');
167 $('#t3js-iLang').html(languageSelector);
168 } else if ($languageElement) {
169 $languageElement.remove();
170 }
171
172 var $element;
173 $.each({ width: 'iWidth', height: 'iHeight'}, function(index, id) {
174 $element = $('#t3js-' + id);
175 if ($element) {
176 var value = selectedImageRef.style[index] ? selectedImageRef.style[index] : $(selectedImageRef).attr(index);
177 value = parseInt(value);
178 if (!isNaN(value) && value !== 0) {
179 $element.val(value);
180 }
181 }
182 });
183
184 $.each({
185 paddingTop: ['iPaddingTop', 'vspace'],
186 paddingRight: ['iPaddingRight', 'hspace'],
187 paddingBottom: ['iPaddingBottom', 'vspace'],
188 paddingLeft: ['iPaddingLeft', 'hspace']
189 },
190 function(index, obj) {
191 $element = $('#t3js-' + obj[0]);
192 if ($element) {
193 var padding = selectedImageRef.style[obj[0]] ? selectedImageRef.style[obj[0]] : $(selectedImageRef).attr(obj[1]);
194 padding = parseInt(padding);
195 if (isNaN(padding) || padding <= 0) {
196 padding = "";
197 }
198 $element.val(padding);
199 }
200 }
201 );
202
203 $.each({ title: 'iTitle', alt: 'iAlt' }, function(index, id) {
204 $element = $('#t3js-' + id);
205 if ($element) {
206 $element.val($(selectedImageRef).attr(index));
207 }
208 });
209
210 $element = $('#t3js-iBorder');
211 if ($element) {
212 $element.prop('checked', $(selectedImageRef).attr('border')
213 || selectedImageRef.style.borderStyle && selectedImageRef.style.borderStyle !== "none"
214 && selectedImageRef.style.borderStyle !== "none none none none");
215 }
216
217 $element = $('#t3js-iFloat');
218 if ($element) {
219 $element.val(selectedImageRef.style.cssFloat ? selectedImageRef.style.cssFloat : selectedImageRef.style.styleFloat);
220 }
221
222 $element = $('#t3js-iClass');
223 if ($element && SelectImage.classesImage) {
224 $element.val(selectedImageRef.className);
225 }
226
227 var languagePlugin = SelectImage.plugin.editor.getPlugin("Language");
228 $element = $('#t3js-iLang');
229 if ($element && languagePlugin) {
230 $element.val(languagePlugin.getLanguageAttribute(selectedImageRef));
231 if ($element.val()) {
232 $element.find('option')[0].text(languagePlugin.localize("Remove language mark"));
233 }
234 }
235
236 $element = $('#t3js-iClickEnlarge');
237 if ($element) {
238 $element.prop('checked', selectedImageRef.getAttribute("data-htmlarea-clickenlarge") === "1" || selectedImageRef.getAttribute("clickenlarge") === "1");
239 }
240 }
241 };
242
243 $(function () {
244 $.extend(EditImage, $('body').data());
245
246 $('.t3js-editForm').on('submit', EditImage.updateImage);
247
248 EditImage.initializeForm();
249 });
250
251 return EditImage;
252 });