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

   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 })();