[Summary view] [Print] [Text view]

   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(), fl = tinyMCEPopup.getParam('external_image_list', 'tinyMCEImageList');
  13  
  14          tinyMCEPopup.resizeToInnerSize();
  15          this.fillClassList('class_list');
  16          this.fillFileList('src_list', fl);
  17          this.fillFileList('over_list', fl);
  18          this.fillFileList('out_list', fl);
  19          TinyMCE_EditableSelects.init();
  20  
  21          if (n.nodeName == 'IMG') {
  22              nl.src.value = dom.getAttrib(n, 'src');
  23              nl.width.value = dom.getAttrib(n, 'width');
  24              nl.height.value = dom.getAttrib(n, 'height');
  25              nl.alt.value = dom.getAttrib(n, 'alt');
  26              nl.title.value = dom.getAttrib(n, 'title');
  27              nl.vspace.value = this.getAttrib(n, 'vspace');
  28              nl.hspace.value = this.getAttrib(n, 'hspace');
  29              nl.border.value = this.getAttrib(n, 'border');
  30              selectByValue(f, 'align', this.getAttrib(n, 'align'));
  31              selectByValue(f, 'class_list', dom.getAttrib(n, 'class'), true, true);
  32              nl.style.value = dom.getAttrib(n, 'style');
  33              nl.id.value = dom.getAttrib(n, 'id');
  34              nl.dir.value = dom.getAttrib(n, 'dir');
  35              nl.lang.value = dom.getAttrib(n, 'lang');
  36              nl.usemap.value = dom.getAttrib(n, 'usemap');
  37              nl.longdesc.value = dom.getAttrib(n, 'longdesc');
  38              nl.insert.value = ed.getLang('update');
  39  
  40              if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseover')))
  41                  nl.onmouseoversrc.value = dom.getAttrib(n, 'onmouseover').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
  42  
  43              if (/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/.test(dom.getAttrib(n, 'onmouseout')))
  44                  nl.onmouseoutsrc.value = dom.getAttrib(n, 'onmouseout').replace(/^\s*this.src\s*=\s*\'([^\']+)\';?\s*$/, '$1');
  45  
  46              if (ed.settings.inline_styles) {
  47                  // Move attribs to styles

  48                  if (dom.getAttrib(n, 'align'))
  49                      this.updateStyle('align');
  50  
  51                  if (dom.getAttrib(n, 'hspace'))
  52                      this.updateStyle('hspace');
  53  
  54                  if (dom.getAttrib(n, 'border'))
  55                      this.updateStyle('border');
  56  
  57                  if (dom.getAttrib(n, 'vspace'))
  58                      this.updateStyle('vspace');
  59              }
  60          }
  61  
  62          // Setup browse button

  63          document.getElementById('srcbrowsercontainer').innerHTML = getBrowserHTML('srcbrowser','src','image','theme_advanced_image');
  64          if (isVisible('srcbrowser'))
  65              document.getElementById('src').style.width = '260px';
  66  
  67          // Setup browse button

  68          document.getElementById('onmouseoversrccontainer').innerHTML = getBrowserHTML('overbrowser','onmouseoversrc','image','theme_advanced_image');
  69          if (isVisible('overbrowser'))
  70              document.getElementById('onmouseoversrc').style.width = '260px';
  71  
  72          // Setup browse button

  73          document.getElementById('onmouseoutsrccontainer').innerHTML = getBrowserHTML('outbrowser','onmouseoutsrc','image','theme_advanced_image');
  74          if (isVisible('outbrowser'))
  75              document.getElementById('onmouseoutsrc').style.width = '260px';
  76  
  77          // If option enabled default contrain proportions to checked

  78          if (ed.getParam("advimage_constrain_proportions", true))
  79              f.constrain.checked = true;
  80  
  81          // Check swap image if valid data

  82          if (nl.onmouseoversrc.value || nl.onmouseoutsrc.value)
  83              this.setSwapImage(true);
  84          else
  85              this.setSwapImage(false);
  86  
  87          this.changeAppearance();
  88          this.showPreviewImage(nl.src.value, 1);
  89      },
  90  
  91      insert : function(file, title) {
  92          var ed = tinyMCEPopup.editor, t = this, f = document.forms[0];
  93  
  94          if (f.src.value === '') {
  95              if (ed.selection.getNode().nodeName == 'IMG') {
  96                  ed.dom.remove(ed.selection.getNode());
  97                  ed.execCommand('mceRepaint');
  98              }
  99  
 100              tinyMCEPopup.close();
 101              return;
 102          }
 103  
 104          if (tinyMCEPopup.getParam("accessibility_warnings", 1)) {
 105              if (!f.alt.value) {
 106                  tinyMCEPopup.confirm(tinyMCEPopup.getLang('advimage_dlg.missing_alt'), function(s) {
 107                      if (s)
 108                          t.insertAndClose();
 109                  });
 110  
 111                  return;
 112              }
 113          }
 114  
 115          t.insertAndClose();
 116      },
 117  
 118      insertAndClose : function() {
 119          var ed = tinyMCEPopup.editor, f = document.forms[0], nl = f.elements, v, args = {}, el;
 120  
 121          tinyMCEPopup.restoreSelection();
 122  
 123          // Fixes crash in Safari

 124          if (tinymce.isWebKit)
 125              ed.getWin().focus();
 126  
 127          if (!ed.settings.inline_styles) {
 128              args = {
 129                  vspace : nl.vspace.value,
 130                  hspace : nl.hspace.value,
 131                  border : nl.border.value,
 132                  align : getSelectValue(f, 'align')
 133              };
 134          } else {
 135              // Remove deprecated values

 136              args = {
 137                  vspace : '',
 138                  hspace : '',
 139                  border : '',
 140                  align : ''
 141              };
 142          }
 143  
 144          tinymce.extend(args, {
 145              src : nl.src.value.replace(/ /g, '%20'),
 146              width : nl.width.value,
 147              height : nl.height.value,
 148              alt : nl.alt.value,
 149              title : nl.title.value,
 150              'class' : getSelectValue(f, 'class_list'),
 151              style : nl.style.value,
 152              id : nl.id.value,
 153              dir : nl.dir.value,
 154              lang : nl.lang.value,
 155              usemap : nl.usemap.value,
 156              longdesc : nl.longdesc.value
 157          });
 158  
 159          args.onmouseover = args.onmouseout = '';
 160  
 161          if (f.onmousemovecheck.checked) {
 162              if (nl.onmouseoversrc.value)
 163                  args.onmouseover = "this.src='" + nl.onmouseoversrc.value + "';";
 164  
 165              if (nl.onmouseoutsrc.value)
 166                  args.onmouseout = "this.src='" + nl.onmouseoutsrc.value + "';";
 167          }
 168  
 169          el = ed.selection.getNode();
 170  
 171          if (el && el.nodeName == 'IMG') {
 172              ed.dom.setAttribs(el, args);
 173          } else {
 174              tinymce.each(args, function(value, name) {
 175                  if (value === "") {
 176                      delete args[name];
 177                  }
 178              });
 179  
 180              ed.execCommand('mceInsertContent', false, tinyMCEPopup.editor.dom.createHTML('img', args), {skip_undo : 1});
 181              ed.undoManager.add();
 182          }
 183  
 184          tinyMCEPopup.editor.execCommand('mceRepaint');
 185          tinyMCEPopup.editor.focus();
 186          tinyMCEPopup.close();
 187      },
 188  
 189      getAttrib : function(e, at) {
 190          var ed = tinyMCEPopup.editor, dom = ed.dom, v, v2;
 191  
 192          if (ed.settings.inline_styles) {
 193              switch (at) {
 194                  case 'align':
 195                      if (v = dom.getStyle(e, 'float'))
 196                          return v;
 197  
 198                      if (v = dom.getStyle(e, 'vertical-align'))
 199                          return v;
 200  
 201                      break;
 202  
 203                  case 'hspace':
 204                      v = dom.getStyle(e, 'margin-left')
 205                      v2 = dom.getStyle(e, 'margin-right');
 206  
 207                      if (v && v == v2)
 208                          return parseInt(v.replace(/[^0-9]/g, ''));
 209  
 210                      break;
 211  
 212                  case 'vspace':
 213                      v = dom.getStyle(e, 'margin-top')
 214                      v2 = dom.getStyle(e, 'margin-bottom');
 215                      if (v && v == v2)
 216                          return parseInt(v.replace(/[^0-9]/g, ''));
 217  
 218                      break;
 219  
 220                  case 'border':
 221                      v = 0;
 222  
 223                      tinymce.each(['top', 'right', 'bottom', 'left'], function(sv) {
 224                          sv = dom.getStyle(e, 'border-' + sv + '-width');
 225  
 226                          // False or not the same as prev

 227                          if (!sv || (sv != v && v !== 0)) {
 228                              v = 0;
 229                              return false;
 230                          }
 231  
 232                          if (sv)
 233                              v = sv;
 234                      });
 235  
 236                      if (v)
 237                          return parseInt(v.replace(/[^0-9]/g, ''));
 238  
 239                      break;
 240              }
 241          }
 242  
 243          if (v = dom.getAttrib(e, at))
 244              return v;
 245  
 246          return '';
 247      },
 248  
 249      setSwapImage : function(st) {
 250          var f = document.forms[0];
 251  
 252          f.onmousemovecheck.checked = st;
 253          setBrowserDisabled('overbrowser', !st);
 254          setBrowserDisabled('outbrowser', !st);
 255  
 256          if (f.over_list)
 257              f.over_list.disabled = !st;
 258  
 259          if (f.out_list)
 260              f.out_list.disabled = !st;
 261  
 262          f.onmouseoversrc.disabled = !st;
 263          f.onmouseoutsrc.disabled  = !st;
 264      },
 265  
 266      fillClassList : function(id) {
 267          var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
 268  
 269          if (v = tinyMCEPopup.getParam('theme_advanced_styles')) {
 270              cl = [];
 271  
 272              tinymce.each(v.split(';'), function(v) {
 273                  var p = v.split('=');
 274  
 275                  cl.push({'title' : p[0], 'class' : p[1]});
 276              });
 277          } else
 278              cl = tinyMCEPopup.editor.dom.getClasses();
 279  
 280          if (cl.length > 0) {
 281              lst.options.length = 0;
 282              lst.options[lst.options.length] = new Option(tinyMCEPopup.getLang('not_set'), '');
 283  
 284              tinymce.each(cl, function(o) {
 285                  lst.options[lst.options.length] = new Option(o.title || o['class'], o['class']);
 286              });
 287          } else
 288              dom.remove(dom.getParent(id, 'tr'));
 289      },
 290  
 291      fillFileList : function(id, l) {
 292          var dom = tinyMCEPopup.dom, lst = dom.get(id), v, cl;
 293  
 294          l = typeof(l) === 'function' ? l() : window[l];
 295          lst.options.length = 0;
 296  
 297          if (l && l.length > 0) {
 298              lst.options[lst.options.length] = new Option('', '');
 299  
 300              tinymce.each(l, function(o) {
 301                  lst.options[lst.options.length] = new Option(o[0], o[1]);
 302              });
 303          } else
 304              dom.remove(dom.getParent(id, 'tr'));
 305      },
 306  
 307      resetImageData : function() {
 308          var f = document.forms[0];
 309  
 310          f.elements.width.value = f.elements.height.value = '';
 311      },
 312  
 313      updateImageData : function(img, st) {
 314          var f = document.forms[0];
 315  
 316          if (!st) {
 317              f.elements.width.value = img.width;
 318              f.elements.height.value = img.height;
 319          }
 320  
 321          this.preloadImg = img;
 322      },
 323  
 324      changeAppearance : function() {
 325          var ed = tinyMCEPopup.editor, f = document.forms[0], img = document.getElementById('alignSampleImg');
 326  
 327          if (img) {
 328              if (ed.getParam('inline_styles')) {
 329                  ed.dom.setAttrib(img, 'style', f.style.value);
 330              } else {
 331                  img.align = f.align.value;
 332                  img.border = f.border.value;
 333                  img.hspace = f.hspace.value;
 334                  img.vspace = f.vspace.value;
 335              }
 336          }
 337      },
 338  
 339      changeHeight : function() {
 340          var f = document.forms[0], tp, t = this;
 341  
 342          if (!f.constrain.checked || !t.preloadImg) {
 343              return;
 344          }
 345  
 346          if (f.width.value == "" || f.height.value == "")
 347              return;
 348  
 349          tp = (parseInt(f.width.value) / parseInt(t.preloadImg.width)) * t.preloadImg.height;
 350          f.height.value = tp.toFixed(0);
 351      },
 352  
 353      changeWidth : function() {
 354          var f = document.forms[0], tp, t = this;
 355  
 356          if (!f.constrain.checked || !t.preloadImg) {
 357              return;
 358          }
 359  
 360          if (f.width.value == "" || f.height.value == "")
 361              return;
 362  
 363          tp = (parseInt(f.height.value) / parseInt(t.preloadImg.height)) * t.preloadImg.width;
 364          f.width.value = tp.toFixed(0);
 365      },
 366  
 367      updateStyle : function(ty) {
 368          var dom = tinyMCEPopup.dom, b, bStyle, bColor, v, isIE = tinymce.isIE, f = document.forms[0], img = dom.create('img', {style : dom.get('style').value});
 369  
 370          if (tinyMCEPopup.editor.settings.inline_styles) {
 371              // Handle align

 372              if (ty == 'align') {
 373                  dom.setStyle(img, 'float', '');
 374                  dom.setStyle(img, 'vertical-align', '');
 375  
 376                  v = getSelectValue(f, 'align');
 377                  if (v) {
 378                      if (v == 'left' || v == 'right')
 379                          dom.setStyle(img, 'float', v);
 380                      else
 381                          img.style.verticalAlign = v;
 382                  }
 383              }
 384  
 385              // Handle border

 386              if (ty == 'border') {
 387                  b = img.style.border ? img.style.border.split(' ') : [];
 388                  bStyle = dom.getStyle(img, 'border-style');
 389                  bColor = dom.getStyle(img, 'border-color');
 390  
 391                  dom.setStyle(img, 'border', '');
 392  
 393                  v = f.border.value;
 394                  if (v || v == '0') {
 395                      if (v == '0')
 396                          img.style.border = isIE ? '0' : '0 none none';
 397                      else {
 398                          var isOldIE = tinymce.isIE && (!document.documentMode || document.documentMode < 9);
 399  
 400                          if (b.length == 3 && b[isOldIE ? 2 : 1])
 401                              bStyle = b[isOldIE ? 2 : 1];
 402                          else if (!bStyle || bStyle == 'none')
 403                              bStyle = 'solid';
 404                          if (b.length == 3 && b[isIE ? 0 : 2])
 405                              bColor = b[isOldIE ? 0 : 2];
 406                          else if (!bColor || bColor == 'none')
 407                              bColor = 'black';
 408                          img.style.border = v + 'px ' + bStyle + ' ' + bColor;
 409                      }
 410                  }
 411              }
 412  
 413              // Handle hspace

 414              if (ty == 'hspace') {
 415                  dom.setStyle(img, 'marginLeft', '');
 416                  dom.setStyle(img, 'marginRight', '');
 417  
 418                  v = f.hspace.value;
 419                  if (v) {
 420                      img.style.marginLeft = v + 'px';
 421                      img.style.marginRight = v + 'px';
 422                  }
 423              }
 424  
 425              // Handle vspace

 426              if (ty == 'vspace') {
 427                  dom.setStyle(img, 'marginTop', '');
 428                  dom.setStyle(img, 'marginBottom', '');
 429  
 430                  v = f.vspace.value;
 431                  if (v) {
 432                      img.style.marginTop = v + 'px';
 433                      img.style.marginBottom = v + 'px';
 434                  }
 435              }
 436  
 437              // Merge

 438              dom.get('style').value = dom.serializeStyle(dom.parseStyle(img.style.cssText), 'img');
 439          }
 440      },
 441  
 442      changeMouseMove : function() {
 443      },
 444  
 445      showPreviewImage : function(u, st) {
 446          if (!u) {
 447              tinyMCEPopup.dom.setHTML('prev', '');
 448              return;
 449          }
 450  
 451          if (!st && tinyMCEPopup.getParam("advimage_update_dimensions_onchange", true))
 452              this.resetImageData();
 453  
 454          u = tinyMCEPopup.editor.documentBaseURI.toAbsolute(u);
 455  
 456          if (!st)
 457              tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this);" onerror="ImageDialog.resetImageData();" />');
 458          else
 459              tinyMCEPopup.dom.setHTML('prev', '<img id="previewImg" src="' + u + '" border="0" onload="ImageDialog.updateImageData(this, 1);" />');
 460      }
 461  };
 462  
 463  ImageDialog.preInit();
 464  tinyMCEPopup.onInit.add(ImageDialog.init, ImageDialog);