Mercurial > public > sg101

annotate static/js/tiny_mce/plugins/advimage/js/image.js @ 1103:babb1f44dda5

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