koha-tmpl/intranet-tmpl/prog/en/js/tinymce/jscripts/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                         value = value.replace(/%px/g, 'px');\r
 230                 }\r
 231 \r
 232                 if (attrib == "height") {\r
 233                         attrib = "style.height";\r
 234                         value = value + "px";\r
 235                         value = value.replace(/%px/g, 'px');\r
 236                 }\r
 237 \r
 238                 if (attrib == "class")\r
 239                         attrib = "className";\r
 240 \r
 241                 eval('elm.' + attrib + "=value;");\r
 242         } else {\r
 243                 if (attrib == 'class')\r
 244                         elm.className = '';\r
 245 \r
 246                 elm.removeAttribute(attrib);\r
 247         }\r
 248 }\r
 249 \r
 250 function makeAttrib(attrib, value) {\r
 251         var formObj = document.forms[0];\r
 252         var valueElm = formObj.elements[attrib];\r
 253 \r
 254         if (typeof(value) == "undefined" || value == null) {\r
 255                 value = "";\r
 256 \r
 257                 if (valueElm)\r
 258                         value = valueElm.value;\r
 259         }\r
 260 \r
 261         if (value == "")\r
 262                 return "";\r
 263 \r
 264         // XML encode it\r
 265         value = value.replace(/&/g, '&amp;');\r
 266         value = value.replace(/\"/g, '&quot;');\r
 267         value = value.replace(/</g, '&lt;');\r
 268         value = value.replace(/>/g, '&gt;');\r
 269 \r
 270         return ' ' + attrib + '="' + value + '"';\r
 271 }\r
 272 \r
 273 function insertAction() {\r
 274         var inst = tinyMCE.getInstanceById(tinyMCE.getWindowArg('editor_id'));\r
 275         var elm = inst.getFocusElement();\r
 276         var formObj = document.forms[0];\r
 277         var src = formObj.src.value;\r
 278         var onmouseoversrc = formObj.onmouseoversrc.value;\r
 279         var onmouseoutsrc = formObj.onmouseoutsrc.value;\r
 280 \r
 281         if (!AutoValidator.validate(formObj)) {\r
 282                 alert(tinyMCE.getLang('lang_invalid_data'));\r
 283                 return false;\r
 284         }\r
 285 \r
 286         if (tinyMCE.getParam("accessibility_warnings")) {\r
 287                 if (formObj.alt.value == "" && !confirm(tinyMCE.getLang('lang_advimage_missing_alt', '', true)))\r
 288                         return;\r
 289         }\r
 290 \r
 291         if (onmouseoversrc && onmouseoversrc != "")\r
 292                 onmouseoversrc = "this.src='" + convertURL(onmouseoversrc, tinyMCE.imgElement) + "';";\r
 293 \r
 294         if (onmouseoutsrc && onmouseoutsrc != "")\r
 295                 onmouseoutsrc = "this.src='" + convertURL(onmouseoutsrc, tinyMCE.imgElement) + "';";\r
 296 \r
 297         if (elm != null && elm.nodeName == "IMG") {\r
 298                 setAttrib(elm, 'src', convertURL(src, tinyMCE.imgElement));\r
 299                 setAttrib(elm, 'mce_src', src);\r
 300                 setAttrib(elm, 'alt');\r
 301                 setAttrib(elm, 'title');\r
 302                 setAttrib(elm, 'border');\r
 303                 setAttrib(elm, 'vspace');\r
 304                 setAttrib(elm, 'hspace');\r
 305                 setAttrib(elm, 'width');\r
 306                 setAttrib(elm, 'height');\r
 307                 setAttrib(elm, 'onmouseover', onmouseoversrc);\r
 308                 setAttrib(elm, 'onmouseout', onmouseoutsrc);\r
 309                 setAttrib(elm, 'id');\r
 310                 setAttrib(elm, 'dir');\r
 311                 setAttrib(elm, 'lang');\r
 312                 setAttrib(elm, 'longdesc');\r
 313                 setAttrib(elm, 'usemap');\r
 314                 setAttrib(elm, 'style');\r
 315                 setAttrib(elm, 'class', getSelectValue(formObj, 'classlist'));\r
 316                 setAttrib(elm, 'align', getSelectValue(formObj, 'align'));\r
 317 \r
 318                 //tinyMCEPopup.execCommand("mceRepaint");\r
 319 \r
 320                 // Repaint if dimensions changed\r
 321                 if (formObj.width.value != orgImageWidth || formObj.height.value != orgImageHeight)\r
 322                         inst.repaint();\r
 323 \r
 324                 // Refresh in old MSIE\r
 325                 if (tinyMCE.isMSIE5)\r
 326                         elm.outerHTML = elm.outerHTML;\r
 327         } else {\r
 328                 var html = "<img";\r
 329 \r
 330                 html += makeAttrib('src', convertURL(src, tinyMCE.imgElement));\r
 331                 html += makeAttrib('mce_src', src);\r
 332                 html += makeAttrib('alt');\r
 333                 html += makeAttrib('title');\r
 334                 html += makeAttrib('border');\r
 335                 html += makeAttrib('vspace');\r
 336                 html += makeAttrib('hspace');\r
 337                 html += makeAttrib('width');\r
 338                 html += makeAttrib('height');\r
 339                 html += makeAttrib('onmouseover', onmouseoversrc);\r
 340                 html += makeAttrib('onmouseout', onmouseoutsrc);\r
 341                 html += makeAttrib('id');\r
 342                 html += makeAttrib('dir');\r
 343                 html += makeAttrib('lang');\r
 344                 html += makeAttrib('longdesc');\r
 345                 html += makeAttrib('usemap');\r
 346                 html += makeAttrib('style');\r
 347                 html += makeAttrib('class', getSelectValue(formObj, 'classlist'));\r
 348                 html += makeAttrib('align', getSelectValue(formObj, 'align'));\r
 349                 html += " />";\r
 350 \r
 351                 tinyMCEPopup.execCommand("mceInsertContent", false, html);\r
 352         }\r
 353 \r
 354         tinyMCE._setEventsEnabled(inst.getBody(), false);\r
 355         tinyMCEPopup.close();\r
 356 }\r
 357 \r
 358 function cancelAction() {\r
 359         tinyMCEPopup.close();\r
 360 }\r
 361 \r
 362 function changeAppearance() {\r
 363         var formObj = document.forms[0];\r
 364         var img = document.getElementById('alignSampleImg');\r
 365 \r
 366         if (img) {\r
 367                 img.align = formObj.align.value;\r
 368                 img.border = formObj.border.value;\r
 369                 img.hspace = formObj.hspace.value;\r
 370                 img.vspace = formObj.vspace.value;\r
 371         }\r
 372 }\r
 373 \r
 374 function changeMouseMove() {\r
 375         var formObj = document.forms[0];\r
 376 \r
 377         setSwapImageDisabled(!formObj.onmousemovecheck.checked);\r
 378 }\r
 379 \r
 380 function updateStyle() {\r
 381         var formObj = document.forms[0];\r
 382         var st = tinyMCE.parseStyle(formObj.style.value);\r
 383 \r
 384         if (tinyMCE.getParam('inline_styles', false)) {\r
 385                 st['width'] = formObj.width.value == '' ? '' : formObj.width.value + "px";\r
 386                 st['height'] = formObj.height.value == '' ? '' : formObj.height.value + "px";\r
 387                 st['border-width'] = formObj.border.value == '' ? '' : formObj.border.value + "px";\r
 388                 st['margin-top'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px";\r
 389                 st['margin-bottom'] = formObj.vspace.value == '' ? '' : formObj.vspace.value + "px";\r
 390                 st['margin-left'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px";\r
 391                 st['margin-right'] = formObj.hspace.value == '' ? '' : formObj.hspace.value + "px";\r
 392         } else {\r
 393                 st['width'] = st['height'] = st['border-width'] = null;\r
 394 \r
 395                 if (st['margin-top'] == st['margin-bottom'])\r
 396                         st['margin-top'] = st['margin-bottom'] = null;\r
 397 \r
 398                 if (st['margin-left'] == st['margin-right'])\r
 399                         st['margin-left'] = st['margin-right'] = null;\r
 400         }\r
 401 \r
 402         formObj.style.value = tinyMCE.serializeStyle(st);\r
 403 }\r
 404 \r
 405 function styleUpdated() {\r
 406         var formObj = document.forms[0];\r
 407         var st = tinyMCE.parseStyle(formObj.style.value);\r
 408 \r
 409         if (st['width'])\r
 410                 formObj.width.value = st['width'].replace('px', '');\r
 411 \r
 412         if (st['height'])\r
 413                 formObj.height.value = st['height'].replace('px', '');\r
 414 \r
 415         if (st['margin-top'] && st['margin-top'] == st['margin-bottom'])\r
 416                 formObj.vspace.value = st['margin-top'].replace('px', '');\r
 417 \r
 418         if (st['margin-left'] && st['margin-left'] == st['margin-right'])\r
 419                 formObj.hspace.value = st['margin-left'].replace('px', '');\r
 420 \r
 421         if (st['border-width'])\r
 422                 formObj.border.value = st['border-width'].replace('px', '');\r
 423 }\r
 424 \r
 425 function changeHeight() {\r
 426         var formObj = document.forms[0];\r
 427 \r
 428         if (!formObj.constrain.checked || !preloadImg) {\r
 429                 updateStyle();\r
 430                 return;\r
 431         }\r
 432 \r
 433         if (formObj.width.value == "" || formObj.height.value == "")\r
 434                 return;\r
 435 \r
 436         var temp = (parseInt(formObj.width.value) / parseInt(preloadImg.width)) * preloadImg.height;\r
 437         formObj.height.value = temp.toFixed(0);\r
 438         updateStyle();\r
 439 }\r
 440 \r
 441 function changeWidth() {\r
 442         var formObj = document.forms[0];\r
 443 \r
 444         if (!formObj.constrain.checked || !preloadImg) {\r
 445                 updateStyle();\r
 446                 return;\r
 447         }\r
 448 \r
 449         if (formObj.width.value == "" || formObj.height.value == "")\r
 450                 return;\r
 451 \r
 452         var temp = (parseInt(formObj.height.value) / parseInt(preloadImg.height)) * preloadImg.width;\r
 453         formObj.width.value = temp.toFixed(0);\r
 454         updateStyle();\r
 455 }\r
 456 \r
 457 function onSelectMainImage(target_form_element, name, value) {\r
 458         var formObj = document.forms[0];\r
 459 \r
 460         formObj.alt.value = name;\r
 461         formObj.title.value = name;\r
 462 \r
 463         resetImageData();\r
 464         showPreviewImage(formObj.elements[target_form_element].value, false);\r
 465 }\r
 466 \r
 467 function showPreviewImage(src, start) {\r
 468         var formObj = document.forms[0];\r
 469 \r
 470         selectByValue(document.forms[0], 'imagelistsrc', src);\r
 471 \r
 472         var elm = document.getElementById('prev');\r
 473         var src = src == "" ? src : tinyMCE.convertRelativeToAbsoluteURL(tinyMCE.settings['base_href'], src);\r
 474 \r
 475         if (!start && tinyMCE.getParam("advimage_update_dimensions_onchange", true))\r
 476                 resetImageData();\r
 477 \r
 478         if (src == "")\r
 479                 elm.innerHTML = "";\r
 480         else\r
 481                 elm.innerHTML = '<img id="previewImg" src="' + src + '" border="0" onload="updateImageData(' + start + ');" onerror="resetImageData();" />'\r
 482 }\r
 483 \r
 484 function updateImageData(start) {\r
 485         var formObj = document.forms[0];\r
 486 \r
 487         preloadImg = document.getElementById('previewImg');\r
 488 \r
 489         if (!start && formObj.width.value == "")\r
 490                 formObj.width.value = preloadImg.width;\r
 491 \r
 492         if (!start && formObj.height.value == "")\r
 493                 formObj.height.value = preloadImg.height;\r
 494 \r
 495         updateStyle();\r
 496 }\r
 497 \r
 498 function resetImageData() {\r
 499         var formObj = document.forms[0];\r
 500         formObj.width.value = formObj.height.value = "";        \r
 501 }\r
 502 \r
 503 function getSelectValue(form_obj, field_name) {\r
 504         var elm = form_obj.elements[field_name];\r
 505 \r
 506         if (elm == null || elm.options == null)\r
 507                 return "";\r
 508 \r
 509         return elm.options[elm.selectedIndex].value;\r
 510 }\r
 511 \r
 512 function getImageListHTML(elm_id, target_form_element, onchange_func) {\r
 513         if (typeof(tinyMCEImageList) == "undefined" || tinyMCEImageList.length == 0)\r
 514                 return "";\r
 515 \r
 516         var html = "";\r
 517 \r
 518         html += '<select id="' + elm_id + '" name="' + elm_id + '"';\r
 519         html += ' class="mceImageList" onfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="this.form.' + target_form_element + '.value=';\r
 520         html += 'this.options[this.selectedIndex].value;';\r
 521 \r
 522         if (typeof(onchange_func) != "undefined")\r
 523                 html += onchange_func + '(\'' + target_form_element + '\',this.options[this.selectedIndex].text,this.options[this.selectedIndex].value);';\r
 524 \r
 525         html += '"><option value="">---</option>';\r
 526 \r
 527         for (var i=0; i<tinyMCEImageList.length; i++)\r
 528                 html += '<option value="' + tinyMCEImageList[i][1] + '">' + tinyMCEImageList[i][0] + '</option>';\r
 529 \r
 530         html += '</select>';\r
 531 \r
 532         return html;\r
 533 \r
 534         // tinyMCE.debug('-- image list start --', html, '-- image list end --');\r
 535 }\r
 536 \r
 537 // While loading\r
 538 preinit();\r