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

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