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