1 |
3 |
ahitrov@rambler.ru |
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, |
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.close(); |
181 |
|
|
}, |
182 |
|
|
|
183 |
|
|
getAttrib : function(e, at) { |
184 |
|
|
var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2; |
185 |
|
|
|
186 |
|
|
if (ed.settings.inline_styles) { |
187 |
|
|
switch (at) { |
188 |
|
|
case 'align': |
189 |
|
|
if (v = dom.getStyle(e, 'float')) |
190 |
|
|
return v; |
191 |
|
|
|
192 |
|
|
if (v = dom.getStyle(e, 'vertical-align')) |
193 |
|
|
return v; |
194 |
|
|
|
195 |
|
|
break; |
196 |
|
|
|
197 |
|
|
case 'hspace': |
198 |
|
|
v = dom.getStyle(e, 'margin-left') |
199 |
|
|
v2 = dom.getStyle(e, 'margin-right'); |
200 |
|
|
|
201 |
|
|
if (v && v == v2) |
202 |
|
|
return parseInt(v.replace(/[^0-9]/g, '')); |
203 |
|
|
|
204 |
|
|
break; |
205 |
|
|
|
206 |
|
|
case 'vspace': |
207 |
|
|
v = dom.getStyle(e, 'margin-top') |
208 |
|
|
v2 = dom.getStyle(e, 'margin-bottom'); |
209 |
|
|
if (v && v == v2) |
210 |
|
|
return parseInt(v.replace(/[^0-9]/g, '')); |
211 |
|
|
|
212 |
|
|
break; |
213 |
|
|
|
214 |
|
|
case 'border': |
215 |
|
|
v = 0; |
216 |
|
|
|
217 |
|
|
tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) { |
218 |
|
|
sv = dom.getStyle(e, 'border-' + sv + '-width'); |
219 |
|
|
|
220 |
|
|
// False or not the same as prev |
221 |
|
|
if (!sv || (sv != v && v !== 0)) { |
222 |
|
|
v = 0; |
223 |
|
|
return false; |
224 |
|
|
} |
225 |
|
|
|
226 |
|
|
if (sv) |
227 |
|
|
v = sv; |
228 |
|
|
}); |
229 |
|
|
|
230 |
|
|
if (v) |
231 |
|
|
return parseInt(v.replace(/[^0-9]/g, '')); |
232 |
|
|
|
233 |
|
|
break; |
234 |
|
|
} |
235 |
|
|
} |
236 |
|
|
|
237 |
|
|
if (v = dom.getAttrib(e, at)) |
238 |
|
|
return v; |
239 |
|
|
|
240 |
|
|
return ''; |
241 |
|
|
}, |
242 |
|
|
|
243 |
|
|
setSwapImage : function(st) { |
244 |
|
|
var f = document.forms[0]; |
245 |
|
|
|
246 |
|
|
f.onmousemovecheck.checked = st; |
247 |
|
|
setBrowserDisabled('overbrowser', !st); |
248 |
|
|
setBrowserDisabled('outbrowser', !st); |
249 |
|
|
|
250 |
|
|
if (f.over_list) |
251 |
|
|
f.over_list.disabled = !st; |
252 |
|
|
|
253 |
|
|
if (f.out_list) |
254 |
|
|
f.out_list.disabled = !st; |
255 |
|
|
|
256 |
|
|
f.onmouseoversrc.disabled = !st; |
257 |
|
|
f.onmouseoutsrc.disabled = !st; |
258 |
|
|
}, |
259 |
|
|
|
260 |
|
|
fillClassList : function(id) { |
261 |
|
|
var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl; |
262 |
|
|
|
263 |
|
|
if (v = tinyMCEPopup.getParam('theme_advanced_styles')) { |
264 |
|
|
cl = []; |
265 |
|
|
|
266 |
|
|
tinymce.each(v.split(';'), function(v) { |
267 |
|
|
var p = v.split('='); |
268 |
|
|
|
269 |
|
|
cl.push({'title' : p[0], 'class' : p[1]}); |
270 |
|
|
}); |
271 |
|
|
} else |
272 |
|
|
cl = tinyMCEPopup.editor.dom.getClasses(); |
273 |
|
|
|
274 |
|
|
if (cl.length > 0) { |
275 |
|
|
lst.options.length = 0; |
276 |
|
|
lst.options[lst.options.length] = new Option(tinyMCEPopup.getLang('not_set'), ''); |
277 |
|
|
|
278 |
|
|
tinymce.each(cl, function(o) { |
279 |
|
|
lst.options[lst.options.length] = new Option(o.title || o['class'], o['class']); |
280 |
|
|
}); |
281 |
|
|
} else |
282 |
|
|
dom.remove(dom.getParent(id, 'tr')); |
283 |
|
|
}, |
284 |
|
|
|
285 |
|
|
fillFileList : function(id, l) { |
286 |
|
|
var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl; |
287 |
|
|
|
288 |
|
|
l = window[l]; |
289 |
|
|
lst.options.length = 0; |
290 |
|
|
|
291 |
|
|
if (l && l.length > 0) { |
292 |
|
|
lst.options[lst.options.length] = new Option('', ''); |
293 |
|
|
|
294 |
|
|
tinymce.each(l, function(o) { |
295 |
|
|
lst.options[lst.options.length] = new Option(o[0], o[1]); |
296 |
|
|
}); |
297 |
|
|
} else |
298 |
|
|
dom.remove(dom.getParent(id, 'tr')); |
299 |
|
|
}, |
300 |
|
|
|
301 |
|
|
resetImageData : function() { |
302 |
|
|
var f = document.forms[0]; |
303 |
|
|
|
304 |
|
|
f.elements.width.value = f.elements.height.value = ''; |
305 |
|
|
}, |
306 |
|
|
|
307 |
|
|
updateImageData : function(img, st) { |
308 |
|
|
var f = document.forms[0]; |
309 |
|
|
|
310 |
|
|
if (!st) { |
311 |
|
|
f.elements.width.value = img.width; |
312 |
|
|
f.elements.height.value = img.height; |
313 |
|
|
} |
314 |
|
|
|
315 |
|
|
this.preloadImg = img; |
316 |
|
|
}, |
317 |
|
|
|
318 |
|
|
changeAppearance : function() { |
319 |
|
|
var ed = tinyMCEPopup.editor, f = document.forms[0], img = document.getElementById('alignSampleImg'); |
320 |
|
|
|
321 |
|
|
if (img) { |
322 |
|
|
if (ed.getParam('inline_styles')) { |
323 |
|
|
ed.dom.setAttrib(img, 'style', f.style.value); |
324 |
|
|
} else { |
325 |
|
|
img.align = f.align.value; |
326 |
|
|
img.border = f.border.value; |
327 |
|
|
img.hspace = f.hspace.value; |
328 |
|
|
img.vspace = f.vspace.value; |
329 |
|
|
} |
330 |
|
|
} |
331 |
|
|
}, |
332 |
|
|
|
333 |
|
|
changeHeight : function() { |
334 |
|
|
var f = document.forms[0], tp, t = this; |
335 |
|
|
|
336 |
|
|
if (!f.constrain.checked || !t.preloadImg) { |
337 |
|
|
return; |
338 |
|
|
} |
339 |
|
|
|
340 |
|
|
if (f.width.value == "" || f.height.value == "") |
341 |
|
|
return; |
342 |
|
|
|
343 |
|
|
tp = (parseInt(f.width.value) / parseInt(t.preloadImg.width)) * t.preloadImg.height; |
344 |
|
|
f.height.value = tp.toFixed(0); |
345 |
|
|
}, |
346 |
|
|
|
347 |
|
|
changeWidth : function() { |
348 |
|
|
var f = document.forms[0], tp, t = this; |
349 |
|
|
|
350 |
|
|
if (!f.constrain.checked || !t.preloadImg) { |
351 |
|
|
return; |
352 |
|
|
} |
353 |
|
|
|
354 |
|
|
if (f.width.value == "" || f.height.value == "") |
355 |
|
|
return; |
356 |
|
|
|
357 |
|
|
tp = (parseInt(f.height.value) / parseInt(t.preloadImg.height)) * t.preloadImg.width; |
358 |
|
|
f.width.value = tp.toFixed(0); |
359 |
|
|
}, |
360 |
|
|
|
361 |
|
|
updateStyle : function(ty) { |
362 |
|
|
var dom = tinyMCEPopup.dom, st, v, f = document.forms[0], img = dom.create('img', {style : dom.get('style').value}); |
363 |
|
|
|
364 |
|
|
if (tinyMCEPopup.editor.settings.inline_styles) { |
365 |
|
|
// Handle align |
366 |
|
|
if (ty == 'align') { |
367 |
|
|
dom.setStyle(img, 'float', ''); |
368 |
|
|
dom.setStyle(img, 'vertical-align', ''); |
369 |
|
|
|
370 |
|
|
v = getSelectValue(f, 'align'); |
371 |
|
|
if (v) { |
372 |
|
|
if (v == 'left' || v == 'right') |
373 |
|
|
dom.setStyle(img, 'float', v); |
374 |
|
|
else |
375 |
|
|
img.style.verticalAlign = v; |
376 |
|
|
} |
377 |
|
|
} |
378 |
|
|
|
379 |
|
|
// Handle border |
380 |
|
|
if (ty == 'border') { |
381 |
|
|
dom.setStyle(img, 'border', ''); |
382 |
|
|
|
383 |
|
|
v = f.border.value; |
384 |
|
|
if (v || v == '0') { |
385 |
|
|
if (v == '0') |
386 |
|
|
img.style.border = '0'; |
387 |
|
|
else |
388 |
|
|
img.style.border = v + 'px solid black'; |
389 |
|
|
} |
390 |
|
|
} |
391 |
|
|
|
392 |
|
|
// Handle hspace |
393 |
|
|
if (ty == 'hspace') { |
394 |
|
|
dom.setStyle(img, 'marginLeft', ''); |
395 |
|
|
dom.setStyle(img, 'marginRight', ''); |
396 |
|
|
|
397 |
|
|
v = f.hspace.value; |
398 |
|
|
if (v) { |
399 |
|
|
img.style.marginLeft = v + 'px'; |
400 |
|
|
img.style.marginRight = v + 'px'; |
401 |
|
|
} |
402 |
|
|
} |
403 |
|
|
|
404 |
|
|
// Handle vspace |
405 |
|
|
if (ty == 'vspace') { |
406 |
|
|
dom.setStyle(img, 'marginTop', ''); |
407 |
|
|
dom.setStyle(img, 'marginBottom', ''); |
408 |
|
|
|
409 |
|
|
v = f.vspace.value; |
410 |
|
|
if (v) { |
411 |
|
|
img.style.marginTop = v + 'px'; |
412 |
|
|
img.style.marginBottom = v + 'px'; |
413 |
|
|
} |
414 |
|
|
} |
415 |
|
|
|
416 |
|
|
// Merge |
417 |
|
|
dom.get('style').value = dom.serializeStyle(dom.parseStyle(img.style.cssText), 'img'); |
418 |
|
|
} |
419 |
|
|
}, |
420 |
|
|
|
421 |
|
|
changeMouseMove : function() { |
422 |
|
|
}, |
423 |
|
|
|
424 |
|
|
showPreviewImage : function(u, st) { |
425 |
|
|
if (!u) { |
426 |
|
|
tinyMCEPopup.dom.setHTML('prev', ''); |
427 |
|
|
return; |
428 |
|
|
} |
429 |
|
|
|
430 |
|
|
if (!st && tinyMCEPopup.getParam("advimage_update_dimensions_onchange", true)) |
431 |
|
|
this.resetImageData(); |
432 |
|
|
|
433 |
|
|
u = tinyMCEPopup.editor.documentBaseURI.toAbsolute(u); |
434 |
|
|
|
435 |
|
|
if (!st) |
436 |
|
|
tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this);" onerror="ImageDialog.resetImageData();" />'); |
437 |
|
|
else |
438 |
|
|
tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this, 1);" />'); |
439 |
|
|
} |
440 |
|
|
}; |
441 |
|
|
|
442 |
|
|
ImageDialog.preInit(); |
443 |
|
|
tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog); |