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

   1 /* Functions for the advimage plugin popup */\r
   2 \r
   3 var preloadImg = null;\r
   4 var orgImageWidth, orgImageHeight;\r
   5 \r
   6 function preinit() {\r
   7         // Initialize\r
   8         tinyMCE.setWindowArg('mce_windowresize', false);\r
   9 \r
  10         // Import external list url javascript\r
  11         var url = tinyMCE.getParam("external_image_list_url");\r
  12         if (url != null) {\r
  13                 // Fix relative\r
  14                 if (url.charAt(0) != '/' && url.indexOf('://') == -1)\r
  15                         url = tinyMCE.documentBasePath + "/" + url;\r
  16 \r
  17                 document.write('<sc'+'ript language="javascript" type="text/javascript" src="' + url + '"></sc'+'ript>');\r
  18         }\r
  19 }\r
  20 \r
  21 function convertURL(url, node, on_save) {\r
  22         return eval("tinyMCEPopup.windowOpener." + tinyMCE.settings['urlconverter_callback'] + "(url, node, on_save);");\r
  23 }\r
  24 \r
  25 function getImageSrc(str) {\r
  26         var pos = -1;\r
  27 \r
  28         if (!str)\r
  29                 return "";\r
  30 \r
  31         if ((pos = str.indexOf('this.src=')) != -1) {\r
  32                 var src = str.substring(pos + 10);\r
  33 \r
  34                 src = src.substring(0, src.indexOf('\''));\r
  35 \r
  36                 if (tinyMCE.getParam('convert_urls'))\r
  37                         src = convertURL(src, null, true);\r
  38 \r
  39                 return src;\r
  40         }\r
  41 \r
  42         return "";\r
  43 }\r
  44 \r
  45 function init() {\r
  46         tinyMCEPopup.resizeToInnerSize();\r
  47 \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
  52         var html = "";\r
  53 \r
  54         // Image list src\r
  55         html = getImageListHTML('imagelistsrc','src','onSelectMainImage');\r
  56         if (html == "")\r
  57                 document.getElementById("imagelistsrcrow").style.display = 'none';\r
  58         else\r
  59                 document.getElementById("imagelistsrccontainer").innerHTML = html;\r
  60 \r
  61         // Image list oversrc\r
  62         html = getImageListHTML('imagelistover','onmouseoversrc');\r
  63         if (html == "")\r
  64                 document.getElementById("imagelistoverrow").style.display = 'none';\r
  65         else\r
  66                 document.getElementById("imagelistovercontainer").innerHTML = html;\r
  67 \r
  68         // Image list outsrc\r
  69         html = getImageListHTML('imagelistout','onmouseoutsrc');\r
  70         if (html == "")\r
  71                 document.getElementById("imagelistoutrow").style.display = 'none';\r
  72         else\r
  73                 document.getElementById("imagelistoutcontainer").innerHTML = html;\r
  74 \r
  75         // Src browser\r
  76         html = getBrowserHTML('srcbrowser','src','image','advimage');\r
  77         document.getElementById("srcbrowsercontainer").innerHTML = html;\r
  78 \r
  79         // Over browser\r
  80         html = getBrowserHTML('oversrcbrowser','onmouseoversrc','image','advimage');\r
  81         document.getElementById("onmouseoversrccontainer").innerHTML = html;\r
  82 \r
  83         // Out browser\r
  84         html = getBrowserHTML('outsrcbrowser','onmouseoutsrc','image','advimage');\r
  85         document.getElementById("onmouseoutsrccontainer").innerHTML = html;\r
  86 \r
  87         // Longdesc browser\r
  88         html = getBrowserHTML('longdescbrowser','longdesc','file','advimage');\r
  89         document.getElementById("longdesccontainer").innerHTML = html;\r
  90 \r
  91         // Resize some elements\r
  92         if (isVisible('srcbrowser'))\r
  93                 document.getElementById('src').style.width = '260px';\r
  94 \r
  95         if (isVisible('oversrcbrowser'))\r
  96                 document.getElementById('onmouseoversrc').style.width = '260px';\r
  97 \r
  98         if (isVisible('outsrcbrowser'))\r
  99                 document.getElementById('onmouseoutsrc').style.width = '260px';\r
 100 \r
 101         if (isVisible('longdescbrowser'))\r
 102                 document.getElementById('longdesc').style.width = '180px';\r
 103 \r
 104         // Check action\r
 105         if (elm != null && elm.nodeName == "IMG")\r
 106                 action = "update";\r
 107 \r
 108         formObj.insert.value = tinyMCE.getLang('lang_' + action, 'Insert', true); \r
 109 \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
 114 \r
 115                 src = convertURL(src, elm, true);\r
 116 \r
 117                 // Use mce_src if found\r
 118                 var mceRealSrc = tinyMCE.getAttrib(elm, 'mce_src');\r
 119                 if (mceRealSrc != "") {\r
 120                         src = mceRealSrc;\r
 121 \r
 122                         if (tinyMCE.getParam('convert_urls'))\r
 123                                 src = convertURL(src, elm, true);\r
 124                 }\r
 125 \r
 126                 if (onmouseoversrc != "" && tinyMCE.getParam('convert_urls'))\r
 127                         onmouseoversrc = convertURL(onmouseoversrc, elm, true);\r
 128 \r
 129                 if (onmouseoutsrc != "" && tinyMCE.getParam('convert_urls'))\r
 130                         onmouseoutsrc = convertURL(onmouseoutsrc, elm, true);\r
 131 \r
 132                 // Setup form data\r
 133                 var style = tinyMCE.parseStyle(tinyMCE.getAttrib(elm, "style"));\r
 134 \r
 135                 // Store away old size\r
 136                 orgImageWidth = trimSize(getStyle(elm, 'width'))\r
 137                 orgImageHeight = trimSize(getStyle(elm, 'height'));\r
 138 \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
 155 \r
 156                 // Select by the values\r
 157                 if (tinyMCE.isMSIE)\r
 158                         selectByValue(formObj, 'align', getStyle(elm, 'align', 'styleFloat'));\r
 159                 else\r
 160                         selectByValue(formObj, 'align', getStyle(elm, 'align', 'cssFloat'));\r
 161 \r
 162                 addClassesToList('classlist', 'advimage_styles');\r
 163 \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
 168 \r
 169                 updateStyle();\r
 170                 showPreviewImage(src, true);\r
 171                 changeAppearance();\r
 172 \r
 173                 window.focus();\r
 174         } else\r
 175                 addClassesToList('classlist', 'advimage_styles');\r
 176 \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
 180 \r
 181         // Check swap image if valid data\r
 182         if (formObj.onmouseoversrc.value != "" || formObj.onmouseoutsrc.value != "")\r
 183                 setSwapImageDisabled(false);\r
 184         else\r
 185                 setSwapImageDisabled(true);\r
 186 }\r
 187 \r
 188 function setSwapImageDisabled(state) {\r
 189         var formObj = document.forms[0];\r
 190 \r
 191         formObj.onmousemovecheck.checked = !state;\r
 192 \r
 193         setBrowserDisabled('overbrowser', state);\r
 194         setBrowserDisabled('outbrowser', state);\r
 195 \r
 196         if (formObj.imagelistover)\r
 197                 formObj.imagelistover.disabled = state;\r
 198 \r
 199         if (formObj.imagelistout)\r
 200                 formObj.imagelistout.disabled = state;\r
 201 \r
 202         formObj.onmouseoversrc.disabled = state;\r
 203         formObj.onmouseoutsrc.disabled  = state;\r
 204 }\r
 205 \r
 206 function setAttrib(elm, attrib, value) {\r
 207         var formObj = document.forms[0];\r
 208         var valueElm = formObj.elements[attrib];\r
 209 \r
 210         if (typeof(value) == "undefined" || value == null) {\r
 211                 value = "";\r
 212 \r
 213                 if (valueElm)\r
 214                         value = valueElm.value;\r
 215         }\r
 216 \r
 217         if (value != "") {\r
 218                 elm.setAttribute(attrib, value);\r
 219 \r
 220                 if (attrib == "style")\r
 221                         attrib = "style.cssText";\r
 222 \r
 223                 if (attrib == "longdesc")\r
 224                         attrib = "longDesc";\r
 225 \r
 226                 if (attrib == "width") {\r
 227                         attrib = "style.width";\r
 228                         value = value + "px";\r
 229                 }\r
 230 \r
 231                 if (attrib == "height") {\r
 232                         attrib = "style.height";\r
 233                         value = value + "px";\r
 234                 }\r
 235 \r
 236                 if (attrib == "class")\r
 237                         attrib = "className";\r
 238 \r
 239                 eval('elm.' + attrib + "=value;");\r
 240         } else\r
 241                 elm.removeAttribute(attrib);\r
 242 }\r
 243 \r
 244 function makeAttrib(attrib, value) {\r
 245         var formObj = document.forms[0];\r
 246         var valueElm = formObj.elements[attrib];\r
 247 \r
 248         if (typeof(value) == "undefined" || value == null) {\r
 249                 value = "";\r
 250 \r
 251                 if (valueElm)\r
 252                         value = valueElm.value;\r
 253         }\r
 254 \r
 255         if (value == "")\r
 256                 return "";\r
 257 \r
 258         // XML encode it\r
 259         value = value.replace(/&/g, '&amp;');\r
 260         value = value.replace(/\"/g, '&quot;');\r
 261         value = value.replace(/</g, '&lt;');\r
 262         value = value.replace(/>/g, '&gr;');\r
 263 \r
 264         return ' ' + attrib + '="' + value + '"';\r
 265 }\r
 266 \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
 274 \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
 280                         }\r
 281                 } else {\r
 282                         var answer = true;\r
 283                 }\r
 284 \r
 285                 if (!answer)\r
 286                         return;\r
 287         }\r
 288 \r
 289         if (onmouseoversrc && onmouseoversrc != "")\r
 290                 onmouseoversrc = "this.src='" + convertURL(onmouseoversrc, tinyMCE.imgElement) + "';";\r
 291 \r
 292         if (onmouseoutsrc && onmouseoutsrc != "")\r
 293                 onmouseoutsrc = "this.src='" + convertURL(onmouseoutsrc, tinyMCE.imgElement) + "';";\r
 294 \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
 315 \r
 316                 //tinyMCEPopup.execCommand("mceRepaint");\r
 317 \r
 318                 // Repaint if dimensions changed\r
 319                 if (formObj.width.value != orgImageWidth || formObj.height.value != orgImageHeight)\r
 320                         inst.repaint();\r
 321 \r
 322                 // Refresh in old MSIE\r
 323                 if (tinyMCE.isMSIE5)\r
 324                         elm.outerHTML = elm.outerHTML;\r
 325         } else {\r
 326                 var html = "<img";\r
 327 \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
 347                 html += " />";\r
 348 \r
 349                 tinyMCEPopup.execCommand("mceInsertContent", false, html);\r
 350         }\r
 351 \r
 352         tinyMCE._setEventsEnabled(inst.getBody(), false);\r
 353         tinyMCEPopup.close();\r
 354 }\r
 355 \r
 356 function cancelAction() {\r
 357         tinyMCEPopup.close();\r
 358 }\r
 359 \r
 360 function changeAppearance() {\r
 361         var formObj = document.forms[0];\r
 362         var img = document.getElementById('alignSampleImg');\r
 363 \r
 364         if (img) {\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
 369         }\r
 370 }\r
 371 \r
 372 function changeMouseMove() {\r
 373         var formObj = document.forms[0];\r
 374 \r
 375         setSwapImageDisabled(!formObj.onmousemovecheck.checked);\r
 376 }\r
 377 \r
 378 function updateStyle() {\r
 379         var formObj = document.forms[0];\r
 380         var st = tinyMCE.parseStyle(formObj.style.value);\r
 381 \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
 390         } else {\r
 391                 st['width'] = st['height'] = st['border-width'] = null;\r
 392 \r
 393                 if (st['margin-top'] == st['margin-bottom'])\r
 394                         st['margin-top'] = st['margin-bottom'] = null;\r
 395 \r
 396                 if (st['margin-left'] == st['margin-right'])\r
 397                         st['margin-left'] = st['margin-right'] = null;\r
 398         }\r
 399 \r
 400         formObj.style.value = tinyMCE.serializeStyle(st);\r
 401 }\r
 402 \r
 403 function styleUpdated() {\r
 404         var formObj = document.forms[0];\r
 405         var st = tinyMCE.parseStyle(formObj.style.value);\r
 406 \r
 407         if (st['width'])\r
 408                 formObj.width.value = st['width'].replace('px', '');\r
 409 \r
 410         if (st['height'])\r
 411                 formObj.height.value = st['height'].replace('px', '');\r
 412 \r
 413         if (st['margin-top'] && st['margin-top'] == st['margin-bottom'])\r
 414                 formObj.vspace.value = st['margin-top'].replace('px', '');\r
 415 \r
 416         if (st['margin-left'] && st['margin-left'] == st['margin-right'])\r
 417                 formObj.hspace.value = st['margin-left'].replace('px', '');\r
 418 \r
 419         if (st['border-width'])\r
 420                 formObj.border.value = st['border-width'].replace('px', '');\r
 421 }\r
 422 \r
 423 function changeHeight() {\r
 424         var formObj = document.forms[0];\r
 425 \r
 426         if (!formObj.constrain.checked || !preloadImg) {\r
 427                 updateStyle();\r
 428                 return;\r
 429         }\r
 430 \r
 431         if (formObj.width.value == "" || formObj.height.value == "")\r
 432                 return;\r
 433 \r
 434         var temp = (formObj.width.value / preloadImg.width) * preloadImg.height;\r
 435         formObj.height.value = temp.toFixed(0);\r
 436         updateStyle();\r
 437 }\r
 438 \r
 439 function changeWidth() {\r
 440         var formObj = document.forms[0];\r
 441 \r
 442         if (!formObj.constrain.checked || !preloadImg) {\r
 443                 updateStyle();\r
 444                 return;\r
 445         }\r
 446 \r
 447         if (formObj.width.value == "" || formObj.height.value == "")\r
 448                 return;\r
 449 \r
 450         var temp = (formObj.height.value / preloadImg.height) * preloadImg.width;\r
 451         formObj.width.value = temp.toFixed(0);\r
 452         updateStyle();\r
 453 }\r
 454 \r
 455 function onSelectMainImage(target_form_element, name, value) {\r
 456         var formObj = document.forms[0];\r
 457 \r
 458         formObj.alt.value = name;\r
 459         formObj.title.value = name;\r
 460 \r
 461         resetImageData();\r
 462         showPreviewImage(formObj.elements[target_form_element].value, false);\r
 463 }\r
 464 \r
 465 function showPreviewImage(src, start) {\r
 466         var formObj = document.forms[0];\r
 467 \r
 468         selectByValue(document.forms[0], 'imagelistsrc', src);\r
 469 \r
 470         var elm = document.getElementById('prev');\r
 471         var src = src == "" ? src : tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], src);\r
 472 \r
 473         if (!start && tinyMCE.getParam("advimage_update_dimensions_onchange", true))\r
 474                 resetImageData();\r
 475 \r
 476         if (src == "")\r
 477                 elm.innerHTML = "";\r
 478         else\r
 479                 elm.innerHTML = '<img src="' + src + '" border="0" />'\r
 480 \r
 481         getImageData(src);\r
 482 }\r
 483 \r
 484 function getImageData(src) {\r
 485         preloadImg = new Image();\r
 486 \r
 487         tinyMCE.addEvent(preloadImg, "load", updateImageData);\r
 488         tinyMCE.addEvent(preloadImg, "error", resetImageData);\r
 489 \r
 490         preloadImg.src = src;\r
 491 }\r
 492 \r
 493 function updateImageData() {\r
 494         var formObj = document.forms[0];\r
 495 \r
 496         if (formObj.width.value == "")\r
 497                 formObj.width.value = preloadImg.width;\r
 498 \r
 499         if (formObj.height.value == "")\r
 500                 formObj.height.value = preloadImg.height;\r
 501 \r
 502         updateStyle();\r
 503 }\r
 504 \r
 505 function resetImageData() {\r
 506         var formObj = document.forms[0];\r
 507         formObj.width.value = formObj.height.value = "";        \r
 508 }\r
 509 \r
 510 function getSelectValue(form_obj, field_name) {\r
 511         var elm = form_obj.elements[field_name];\r
 512 \r
 513         if (elm == null || elm.options == null)\r
 514                 return "";\r
 515 \r
 516         return elm.options[elm.selectedIndex].value;\r
 517 }\r
 518 \r
 519 function getImageListHTML(elm_id, target_form_element, onchange_func) {\r
 520         if (typeof(tinyMCEImageList) == "undefined" || tinyMCEImageList.length == 0)\r
 521                 return "";\r
 522 \r
 523         var html = "";\r
 524 \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
 528 \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
 531 \r
 532         html += '"><option value="">---</option>';\r
 533 \r
 534         for (var i=0; i<tinyMCEImageList.length; i++)\r
 535                 html += '<option value="' + tinyMCEImageList[i][1] + '">' + tinyMCEImageList[i][0] + '</option>';\r
 536 \r
 537         html += '</select>';\r
 538 \r
 539         return html;\r
 540 \r
 541         // tinyMCE.debug('-- image list start --', html, '-- image list end --');\r
 542 }\r
 543 \r
 544 // While loading\r
 545 preinit();\r