[1] | 1 | var ImageDialog = { |
---|
| 2 | preInit : function() { |
---|
| 3 | var url; |
---|
| 4 | |
---|
| 5 | tinyMCEPopup.requireLangPack(); |
---|
| 6 | |
---|
| 7 | if (url = tinyMCEPopup.getParam("external_image_list_url")) |
---|
| 8 | document.write('<script language="javascript" type="text/javascript" src="' + tinyMCEPopup.editor.documentBaseURI.toAbsolute(url) + '"></script>'); |
---|
| 9 | }, |
---|
| 10 | |
---|
| 11 | init : function(ed) { |
---|
| 12 | var f = document.forms[0], nl = f.elements, ed = tinyMCEPopup.editor, dom = ed.dom, n = ed.selection.getNode(); |
---|
| 13 | |
---|
| 14 | tinyMCEPopup.resizeToInnerSize(); |
---|
| 15 | this.fillClassList('class_list'); |
---|
| 16 | this.fillFileList('src_list', 'tinyMCEImageList'); |
---|
| 17 | this.fillFileList('over_list', 'tinyMCEImageList'); |
---|
| 18 | this.fillFileList('out_list', 'tinyMCEImageList'); |
---|
| 19 | |
---|
| 20 | if (n.nodeName == 'IMG') { |
---|
| 21 | nl.src.value = dom.getAttrib(n, 'src'); |
---|
| 22 | nl.width.value = dom.getAttrib(n, 'width'); |
---|
| 23 | nl.height.value = dom.getAttrib(n, 'height'); |
---|
| 24 | nl.alt.value = dom.getAttrib(n, 'alt'); |
---|
| 25 | nl.title.value = dom.getAttrib(n, 'title'); |
---|
| 26 | nl.vspace.value = this.getAttrib(n, 'vspace'); |
---|
| 27 | nl.hspace.value = this.getAttrib(n, 'hspace'); |
---|
| 28 | nl.border.value = this.getAttrib(n, 'border'); |
---|
| 29 | selectByValue(f, 'align', this.getAttrib(n, 'align')); |
---|
| 30 | selectByValue(f, 'class_list', dom.getAttrib(n, 'class')); |
---|
| 31 | nl.style.value = dom.getAttrib(n, 'style'); |
---|
| 32 | nl.id.value = dom.getAttrib(n, 'id'); |
---|
| 33 | nl.dir.value = dom.getAttrib(n, 'dir'); |
---|
| 34 | nl.lang.value = dom.getAttrib(n, 'lang'); |
---|
| 35 | nl.usemap.value = dom.getAttrib(n, 'usemap'); |
---|
| 36 | nl.longdesc.value = dom.getAttrib(n, 'longdesc'); |
---|
| 37 | nl.insert.value = ed.getLang('update'); |
---|
| 38 | |
---|
| 39 | if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseover'))) |
---|
| 40 | nl.onmouseoversrc.value = dom.getAttrib(n, 'onmouseover').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1'); |
---|
| 41 | |
---|
| 42 | if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseout'))) |
---|
| 43 | nl.onmouseoutsrc.value = dom.getAttrib(n, 'onmouseout').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1'); |
---|
| 44 | |
---|
| 45 | if (ed.settings.inline_styles) { |
---|
| 46 | // Move attribs to styles |
---|
| 47 | if (dom.getAttrib(n, 'align')) |
---|
| 48 | this.updateStyle('align'); |
---|
| 49 | |
---|
| 50 | if (dom.getAttrib(n, 'hspace')) |
---|
| 51 | this.updateStyle('hspace'); |
---|
| 52 | |
---|
| 53 | if (dom.getAttrib(n, 'border')) |
---|
| 54 | this.updateStyle('border'); |
---|
| 55 | |
---|
| 56 | if (dom.getAttrib(n, 'vspace')) |
---|
| 57 | this.updateStyle('vspace'); |
---|
| 58 | } |
---|
| 59 | } |
---|
| 60 | |
---|
| 61 | // Setup browse button |
---|
| 62 | document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image'); |
---|
| 63 | if (isVisible('srcbrowser')) |
---|
| 64 | document.getElementById('src').style.width = '260px'; |
---|
| 65 | |
---|
| 66 | // Setup browse button |
---|
| 67 | document.getElementById('onmouseoversrccontainer').innerHTML = getBrowserHTML('overbrowser','onmouseoversrc','image','theme_advanced_image'); |
---|
| 68 | if (isVisible('overbrowser')) |
---|
| 69 | document.getElementById('onmouseoversrc').style.width = '260px'; |
---|
| 70 | |
---|
| 71 | // Setup browse button |
---|
| 72 | document.getElementById('onmouseoutsrccontainer').innerHTML = getBrowserHTML('outbrowser','onmouseoutsrc','image','theme_advanced_image'); |
---|
| 73 | if (isVisible('outbrowser')) |
---|
| 74 | document.getElementById('onmouseoutsrc').style.width = '260px'; |
---|
| 75 | |
---|
| 76 | // If option enabled default contrain proportions to checked |
---|
| 77 | if (ed.getParam("advimage_constrain_proportions", true)) |
---|
| 78 | f.constrain.checked = true; |
---|
| 79 | |
---|
| 80 | // Check swap image if valid data |
---|
| 81 | if (nl.onmouseoversrc.value || nl.onmouseoutsrc.value) |
---|
| 82 | this.setSwapImage(true); |
---|
| 83 | else |
---|
| 84 | this.setSwapImage(false); |
---|
| 85 | |
---|
| 86 | this.changeAppearance(); |
---|
| 87 | this.showPreviewImage(nl.src.value, 1); |
---|
| 88 | }, |
---|
| 89 | |
---|
| 90 | insert : function(file, title) { |
---|
| 91 | var ed = tinyMCEPopup.editor, t = this, f = document.forms[0]; |
---|
| 92 | |
---|
| 93 | if (f.src.value === '') { |
---|
| 94 | ed.dom.remove(ed.selection.getNode()); |
---|
| 95 | ed.execCommand('mceRepaint'); |
---|
| 96 | tinyMCEPopup.close(); |
---|
| 97 | return; |
---|
| 98 | } |
---|
| 99 | |
---|
| 100 | if (tinyMCEPopup.getParam("accessibility_warnings", 1)) { |
---|
| 101 | if (!f.alt.value) { |
---|
| 102 | tinyMCEPopup.editor.windowManager.confirm(tinyMCEPopup.getLang('advimage_dlg.missing_alt'), function(s) { |
---|
| 103 | if (s) |
---|
| 104 | t.insertAndClose(); |
---|
| 105 | }); |
---|
| 106 | |
---|
| 107 | return; |
---|
| 108 | } |
---|
| 109 | } |
---|
| 110 | |
---|
| 111 | t.insertAndClose(); |
---|
| 112 | }, |
---|
| 113 | |
---|
| 114 | insertAndClose : function() { |
---|
| 115 | var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {}, el; |
---|
| 116 | |
---|
| 117 | // Fixes crash in Safari |
---|
| 118 | if (tinymce.isWebKit) |
---|
| 119 | ed.getWin().focus(); |
---|
| 120 | |
---|
| 121 | if (!ed.settings.inline_styles) { |
---|
| 122 | args = { |
---|
| 123 | vspace : nl.vspace.value, |
---|
| 124 | hspace : nl.hspace.value, |
---|
| 125 | border : nl.border.value, |
---|
| 126 | align : getSelectValue(f, 'align') |
---|
| 127 | }; |
---|
| 128 | } else { |
---|
| 129 | // Remove deprecated values |
---|
| 130 | args = { |
---|
| 131 | vspace : '', |
---|
| 132 | hspace : '', |
---|
| 133 | border : '', |
---|
| 134 | align : '' |
---|
| 135 | }; |
---|
| 136 | } |
---|
| 137 | |
---|
| 138 | tinymce.extend(args, { |
---|
| 139 | src : nl.src.value, |
---|
| 140 | width : nl.width.value, |
---|
| 141 | height : nl.height.value, |
---|
| 142 | alt : nl.alt.value, |
---|
| 143 | title : nl.title.value, |
---|
| 144 | 'class' : getSelectValue(f, 'class_list'), |
---|
| 145 | style : nl.style.value, |
---|
| 146 | id : nl.id.value, |
---|
| 147 | dir : nl.dir.value, |
---|
| 148 | lang : nl.lang.value, |
---|
| 149 | usemap : nl.usemap.value, |
---|
| 150 | longdesc : nl.longdesc.value |
---|
| 151 | }); |
---|
| 152 | |
---|
| 153 | args.onmouseover = args.onmouseout = ''; |
---|
| 154 | |
---|
| 155 | if (f.onmousemovecheck.checked) { |
---|
| 156 | if (nl.onmouseoversrc.value) |
---|
| 157 | args.onmouseover = "this.src='" + nl.onmouseoversrc.value + "';"; |
---|
| 158 | |
---|
| 159 | if (nl.onmouseoutsrc.value) |
---|
| 160 | args.onmouseout = "this.src='" + nl.onmouseoutsrc.value + "';"; |
---|
| 161 | } |
---|
| 162 | |
---|
| 163 | el = ed.selection.getNode(); |
---|
| 164 | |
---|
| 165 | if (el && el.nodeName == 'IMG') { |
---|
| 166 | ed.dom.setAttribs(el, args); |
---|
| 167 | } else { |
---|
| 168 | ed.execCommand('mceInsertContent', false, '<img id="__mce_tmp" src="javascript:;" />'); |
---|
| 169 | ed.dom.setAttribs('__mce_tmp', args); |
---|
| 170 | ed.dom.setAttrib('__mce_tmp', 'id', ''); |
---|
| 171 | } |
---|
| 172 | |
---|
| 173 | tinyMCEPopup.close(); |
---|
| 174 | }, |
---|
| 175 | |
---|
| 176 | getAttrib : function(e, at) { |
---|
| 177 | var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2; |
---|
| 178 | |
---|
| 179 | if (ed.settings.inline_styles) { |
---|
| 180 | switch (at) { |
---|
| 181 | case 'align': |
---|
| 182 | if (v = dom.getStyle(e, 'float')) |
---|
| 183 | return v; |
---|
| 184 | |
---|
| 185 | if (v = dom.getStyle(e, 'vertical-align')) |
---|
| 186 | return v; |
---|
| 187 | |
---|
| 188 | break; |
---|
| 189 | |
---|
| 190 | case 'hspace': |
---|
| 191 | v = dom.getStyle(e, 'margin-left') |
---|
| 192 | v2 = dom.getStyle(e, 'margin-right'); |
---|
| 193 | |
---|
| 194 | if (v && v == v2) |
---|
| 195 | return parseInt(v.replace(/[^0-9]/g, '')); |
---|
| 196 | |
---|
| 197 | break; |
---|
| 198 | |
---|
| 199 | case 'vspace': |
---|
| 200 | v = dom.getStyle(e, 'margin-top') |
---|
| 201 | v2 = dom.getStyle(e, 'margin-bottom'); |
---|
| 202 | if (v && v == v2) |
---|
| 203 | return parseInt(v.replace(/[^0-9]/g, '')); |
---|
| 204 | |
---|
| 205 | break; |
---|
| 206 | |
---|
| 207 | case 'border': |
---|
| 208 | v = 0; |
---|
| 209 | |
---|
| 210 | tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) { |
---|
| 211 | sv = dom.getStyle(e, 'border-' + sv + '-width'); |
---|
| 212 | |
---|
| 213 | // False or not the same as prev |
---|
| 214 | if (!sv || (sv != v && v !== 0)) { |
---|
| 215 | v = 0; |
---|
| 216 | return false; |
---|
| 217 | } |
---|
| 218 | |
---|
| 219 | if (sv) |
---|
| 220 | v = sv; |
---|
| 221 | }); |
---|
| 222 | |
---|
| 223 | if (v) |
---|
| 224 | return parseInt(v.replace(/[^0-9]/g, '')); |
---|
| 225 | |
---|
| 226 | break; |
---|
| 227 | } |
---|
| 228 | } |
---|
| 229 | |
---|
| 230 | if (v = dom.getAttrib(e, at)) |
---|
| 231 | return v; |
---|
| 232 | |
---|
| 233 | return ''; |
---|
| 234 | }, |
---|
| 235 | |
---|
| 236 | setSwapImage : function(st) { |
---|
| 237 | var f = document.forms[0]; |
---|
| 238 | |
---|
| 239 | f.onmousemovecheck.checked = st; |
---|
| 240 | setBrowserDisabled('overbrowser', !st); |
---|
| 241 | setBrowserDisabled('outbrowser', !st); |
---|
| 242 | |
---|
| 243 | if (f.over_list) |
---|
| 244 | f.over_list.disabled = !st; |
---|
| 245 | |
---|
| 246 | if (f.out_list) |
---|
| 247 | f.out_list.disabled = !st; |
---|
| 248 | |
---|
| 249 | f.onmouseoversrc.disabled = !st; |
---|
| 250 | f.onmouseoutsrc.disabled = !st; |
---|
| 251 | }, |
---|
| 252 | |
---|
| 253 | fillClassList : function(id) { |
---|
| 254 | var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl; |
---|
| 255 | |
---|
| 256 | if (v = tinyMCEPopup.getParam('theme_advanced_styles')) { |
---|
| 257 | cl = []; |
---|
| 258 | |
---|
| 259 | tinymce.each(v.split(';'), function(v) { |
---|
| 260 | var p = v.split('='); |
---|
| 261 | |
---|
| 262 | cl.push({'title' : p[0], 'class' : p[1]}); |
---|
| 263 | }); |
---|
| 264 | } else |
---|
| 265 | cl = tinyMCEPopup.editor.dom.getClasses(); |
---|
| 266 | |
---|
| 267 | if (cl.length > 0) { |
---|
| 268 | lst.options[lst.options.length] = new Option(tinyMCEPopup.getLang('not_set'), ''); |
---|
| 269 | |
---|
| 270 | tinymce.each(cl, function(o) { |
---|
| 271 | lst.options[lst.options.length] = new Option(o.title || o['class'], o['class']); |
---|
| 272 | }); |
---|
| 273 | } else |
---|
| 274 | dom.remove(dom.getParent(id, 'tr')); |
---|
| 275 | }, |
---|
| 276 | |
---|
| 277 | fillFileList : function(id, l) { |
---|
| 278 | var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl; |
---|
| 279 | |
---|
| 280 | l = window[l]; |
---|
| 281 | |
---|
| 282 | if (l && l.length > 0) { |
---|
| 283 | lst.options[lst.options.length] = new Option('', ''); |
---|
| 284 | |
---|
| 285 | tinymce.each(l, function(o) { |
---|
| 286 | lst.options[lst.options.length] = new Option(o[0], o[1]); |
---|
| 287 | }); |
---|
| 288 | } else |
---|
| 289 | dom.remove(dom.getParent(id, 'tr')); |
---|
| 290 | }, |
---|
| 291 | |
---|
| 292 | resetImageData : function() { |
---|
| 293 | var f = document.forms[0]; |
---|
| 294 | |
---|
| 295 | f.elements.width.value = f.elements.height.value = ''; |
---|
| 296 | }, |
---|
| 297 | |
---|
| 298 | updateImageData : function(img, st) { |
---|
| 299 | var f = document.forms[0]; |
---|
| 300 | |
---|
| 301 | if (!st) { |
---|
| 302 | f.elements.width.value = img.width; |
---|
| 303 | f.elements.height.value = img.height; |
---|
| 304 | } |
---|
| 305 | |
---|
| 306 | this.preloadImg = img; |
---|
| 307 | }, |
---|
| 308 | |
---|
| 309 | changeAppearance : function() { |
---|
| 310 | var ed = tinyMCEPopup.editor, f = document.forms[0], img = document.getElementById('alignSampleImg'); |
---|
| 311 | |
---|
| 312 | if (img) { |
---|
| 313 | if (ed.getParam('inline_styles')) { |
---|
| 314 | ed.dom.setAttrib(img, 'style', f.style.value); |
---|
| 315 | } else { |
---|
| 316 | img.align = f.align.value; |
---|
| 317 | img.border = f.border.value; |
---|
| 318 | img.hspace = f.hspace.value; |
---|
| 319 | img.vspace = f.vspace.value; |
---|
| 320 | } |
---|
| 321 | } |
---|
| 322 | }, |
---|
| 323 | |
---|
| 324 | changeHeight : function() { |
---|
| 325 | var f = document.forms[0], tp, t = this; |
---|
| 326 | |
---|
| 327 | if (!f.constrain.checked || !t.preloadImg) { |
---|
| 328 | return; |
---|
| 329 | } |
---|
| 330 | |
---|
| 331 | if (f.width.value == "" || f.height.value == "") |
---|
| 332 | return; |
---|
| 333 | |
---|
| 334 | tp = (parseInt(f.width.value) / parseInt(t.preloadImg.width)) * t.preloadImg.height; |
---|
| 335 | f.height.value = tp.toFixed(0); |
---|
| 336 | }, |
---|
| 337 | |
---|
| 338 | changeWidth : function() { |
---|
| 339 | var f = document.forms[0], tp, t = this; |
---|
| 340 | |
---|
| 341 | if (!f.constrain.checked || !t.preloadImg) { |
---|
| 342 | return; |
---|
| 343 | } |
---|
| 344 | |
---|
| 345 | if (f.width.value == "" || f.height.value == "") |
---|
| 346 | return; |
---|
| 347 | |
---|
| 348 | tp = (parseInt(f.height.value) / parseInt(t.preloadImg.height)) * t.preloadImg.width; |
---|
| 349 | f.width.value = tp.toFixed(0); |
---|
| 350 | }, |
---|
| 351 | |
---|
| 352 | updateStyle : function(ty) { |
---|
| 353 | var dom = tinyMCEPopup.dom, st, v, f = document.forms[0], img = dom.create('img', {style : dom.get('style').value}); |
---|
| 354 | |
---|
| 355 | if (tinyMCEPopup.editor.settings.inline_styles) { |
---|
| 356 | // Handle align |
---|
| 357 | if (ty == 'align') { |
---|
| 358 | dom.setStyle(img, 'float', ''); |
---|
| 359 | dom.setStyle(img, 'vertical-align', ''); |
---|
| 360 | |
---|
| 361 | v = getSelectValue(f, 'align'); |
---|
| 362 | if (v) { |
---|
| 363 | if (v == 'left' || v == 'right') |
---|
| 364 | dom.setStyle(img, 'float', v); |
---|
| 365 | else |
---|
| 366 | img.style.verticalAlign = v; |
---|
| 367 | } |
---|
| 368 | } |
---|
| 369 | |
---|
| 370 | // Handle border |
---|
| 371 | if (ty == 'border') { |
---|
| 372 | dom.setStyle(img, 'border', ''); |
---|
| 373 | |
---|
| 374 | v = f.border.value; |
---|
| 375 | if (v || v == '0') { |
---|
| 376 | if (v == '0') |
---|
| 377 | img.style.border = ''; |
---|
| 378 | else |
---|
| 379 | img.style.border = v + 'px solid black'; |
---|
| 380 | } |
---|
| 381 | } |
---|
| 382 | |
---|
| 383 | // Handle hspace |
---|
| 384 | if (ty == 'hspace') { |
---|
| 385 | dom.setStyle(img, 'marginLeft', ''); |
---|
| 386 | dom.setStyle(img, 'marginRight', ''); |
---|
| 387 | |
---|
| 388 | v = f.hspace.value; |
---|
| 389 | if (v) { |
---|
| 390 | img.style.marginLeft = v + 'px'; |
---|
| 391 | img.style.marginRight = v + 'px'; |
---|
| 392 | } |
---|
| 393 | } |
---|
| 394 | |
---|
| 395 | // Handle vspace |
---|
| 396 | if (ty == 'vspace') { |
---|
| 397 | dom.setStyle(img, 'marginTop', ''); |
---|
| 398 | dom.setStyle(img, 'marginBottom', ''); |
---|
| 399 | |
---|
| 400 | v = f.vspace.value; |
---|
| 401 | if (v) { |
---|
| 402 | img.style.marginTop = v + 'px'; |
---|
| 403 | img.style.marginBottom = v + 'px'; |
---|
| 404 | } |
---|
| 405 | } |
---|
| 406 | |
---|
| 407 | // Merge |
---|
| 408 | dom.get('style').value = dom.serializeStyle(dom.parseStyle(img.style.cssText)); |
---|
| 409 | } |
---|
| 410 | }, |
---|
| 411 | |
---|
| 412 | changeMouseMove : function() { |
---|
| 413 | }, |
---|
| 414 | |
---|
| 415 | showPreviewImage : function(u, st) { |
---|
| 416 | if (!u) { |
---|
| 417 | tinyMCEPopup.dom.setHTML('prev', ''); |
---|
| 418 | return; |
---|
| 419 | } |
---|
| 420 | |
---|
| 421 | if (!st && tinyMCEPopup.getParam("advimage_update_dimensions_onchange", true)) |
---|
| 422 | this.resetImageData(); |
---|
| 423 | |
---|
| 424 | u = tinyMCEPopup.editor.documentBaseURI.toAbsolute(u); |
---|
| 425 | |
---|
| 426 | if (!st) |
---|
| 427 | tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this);" onerror="ImageDialog.resetImageData();" />'); |
---|
| 428 | else |
---|
| 429 | tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this, 1);" />'); |
---|
| 430 | } |
---|
| 431 | }; |
---|
| 432 | |
---|
| 433 | ImageDialog.preInit(); |
---|
| 434 | tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog); |
---|