[Summary view] [Print] [Text view]

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