|
1 /* Functions for the advimage plugin popup */ |
|
2 |
|
3 var preloadImg = null; |
|
4 var orgImageWidth, orgImageHeight; |
|
5 |
|
6 function preinit() { |
|
7 // Initialize |
|
8 tinyMCE.setWindowArg('mce_windowresize', false); |
|
9 |
|
10 // Import external list url javascript |
|
11 var url = tinyMCE.getParam("external_image_list_url"); |
|
12 if (url != null) { |
|
13 // Fix relative |
|
14 if (url.charAt(0) != '/' && url.indexOf('://') == -1) |
|
15 url = tinyMCE.documentBasePath + "/" + url; |
|
16 |
|
17 document.write('<sc'+'ript language="javascript" type="text/javascript" src="' + url + '"></sc'+'ript>'); |
|
18 } |
|
19 } |
|
20 |
|
21 function convertURL(url, node, on_save) { |
|
22 return eval("tinyMCEPopup.windowOpener." + tinyMCE.settings['urlconverter_callback'] + "(url, node, on_save);"); |
|
23 } |
|
24 |
|
25 function getImageSrc(str) { |
|
26 var pos = -1; |
|
27 |
|
28 if (!str) |
|
29 return ""; |
|
30 |
|
31 if ((pos = str.indexOf('this.src=')) != -1) { |
|
32 var src = str.substring(pos + 10); |
|
33 |
|
34 src = src.substring(0, src.indexOf('\'')); |
|
35 |
|
36 if (tinyMCE.getParam('convert_urls')) |
|
37 src = convertURL(src, null, true); |
|
38 |
|
39 return src; |
|
40 } |
|
41 |
|
42 return ""; |
|
43 } |
|
44 |
|
45 function init() { |
|
46 tinyMCEPopup.resizeToInnerSize(); |
|
47 |
|
48 var formObj = document.forms[0]; |
|
49 var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id')); |
|
50 var elm = inst.getFocusElement(); |
|
51 var action = "insert"; |
|
52 var html = ""; |
|
53 |
|
54 // Image list src |
|
55 html = getImageListHTML('imagelistsrc','src','onSelectMainImage'); |
|
56 if (html == "") |
|
57 document.getElementById("imagelistsrcrow").style.display = 'none'; |
|
58 else |
|
59 document.getElementById("imagelistsrccontainer").innerHTML = html; |
|
60 |
|
61 // Image list oversrc |
|
62 html = getImageListHTML('imagelistover','onmouseoversrc'); |
|
63 if (html == "") |
|
64 document.getElementById("imagelistoverrow").style.display = 'none'; |
|
65 else |
|
66 document.getElementById("imagelistovercontainer").innerHTML = html; |
|
67 |
|
68 // Image list outsrc |
|
69 html = getImageListHTML('imagelistout','onmouseoutsrc'); |
|
70 if (html == "") |
|
71 document.getElementById("imagelistoutrow").style.display = 'none'; |
|
72 else |
|
73 document.getElementById("imagelistoutcontainer").innerHTML = html; |
|
74 |
|
75 // Src browser |
|
76 html = getBrowserHTML('srcbrowser','src','image','advimage'); |
|
77 document.getElementById("srcbrowsercontainer").innerHTML = html; |
|
78 |
|
79 // Over browser |
|
80 html = getBrowserHTML('oversrcbrowser','onmouseoversrc','image','advimage'); |
|
81 document.getElementById("onmouseoversrccontainer").innerHTML = html; |
|
82 |
|
83 // Out browser |
|
84 html = getBrowserHTML('outsrcbrowser','onmouseoutsrc','image','advimage'); |
|
85 document.getElementById("onmouseoutsrccontainer").innerHTML = html; |
|
86 |
|
87 // Longdesc browser |
|
88 html = getBrowserHTML('longdescbrowser','longdesc','file','advimage'); |
|
89 document.getElementById("longdesccontainer").innerHTML = html; |
|
90 |
|
91 // Resize some elements |
|
92 if (isVisible('srcbrowser')) |
|
93 document.getElementById('src').style.width = '260px'; |
|
94 |
|
95 if (isVisible('oversrcbrowser')) |
|
96 document.getElementById('onmouseoversrc').style.width = '260px'; |
|
97 |
|
98 if (isVisible('outsrcbrowser')) |
|
99 document.getElementById('onmouseoutsrc').style.width = '260px'; |
|
100 |
|
101 if (isVisible('longdescbrowser')) |
|
102 document.getElementById('longdesc').style.width = '180px'; |
|
103 |
|
104 // Check action |
|
105 if (elm != null && elm.nodeName == "IMG") |
|
106 action = "update"; |
|
107 |
|
108 formObj.insert.value = tinyMCE.getLang('lang_' + action, 'Insert', true); |
|
109 |
|
110 if (action == "update") { |
|
111 var src = tinyMCE.getAttrib(elm, 'src'); |
|
112 var onmouseoversrc = getImageSrc(tinyMCE.cleanupEventStr(tinyMCE.getAttrib(elm, 'onmouseover'))); |
|
113 var onmouseoutsrc = getImageSrc(tinyMCE.cleanupEventStr(tinyMCE.getAttrib(elm, 'onmouseout'))); |
|
114 |
|
115 src = convertURL(src, elm, true); |
|
116 |
|
117 // Use mce_src if found |
|
118 var mceRealSrc = tinyMCE.getAttrib(elm, 'mce_src'); |
|
119 if (mceRealSrc != "") { |
|
120 src = mceRealSrc; |
|
121 |
|
122 if (tinyMCE.getParam('convert_urls')) |
|
123 src = convertURL(src, elm, true); |
|
124 } |
|
125 |
|
126 if (onmouseoversrc != "" && tinyMCE.getParam('convert_urls')) |
|
127 onmouseoversrc = convertURL(onmouseoversrc, elm, true); |
|
128 |
|
129 if (onmouseoutsrc != "" && tinyMCE.getParam('convert_urls')) |
|
130 onmouseoutsrc = convertURL(onmouseoutsrc, elm, true); |
|
131 |
|
132 // Setup form data |
|
133 var style = tinyMCE.parseStyle(tinyMCE.getAttrib(elm, "style")); |
|
134 |
|
135 // Store away old size |
|
136 orgImageWidth = trimSize(getStyle(elm, 'width')) |
|
137 orgImageHeight = trimSize(getStyle(elm, 'height')); |
|
138 |
|
139 formObj.src.value = src; |
|
140 formObj.alt.value = tinyMCE.getAttrib(elm, 'alt'); |
|
141 formObj.title.value = tinyMCE.getAttrib(elm, 'title'); |
|
142 formObj.border.value = trimSize(getStyle(elm, 'border', 'borderWidth')); |
|
143 formObj.vspace.value = tinyMCE.getAttrib(elm, 'vspace'); |
|
144 formObj.hspace.value = tinyMCE.getAttrib(elm, 'hspace'); |
|
145 formObj.width.value = orgImageWidth; |
|
146 formObj.height.value = orgImageHeight; |
|
147 formObj.onmouseoversrc.value = onmouseoversrc; |
|
148 formObj.onmouseoutsrc.value = onmouseoutsrc; |
|
149 formObj.id.value = tinyMCE.getAttrib(elm, 'id'); |
|
150 formObj.dir.value = tinyMCE.getAttrib(elm, 'dir'); |
|
151 formObj.lang.value = tinyMCE.getAttrib(elm, 'lang'); |
|
152 formObj.longdesc.value = tinyMCE.getAttrib(elm, 'longdesc'); |
|
153 formObj.usemap.value = tinyMCE.getAttrib(elm, 'usemap'); |
|
154 formObj.style.value = tinyMCE.serializeStyle(style); |
|
155 |
|
156 // Select by the values |
|
157 if (tinyMCE.isMSIE) |
|
158 selectByValue(formObj, 'align', getStyle(elm, 'align', 'styleFloat')); |
|
159 else |
|
160 selectByValue(formObj, 'align', getStyle(elm, 'align', 'cssFloat')); |
|
161 |
|
162 addClassesToList('classlist', 'advimage_styles'); |
|
163 |
|
164 selectByValue(formObj, 'classlist', tinyMCE.getAttrib(elm, 'class')); |
|
165 selectByValue(formObj, 'imagelistsrc', src); |
|
166 selectByValue(formObj, 'imagelistover', onmouseoversrc); |
|
167 selectByValue(formObj, 'imagelistout', onmouseoutsrc); |
|
168 |
|
169 updateStyle(); |
|
170 showPreviewImage(src, true); |
|
171 changeAppearance(); |
|
172 |
|
173 window.focus(); |
|
174 } else |
|
175 addClassesToList('classlist', 'advimage_styles'); |
|
176 |
|
177 // If option enabled default contrain proportions to checked |
|
178 if (tinyMCE.getParam("advimage_constrain_proportions", true)) |
|
179 formObj.constrain.checked = true; |
|
180 |
|
181 // Check swap image if valid data |
|
182 if (formObj.onmouseoversrc.value != "" || formObj.onmouseoutsrc.value != "") |
|
183 setSwapImageDisabled(false); |
|
184 else |
|
185 setSwapImageDisabled(true); |
|
186 } |
|
187 |
|
188 function setSwapImageDisabled(state) { |
|
189 var formObj = document.forms[0]; |
|
190 |
|
191 formObj.onmousemovecheck.checked = !state; |
|
192 |
|
193 setBrowserDisabled('overbrowser', state); |
|
194 setBrowserDisabled('outbrowser', state); |
|
195 |
|
196 if (formObj.imagelistover) |
|
197 formObj.imagelistover.disabled = state; |
|
198 |
|
199 if (formObj.imagelistout) |
|
200 formObj.imagelistout.disabled = state; |
|
201 |
|
202 formObj.onmouseoversrc.disabled = state; |
|
203 formObj.onmouseoutsrc.disabled = state; |
|
204 } |
|
205 |
|
206 function setAttrib(elm, attrib, value) { |
|
207 var formObj = document.forms[0]; |
|
208 var valueElm = formObj.elements[attrib]; |
|
209 |
|
210 if (typeof(value) == "undefined" || value == null) { |
|
211 value = ""; |
|
212 |
|
213 if (valueElm) |
|
214 value = valueElm.value; |
|
215 } |
|
216 |
|
217 if (value != "") { |
|
218 elm.setAttribute(attrib, value); |
|
219 |
|
220 if (attrib == "style") |
|
221 attrib = "style.cssText"; |
|
222 |
|
223 if (attrib == "longdesc") |
|
224 attrib = "longDesc"; |
|
225 |
|
226 if (attrib == "width") { |
|
227 attrib = "style.width"; |
|
228 value = value + "px"; |
|
229 value = value.replace(/%px/g, 'px'); |
|
230 } |
|
231 |
|
232 if (attrib == "height") { |
|
233 attrib = "style.height"; |
|
234 value = value + "px"; |
|
235 value = value.replace(/%px/g, 'px'); |
|
236 } |
|
237 |
|
238 if (attrib == "class") |
|
239 attrib = "className"; |
|
240 |
|
241 eval('elm.' + attrib + "=value;"); |
|
242 } else |
|
243 elm.removeAttribute(attrib); |
|
244 } |
|
245 |
|
246 function makeAttrib(attrib, value) { |
|
247 var formObj = document.forms[0]; |
|
248 var valueElm = formObj.elements[attrib]; |
|
249 |
|
250 if (typeof(value) == "undefined" || value == null) { |
|
251 value = ""; |
|
252 |
|
253 if (valueElm) |
|
254 value = valueElm.value; |
|
255 } |
|
256 |
|
257 if (value == "") |
|
258 return ""; |
|
259 |
|
260 // XML encode it |
|
261 value = value.replace(/&/g, '&'); |
|
262 value = value.replace(/\"/g, '"'); |
|
263 value = value.replace(/</g, '<'); |
|
264 value = value.replace(/>/g, '>'); |
|
265 |
|
266 return ' ' + attrib + '="' + value + '"'; |
|
267 } |
|
268 |
|
269 function insertAction() { |
|
270 var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id')); |
|
271 var elm = inst.getFocusElement(); |
|
272 var formObj = document.forms[0]; |
|
273 var src = formObj.src.value; |
|
274 var onmouseoversrc = formObj.onmouseoversrc.value; |
|
275 var onmouseoutsrc = formObj.onmouseoutsrc.value; |
|
276 |
|
277 if (!AutoValidator.validate(formObj)) { |
|
278 alert(tinyMCE.getLang('lang_invalid_data')); |
|
279 return false; |
|
280 } |
|
281 |
|
282 if (tinyMCE.getParam("accessibility_warnings")) { |
|
283 if (formObj.alt.value == "" && !confirm(tinyMCE.getLang('lang_advimage_missing_alt', '', true))) |
|
284 return; |
|
285 } |
|
286 |
|
287 if (onmouseoversrc && onmouseoversrc != "") |
|
288 onmouseoversrc = "this.src='" + convertURL(onmouseoversrc, tinyMCE.imgElement) + "';"; |
|
289 |
|
290 if (onmouseoutsrc && onmouseoutsrc != "") |
|
291 onmouseoutsrc = "this.src='" + convertURL(onmouseoutsrc, tinyMCE.imgElement) + "';"; |
|
292 |
|
293 if (elm != null && elm.nodeName == "IMG") { |
|
294 setAttrib(elm, 'src', convertURL(src, tinyMCE.imgElement)); |
|
295 setAttrib(elm, 'mce_src', src); |
|
296 setAttrib(elm, 'alt'); |
|
297 setAttrib(elm, 'title'); |
|
298 setAttrib(elm, 'border'); |
|
299 setAttrib(elm, 'vspace'); |
|
300 setAttrib(elm, 'hspace'); |
|
301 setAttrib(elm, 'width'); |
|
302 setAttrib(elm, 'height'); |
|
303 setAttrib(elm, 'onmouseover', onmouseoversrc); |
|
304 setAttrib(elm, 'onmouseout', onmouseoutsrc); |
|
305 setAttrib(elm, 'id'); |
|
306 setAttrib(elm, 'dir'); |
|
307 setAttrib(elm, 'lang'); |
|
308 setAttrib(elm, 'longdesc'); |
|
309 setAttrib(elm, 'usemap'); |
|
310 setAttrib(elm, 'style'); |
|
311 setAttrib(elm, 'class', getSelectValue(formObj, 'classlist')); |
|
312 setAttrib(elm, 'align', getSelectValue(formObj, 'align')); |
|
313 |
|
314 //tinyMCEPopup.execCommand("mceRepaint"); |
|
315 |
|
316 // Repaint if dimensions changed |
|
317 if (formObj.width.value != orgImageWidth || formObj.height.value != orgImageHeight) |
|
318 inst.repaint(); |
|
319 |
|
320 // Refresh in old MSIE |
|
321 if (tinyMCE.isMSIE5) |
|
322 elm.outerHTML = elm.outerHTML; |
|
323 } else { |
|
324 var html = "<img"; |
|
325 |
|
326 html += makeAttrib('src', convertURL(src, tinyMCE.imgElement)); |
|
327 html += makeAttrib('mce_src', src); |
|
328 html += makeAttrib('alt'); |
|
329 html += makeAttrib('title'); |
|
330 html += makeAttrib('border'); |
|
331 html += makeAttrib('vspace'); |
|
332 html += makeAttrib('hspace'); |
|
333 html += makeAttrib('width'); |
|
334 html += makeAttrib('height'); |
|
335 html += makeAttrib('onmouseover', onmouseoversrc); |
|
336 html += makeAttrib('onmouseout', onmouseoutsrc); |
|
337 html += makeAttrib('id'); |
|
338 html += makeAttrib('dir'); |
|
339 html += makeAttrib('lang'); |
|
340 html += makeAttrib('longdesc'); |
|
341 html += makeAttrib('usemap'); |
|
342 html += makeAttrib('style'); |
|
343 html += makeAttrib('class', getSelectValue(formObj, 'classlist')); |
|
344 html += makeAttrib('align', getSelectValue(formObj, 'align')); |
|
345 html += " />"; |
|
346 |
|
347 tinyMCEPopup.execCommand("mceInsertContent", false, html); |
|
348 } |
|
349 |
|
350 tinyMCE._setEventsEnabled(inst.getBody(), false); |
|
351 tinyMCEPopup.close(); |
|
352 } |
|
353 |
|
354 function cancelAction() { |
|
355 tinyMCEPopup.close(); |
|
356 } |
|
357 |
|
358 function changeAppearance() { |
|
359 var formObj = document.forms[0]; |
|
360 var img = document.getElementById('alignSampleImg'); |
|
361 |
|
362 if (img) { |
|
363 img.align = formObj.align.value; |
|
364 img.border = formObj.border.value; |
|
365 img.hspace = formObj.hspace.value; |
|
366 img.vspace = formObj.vspace.value; |
|
367 } |
|
368 } |
|
369 |
|
370 function changeMouseMove() { |
|
371 var formObj = document.forms[0]; |
|
372 |
|
373 setSwapImageDisabled(!formObj.onmousemovecheck.checked); |
|
374 } |
|
375 |
|
376 function updateStyle() { |
|
377 var formObj = document.forms[0]; |
|
378 var st = tinyMCE.parseStyle(formObj.style.value); |
|
379 |
|
380 if (tinyMCE.getParam('inline_styles', false)) { |
|
381 st['width'] = formObj.width.value == '' ? '' : formObj.width.value + "px"; |
|
382 st['height'] = formObj.height.value == '' ? '' : formObj.height.value + "px"; |
|
383 st['border-width'] = formObj.border.value == '' ? '' : formObj.border.value + "px"; |
|
384 st['margin-top'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px"; |
|
385 st['margin-bottom'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px"; |
|
386 st['margin-left'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px"; |
|
387 st['margin-right'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px"; |
|
388 } else { |
|
389 st['width'] = st['height'] = st['border-width'] = null; |
|
390 |
|
391 if (st['margin-top'] == st['margin-bottom']) |
|
392 st['margin-top'] = st['margin-bottom'] = null; |
|
393 |
|
394 if (st['margin-left'] == st['margin-right']) |
|
395 st['margin-left'] = st['margin-right'] = null; |
|
396 } |
|
397 |
|
398 formObj.style.value = tinyMCE.serializeStyle(st); |
|
399 } |
|
400 |
|
401 function styleUpdated() { |
|
402 var formObj = document.forms[0]; |
|
403 var st = tinyMCE.parseStyle(formObj.style.value); |
|
404 |
|
405 if (st['width']) |
|
406 formObj.width.value = st['width'].replace('px', ''); |
|
407 |
|
408 if (st['height']) |
|
409 formObj.height.value = st['height'].replace('px', ''); |
|
410 |
|
411 if (st['margin-top'] && st['margin-top'] == st['margin-bottom']) |
|
412 formObj.vspace.value = st['margin-top'].replace('px', ''); |
|
413 |
|
414 if (st['margin-left'] && st['margin-left'] == st['margin-right']) |
|
415 formObj.hspace.value = st['margin-left'].replace('px', ''); |
|
416 |
|
417 if (st['border-width']) |
|
418 formObj.border.value = st['border-width'].replace('px', ''); |
|
419 } |
|
420 |
|
421 function changeHeight() { |
|
422 var formObj = document.forms[0]; |
|
423 |
|
424 if (!formObj.constrain.checked || !preloadImg) { |
|
425 updateStyle(); |
|
426 return; |
|
427 } |
|
428 |
|
429 if (formObj.width.value == "" || formObj.height.value == "") |
|
430 return; |
|
431 |
|
432 var temp = (parseInt(formObj.width.value) / parseInt(preloadImg.width)) * preloadImg.height; |
|
433 formObj.height.value = temp.toFixed(0); |
|
434 updateStyle(); |
|
435 } |
|
436 |
|
437 function changeWidth() { |
|
438 var formObj = document.forms[0]; |
|
439 |
|
440 if (!formObj.constrain.checked || !preloadImg) { |
|
441 updateStyle(); |
|
442 return; |
|
443 } |
|
444 |
|
445 if (formObj.width.value == "" || formObj.height.value == "") |
|
446 return; |
|
447 |
|
448 var temp = (parseInt(formObj.height.value) / parseInt(preloadImg.height)) * preloadImg.width; |
|
449 formObj.width.value = temp.toFixed(0); |
|
450 updateStyle(); |
|
451 } |
|
452 |
|
453 function onSelectMainImage(target_form_element, name, value) { |
|
454 var formObj = document.forms[0]; |
|
455 |
|
456 formObj.alt.value = name; |
|
457 formObj.title.value = name; |
|
458 |
|
459 resetImageData(); |
|
460 showPreviewImage(formObj.elements[target_form_element].value, false); |
|
461 } |
|
462 |
|
463 function showPreviewImage(src, start) { |
|
464 var formObj = document.forms[0]; |
|
465 |
|
466 selectByValue(document.forms[0], 'imagelistsrc', src); |
|
467 |
|
468 var elm = document.getElementById('prev'); |
|
469 var src = src == "" ? src : tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], src); |
|
470 |
|
471 if (!start && tinyMCE.getParam("advimage_update_dimensions_onchange", true)) |
|
472 resetImageData(); |
|
473 |
|
474 if (src == "") |
|
475 elm.innerHTML = ""; |
|
476 else |
|
477 elm.innerHTML = '<img id="previewImg" src="' + src + '" border="0" onload="updateImageData();" onerror="resetImageData();" />' |
|
478 } |
|
479 |
|
480 function updateImageData() { |
|
481 var formObj = document.forms[0]; |
|
482 |
|
483 preloadImg = document.getElementById('previewImg'); |
|
484 |
|
485 if (formObj.width.value == "") |
|
486 formObj.width.value = preloadImg.width; |
|
487 |
|
488 if (formObj.height.value == "") |
|
489 formObj.height.value = preloadImg.height; |
|
490 |
|
491 updateStyle(); |
|
492 } |
|
493 |
|
494 function resetImageData() { |
|
495 var formObj = document.forms[0]; |
|
496 formObj.width.value = formObj.height.value = ""; |
|
497 } |
|
498 |
|
499 function getSelectValue(form_obj, field_name) { |
|
500 var elm = form_obj.elements[field_name]; |
|
501 |
|
502 if (elm == null || elm.options == null) |
|
503 return ""; |
|
504 |
|
505 return elm.options[elm.selectedIndex].value; |
|
506 } |
|
507 |
|
508 function getImageListHTML(elm_id, target_form_element, onchange_func) { |
|
509 if (typeof(tinyMCEImageList) == "undefined" || tinyMCEImageList.length == 0) |
|
510 return ""; |
|
511 |
|
512 var html = ""; |
|
513 |
|
514 html += '<select id="' + elm_id + '" name="' + elm_id + '"'; |
|
515 html += ' class="mceImageList" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="this.form.' + target_form_element + '.value='; |
|
516 html += 'this.options[this.selectedIndex].value;'; |
|
517 |
|
518 if (typeof(onchange_func) != "undefined") |
|
519 html += onchange_func + '(\'' + target_form_element + '\',this.options[this.selectedIndex].text,this.options[this.selectedIndex].value);'; |
|
520 |
|
521 html += '"><option value="">---</option>'; |
|
522 |
|
523 for (var i=0; i<tinyMCEImageList.length; i++) |
|
524 html += '<option value="' + tinyMCEImageList[i][1] + '">' + tinyMCEImageList[i][0] + '</option>'; |
|
525 |
|
526 html += '</select>'; |
|
527 |
|
528 return html; |
|
529 |
|
530 // tinyMCE.debug('-- image list start --', html, '-- image list end --'); |
|
531 } |
|
532 |
|
533 // While loading |
|
534 preinit(); |