[Summary view] [Print] [Text view]

   1  /* global tinymce */
   2  (function() {
   3      var mouse = {};
   4  
   5      tinymce.create('tinymce.plugins.wpEditImage', {
   6          url: '',
   7          editor: {},
   8  
   9          init: function(ed, url) {
  10              var t = this;
  11  
  12              t.url = url;
  13              t.editor = ed;
  14              t._createButtons();
  15  
  16              ed.addCommand('WP_EditImage', t._editImage);
  17  
  18              ed.onInit.add(function(ed) {
  19                  ed.dom.events.add(ed.getBody(), 'mousedown', function(e) {
  20                      var parent;
  21  
  22                      if ( e.target.nodeName == 'IMG' && ( parent = ed.dom.getParent(e.target, 'div.mceTemp') ) ) {
  23                          if ( tinymce.isGecko )
  24                              ed.selection.select(parent);
  25                          else if ( tinymce.isWebKit )
  26                              ed.dom.events.prevent(e);
  27                      }
  28                  });
  29  
  30                  // when pressing Return inside a caption move the caret to a new parapraph under it
  31                  ed.dom.events.add(ed.getBody(), 'keydown', function(e) {
  32                      var n, DL, DIV, P;
  33  
  34                      if ( e.keyCode == 13 ) {
  35                          n = ed.selection.getNode();
  36                          DL = ed.dom.getParent(n, 'dl.wp-caption');
  37  
  38                          if ( DL )
  39                              DIV = ed.dom.getParent(DL, 'div.mceTemp');
  40  
  41                          if ( DIV ) {
  42                              ed.dom.events.cancel(e);
  43                              P = ed.dom.create('p', {}, '\uFEFF');
  44                              ed.dom.insertAfter( P, DIV );
  45                              ed.selection.setCursorLocation(P, 0);
  46                              return false;
  47                          }
  48                      }
  49                  });
  50  
  51                  // iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
  52                  if ( 'ontouchstart' in window ) {
  53                      ed.dom.events.add(ed.getBody(), 'touchstart', function(e){
  54                          t._showButtons(e);
  55                      });
  56                  }
  57              });
  58  
  59              // resize the caption <dl> when the image is soft-resized by the user
  60              ed.onMouseUp.add(function(ed, e) {
  61                  if ( tinymce.isWebKit || tinymce.isOpera )
  62                      return;
  63  
  64                  if ( mouse.x && (e.clientX != mouse.x || e.clientY != mouse.y) ) {
  65                      var n = ed.selection.getNode();
  66  
  67                      if ( 'IMG' == n.nodeName ) {
  68                          window.setTimeout(function(){
  69                              var DL = ed.dom.getParent(n, 'dl.wp-caption'), width;
  70  
  71                              if ( n.width != mouse.img_w || n.height != mouse.img_h )
  72                                  n.className = n.className.replace(/size-[^ "']+/, '');
  73  
  74                              if ( DL ) {
  75                                  width = ed.dom.getAttrib(n, 'width') || n.width;
  76                                  width = parseInt(width, 10);
  77                                  ed.dom.setStyle(DL, 'width', 10 + width);
  78                                  ed.execCommand('mceRepaint');
  79                              }
  80                          }, 100);
  81                      }
  82                  }
  83                  mouse = {};
  84              });
  85  
  86              // show editimage buttons
  87              ed.onMouseDown.add(function(ed, e){
  88                  t._showButtons(e);
  89              });
  90  
  91              ed.onBeforeSetContent.add(function(ed, o) {
  92                  o.content = ed.wpSetImgCaption(o.content);
  93              });
  94  
  95              ed.onPostProcess.add(function(ed, o) {
  96                  if (o.get)
  97                      o.content = ed.wpGetImgCaption(o.content);
  98              });
  99  
 100              ed.wpSetImgCaption = function(content) {
 101                  return t._do_shcode(content);
 102              };
 103  
 104              ed.wpGetImgCaption = function(content) {
 105                  return t._get_shcode(content);
 106              };
 107  
 108              // When inserting content, if the caret is inside a caption create new paragraph under
 109              // and move the caret there
 110              ed.onBeforeExecCommand.add( function( ed, cmd ) {
 111                  var node, p;
 112  
 113                  if ( cmd == 'mceInsertContent' ) {
 114                      node = ed.dom.getParent(ed.selection.getNode(), 'div.mceTemp');
 115  
 116                      if ( !node )
 117                          return;
 118  
 119                      p = ed.dom.create('p');
 120                      ed.dom.insertAfter( p, node );
 121                      ed.selection.setCursorLocation(p, 0);
 122                  }
 123              });
 124          },
 125  
 126          _do_shcode : function(content) {
 127              return content.replace(/(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function(a,b,c){
 128                  var id, cls, w, cap, div_cls, img, trim = tinymce.trim;
 129  
 130                  id = b.match(/id=['"]([^'"]*)['"] ?/);
 131                  if ( id )
 132                      b = b.replace(id[0], '');
 133  
 134                  cls = b.match(/align=['"]([^'"]*)['"] ?/);
 135                  if ( cls )
 136                      b = b.replace(cls[0], '');
 137  
 138                  w = b.match(/width=['"]([0-9]*)['"] ?/);
 139                  if ( w )
 140                      b = b.replace(w[0], '');
 141  
 142                  c = trim(c);
 143                  img = c.match(/((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i);
 144  
 145                  if ( img && img[2] ) {
 146                      cap = trim( img[2] );
 147                      img = trim( img[1] );
 148                  } else {
 149                      // old captions shortcode style
 150                      cap = trim(b).replace(/caption=['"]/, '').replace(/['"]$/, '');
 151                      img = c;
 152                  }
 153  
 154                  id = ( id && id[1] ) ? id[1] : '';
 155                  cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
 156                  w = ( w && w[1] ) ? w[1] : '';
 157  
 158                  if ( !w || !cap )
 159                      return c;
 160  
 161                  div_cls = 'mceTemp';
 162                  if ( cls == 'aligncenter' )
 163                      div_cls += ' mceIEcenter';
 164  
 165                  w = parseInt( w, 10 ) + 10;
 166                  return '<div class="'+div_cls+'"><dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+w+
 167                  'px"><dt class="wp-caption-dt">'+img+'</dt><dd class="wp-caption-dd">'+cap+'</dd></dl></div>';
 168              });
 169          },
 170  
 171          _get_shcode : function(content) {
 172              return content.replace(/<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function(a, b){
 173                  var ret = b.replace(/<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function(a,b,c,cap){
 174                      var id, cls, w;
 175  
 176                      w = c.match(/width="([0-9]*)"/);
 177                      w = ( w && w[1] ) ? w[1] : '';
 178  
 179                      if ( !w || !cap )
 180                          return c;
 181  
 182                      id = b.match(/id="([^"]*)"/);
 183                      id = ( id && id[1] ) ? id[1] : '';
 184  
 185                      cls = b.match(/class="([^"]*)"/);
 186                      cls = ( cls && cls[1] ) ? cls[1] : '';
 187                      cls = cls.match(/align[a-z]+/) || 'alignnone';
 188  
 189                      cap = cap.replace(/\r\n|\r/g, '\n').replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g, function(a){
 190                          // no line breaks inside HTML tags
 191                          return a.replace(/[\r\n\t]+/, ' ');
 192                      });
 193  
 194                      // convert remaining line breaks to <br>
 195                      cap = cap.replace(/\s*\n\s*/g, '<br />');
 196  
 197                      return '[caption id="'+id+'" align="'+cls+'" width="'+w+'"]'+c+' '+cap+'[/caption]';
 198                  });
 199  
 200                  if ( ret.indexOf('[caption') !== 0 ) {
 201                      // the caption html seems brocken, try to find the image that may be wrapped in a link
 202                      // and may be followed by <p> with the caption text.
 203                      ret = b.replace(/[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2');
 204                  }
 205  
 206                  return ret;
 207              });
 208          },
 209  
 210          _createButtons : function() {
 211              var t = this, ed = tinymce.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
 212  
 213              if ( DOM.get('wp_editbtns') )
 214                  return;
 215  
 216              isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
 217                  ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
 218  
 219              DOM.add(document.body, 'div', {
 220                  id : 'wp_editbtns',
 221                  style : 'display:none;'
 222              });
 223  
 224              editButton = DOM.add('wp_editbtns', 'img', {
 225                  src : isRetina ? t.url+'/img/image-2x.png' : t.url+'/img/image.png',
 226                  id : 'wp_editimgbtn',
 227                  width : '24',
 228                  height : '24',
 229                  title : ed.getLang('wpeditimage.edit_img')
 230              });
 231  
 232              tinymce.dom.Event.add(editButton, 'mousedown', function() {
 233                  t._editImage();
 234                  ed.plugins.wordpress._hideButtons();
 235              });
 236  
 237              dellButton = DOM.add('wp_editbtns', 'img', {
 238                  src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
 239                  id : 'wp_delimgbtn',
 240                  width : '24',
 241                  height : '24',
 242                  title : ed.getLang('wpeditimage.del_img')
 243              });
 244  
 245              tinymce.dom.Event.add(dellButton, 'mousedown', function() {
 246                  var ed = tinymce.activeEditor, el = ed.selection.getNode(), parent;
 247  
 248                  if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) {
 249                      if ( (parent = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(parent, 'mceTemp') ) {
 250                          ed.dom.remove(parent);
 251                      } else {
 252                          if ( el.parentNode.nodeName == 'A' && el.parentNode.childNodes.length == 1 )
 253                              el = el.parentNode;
 254  
 255                          if ( el.parentNode.nodeName == 'P' && el.parentNode.childNodes.length == 1 )
 256                              el = el.parentNode;
 257  
 258                          ed.dom.remove(el);
 259                      }
 260  
 261                      ed.execCommand('mceRepaint');
 262                      return false;
 263                  }
 264                  ed.plugins.wordpress._hideButtons();
 265              });
 266          },
 267          
 268          _editImage : function() {
 269              var ed = tinymce.activeEditor, url = this.url, el = ed.selection.getNode(), vp, H, W, cls = el.className;
 270  
 271              if ( cls.indexOf('mceItem') != -1 || cls.indexOf('wpGallery') != -1 || el.nodeName != 'IMG' )
 272                  return;
 273  
 274              vp = tinymce.DOM.getViewPort();
 275              H = 680 < (vp.h - 70) ? 680 : vp.h - 70;
 276              W = 650 < vp.w ? 650 : vp.w;
 277  
 278              ed.windowManager.open({
 279                  file: url + '/editimage.html',
 280                  width: W+'px',
 281                  height: H+'px',
 282                  inline: true
 283              });
 284          },
 285  
 286          _showButtons : function(e) {
 287              var ed = this.editor, target = e.target;
 288  
 289              if ( target.nodeName != 'IMG' ) {
 290                  if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 ) {
 291                      target = target.firstChild;
 292                  } else {
 293                      ed.plugins.wordpress._hideButtons();
 294                      return;
 295                  }
 296              }
 297  
 298              if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) {
 299                  mouse = {
 300                      x: e.clientX,
 301                      y: e.clientY,
 302                      img_w: target.clientWidth,
 303                      img_h: target.clientHeight
 304                  };
 305  
 306                  if ( e.type == 'touchstart' ) {
 307                      ed.selection.select(target);
 308                      ed.dom.events.cancel(e);
 309                  }
 310  
 311                  ed.plugins.wordpress._hideButtons();
 312                  ed.plugins.wordpress._showButtons(target, 'wp_editbtns');
 313              }
 314          },
 315  
 316          getInfo : function() {
 317              return {
 318                  longname : 'Edit Image',
 319                  author : 'WordPress',
 320                  authorurl : 'http://wordpress.org',
 321                  infourl : '',
 322                  version : '1.0'
 323              };
 324          }
 325      });
 326  
 327      tinymce.PluginManager.add('wpeditimage', tinymce.plugins.wpEditImage);
 328  })();