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                                 w = parseInt( w, 10 ) + 10;
 164                                 return '<div class="'+div_cls+'"><dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+w+
 165                                 'px"><dt class="wp-caption-dt">'+img+'</dt><dd class="wp-caption-dd">'+cap+'</dd></dl></div>';
 166                         });
 167                 },
 168
 169                 _get_shcode : function(content) {
 170                         return content.replace(/<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function(a, b){
 171                                 var ret = b.replace(/<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function(a,b,c,cap){
 172                                         var id, cls, w;
 173
 174                                         w = c.match(/width="([0-9]*)"/);
 175                                         w = ( w && w[1] ) ? w[1] : '';
 176
 177                                         if ( !w || !cap )
 178                                                 return c;
 179
 180                                         id = b.match(/id="([^"]*)"/);
 181                                         id = ( id && id[1] ) ? id[1] : '';
 182
 183                                         cls = b.match(/class="([^"]*)"/);
 184                                         cls = ( cls && cls[1] ) ? cls[1] : '';
 185                                         cls = cls.match(/align[a-z]+/) || 'alignnone';
 186
 187                                         cap = cap.replace(/\r\n|\r/g, '\n').replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g, function(a){
 188                                                 // no line breaks inside HTML tags
 189                                                 return a.replace(/[\r\n\t]+/, ' ');
 190                                         });
 191
 192                                         // convert remaining line breaks to <br>
 193                                         cap = cap.replace(/\s*\n\s*/g, '<br />');
 194
 195                                         return '[caption id="'+id+'" align="'+cls+'" width="'+w+'"]'+c+' '+cap+'[/caption]';
 196                                 });
 197
 198                                 if ( ret.indexOf('[caption') !== 0 ) {
 199                                         // the caption html seems brocken, try to find the image that may be wrapped in a link
 200                                         // and may be followed by <p> with the caption text.
 201                                         ret = b.replace(/[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2');
 202                                 }
 203
 204                                 return ret;
 205                         });
 206                 },
 207
 208                 _createButtons : function() {
 209                         var t = this, ed = tinymce.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
 210
 211                         if ( DOM.get('wp_editbtns') )
 212                                 return;
 213
 214                         isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
 215                                 ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
 216
 217                         DOM.add(document.body, 'div', {
 218                                 id : 'wp_editbtns',
 219                                 style : 'display:none;'
 220                         });
 221
 222                         editButton = DOM.add('wp_editbtns', 'img', {
 223                                 src : isRetina ? t.url+'/img/image-2x.png' : t.url+'/img/image.png',
 224                                 id : 'wp_editimgbtn',
 225                                 width : '24',
 226                                 height : '24',
 227                                 title : ed.getLang('wpeditimage.edit_img')
 228                         });
 229
 230                         tinymce.dom.Event.add(editButton, 'mousedown', function(e) {
 231                                 t._editImage();
 232                                 ed.plugins.wordpress._hideButtons();
 233                         });
 234
 235                         dellButton = DOM.add('wp_editbtns', 'img', {
 236                                 src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
 237                                 id : 'wp_delimgbtn',
 238                                 width : '24',
 239                                 height : '24',
 240                                 title : ed.getLang('wpeditimage.del_img')
 241                         });
 242
 243                         tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
 244                                 var ed = tinymce.activeEditor, el = ed.selection.getNode(), parent;
 245
 246                                 if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) {
 247                                         if ( (parent = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(parent, 'mceTemp') ) {
 248                                                 ed.dom.remove(parent);
 249                                         } else {
 250                                                 if ( el.parentNode.nodeName == 'A' && el.parentNode.childNodes.length == 1 )
 251                                                         el = el.parentNode;
 252
 253                                                 if ( el.parentNode.nodeName == 'P' && el.parentNode.childNodes.length == 1 )
 254                                                         el = el.parentNode;
 255
 256                                                 ed.dom.remove(el);
 257                                         }
 258
 259                                         ed.execCommand('mceRepaint');
 260                                         return false;
 261                                 }
 262                                 ed.plugins.wordpress._hideButtons();
 263                         });
 264                 },
 265
 266                 _editImage : function() {
 267                         var ed = tinymce.activeEditor, url = this.url, el = ed.selection.getNode(), vp, H, W, cls = el.className;
 268
 269                         if ( cls.indexOf('mceItem') != -1 || cls.indexOf('wpGallery') != -1 || el.nodeName != 'IMG' )
 270                                 return;
 271
 272                         vp = tinymce.DOM.getViewPort();
 273                         H = 680 < (vp.h - 70) ? 680 : vp.h - 70;
 274                         W = 650 < vp.w ? 650 : vp.w;
 275
 276                         ed.windowManager.open({
 277                                 file: url + '/editimage.html',
 278                                 width: W+'px',
 279                                 height: H+'px',
 280                                 inline: true
 281                         });
 282                 },
 283
 284                 _showButtons : function(e) {
 285                         var ed = this.editor, target = e.target;
 286
 287                         if ( target.nodeName != 'IMG' ) {
 288                                 if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 ) {
 289                                         target = target.firstChild;
 290                                 } else {
 291                                         ed.plugins.wordpress._hideButtons();
 292                                         return;
 293                                 }
 294                         }
 295
 296                         if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) {
 297                                 mouse = {
 298                                         x: e.clientX,
 299                                         y: e.clientY,
 300                                         img_w: target.clientWidth,
 301                                         img_h: target.clientHeight
 302                                 };
 303
 304                                 if ( e.type == 'touchstart' ) {
 305                                         ed.selection.select(target);
 306                                         ed.dom.events.cancel(e);
 307                                 }
 308
 309                                 ed.plugins.wordpress._hideButtons();
 310                                 ed.plugins.wordpress._showButtons(target, 'wp_editbtns');
 311                         }
 312                 },
 313
 314                 getInfo : function() {
 315                         return {
 316                                 longname : 'Edit Image',
 317                                 author : 'WordPress',
 318                                 authorurl : 'http://wordpress.org',
 319                                 infourl : '',
 320                                 version : "1.0"
 321                         };
 322                 }
 323         });
 324
 325         tinymce.PluginManager.add('wpeditimage', tinymce.plugins.wpEditImage);
 326 })();