1
/* Functions for the foswikiimage plugin popup */
4
var orgImageWidth, orgImageHeight;
8
tinyMCE.setWindowArg('mce_windowresize', false);
10
// Import external list url javascript
11
var url = tinyMCE.getParam("external_image_list_url");
14
if (url.charAt(0) != '/' && url.indexOf('://') == -1)
15
url = tinyMCE.documentBasePath + "/" + url;
17
document.write('<sc'+'ript language="javascript" type="text/javascript" src="'
18
+ url + '"></sc'+'ript>');
22
function pubURL(url, node, on_save) {
23
return eval("tinyMCEPopup.windowOpener."
24
+ tinyMCE.settings['foswikipuburl_callback']
25
+ "(url, node, on_save);");
28
function getImageSrc(str) {
34
if ((pos = str.indexOf('this.src=')) != -1) {
35
var src = str.substring(pos + 10);
37
src = src.substring(0, src.indexOf('\''));
39
if (tinyMCE.getParam('convert_urls'))
40
src = pubURL(src, null, true);
49
tinyMCEPopup.resizeToInnerSize();
51
var formObj = document.forms[0];
52
var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));
53
var elm = inst.getFocusElement();
54
var action = "insert";
58
html = getImageListHTML('imagelistsrc','src','onSelectMainImage');
60
document.getElementById("imagelistsrcrow").style.display = 'none';
62
document.getElementById("imagelistsrccontainer").innerHTML = html;
65
html = getImageListHTML('imagelistover','onmouseoversrc');
67
document.getElementById("imagelistoverrow").style.display = 'none';
69
document.getElementById("imagelistovercontainer").innerHTML = html;
72
html = getImageListHTML('imagelistout','onmouseoutsrc');
74
document.getElementById("imagelistoutrow").style.display = 'none';
76
document.getElementById("imagelistoutcontainer").innerHTML = html;
79
html = getBrowserHTML('srcbrowser','src','image','foswikiimage');
80
document.getElementById("srcbrowsercontainer").innerHTML = html;
83
html = getBrowserHTML('oversrcbrowser', 'onmouseoversrc', 'image',
85
document.getElementById("onmouseoversrccontainer").innerHTML = html;
88
html = getBrowserHTML('outsrcbrowser', 'onmouseoutsrc',
89
'image', 'foswikiimage');
90
document.getElementById("onmouseoutsrccontainer").innerHTML = html;
93
html = getBrowserHTML('longdescbrowser','longdesc','file','foswikiimage');
94
document.getElementById("longdesccontainer").innerHTML = html;
96
// Resize some elements
97
if (isVisible('srcbrowser'))
98
document.getElementById('src').style.width = '260px';
100
if (isVisible('oversrcbrowser'))
101
document.getElementById('onmouseoversrc').style.width = '260px';
103
if (isVisible('outsrcbrowser'))
104
document.getElementById('onmouseoutsrc').style.width = '260px';
106
if (isVisible('longdescbrowser'))
107
document.getElementById('longdesc').style.width = '180px';
110
if (elm != null && elm.nodeName == "IMG")
113
formObj.insert.value = tinyMCE.getLang('lang_' + action, 'Insert', true);
115
if (action == "update") {
116
var src = tinyMCE.getAttrib(elm, 'src');
118
getImageSrc(tinyMCE.cleanupEventStr(
119
tinyMCE.getAttrib(elm, 'onmouseover')));
121
getImageSrc(tinyMCE.cleanupEventStr(
122
tinyMCE.getAttrib(elm, 'onmouseout')));
124
src = pubURL(src, elm, true);
126
// Use mce_src if found
127
var mceRealSrc = tinyMCE.getAttrib(elm, 'mce_src');
128
if (mceRealSrc != "") {
131
if (tinyMCE.getParam('convert_urls'))
132
src = pubURL(src, elm, true);
135
if (onmouseoversrc != "" && tinyMCE.getParam('convert_urls'))
136
onmouseoversrc = pubURL(onmouseoversrc, elm, true);
138
if (onmouseoutsrc != "" && tinyMCE.getParam('convert_urls'))
139
onmouseoutsrc = pubURL(onmouseoutsrc, elm, true);
142
var style = tinyMCE.parseStyle(tinyMCE.getAttrib(elm, "style"));
144
// Store away old size
145
orgImageWidth = trimSize(getStyle(elm, 'width'))
146
orgImageHeight = trimSize(getStyle(elm, 'height'));
148
formObj.src.value = src;
149
formObj.alt.value = tinyMCE.getAttrib(elm, 'alt');
150
formObj.title.value = tinyMCE.getAttrib(elm, 'title');
151
formObj.border.value =
152
trimSize(getStyle(elm, 'border', 'borderWidth'));
153
formObj.vspace.value = tinyMCE.getAttrib(elm, 'vspace');
154
formObj.hspace.value = tinyMCE.getAttrib(elm, 'hspace');
155
formObj.width.value = orgImageWidth;
156
formObj.height.value = orgImageHeight;
157
formObj.onmouseoversrc.value = onmouseoversrc;
158
formObj.onmouseoutsrc.value = onmouseoutsrc;
159
formObj.id.value = tinyMCE.getAttrib(elm, 'id');
160
formObj.dir.value = tinyMCE.getAttrib(elm, 'dir');
161
formObj.lang.value = tinyMCE.getAttrib(elm, 'lang');
162
formObj.longdesc.value = tinyMCE.getAttrib(elm, 'longdesc');
163
formObj.usemap.value = tinyMCE.getAttrib(elm, 'usemap');
164
formObj.style.value = tinyMCE.serializeStyle(style);
166
// Select by the values
168
selectByValue(formObj, 'align', getStyle(
169
elm, 'align', 'styleFloat'));
171
selectByValue(formObj, 'align', getStyle(
172
elm, 'align', 'cssFloat'));
174
addClassesToList('classlist', 'foswikiimage_styles');
176
selectByValue(formObj, 'classlist', tinyMCE.getAttrib(elm, 'class'));
177
selectByValue(formObj, 'imagelistsrc', src);
178
selectByValue(formObj, 'imagelistover', onmouseoversrc);
179
selectByValue(formObj, 'imagelistout', onmouseoutsrc);
182
showPreviewImage(src, true);
187
addClassesToList('classlist', 'foswikiimage_styles');
189
// If option enabled default contrain proportions to checked
190
if (tinyMCE.getParam("foswikiimage_constrain_proportions", true))
191
formObj.constrain.checked = true;
193
// Check swap image if valid data
194
if (formObj.onmouseoversrc.value != ""
195
|| formObj.onmouseoutsrc.value != "")
196
setSwapImageDisabled(false);
198
setSwapImageDisabled(true);
201
function setSwapImageDisabled(state) {
202
var formObj = document.forms[0];
204
formObj.onmousemovecheck.checked = !state;
206
setBrowserDisabled('overbrowser', state);
207
setBrowserDisabled('outbrowser', state);
209
if (formObj.imagelistover)
210
formObj.imagelistover.disabled = state;
212
if (formObj.imagelistout)
213
formObj.imagelistout.disabled = state;
215
formObj.onmouseoversrc.disabled = state;
216
formObj.onmouseoutsrc.disabled = state;
219
function setAttrib(elm, attrib, value) {
220
var formObj = document.forms[0];
221
var valueElm = formObj.elements[attrib];
223
if (typeof(value) == "undefined" || value == null) {
227
value = valueElm.value;
231
elm.setAttribute(attrib, value);
233
if (attrib == "style")
234
attrib = "style.cssText";
236
if (attrib == "longdesc")
239
if (attrib == "width") {
240
attrib = "style.width";
241
value = value + "px";
242
value = value.replace(/%px/g, 'px');
245
if (attrib == "height") {
246
attrib = "style.height";
247
value = value + "px";
248
value = value.replace(/%px/g, 'px');
251
if (attrib == "class")
252
attrib = "className";
254
eval('elm.' + attrib + "=value;");
256
if (attrib == 'class')
259
elm.removeAttribute(attrib);
263
function makeAttrib(attrib, value) {
264
var formObj = document.forms[0];
265
var valueElm = formObj.elements[attrib];
267
if (typeof(value) == "undefined" || value == null) {
271
value = valueElm.value;
278
value = value.replace(/&/g, '&');
279
value = value.replace(/\"/g, '"');
280
value = value.replace(/</g, '<');
281
value = value.replace(/>/g, '>');
283
return ' ' + attrib + '="' + value + '"';
286
function insertAction() {
287
var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));
288
var elm = inst.getFocusElement();
289
var formObj = document.forms[0];
290
// Always expand the URL, and keep it expanded
291
var src = pubURL(formObj.src.value, tinyMCE.imgElement);
292
var onmouseoversrc = formObj.onmouseoversrc.value;
293
var onmouseoutsrc = formObj.onmouseoutsrc.value;
295
if (!AutoValidator.validate(formObj)) {
296
alert(tinyMCE.getLang('lang_invalid_data'));
300
if (tinyMCE.getParam("accessibility_warnings")) {
301
if (formObj.alt.value == "" &&
302
!confirm(tinyMCE.getLang('lang_foswikiimage_missing_alt', '', true)))
306
if (onmouseoversrc && onmouseoversrc != "")
307
onmouseoversrc = "this.src='" +
308
pubURL(onmouseoversrc, tinyMCE.imgElement) + "';";
310
if (onmouseoutsrc && onmouseoutsrc != "")
311
onmouseoutsrc = "this.src='" +
312
pubURL(onmouseoutsrc, tinyMCE.imgElement) + "';";
314
if (elm != null && elm.nodeName == "IMG") {
315
setAttrib(elm, 'src', src);
316
setAttrib(elm, 'mce_src', src);
317
setAttrib(elm, 'alt');
318
setAttrib(elm, 'title');
319
setAttrib(elm, 'border');
320
setAttrib(elm, 'vspace');
321
setAttrib(elm, 'hspace');
322
setAttrib(elm, 'width');
323
setAttrib(elm, 'height');
324
setAttrib(elm, 'onmouseover', onmouseoversrc);
325
setAttrib(elm, 'onmouseout', onmouseoutsrc);
326
setAttrib(elm, 'id');
327
setAttrib(elm, 'dir');
328
setAttrib(elm, 'lang');
329
setAttrib(elm, 'longdesc');
330
setAttrib(elm, 'usemap');
331
setAttrib(elm, 'style');
332
setAttrib(elm, 'class', getSelectValue(formObj, 'classlist'));
333
setAttrib(elm, 'align', getSelectValue(formObj, 'align'));
335
//tinyMCEPopup.execCommand("mceRepaint");
337
// Repaint if dimensions changed
338
if (formObj.width.value != orgImageWidth
339
|| formObj.height.value != orgImageHeight)
342
// Refresh in old MSIE
344
elm.outerHTML = elm.outerHTML;
348
html += makeAttrib('src', src);
349
html += makeAttrib('mce_src', src);
350
html += makeAttrib('alt');
351
html += makeAttrib('title');
352
html += makeAttrib('border');
353
html += makeAttrib('vspace');
354
html += makeAttrib('hspace');
355
html += makeAttrib('width');
356
html += makeAttrib('height');
357
html += makeAttrib('onmouseover', onmouseoversrc);
358
html += makeAttrib('onmouseout', onmouseoutsrc);
359
html += makeAttrib('id');
360
html += makeAttrib('dir');
361
html += makeAttrib('lang');
362
html += makeAttrib('longdesc');
363
html += makeAttrib('usemap');
364
html += makeAttrib('style');
365
html += makeAttrib('class', getSelectValue(formObj, 'classlist'));
366
html += makeAttrib('align', getSelectValue(formObj, 'align'));
369
tinyMCEPopup.execCommand("mceInsertContent", false, html);
372
tinyMCE._setEventsEnabled(inst.getBody(), false);
373
tinyMCEPopup.close();
376
function cancelAction() {
377
tinyMCEPopup.close();
380
function changeAppearance() {
381
var formObj = document.forms[0];
382
var img = document.getElementById('alignSampleImg');
385
img.align = formObj.align.value;
386
img.border = formObj.border.value;
387
img.hspace = formObj.hspace.value;
388
img.vspace = formObj.vspace.value;
392
function changeMouseMove() {
393
var formObj = document.forms[0];
395
setSwapImageDisabled(!formObj.onmousemovecheck.checked);
398
function updateStyle() {
399
var formObj = document.forms[0];
400
var st = tinyMCE.parseStyle(formObj.style.value);
402
if (tinyMCE.getParam('inline_styles', false)) {
403
st['width'] = formObj.width.value == '' ? ''
404
: formObj.width.value + "px";
405
st['height'] = formObj.height.value == '' ? ''
406
: formObj.height.value + "px";
407
st['border-width'] = formObj.border.value == '' ? ''
408
: formObj.border.value + "px";
409
st['margin-top'] = formObj.vspace.value == '' ? ''
410
: formObj.vspace.value + "px";
411
st['margin-bottom'] = formObj.vspace.value == '' ? ''
412
: formObj.vspace.value + "px";
413
st['margin-left'] = formObj.hspace.value == '' ? ''
414
: formObj.hspace.value + "px";
415
st['margin-right'] = formObj.hspace.value == '' ? ''
416
: formObj.hspace.value + "px";
418
st['width'] = st['height'] = st['border-width'] = null;
420
if (st['margin-top'] == st['margin-bottom'])
421
st['margin-top'] = st['margin-bottom'] = null;
423
if (st['margin-left'] == st['margin-right'])
424
st['margin-left'] = st['margin-right'] = null;
427
formObj.style.value = tinyMCE.serializeStyle(st);
430
function styleUpdated() {
431
var formObj = document.forms[0];
432
var st = tinyMCE.parseStyle(formObj.style.value);
435
formObj.width.value = st['width'].replace('px', '');
438
formObj.height.value = st['height'].replace('px', '');
440
if (st['margin-top'] && st['margin-top'] == st['margin-bottom'])
441
formObj.vspace.value = st['margin-top'].replace('px', '');
443
if (st['margin-left'] && st['margin-left'] == st['margin-right'])
444
formObj.hspace.value = st['margin-left'].replace('px', '');
446
if (st['border-width'])
447
formObj.border.value = st['border-width'].replace('px', '');
450
function changeHeight() {
451
var formObj = document.forms[0];
453
if (!formObj.constrain.checked || !preloadImg) {
458
if (formObj.width.value == "" || formObj.height.value == "")
461
var temp = (parseInt(formObj.width.value) / parseInt(preloadImg.width))
463
formObj.height.value = temp.toFixed(0);
467
function changeWidth() {
468
var formObj = document.forms[0];
470
if (!formObj.constrain.checked || !preloadImg) {
475
if (formObj.width.value == "" || formObj.height.value == "")
478
var temp = (parseInt(formObj.height.value) / parseInt(preloadImg.height))
480
formObj.width.value = temp.toFixed(0);
484
function onSelectMainImage(target_form_element, name, value) {
485
var formObj = document.forms[0];
487
formObj.alt.value = name;
488
formObj.title.value = name;
491
showPreviewImage(formObj.elements[target_form_element].value, false);
494
function showPreviewImage(src, start) {
495
var formObj = document.forms[0];
497
selectByValue(document.forms[0], 'imagelistsrc', src);
499
var elm = document.getElementById('prev');
500
var src = pubURL(src, null, false);
502
if (!start && tinyMCE.getParam("foswikiimage_update_dimensions_onchange",
510
'<img id="previewImg" src="' + src
511
+ '" border="0" onload="updateImageData('
512
+ start + ');" onerror="resetImageData();" />'
515
function updateImageData(start) {
516
var formObj = document.forms[0];
518
preloadImg = document.getElementById('previewImg');
520
if (!start && formObj.width.value == "")
521
formObj.width.value = preloadImg.width;
523
if (!start && formObj.height.value == "")
524
formObj.height.value = preloadImg.height;
529
function resetImageData() {
530
var formObj = document.forms[0];
531
formObj.width.value = formObj.height.value = "";
534
function getSelectValue(form_obj, field_name) {
535
var elm = form_obj.elements[field_name];
537
if (elm == null || elm.options == null)
540
return elm.options[elm.selectedIndex].value;
543
function getImageListHTML(elm_id, target_form_element, onchange_func) {
544
if (typeof(tinyMCEImageList) == "undefined"
545
|| tinyMCEImageList.length == 0)
550
html += '<select id="' + elm_id + '" name="' + elm_id + '"';
551
html += ' class="mceImageList" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="this.form.'
552
+ target_form_element + '.value=';
553
html += 'this.options[this.selectedIndex].value;';
555
if (typeof(onchange_func) != "undefined")
556
html += onchange_func + '(\'' + target_form_element
557
+ '\',this.options[this.selectedIndex].text,this.options[this.selectedIndex].value);';
559
html += '"><option value="">---</option>';
561
for (var i=0; i<tinyMCEImageList.length; i++)
562
html += '<option value="' + tinyMCEImageList[i][1] + '">'
563
+ tinyMCEImageList[i][0] + '</option>';
569
// tinyMCE.debug('-- image list start --', html, '-- image list end --');