1 | var ImageDialog = {
|
---|
2 | preInit : function() {
|
---|
3 | var url;
|
---|
4 |
|
---|
5 | tinyMCEPopup.requireLangPack();
|
---|
6 |
|
---|
7 | if (url = tinyMCEPopup.getParam("external_image_list_url"))
|
---|
8 | document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>');
|
---|
9 | },
|
---|
10 |
|
---|
11 | init : function(ed) {
|
---|
12 | var f = document.forms[0], nl = f.elements, ed = tinyMCEPopup.editor, dom = ed.dom, n = ed.selection.getNode();
|
---|
13 |
|
---|
14 | tinyMCEPopup.resizeToInnerSize();
|
---|
15 | this.fillClassList('class_list');
|
---|
16 | this.fillFileList('src_list', 'tinyMCEImageList');
|
---|
17 | this.fillFileList('over_list', 'tinyMCEImageList');
|
---|
18 | this.fillFileList('out_list', 'tinyMCEImageList');
|
---|
19 | TinyMCE_EditableSelects.init();
|
---|
20 |
|
---|
21 | if (n.nodeName == 'IMG') {
|
---|
22 | nl.src.value = dom.getAttrib(n, 'src');
|
---|
23 | nl.width.value = dom.getAttrib(n, 'width');
|
---|
24 | nl.height.value = dom.getAttrib(n, 'height');
|
---|
25 | nl.alt.value = dom.getAttrib(n, 'alt');
|
---|
26 | nl.title.value = dom.getAttrib(n, 'title');
|
---|
27 | nl.vspace.value = this.getAttrib(n, 'vspace');
|
---|
28 | nl.hspace.value = this.getAttrib(n, 'hspace');
|
---|
29 | nl.border.value = this.getAttrib(n, 'border');
|
---|
30 | selectByValue(f, 'align', this.getAttrib(n, 'align'));
|
---|
31 | selectByValue(f, 'class_list', dom.getAttrib(n, 'class'), true, true);
|
---|
32 | nl.style.value = dom.getAttrib(n, 'style');
|
---|
33 | nl.id.value = dom.getAttrib(n, 'id');
|
---|
34 | nl.dir.value = dom.getAttrib(n, 'dir');
|
---|
35 | nl.lang.value = dom.getAttrib(n, 'lang');
|
---|
36 | nl.usemap.value = dom.getAttrib(n, 'usemap');
|
---|
37 | nl.longdesc.value = dom.getAttrib(n, 'longdesc');
|
---|
38 | nl.insert.value = ed.getLang('update');
|
---|
39 |
|
---|
40 | if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseover')))
|
---|
41 | nl.onmouseoversrc.value = dom.getAttrib(n, 'onmouseover').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
|
---|
42 |
|
---|
43 | if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseout')))
|
---|
44 | nl.onmouseoutsrc.value = dom.getAttrib(n, 'onmouseout').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
|
---|
45 |
|
---|
46 | if (ed.settings.inline_styles) {
|
---|
47 | // Move attribs to styles
|
---|
48 | if (dom.getAttrib(n, 'align'))
|
---|
49 | this.updateStyle('align');
|
---|
50 |
|
---|
51 | if (dom.getAttrib(n, 'hspace'))
|
---|
52 | this.updateStyle('hspace');
|
---|
53 |
|
---|
54 | if (dom.getAttrib(n, 'border'))
|
---|
55 | this.updateStyle('border');
|
---|
56 |
|
---|
57 | if (dom.getAttrib(n, 'vspace'))
|
---|
58 | this.updateStyle('vspace');
|
---|
59 | }
|
---|
60 | }
|
---|
61 |
|
---|
62 | // Setup browse button
|
---|
63 | document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image');
|
---|
64 | if (isVisible('srcbrowser'))
|
---|
65 | document.getElementById('src').style.width = '260px';
|
---|
66 |
|
---|
67 | // Setup browse button
|
---|
68 | document.getElementById('onmouseoversrccontainer').innerHTML = getBrowserHTML('overbrowser','onmouseoversrc','image','theme_advanced_image');
|
---|
69 | if (isVisible('overbrowser'))
|
---|
70 | document.getElementById('onmouseoversrc').style.width = '260px';
|
---|
71 |
|
---|
72 | // Setup browse button
|
---|
73 | document.getElementById('onmouseoutsrccontainer').innerHTML = getBrowserHTML('outbrowser','onmouseoutsrc','image','theme_advanced_image');
|
---|
74 | if (isVisible('outbrowser'))
|
---|
75 | document.getElementById('onmouseoutsrc').style.width = '260px';
|
---|
76 |
|
---|
77 | // If option enabled default contrain proportions to checked
|
---|
78 | if (ed.getParam("advimage_constrain_proportions", true))
|
---|
79 | f.constrain.checked = true;
|
---|
80 |
|
---|
81 | // Check swap image if valid data
|
---|
82 | if (nl.onmouseoversrc.value || nl.onmouseoutsrc.value)
|
---|
83 | this.setSwapImage(true);
|
---|
84 | else
|
---|
85 | this.setSwapImage(false);
|
---|
86 |
|
---|
87 | this.changeAppearance();
|
---|
88 | this.showPreviewImage(nl.src.value, 1);
|
---|
89 | },
|
---|
90 |
|
---|
91 | insert : function(file, title) {
|
---|
92 | var ed = tinyMCEPopup.editor, t = this, f = document.forms[0];
|
---|
93 |
|
---|
94 | if (f.src.value === '') {
|
---|
95 | if (ed.selection.getNode().nodeName == 'IMG') {
|
---|
96 | ed.dom.remove(ed.selection.getNode());
|
---|
97 | ed.execCommand('mceRepaint');
|
---|
98 | }
|
---|
99 |
|
---|
100 | tinyMCEPopup.close();
|
---|
101 | return;
|
---|
102 | }
|
---|
103 |
|
---|
104 | if (tinyMCEPopup.getParam("accessibility_warnings", 1)) {
|
---|
105 | if (!f.alt.value) {
|
---|
106 | tinyMCEPopup.confirm(tinyMCEPopup.getLang('advimage_dlg.missing_alt'), function(s) {
|
---|
107 | if (s)
|
---|
108 | t.insertAndClose();
|
---|
109 | });
|
---|
110 |
|
---|
111 | return;
|
---|
112 | }
|
---|
113 | }
|
---|
114 |
|
---|
115 | t.insertAndClose();
|
---|
116 | },
|
---|
117 |
|
---|
118 | insertAndClose : function() {
|
---|
119 | var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {}, el;
|
---|
120 |
|
---|
121 | tinyMCEPopup.restoreSelection();
|
---|
122 |
|
---|
123 | // Fixes crash in Safari
|
---|
124 | if (tinymce.isWebKit)
|
---|
125 | ed.getWin().focus();
|
---|
126 |
|
---|
127 | if (!ed.settings.inline_styles) {
|
---|
128 | args = {
|
---|
129 | vspace : nl.vspace.value,
|
---|
130 | hspace : nl.hspace.value,
|
---|
131 | border : nl.border.value,
|
---|
132 | align : getSelectValue(f, 'align')
|
---|
133 | };
|
---|
134 | } else {
|
---|
135 | // Remove deprecated values
|
---|
136 | args = {
|
---|
137 | vspace : '',
|
---|
138 | hspace : '',
|
---|
139 | border : '',
|
---|
140 | align : ''
|
---|
141 | };
|
---|
142 | }
|
---|
143 |
|
---|
144 | tinymce.extend(args, {
|
---|
145 | src : nl.src.value.replace(/ /g, '%20'),
|
---|
146 | width : nl.width.value,
|
---|
147 | height : nl.height.value,
|
---|
148 | alt : nl.alt.value,
|
---|
149 | title : nl.title.value,
|
---|
150 | 'class' : getSelectValue(f, 'class_list'),
|
---|
151 | style : nl.style.value,
|
---|
152 | id : nl.id.value,
|
---|
153 | dir : nl.dir.value,
|
---|
154 | lang : nl.lang.value,
|
---|
155 | usemap : nl.usemap.value,
|
---|
156 | longdesc : nl.longdesc.value
|
---|
157 | });
|
---|
158 |
|
---|
159 | args.onmouseover = args.onmouseout = '';
|
---|
160 |
|
---|
161 | if (f.onmousemovecheck.checked) {
|
---|
162 | if (nl.onmouseoversrc.value)
|
---|
163 | args.onmouseover = "this.src='" + nl.onmouseoversrc.value + "';";
|
---|
164 |
|
---|
165 | if (nl.onmouseoutsrc.value)
|
---|
166 | args.onmouseout = "this.src='" + nl.onmouseoutsrc.value + "';";
|
---|
167 | }
|
---|
168 |
|
---|
169 | el = ed.selection.getNode();
|
---|
170 |
|
---|
171 | if (el && el.nodeName == 'IMG') {
|
---|
172 | ed.dom.setAttribs(el, args);
|
---|
173 | } else {
|
---|
174 | ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" />', {skip_undo : 1});
|
---|
175 | ed.dom.setAttribs('__mce_tmp', args);
|
---|
176 | ed.dom.setAttrib('__mce_tmp', 'id', '');
|
---|
177 | ed.undoManager.add();
|
---|
178 | }
|
---|
179 |
|
---|
180 | tinyMCEPopup.editor.execCommand('mceRepaint');
|
---|
181 | tinyMCEPopup.editor.focus();
|
---|
182 | tinyMCEPopup.close();
|
---|
183 | },
|
---|
184 |
|
---|
185 | getAttrib : function(e, at) {
|
---|
186 | var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2;
|
---|
187 |
|
---|
188 | if (ed.settings.inline_styles) {
|
---|
189 | switch (at) {
|
---|
190 | case 'align':
|
---|
191 | if (v = dom.getStyle(e, 'float'))
|
---|
192 | return v;
|
---|
193 |
|
---|
194 | if (v = dom.getStyle(e, 'vertical-align'))
|
---|
195 | return v;
|
---|
196 |
|
---|
197 | break;
|
---|
198 |
|
---|
199 | case 'hspace':
|
---|
200 | v = dom.getStyle(e, 'margin-left')
|
---|
201 | v2 = dom.getStyle(e, 'margin-right');
|
---|
202 |
|
---|
203 | if (v && v == v2)
|
---|
204 | return parseInt(v.replace(/[^0-9]/g, ''));
|
---|
205 |
|
---|
206 | break;
|
---|
207 |
|
---|
208 | case 'vspace':
|
---|
209 | v = dom.getStyle(e, 'margin-top')
|
---|
210 | v2 = dom.getStyle(e, 'margin-bottom');
|
---|
211 | if (v && v == v2)
|
---|
212 | return parseInt(v.replace(/[^0-9]/g, ''));
|
---|
213 |
|
---|
214 | break;
|
---|
215 |
|
---|
216 | case 'border':
|
---|
217 | v = 0;
|
---|
218 |
|
---|
219 | tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) {
|
---|
220 | sv = dom.getStyle(e, 'border-' + sv + '-width');
|
---|
221 |
|
---|
222 | // False or not the same as prev
|
---|
223 | if (!sv || (sv != v && v !== 0)) {
|
---|
224 | v = 0;
|
---|
225 | return false;
|
---|
226 | }
|
---|
227 |
|
---|
228 | if (sv)
|
---|
229 | v = sv;
|
---|
230 | });
|
---|
231 |
|
---|
232 | if (v)
|
---|
233 | return parseInt(v.replace(/[^0-9]/g, ''));
|
---|
234 |
|
---|
235 | break;
|
---|
236 | }
|
---|
237 | }
|
---|
238 |
|
---|
239 | if (v = dom.getAttrib(e, at))
|
---|
240 | return v;
|
---|
241 |
|
---|
242 | return '';
|
---|
243 | },
|
---|
244 |
|
---|
245 | setSwapImage : function(st) {
|
---|
246 | var f = document.forms[0];
|
---|
247 |
|
---|
248 | f.onmousemovecheck.checked = st;
|
---|
249 | setBrowserDisabled('overbrowser', !st);
|
---|
250 | setBrowserDisabled('outbrowser', !st);
|
---|
251 |
|
---|
252 | if (f.over_list)
|
---|
253 | f.over_list.disabled = !st;
|
---|
254 |
|
---|
255 | if (f.out_list)
|
---|
256 | f.out_list.disabled = !st;
|
---|
257 |
|
---|
258 | f.onmouseoversrc.disabled = !st;
|
---|
259 | f.onmouseoutsrc.disabled = !st;
|
---|
260 | },
|
---|
261 |
|
---|
262 | fillClassList : function(id) {
|
---|
263 | var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
|
---|
264 |
|
---|
265 | if (v = tinyMCEPopup.getParam('theme_advanced_styles')) {
|
---|
266 | cl = [];
|
---|
267 |
|
---|
268 | tinymce.each(v.split(';'), function(v) {
|
---|
269 | var p = v.split('=');
|
---|
270 |
|
---|
271 | cl.push({'title' : p[0], 'class' : p[1]});
|
---|
272 | });
|
---|
273 | } else
|
---|
274 | cl = tinyMCEPopup.editor.dom.getClasses();
|
---|
275 |
|
---|
276 | if (cl.length > 0) {
|
---|
277 | lst.options.length = 0;
|
---|
278 | lst.options[lst.options.length] = new Option(tinyMCEPopup.getLang('not_set'), '');
|
---|
279 |
|
---|
280 | tinymce.each(cl, function(o) {
|
---|
281 | lst.options[lst.options.length] = new Option(o.title || o['class'], o['class']);
|
---|
282 | });
|
---|
283 | } else
|
---|
284 | dom.remove(dom.getParent(id, 'tr'));
|
---|
285 | },
|
---|
286 |
|
---|
287 | fillFileList : function(id, l) {
|
---|
288 | var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
|
---|
289 |
|
---|
290 | l = window[l];
|
---|
291 | lst.options.length = 0;
|
---|
292 |
|
---|
293 | if (l && l.length > 0) {
|
---|
294 | lst.options[lst.options.length] = new Option('', '');
|
---|
295 |
|
---|
296 | tinymce.each(l, function(o) {
|
---|
297 | lst.options[lst.options.length] = new Option(o[0], o[1]);
|
---|
298 | });
|
---|
299 | } else
|
---|
300 | dom.remove(dom.getParent(id, 'tr'));
|
---|
301 | },
|
---|
302 |
|
---|
303 | resetImageData : function() {
|
---|
304 | var f = document.forms[0];
|
---|
305 |
|
---|
306 | f.elements.width.value = f.elements.height.value = '';
|
---|
307 | },
|
---|
308 |
|
---|
309 | updateImageData : function(img, st) {
|
---|
310 | var f = document.forms[0];
|
---|
311 |
|
---|
312 | if (!st) {
|
---|
313 | f.elements.width.value = img.width;
|
---|
314 | f.elements.height.value = img.height;
|
---|
315 | }
|
---|
316 |
|
---|
317 | this.preloadImg = img;
|
---|
318 | },
|
---|
319 |
|
---|
320 | changeAppearance : function() {
|
---|
321 | var ed = tinyMCEPopup.editor, f = document.forms[0], img = document.getElementById('alignSampleImg');
|
---|
322 |
|
---|
323 | if (img) {
|
---|
324 | if (ed.getParam('inline_styles')) {
|
---|
325 | ed.dom.setAttrib(img, 'style', f.style.value);
|
---|
326 | } else {
|
---|
327 | img.align = f.align.value;
|
---|
328 | img.border = f.border.value;
|
---|
329 | img.hspace = f.hspace.value;
|
---|
330 | img.vspace = f.vspace.value;
|
---|
331 | }
|
---|
332 | }
|
---|
333 | },
|
---|
334 |
|
---|
335 | changeHeight : function() {
|
---|
336 | var f = document.forms[0], tp, t = this;
|
---|
337 |
|
---|
338 | if (!f.constrain.checked || !t.preloadImg) {
|
---|
339 | return;
|
---|
340 | }
|
---|
341 |
|
---|
342 | if (f.width.value == "" || f.height.value == "")
|
---|
343 | return;
|
---|
344 |
|
---|
345 | tp = (parseInt(f.width.value) / parseInt(t.preloadImg.width)) * t.preloadImg.height;
|
---|
346 | f.height.value = tp.toFixed(0);
|
---|
347 | },
|
---|
348 |
|
---|
349 | changeWidth : function() {
|
---|
350 | var f = document.forms[0], tp, t = this;
|
---|
351 |
|
---|
352 | if (!f.constrain.checked || !t.preloadImg) {
|
---|
353 | return;
|
---|
354 | }
|
---|
355 |
|
---|
356 | if (f.width.value == "" || f.height.value == "")
|
---|
357 | return;
|
---|
358 |
|
---|
359 | tp = (parseInt(f.height.value) / parseInt(t.preloadImg.height)) * t.preloadImg.width;
|
---|
360 | f.width.value = tp.toFixed(0);
|
---|
361 | },
|
---|
362 |
|
---|
363 | updateStyle : function(ty) {
|
---|
364 | var dom = tinyMCEPopup.dom, b, bStyle, bColor, v, isIE = tinymce.isIE, f = document.forms[0], img = dom.create('img', {style : dom.get('style').value});
|
---|
365 |
|
---|
366 | if (tinyMCEPopup.editor.settings.inline_styles) {
|
---|
367 | // Handle align
|
---|
368 | if (ty == 'align') {
|
---|
369 | dom.setStyle(img, 'float', '');
|
---|
370 | dom.setStyle(img, 'vertical-align', '');
|
---|
371 |
|
---|
372 | v = getSelectValue(f, 'align');
|
---|
373 | if (v) {
|
---|
374 | if (v == 'left' || v == 'right')
|
---|
375 | dom.setStyle(img, 'float', v);
|
---|
376 | else
|
---|
377 | img.style.verticalAlign = v;
|
---|
378 | }
|
---|
379 | }
|
---|
380 |
|
---|
381 | // Handle border
|
---|
382 | if (ty == 'border') {
|
---|
383 | b = img.style.border ? img.style.border.split(' ') : [];
|
---|
384 | bStyle = dom.getStyle(img, 'border-style');
|
---|
385 | bColor = dom.getStyle(img, 'border-color');
|
---|
386 |
|
---|
387 | dom.setStyle(img, 'border', '');
|
---|
388 |
|
---|
389 | v = f.border.value;
|
---|
390 | if (v || v == '0') {
|
---|
391 | if (v == '0')
|
---|
392 | img.style.border = isIE ? '0' : '0 none none';
|
---|
393 | else {
|
---|
394 | if (b.length == 3 && b[isIE ? 2 : 1])
|
---|
395 | bStyle = b[isIE ? 2 : 1];
|
---|
396 | else if (!bStyle || bStyle == 'none')
|
---|
397 | bStyle = 'solid';
|
---|
398 | if (b.length == 3 && b[isIE ? 0 : 2])
|
---|
399 | bColor = b[isIE ? 0 : 2];
|
---|
400 | else if (!bColor || bColor == 'none')
|
---|
401 | bColor = 'black';
|
---|
402 | img.style.border = v + 'px ' + bStyle + ' ' + bColor;
|
---|
403 | }
|
---|
404 | }
|
---|
405 | }
|
---|
406 |
|
---|
407 | // Handle hspace
|
---|
408 | if (ty == 'hspace') {
|
---|
409 | dom.setStyle(img, 'marginLeft', '');
|
---|
410 | dom.setStyle(img, 'marginRight', '');
|
---|
411 |
|
---|
412 | v = f.hspace.value;
|
---|
413 | if (v) {
|
---|
414 | img.style.marginLeft = v + 'px';
|
---|
415 | img.style.marginRight = v + 'px';
|
---|
416 | }
|
---|
417 | }
|
---|
418 |
|
---|
419 | // Handle vspace
|
---|
420 | if (ty == 'vspace') {
|
---|
421 | dom.setStyle(img, 'marginTop', '');
|
---|
422 | dom.setStyle(img, 'marginBottom', '');
|
---|
423 |
|
---|
424 | v = f.vspace.value;
|
---|
425 | if (v) {
|
---|
426 | img.style.marginTop = v + 'px';
|
---|
427 | img.style.marginBottom = v + 'px';
|
---|
428 | }
|
---|
429 | }
|
---|
430 |
|
---|
431 | // Merge
|
---|
432 | dom.get('style').value = dom.serializeStyle(dom.parseStyle(img.style.cssText), 'img');
|
---|
433 | }
|
---|
434 | },
|
---|
435 |
|
---|
436 | changeMouseMove : function() {
|
---|
437 | },
|
---|
438 |
|
---|
439 | showPreviewImage : function(u, st) {
|
---|
440 | if (!u) {
|
---|
441 | tinyMCEPopup.dom.setHTML('prev', '');
|
---|
442 | return;
|
---|
443 | }
|
---|
444 |
|
---|
445 | if (!st && tinyMCEPopup.getParam("advimage_update_dimensions_onchange", true))
|
---|
446 | this.resetImageData();
|
---|
447 |
|
---|
448 | u = tinyMCEPopup.editor.documentBaseURI.toAbsolute(u);
|
---|
449 |
|
---|
450 | if (!st)
|
---|
451 | tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this);" onerror="ImageDialog.resetImageData();" />');
|
---|
452 | else
|
---|
453 | tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this, 1);" />');
|
---|
454 | }
|
---|
455 | };
|
---|
456 |
|
---|
457 | ImageDialog.preInit();
|
---|
458 | tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog);
|
---|