wp-includes/js/tinymce/plugins/wpeditimage/editor_plugin_src.js

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