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