webcit/tiny_mce/plugins/advimage/jscripts/functions.js

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