1 /* Functions for the advimage plugin popup */
\r
3 var preloadImg = null;
\r
4 var orgImageWidth, orgImageHeight;
\r
8 tinyMCE.setWindowArg('mce_windowresize', false);
\r
10 // Import external list url javascript
\r
11 var url = tinyMCE.getParam("external_image_list_url");
\r
14 if (url.charAt(0) != '/' && url.indexOf('://') == -1)
\r
15 url = tinyMCE.documentBasePath + "/" + url;
\r
17 document.write('<sc'+'ript language="javascript" type="text/javascript" src="' + url + '"></sc'+'ript>');
\r
21 function convertURL(url, node, on_save) {
\r
22 return eval("tinyMCEPopup.windowOpener." + tinyMCE.settings['urlconverter_callback'] + "(url, node, on_save);");
\r
25 function getImageSrc(str) {
\r
31 if ((pos = str.indexOf('this.src=')) != -1) {
\r
32 var src = str.substring(pos + 10);
\r
34 src = src.substring(0, src.indexOf('\''));
\r
36 if (tinyMCE.getParam('convert_urls'))
\r
37 src = convertURL(src, null, true);
\r
46 tinyMCEPopup.resizeToInnerSize();
\r
48 var formObj = document.forms[0];
\r
49 var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));
\r
50 var elm = inst.getFocusElement();
\r
51 var action = "insert";
\r
55 html = getImageListHTML('imagelistsrc','src','onSelectMainImage');
\r
57 document.getElementById("imagelistsrcrow").style.display = 'none';
\r
59 document.getElementById("imagelistsrccontainer").innerHTML = html;
\r
61 // Image list oversrc
\r
62 html = getImageListHTML('imagelistover','onmouseoversrc');
\r
64 document.getElementById("imagelistoverrow").style.display = 'none';
\r
66 document.getElementById("imagelistovercontainer").innerHTML = html;
\r
68 // Image list outsrc
\r
69 html = getImageListHTML('imagelistout','onmouseoutsrc');
\r
71 document.getElementById("imagelistoutrow").style.display = 'none';
\r
73 document.getElementById("imagelistoutcontainer").innerHTML = html;
\r
76 html = getBrowserHTML('srcbrowser','src','image','advimage');
\r
77 document.getElementById("srcbrowsercontainer").innerHTML = html;
\r
80 html = getBrowserHTML('oversrcbrowser','onmouseoversrc','image','advimage');
\r
81 document.getElementById("onmouseoversrccontainer").innerHTML = html;
\r
84 html = getBrowserHTML('outsrcbrowser','onmouseoutsrc','image','advimage');
\r
85 document.getElementById("onmouseoutsrccontainer").innerHTML = html;
\r
88 html = getBrowserHTML('longdescbrowser','longdesc','file','advimage');
\r
89 document.getElementById("longdesccontainer").innerHTML = html;
\r
91 // Resize some elements
\r
92 if (isVisible('srcbrowser'))
\r
93 document.getElementById('src').style.width = '260px';
\r
95 if (isVisible('oversrcbrowser'))
\r
96 document.getElementById('onmouseoversrc').style.width = '260px';
\r
98 if (isVisible('outsrcbrowser'))
\r
99 document.getElementById('onmouseoutsrc').style.width = '260px';
\r
101 if (isVisible('longdescbrowser'))
\r
102 document.getElementById('longdesc').style.width = '180px';
\r
105 if (elm != null && elm.nodeName == "IMG")
\r
108 formObj.insert.value = tinyMCE.getLang('lang_' + action, 'Insert', true);
\r
110 if (action == "update") {
\r
111 var src = tinyMCE.getAttrib(elm, 'src');
\r
112 var onmouseoversrc = getImageSrc(tinyMCE.cleanupEventStr(tinyMCE.getAttrib(elm, 'onmouseover')));
\r
113 var onmouseoutsrc = getImageSrc(tinyMCE.cleanupEventStr(tinyMCE.getAttrib(elm, 'onmouseout')));
\r
115 src = convertURL(src, elm, true);
\r
117 // Use mce_src if found
\r
118 var mceRealSrc = tinyMCE.getAttrib(elm, 'mce_src');
\r
119 if (mceRealSrc != "") {
\r
122 if (tinyMCE.getParam('convert_urls'))
\r
123 src = convertURL(src, elm, true);
\r
126 if (onmouseoversrc != "" && tinyMCE.getParam('convert_urls'))
\r
127 onmouseoversrc = convertURL(onmouseoversrc, elm, true);
\r
129 if (onmouseoutsrc != "" && tinyMCE.getParam('convert_urls'))
\r
130 onmouseoutsrc = convertURL(onmouseoutsrc, elm, true);
\r
133 var style = tinyMCE.parseStyle(tinyMCE.getAttrib(elm, "style"));
\r
135 // Store away old size
\r
136 orgImageWidth = trimSize(getStyle(elm, 'width'))
\r
137 orgImageHeight = trimSize(getStyle(elm, 'height'));
\r
139 formObj.src.value = src;
\r
140 formObj.alt.value = tinyMCE.getAttrib(elm, 'alt');
\r
141 formObj.title.value = tinyMCE.getAttrib(elm, 'title');
\r
142 formObj.border.value = trimSize(getStyle(elm, 'border', 'borderWidth'));
\r
143 formObj.vspace.value = tinyMCE.getAttrib(elm, 'vspace');
\r
144 formObj.hspace.value = tinyMCE.getAttrib(elm, 'hspace');
\r
145 formObj.width.value = orgImageWidth;
\r
146 formObj.height.value = orgImageHeight;
\r
147 formObj.onmouseoversrc.value = onmouseoversrc;
\r
148 formObj.onmouseoutsrc.value = onmouseoutsrc;
\r
149 formObj.id.value = tinyMCE.getAttrib(elm, 'id');
\r
150 formObj.dir.value = tinyMCE.getAttrib(elm, 'dir');
\r
151 formObj.lang.value = tinyMCE.getAttrib(elm, 'lang');
\r
152 formObj.longdesc.value = tinyMCE.getAttrib(elm, 'longdesc');
\r
153 formObj.usemap.value = tinyMCE.getAttrib(elm, 'usemap');
\r
154 formObj.style.value = tinyMCE.serializeStyle(style);
\r
156 // Select by the values
\r
157 if (tinyMCE.isMSIE)
\r
158 selectByValue(formObj, 'align', getStyle(elm, 'align', 'styleFloat'));
\r
160 selectByValue(formObj, 'align', getStyle(elm, 'align', 'cssFloat'));
\r
162 addClassesToList('classlist', 'advimage_styles');
\r
164 selectByValue(formObj, 'classlist', tinyMCE.getAttrib(elm, 'class'));
\r
165 selectByValue(formObj, 'imagelistsrc', src);
\r
166 selectByValue(formObj, 'imagelistover', onmouseoversrc);
\r
167 selectByValue(formObj, 'imagelistout', onmouseoutsrc);
\r
170 showPreviewImage(src, true);
\r
171 changeAppearance();
\r
175 addClassesToList('classlist', 'advimage_styles');
\r
177 // If option enabled default contrain proportions to checked
\r
178 if (tinyMCE.getParam("advimage_constrain_proportions", true))
\r
179 formObj.constrain.checked = true;
\r
181 // Check swap image if valid data
\r
182 if (formObj.onmouseoversrc.value != "" || formObj.onmouseoutsrc.value != "")
\r
183 setSwapImageDisabled(false);
\r
185 setSwapImageDisabled(true);
\r
188 function setSwapImageDisabled(state) {
\r
189 var formObj = document.forms[0];
\r
191 formObj.onmousemovecheck.checked = !state;
\r
193 setBrowserDisabled('overbrowser', state);
\r
194 setBrowserDisabled('outbrowser', state);
\r
196 if (formObj.imagelistover)
\r
197 formObj.imagelistover.disabled = state;
\r
199 if (formObj.imagelistout)
\r
200 formObj.imagelistout.disabled = state;
\r
202 formObj.onmouseoversrc.disabled = state;
\r
203 formObj.onmouseoutsrc.disabled = state;
\r
206 function setAttrib(elm, attrib, value) {
\r
207 var formObj = document.forms[0];
\r
208 var valueElm = formObj.elements[attrib];
\r
210 if (typeof(value) == "undefined" || value == null) {
\r
214 value = valueElm.value;
\r
218 elm.setAttribute(attrib, value);
\r
220 if (attrib == "style")
\r
221 attrib = "style.cssText";
\r
223 if (attrib == "longdesc")
\r
224 attrib = "longDesc";
\r
226 if (attrib == "width") {
\r
227 attrib = "style.width";
\r
228 value = value + "px";
\r
231 if (attrib == "height") {
\r
232 attrib = "style.height";
\r
233 value = value + "px";
\r
236 if (attrib == "class")
\r
237 attrib = "className";
\r
239 eval('elm.' + attrib + "=value;");
\r
241 elm.removeAttribute(attrib);
\r
244 function makeAttrib(attrib, value) {
\r
245 var formObj = document.forms[0];
\r
246 var valueElm = formObj.elements[attrib];
\r
248 if (typeof(value) == "undefined" || value == null) {
\r
252 value = valueElm.value;
\r
259 value = value.replace(/&/g, '&');
\r
260 value = value.replace(/\"/g, '"');
\r
261 value = value.replace(/</g, '<');
\r
262 value = value.replace(/>/g, '&gr;');
\r
264 return ' ' + attrib + '="' + value + '"';
\r
267 function insertAction() {
\r
268 var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));
\r
269 var elm = inst.getFocusElement();
\r
270 var formObj = document.forms[0];
\r
271 var src = formObj.src.value;
\r
272 var onmouseoversrc = formObj.onmouseoversrc.value;
\r
273 var onmouseoutsrc = formObj.onmouseoutsrc.value;
\r
275 if (tinyMCE.getParam("accessibility_warnings")) {
\r
276 if (formObj.alt.value == "") {
\r
277 var answer = confirm(tinyMCE.getLang('lang_advimage_missing_alt', '', true));
\r
278 if (answer == true) {
\r
279 formObj.alt.value = " ";
\r
289 if (onmouseoversrc && onmouseoversrc != "")
\r
290 onmouseoversrc = "this.src='" + convertURL(onmouseoversrc, tinyMCE.imgElement) + "';";
\r
292 if (onmouseoutsrc && onmouseoutsrc != "")
\r
293 onmouseoutsrc = "this.src='" + convertURL(onmouseoutsrc, tinyMCE.imgElement) + "';";
\r
295 if (elm != null && elm.nodeName == "IMG") {
\r
296 setAttrib(elm, 'src', convertURL(src, tinyMCE.imgElement));
\r
297 setAttrib(elm, 'mce_src', src);
\r
298 setAttrib(elm, 'alt');
\r
299 setAttrib(elm, 'title');
\r
300 setAttrib(elm, 'border');
\r
301 setAttrib(elm, 'vspace');
\r
302 setAttrib(elm, 'hspace');
\r
303 setAttrib(elm, 'width');
\r
304 setAttrib(elm, 'height');
\r
305 setAttrib(elm, 'onmouseover', onmouseoversrc);
\r
306 setAttrib(elm, 'onmouseout', onmouseoutsrc);
\r
307 setAttrib(elm, 'id');
\r
308 setAttrib(elm, 'dir');
\r
309 setAttrib(elm, 'lang');
\r
310 setAttrib(elm, 'longdesc');
\r
311 setAttrib(elm, 'usemap');
\r
312 setAttrib(elm, 'style');
\r
313 setAttrib(elm, 'class', getSelectValue(formObj, 'classlist'));
\r
314 setAttrib(elm, 'align', getSelectValue(formObj, 'align'));
\r
316 //tinyMCEPopup.execCommand("mceRepaint");
\r
318 // Repaint if dimensions changed
\r
319 if (formObj.width.value != orgImageWidth || formObj.height.value != orgImageHeight)
\r
322 // Refresh in old MSIE
\r
323 if (tinyMCE.isMSIE5)
\r
324 elm.outerHTML = elm.outerHTML;
\r
328 html += makeAttrib('src', convertURL(src, tinyMCE.imgElement));
\r
329 html += makeAttrib('mce_src', src);
\r
330 html += makeAttrib('alt');
\r
331 html += makeAttrib('title');
\r
332 html += makeAttrib('border');
\r
333 html += makeAttrib('vspace');
\r
334 html += makeAttrib('hspace');
\r
335 html += makeAttrib('width');
\r
336 html += makeAttrib('height');
\r
337 html += makeAttrib('onmouseover', onmouseoversrc);
\r
338 html += makeAttrib('onmouseout', onmouseoutsrc);
\r
339 html += makeAttrib('id');
\r
340 html += makeAttrib('dir');
\r
341 html += makeAttrib('lang');
\r
342 html += makeAttrib('longdesc');
\r
343 html += makeAttrib('usemap');
\r
344 html += makeAttrib('style');
\r
345 html += makeAttrib('class', getSelectValue(formObj, 'classlist'));
\r
346 html += makeAttrib('align', getSelectValue(formObj, 'align'));
\r
349 tinyMCEPopup.execCommand("mceInsertContent", false, html);
\r
352 tinyMCE._setEventsEnabled(inst.getBody(), false);
\r
353 tinyMCEPopup.close();
\r
356 function cancelAction() {
\r
357 tinyMCEPopup.close();
\r
360 function changeAppearance() {
\r
361 var formObj = document.forms[0];
\r
362 var img = document.getElementById('alignSampleImg');
\r
365 img.align = formObj.align.value;
\r
366 img.border = formObj.border.value;
\r
367 img.hspace = formObj.hspace.value;
\r
368 img.vspace = formObj.vspace.value;
\r
372 function changeMouseMove() {
\r
373 var formObj = document.forms[0];
\r
375 setSwapImageDisabled(!formObj.onmousemovecheck.checked);
\r
378 function updateStyle() {
\r
379 var formObj = document.forms[0];
\r
380 var st = tinyMCE.parseStyle(formObj.style.value);
\r
382 if (tinyMCE.getParam('inline_styles', false)) {
\r
383 st['width'] = formObj.width.value == '' ? '' : formObj.width.value + "px";
\r
384 st['height'] = formObj.height.value == '' ? '' : formObj.height.value + "px";
\r
385 st['border-width'] = formObj.border.value == '' ? '' : formObj.border.value + "px";
\r
386 st['margin-top'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px";
\r
387 st['margin-bottom'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px";
\r
388 st['margin-left'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px";
\r
389 st['margin-right'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px";
\r
391 st['width'] = st['height'] = st['border-width'] = null;
\r
393 if (st['margin-top'] == st['margin-bottom'])
\r
394 st['margin-top'] = st['margin-bottom'] = null;
\r
396 if (st['margin-left'] == st['margin-right'])
\r
397 st['margin-left'] = st['margin-right'] = null;
\r
400 formObj.style.value = tinyMCE.serializeStyle(st);
\r
403 function styleUpdated() {
\r
404 var formObj = document.forms[0];
\r
405 var st = tinyMCE.parseStyle(formObj.style.value);
\r
408 formObj.width.value = st['width'].replace('px', '');
\r
411 formObj.height.value = st['height'].replace('px', '');
\r
413 if (st['margin-top'] && st['margin-top'] == st['margin-bottom'])
\r
414 formObj.vspace.value = st['margin-top'].replace('px', '');
\r
416 if (st['margin-left'] && st['margin-left'] == st['margin-right'])
\r
417 formObj.hspace.value = st['margin-left'].replace('px', '');
\r
419 if (st['border-width'])
\r
420 formObj.border.value = st['border-width'].replace('px', '');
\r
423 function changeHeight() {
\r
424 var formObj = document.forms[0];
\r
426 if (!formObj.constrain.checked || !preloadImg) {
\r
431 if (formObj.width.value == "" || formObj.height.value == "")
\r
434 var temp = (formObj.width.value / preloadImg.width) * preloadImg.height;
\r
435 formObj.height.value = temp.toFixed(0);
\r
439 function changeWidth() {
\r
440 var formObj = document.forms[0];
\r
442 if (!formObj.constrain.checked || !preloadImg) {
\r
447 if (formObj.width.value == "" || formObj.height.value == "")
\r
450 var temp = (formObj.height.value / preloadImg.height) * preloadImg.width;
\r
451 formObj.width.value = temp.toFixed(0);
\r
455 function onSelectMainImage(target_form_element, name, value) {
\r
456 var formObj = document.forms[0];
\r
458 formObj.alt.value = name;
\r
459 formObj.title.value = name;
\r
462 showPreviewImage(formObj.elements[target_form_element].value, false);
\r
465 function showPreviewImage(src, start) {
\r
466 var formObj = document.forms[0];
\r
468 selectByValue(document.forms[0], 'imagelistsrc', src);
\r
470 var elm = document.getElementById('prev');
\r
471 var src = src == "" ? src : tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], src);
\r
473 if (!start && tinyMCE.getParam("advimage_update_dimensions_onchange", true))
\r
477 elm.innerHTML = "";
\r
479 elm.innerHTML = '<img src="' + src + '" border="0" />'
\r
484 function getImageData(src) {
\r
485 preloadImg = new Image();
\r
487 tinyMCE.addEvent(preloadImg, "load", updateImageData);
\r
488 tinyMCE.addEvent(preloadImg, "error", resetImageData);
\r
490 preloadImg.src = src;
\r
493 function updateImageData() {
\r
494 var formObj = document.forms[0];
\r
496 if (formObj.width.value == "")
\r
497 formObj.width.value = preloadImg.width;
\r
499 if (formObj.height.value == "")
\r
500 formObj.height.value = preloadImg.height;
\r
505 function resetImageData() {
\r
506 var formObj = document.forms[0];
\r
507 formObj.width.value = formObj.height.value = "";
\r
510 function getSelectValue(form_obj, field_name) {
\r
511 var elm = form_obj.elements[field_name];
\r
513 if (elm == null || elm.options == null)
\r
516 return elm.options[elm.selectedIndex].value;
\r
519 function getImageListHTML(elm_id, target_form_element, onchange_func) {
\r
520 if (typeof(tinyMCEImageList) == "undefined" || tinyMCEImageList.length == 0)
\r
525 html += '<select id="' + elm_id + '" name="' + elm_id + '"';
\r
526 html += ' class="mceImageList" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="this.form.' + target_form_element + '.value=';
\r
527 html += 'this.options[this.selectedIndex].value;';
\r
529 if (typeof(onchange_func) != "undefined")
\r
530 html += onchange_func + '(\'' + target_form_element + '\',this.options[this.selectedIndex].text,this.options[this.selectedIndex].value);';
\r
532 html += '"><option value="">---</option>';
\r
534 for (var i=0; i<tinyMCEImageList.length; i++)
\r
535 html += '<option value="' + tinyMCEImageList[i][1] + '">' + tinyMCEImageList[i][0] + '</option>';
\r
537 html += '</select>';
\r
541 // tinyMCE.debug('-- image list start --', html, '-- image list end --');
\r