[Summary view] [Print] [Text view]

   1  
   2  var tinymce = null, tinyMCEPopup, tinyMCE;
   3  
   4  tinyMCEPopup = {
   5      init: function() {
   6          var t = this, w, ti, li, q, i, it;
   7  
   8          li = ('' + document.location.search).replace(/^\?/, '').split('&');
   9          q = {};
  10          for (i=0; i<li.length; i++) {
  11              it = li[i].split('=');
  12              q[unescape(it[0])] = unescape(it[1]);
  13          }
  14  
  15          if (q.mce_rdomain)
  16              document.domain = q.mce_rdomain;
  17  
  18          // Find window & API
  19          w = t.getWin();
  20          tinymce = w.tinymce;
  21          tinyMCE = w.tinyMCE;
  22          t.editor = tinymce.EditorManager.activeEditor;
  23          t.params = t.editor.windowManager.params;
  24  
  25          // Setup local DOM
  26          t.dom = t.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document);
  27          t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);
  28      },
  29  
  30      getWin : function() {
  31          return window.dialogArguments || opener || parent || top;
  32      },
  33  
  34      getParam : function(n, dv) {
  35          return this.editor.getParam(n, dv);
  36      },
  37  
  38      close : function() {
  39          var t = this, win = t.getWin();
  40  
  41          // To avoid domain relaxing issue in Opera
  42  		function close() {
  43              win.tb_remove();
  44              tinymce = tinyMCE = t.editor = t.dom = t.dom.doc = null; // Cleanup
  45          };
  46  
  47          if (tinymce.isOpera)
  48              win.setTimeout(close, 0);
  49          else
  50              close();
  51      },
  52  
  53      execCommand : function(cmd, ui, val, a) {
  54          a = a || {};
  55          a.skip_focus = 1;
  56  
  57          this.restoreSelection();
  58          return this.editor.execCommand(cmd, ui, val, a);
  59      },
  60  
  61      storeSelection : function() {
  62          this.editor.windowManager.bookmark = tinyMCEPopup.editor.selection.getBookmark('simple');
  63      },
  64  
  65      restoreSelection : function() {
  66          var t = tinyMCEPopup;
  67  
  68          if (tinymce.isIE)
  69              t.editor.selection.moveToBookmark(t.editor.windowManager.bookmark);
  70      }
  71  }
  72  tinyMCEPopup.init();
  73  
  74  var wpImage = {
  75      preInit : function() {
  76          // import colors stylesheet from parent
  77          var win = tinyMCEPopup.getWin();
  78          var styles = win.document.styleSheets;
  79  
  80          for ( i = 0; i < styles.length; i++ ) {
  81              var url = styles.item(i).href;
  82              if ( url && url.indexOf('colors') != -1 )
  83                  document.write( '<link rel="stylesheet" href="'+url+'" type="text/css" media="all" />' );
  84          }
  85      },
  86  
  87      I : function(e) {
  88          return document.getElementById(e);
  89      },
  90  
  91      current : '',
  92      link : '',
  93      link_rel : '',
  94      target_value : '',
  95      current_size_sel : 's100',
  96      width : '',
  97      height : '',
  98      align : '',
  99      img_alt : '',
 100  
 101      setTabs : function(tab) {
 102          var t = this;
 103  
 104          if ( 'current' == tab.className ) return false;
 105          t.I('div_advanced').style.display = ( 'tab_advanced' == tab.id ) ? 'block' : 'none';
 106          t.I('div_basic').style.display = ( 'tab_basic' == tab.id ) ? 'block' : 'none';
 107          t.I('tab_basic').className = t.I('tab_advanced').className = '';
 108          tab.className = 'current';
 109          return false;
 110      },
 111  
 112      img_seturl : function(u) {
 113          var t = this, rel = t.I('link_rel').value;
 114  
 115          if ( 'current' == u ) {
 116              t.I('link_href').value = t.current;
 117              t.I('link_rel').value = t.link_rel;
 118          } else {
 119              t.I('link_href').value = t.link;
 120              if ( rel ) {
 121                  rel = rel.replace( /attachment|wp-att-[0-9]+/gi, '' );
 122                  t.I('link_rel').value = tinymce.trim(rel);
 123              }
 124          }
 125      },
 126  
 127      imgAlignCls : function(v) {
 128          var t = this, cls = t.I('img_classes').value;
 129  
 130          t.I('img_demo').className = t.align = v;
 131  
 132          cls = cls.replace( /align[^ "']+/gi, '' );
 133          cls += (' ' + v);
 134          cls = cls.replace( /\s+/g, ' ' ).replace( /^\s/, '' );
 135  
 136          if ( 'aligncenter' == v ) {
 137              t.I('hspace').value = '';
 138              t.updateStyle('hspace');
 139          }
 140  
 141          t.I('img_classes').value = cls;
 142      },
 143  
 144      showSize : function(el) {
 145          var t = this, demo = t.I('img_demo'), w = t.width, h = t.height, id = el.id || 's100', size;
 146  
 147          size = parseInt(id.substring(1)) / 200;
 148          demo.width = Math.round(w * size);
 149          demo.height = Math.round(h * size);
 150  
 151          t.showSizeClear();
 152          el.style.borderColor = '#A3A3A3';
 153          el.style.backgroundColor = '#E5E5E5';
 154      },
 155  
 156      showSizeSet : function() {
 157          var t = this;
 158  
 159          if ( (t.width * 1.3) > parseInt(t.preloadImg.width) ) {
 160              var s130 = t.I('s130'), s120 = t.I('s120'), s110 = t.I('s110');
 161  
 162              s130.onclick = s120.onclick = s110.onclick = null;
 163              s130.onmouseover = s120.onmouseover = s110.onmouseover = null;
 164              s130.style.color = s120.style.color = s110.style.color = '#aaa';
 165          }
 166      },
 167  
 168      showSizeRem : function() {
 169          var t = this, demo = t.I('img_demo'), f = document.forms[0];
 170  
 171          demo.width = Math.round(f.width.value * 0.5);
 172          demo.height = Math.round(f.height.value * 0.5);
 173          t.showSizeClear();
 174          t.I(t.current_size_sel).style.borderColor = '#A3A3A3';
 175          t.I(t.current_size_sel).style.backgroundColor = '#E5E5E5';
 176  
 177          return false;
 178      },
 179  
 180      showSizeClear : function() {
 181          var divs = this.I('img_size').getElementsByTagName('div');
 182  
 183          for ( i = 0; i < divs.length; i++ ) {
 184              divs[i].style.borderColor = '#f1f1f1';
 185              divs[i].style.backgroundColor = '#f1f1f1';
 186          }
 187      },
 188  
 189      imgEditSize : function(el) {
 190          var t = this, f = document.forms[0];
 191  
 192          if ( ! t.preloadImg || ! t.preloadImg.width || ! t.preloadImg.height )    return;
 193          var W = parseInt(t.preloadImg.width), H = parseInt(t.preloadImg.height), w = t.width || W, h = t.height || H, id = el.id || 's100';
 194  
 195          size = parseInt(id.substring(1)) / 100;
 196  
 197          w = Math.round(w * size);
 198          h = Math.round(h * size);
 199  
 200          f.width.value = Math.min(W, w);
 201          f.height.value = Math.min(H, h);
 202  
 203          t.current_size_sel = id;
 204          t.demoSetSize();
 205      },
 206  
 207      demoSetSize : function(img) {
 208          var demo = this.I('img_demo'), f = document.forms[0];
 209  
 210          demo.width = f.width.value ? Math.round(f.width.value * 0.5) : '';
 211          demo.height = f.height.value ? Math.round(f.height.value * 0.5) : '';
 212      },
 213  
 214      demoSetStyle : function() {
 215          var f = document.forms[0], demo = this.I('img_demo'), dom = tinyMCEPopup.editor.dom;
 216  
 217          if (demo) {
 218              dom.setAttrib(demo, 'style', f.img_style.value);
 219              dom.setStyle(demo, 'width', '');
 220              dom.setStyle(demo, 'height', '');
 221          }
 222      },
 223  
 224      origSize : function() {
 225          var t = this, f = document.forms[0], el = t.I('s100');
 226  
 227          f.width.value = t.width = t.preloadImg.width;
 228          f.height.value = t.height = t.preloadImg.height;
 229          t.showSizeSet();
 230          t.demoSetSize();
 231          t.showSize(el);
 232      },
 233  
 234      init : function() {
 235          var ed = tinyMCEPopup.editor, h;
 236  
 237          h = document.body.innerHTML;
 238  
 239          // Replace a=x with a="x" in IE
 240          if (tinymce.isIE)
 241              h = h.replace(/ (value|title|alt)=([^"][^\s>]+)/gi, ' $1="$2"')
 242  
 243          document.body.innerHTML = ed.translate(h);
 244          window.setTimeout( function(){wpImage.setup();}, 100 );
 245      },
 246  
 247      setup : function() {
 248          var t = this, h, c, el, id, link, fname, f = document.forms[0], ed = tinyMCEPopup.editor, d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, caption = '';
 249          document.dir = tinyMCEPopup.editor.getParam('directionality','');
 250  
 251          if ( tinyMCEPopup.editor.getParam('wpeditimage_disable_captions', false) )
 252              t.I('cap_field').style.display = 'none';
 253  
 254          tinyMCEPopup.restoreSelection();
 255          el = ed.selection.getNode();
 256          if (el.nodeName != 'IMG') return;
 257  
 258          f.img_src.value = d.src = link = ed.dom.getAttrib(el, 'src');
 259          ed.dom.setStyle(el, 'float', '');
 260          t.getImageData();
 261          c = ed.dom.getAttrib(el, 'class');
 262  
 263          if ( DL = dom.getParent(el, 'dl') ) {
 264              var dlc = ed.dom.getAttrib(DL, 'class');
 265              dlc = dlc.match(/align[^ "']+/i);
 266              if ( dlc && ! dom.hasClass(el, dlc) ) {
 267                  c += ' '+dlc;
 268                  tinymce.trim(c);
 269              }
 270  
 271              tinymce.each(DL.childNodes, function(e) {
 272                  if ( e.nodeName == 'DD' && dom.hasClass(e, 'wp-caption-dd') ) {
 273                      caption = e.innerHTML;
 274                      return;
 275                  }
 276              });
 277          }
 278  
 279          f.img_cap.value = caption;
 280          f.img_title.value = ed.dom.getAttrib(el, 'title');
 281          f.img_alt.value = ed.dom.getAttrib(el, 'alt');
 282          f.border.value = ed.dom.getAttrib(el, 'border');
 283          f.vspace.value = ed.dom.getAttrib(el, 'vspace');
 284          f.hspace.value = ed.dom.getAttrib(el, 'hspace');
 285          f.align.value = ed.dom.getAttrib(el, 'align');
 286          f.width.value = t.width = ed.dom.getAttrib(el, 'width');
 287          f.height.value = t.height = ed.dom.getAttrib(el, 'height');
 288          f.img_classes.value = c;
 289          f.img_style.value = ed.dom.getAttrib(el, 'style');
 290  
 291          // Move attribs to styles
 292          if (dom.getAttrib(el, 'hspace'))
 293              t.updateStyle('hspace');
 294  
 295          if (dom.getAttrib(el, 'border'))
 296              t.updateStyle('border');
 297  
 298          if (dom.getAttrib(el, 'vspace'))
 299              t.updateStyle('vspace');
 300  
 301          if (pa = ed.dom.getParent(el, 'A')) {
 302              f.link_href.value = t.current = ed.dom.getAttrib(pa, 'href');
 303              f.link_title.value = ed.dom.getAttrib(pa, 'title');
 304              f.link_rel.value = t.link_rel = ed.dom.getAttrib(pa, 'rel');
 305              f.link_style.value = ed.dom.getAttrib(pa, 'style');
 306              t.target_value = ed.dom.getAttrib(pa, 'target');
 307              f.link_classes.value = ed.dom.getAttrib(pa, 'class');
 308          }
 309  
 310          f.link_target.checked = ( t.target_value && t.target_value == '_blank' ) ? 'checked' : '';
 311  
 312          fname = link.substring( link.lastIndexOf('/') );
 313          fname = fname.replace(/-[0-9]{2,4}x[0-9]{2,4}/, '' );
 314          t.link = link.substring( 0, link.lastIndexOf('/') ) + fname;
 315  
 316          if ( c.indexOf('alignleft') != -1 ) {
 317              t.I('alignleft').checked = "checked";
 318              d.className = t.align = "alignleft";
 319          } else if ( c.indexOf('aligncenter') != -1 ) {
 320              t.I('aligncenter').checked = "checked";
 321              d.className = t.align = "aligncenter";
 322          } else if ( c.indexOf('alignright') != -1 ) {
 323              t.I('alignright').checked = "checked";
 324              d.className = t.align = "alignright";
 325          } else if ( c.indexOf('alignnone') != -1 ) {
 326              t.I('alignnone').checked = "checked";
 327              d.className = t.align = "alignnone";
 328          }
 329  
 330          if ( t.width && t.preloadImg.width ) t.showSizeSet();
 331          document.body.style.display = '';
 332      },
 333  
 334      remove : function() {
 335          var ed = tinyMCEPopup.editor, p, el;
 336  
 337          tinyMCEPopup.restoreSelection();
 338          el = ed.selection.getNode();
 339          if (el.nodeName != 'IMG') return;
 340  
 341          if ( (p = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(p, 'mceTemp') )
 342              ed.dom.remove(p);
 343          else if ( (p = ed.dom.getParent(el, 'A')) && p.childNodes.length == 1 )
 344              ed.dom.remove(p);
 345          else ed.dom.remove(el);
 346  
 347          ed.execCommand('mceRepaint');
 348          tinyMCEPopup.close();
 349          return;
 350      },
 351  
 352      update : function() {
 353          var t = this, f = document.forms[0], ed = tinyMCEPopup.editor, el, b, fixSafari = null, DL, P, A, DIV, do_caption = null, img_class = f.img_classes.value, html;
 354  
 355          tinyMCEPopup.restoreSelection();
 356          el = ed.selection.getNode();
 357  
 358          if (el.nodeName != 'IMG') return;
 359          if (f.img_src.value === '') {
 360              t.remove();
 361              return;
 362          }
 363  
 364          if ( f.img_cap.value != '' && f.width.value != '' ) {
 365              do_caption = 1;
 366              img_class = img_class.replace( /align[^ "']+\s?/gi, '' );
 367          }
 368  
 369          A = ed.dom.getParent(el, 'a');
 370          P = ed.dom.getParent(el, 'p');
 371          DL = ed.dom.getParent(el, 'dl');
 372          DIV = ed.dom.getParent(el, 'div');
 373  
 374          tinyMCEPopup.execCommand("mceBeginUndoLevel");
 375  
 376          ed.dom.setAttribs(el, {
 377              src : f.img_src.value,
 378              title : f.img_title.value,
 379              alt : f.img_alt.value,
 380              width : f.width.value,
 381              height : f.height.value,
 382              style : f.img_style.value,
 383              'class' : img_class
 384          });
 385  
 386          if ( f.link_href.value ) {
 387              // Create new anchor elements
 388              if ( A == null ) {
 389                  if ( ! f.link_href.value.match(/https?:\/\//i) )
 390                      f.link_href.value = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.link_href.value);
 391  
 392                  if ( tinymce.isWebKit && ed.dom.hasClass(el, 'aligncenter') ) {
 393                      ed.dom.removeClass(el, 'aligncenter');
 394                      fixSafari = 1;
 395                  }
 396  
 397                  tinyMCEPopup.execCommand("CreateLink", false, "#mce_temp_url#", {skip_undo : 1});
 398                  if ( fixSafari ) ed.dom.addClass(el, 'aligncenter');
 399  
 400                  tinymce.each(ed.dom.select("a"), function(n) {
 401                      if (ed.dom.getAttrib(n, 'href') == '#mce_temp_url#') {
 402  
 403                          ed.dom.setAttribs(n, {
 404                              href : f.link_href.value,
 405                              title : f.link_title.value,
 406                              rel : f.link_rel.value,
 407                              target : (f.link_target.checked == true) ? '_blank' : '',
 408                              'class' : f.link_classes.value,
 409                              style : f.link_style.value
 410                          });
 411                      }
 412                  });
 413              } else {
 414                  ed.dom.setAttribs(A, {
 415                      href : f.link_href.value,
 416                      title : f.link_title.value,
 417                      rel : f.link_rel.value,
 418                      target : (f.link_target.checked == true) ? '_blank' : '',
 419                      'class' : f.link_classes.value,
 420                      style : f.link_style.value
 421                  });
 422              }
 423          }
 424  
 425          if ( do_caption ) {
 426              var id, cap_id = '', cap, DT, DD, cap_width = 10 + parseInt(f.width.value), align = t.align.substring(5), div_cls = (t.align == 'aligncenter') ? 'mceTemp mceIEcenter' : 'mceTemp';
 427  
 428              if ( DL ) {
 429                  ed.dom.setAttribs(DL, {
 430                      'class' : 'wp-caption '+t.align,
 431                      style : 'width: '+cap_width+'px;'
 432                  });
 433  
 434                  if ( DIV )
 435                      ed.dom.setAttrib(DIV, 'class', div_cls);
 436  
 437                  if ( (DT = ed.dom.getParent(el, 'dt')) && (DD = DT.nextSibling) && ed.dom.hasClass(DD, 'wp-caption-dd') )
 438                      ed.dom.setHTML(DD, f.img_cap.value);
 439  
 440              } else {
 441                  var lnk = '', pa;
 442                  if ( (id = f.img_classes.value.match( /wp-image-([0-9]{1,6})/ )) && id[1] )
 443                      cap_id = 'attachment_'+id[1];
 444  
 445                  if ( f.link_href.value && (lnk = ed.dom.getParent(el, 'a')) ) {
 446                      if ( lnk.childNodes.length == 1 )
 447                          html = ed.dom.getOuterHTML(lnk);
 448                      else {
 449                          html = ed.dom.getOuterHTML(lnk);
 450                          html = html.match(/<a[^>]+>/i);
 451                          html = html+ed.dom.getOuterHTML(el)+'</a>';
 452                      }
 453                  } else html = ed.dom.getOuterHTML(el);
 454  
 455                  html = '<dl id="'+cap_id+'" class="wp-caption '+t.align+'" style="width: '+cap_width+
 456                  'px"><dt class="wp-caption-dt">'+html+'</dt><dd class="wp-caption-dd">'+f.img_cap.value+'</dd></dl>';
 457  
 458                  cap = ed.dom.create('div', {'class': div_cls}, html);
 459  
 460                  if ( P ) {
 461                      P.parentNode.insertBefore(cap, P);
 462                      if ( P.childNodes.length == 1 )
 463                          ed.dom.remove(P);
 464                      else if ( lnk && lnk.childNodes.length == 1 )
 465                          ed.dom.remove(lnk);
 466                      else ed.dom.remove(el);
 467                  } else if ( pa = ed.dom.getParent(el, 'TD,TH,LI') ) {
 468                      pa.appendChild(cap);
 469                      if ( lnk && lnk.childNodes.length == 1 )
 470                          ed.dom.remove(lnk);
 471                      else ed.dom.remove(el);
 472                  }
 473              }
 474  
 475          } else {
 476              if ( DL && DIV ) {
 477                  var aa;
 478                  if ( f.link_href.value && (aa = ed.dom.getParent(el, 'a')) ) html = ed.dom.getOuterHTML(aa);
 479                  else html = ed.dom.getOuterHTML(el);
 480  
 481                  P = ed.dom.create('p', {}, html);
 482                  DIV.parentNode.insertBefore(P, DIV);
 483                  ed.dom.remove(DIV);
 484              }
 485          }
 486  
 487          if ( f.img_classes.value.indexOf('aligncenter') != -1 ) {
 488              if ( P && ( ! P.style || P.style.textAlign != 'center' ) )
 489                  ed.dom.setStyle(P, 'textAlign', 'center');
 490          } else {
 491              if ( P && P.style && P.style.textAlign == 'center' )
 492                  ed.dom.setStyle(P, 'textAlign', '');
 493          }
 494  
 495          if ( ! f.link_href.value && A ) {
 496              b = ed.selection.getBookmark();
 497              ed.dom.remove(A, 1);
 498              ed.selection.moveToBookmark(b);
 499          }
 500  
 501          tinyMCEPopup.execCommand("mceEndUndoLevel");
 502          ed.execCommand('mceRepaint');
 503          tinyMCEPopup.close();
 504      },
 505  
 506      updateStyle : function(ty) {
 507          var dom = tinyMCEPopup.dom, st, v, f = document.forms[0], img = dom.create('img', {style : f.img_style.value});
 508  
 509          if (tinyMCEPopup.editor.settings.inline_styles) {
 510              // Handle align
 511              if (ty == 'align') {
 512                  dom.setStyle(img, 'float', '');
 513                  dom.setStyle(img, 'vertical-align', '');
 514  
 515                  v = f.align.value;
 516                  if (v) {
 517                      if (v == 'left' || v == 'right')
 518                          dom.setStyle(img, 'float', v);
 519                      else
 520                          img.style.verticalAlign = v;
 521                  }
 522              }
 523  
 524              // Handle border
 525              if (ty == 'border') {
 526                  dom.setStyle(img, 'border', '');
 527  
 528                  v = f.border.value;
 529                  if (v || v == '0') {
 530                      if (v == '0')
 531                          img.style.border = '0';
 532                      else
 533                          img.style.border = v + 'px solid black';
 534                  }
 535              }
 536  
 537              // Handle hspace
 538              if (ty == 'hspace') {
 539                  dom.setStyle(img, 'marginLeft', '');
 540                  dom.setStyle(img, 'marginRight', '');
 541  
 542                  v = f.hspace.value;
 543                  if (v) {
 544                      img.style.marginLeft = v + 'px';
 545                      img.style.marginRight = v + 'px';
 546                  }
 547              }
 548  
 549              // Handle vspace
 550              if (ty == 'vspace') {
 551                  dom.setStyle(img, 'marginTop', '');
 552                  dom.setStyle(img, 'marginBottom', '');
 553  
 554                  v = f.vspace.value;
 555                  if (v) {
 556                      img.style.marginTop = v + 'px';
 557                      img.style.marginBottom = v + 'px';
 558                  }
 559              }
 560  
 561              // Merge
 562              f.img_style.value = dom.serializeStyle(dom.parseStyle(img.style.cssText));
 563              this.demoSetStyle();
 564          }
 565      },
 566  
 567      checkVal : function(f) {
 568  
 569          if ( f.value == '' ) {
 570      //        if ( f.id == 'width' ) f.value = this.width || this.preloadImg.width;
 571      //        if ( f.id == 'height' ) f.value = this.height || this.preloadImg.height;
 572              if ( f.id == 'img_src' ) f.value = this.I('img_demo').src || this.preloadImg.src;
 573          }
 574      },
 575  
 576      resetImageData : function() {
 577          var f = document.forms[0];
 578  
 579          f.width.value = f.height.value = '';
 580      },
 581  
 582      updateImageData : function() {
 583          var f = document.forms[0], t = wpImage;
 584  
 585          if ( f.width.value == '' || f.height.value == '' ) {
 586              f.width.value = t.width = t.preloadImg.width;
 587              f.height.value = t.height = t.preloadImg.height;
 588          }
 589  
 590          t.showSizeSet();
 591          t.demoSetSize();
 592          if ( f.img_style.value )
 593              t.demoSetStyle();
 594      },
 595  
 596      getImageData : function() {
 597          var t = wpImage, f = document.forms[0];
 598  
 599          t.preloadImg = new Image();
 600          t.preloadImg.onload = t.updateImageData;
 601          t.preloadImg.onerror = t.resetImageData;
 602          t.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.img_src.value);
 603      }
 604  };
 605  
 606  window.onload = function(){wpImage.init();}
 607  wpImage.preInit();