9 |
9 |
10 t.url = url; |
10 t.url = url; |
11 t.editor = ed; |
11 t.editor = ed; |
12 t._createButtons(); |
12 t._createButtons(); |
13 |
13 |
14 // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...'); |
14 ed.addCommand('WP_EditImage', t._editImage); |
15 ed.addCommand('WP_EditImage', function() { |
|
16 var el = ed.selection.getNode(), vp, H, W, cls = ed.dom.getAttrib(el, 'class'); |
|
17 |
|
18 if ( cls.indexOf('mceItem') != -1 || cls.indexOf('wpGallery') != -1 || el.nodeName != 'IMG' ) |
|
19 return; |
|
20 |
|
21 vp = tinymce.DOM.getViewPort(); |
|
22 H = 680 < (vp.h - 70) ? 680 : vp.h - 70; |
|
23 W = 650 < vp.w ? 650 : vp.w; |
|
24 |
|
25 ed.windowManager.open({ |
|
26 file: url + '/editimage.html', |
|
27 width: W+'px', |
|
28 height: H+'px', |
|
29 inline: true |
|
30 }); |
|
31 }); |
|
32 |
15 |
33 ed.onInit.add(function(ed) { |
16 ed.onInit.add(function(ed) { |
34 ed.dom.events.add(ed.getBody(), 'dragstart', function(e) { |
17 ed.dom.events.add(ed.getBody(), 'mousedown', function(e) { |
35 var parent; |
18 var parent; |
36 |
19 |
37 if ( e.target.nodeName == 'IMG' && ( parent = ed.dom.getParent(e.target, 'div.mceTemp') ) ) { |
20 if ( e.target.nodeName == 'IMG' && ( parent = ed.dom.getParent(e.target, 'div.mceTemp') ) ) { |
38 ed.selection.select(parent); |
21 if ( tinymce.isGecko ) |
|
22 ed.selection.select(parent); |
|
23 else if ( tinymce.isWebKit ) |
|
24 ed.dom.events.prevent(e); |
39 } |
25 } |
40 }); |
26 }); |
41 }); |
27 |
42 |
28 // when pressing Return inside a caption move the caret to a new parapraph under it |
43 // resize the caption <dl> when the image is soft-resized by the user (only possible in Firefox and IE) |
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 |
44 ed.onMouseUp.add(function(ed, e) { |
58 ed.onMouseUp.add(function(ed, e) { |
45 if ( tinymce.isWebKit || tinymce.isOpera ) |
59 if ( tinymce.isWebKit || tinymce.isOpera ) |
46 return; |
60 return; |
47 |
61 |
48 if ( mouse.x && (e.clientX != mouse.x || e.clientY != mouse.y) ) { |
62 if ( mouse.x && (e.clientX != mouse.x || e.clientY != mouse.y) ) { |
66 } |
80 } |
67 mouse = {}; |
81 mouse = {}; |
68 }); |
82 }); |
69 |
83 |
70 // show editimage buttons |
84 // show editimage buttons |
71 ed.onMouseDown.add(function(ed, e) { |
85 ed.onMouseDown.add(function(ed, e){ |
72 var target = e.target; |
86 t._showButtons(e); |
73 |
|
74 if ( target.nodeName != 'IMG' ) { |
|
75 if ( target.firstChild && target.firstChild.nodeName == 'IMG' && target.childNodes.length == 1 ) |
|
76 target = target.firstChild; |
|
77 else |
|
78 return; |
|
79 } |
|
80 |
|
81 if ( ed.dom.getAttrib(target, 'class').indexOf('mceItem') == -1 ) { |
|
82 mouse = { |
|
83 x: e.clientX, |
|
84 y: e.clientY, |
|
85 img_w: target.clientWidth, |
|
86 img_h: target.clientHeight |
|
87 }; |
|
88 |
|
89 ed.plugins.wordpress._showButtons(target, 'wp_editbtns'); |
|
90 } |
|
91 }); |
|
92 |
|
93 // when pressing Return inside a caption move the caret to a new parapraph under it |
|
94 ed.onKeyPress.add(function(ed, e) { |
|
95 var n, DL, DIV, P; |
|
96 |
|
97 if ( e.keyCode == 13 ) { |
|
98 n = ed.selection.getNode(); |
|
99 DL = ed.dom.getParent(n, 'dl.wp-caption'); |
|
100 |
|
101 if ( DL ) |
|
102 DIV = ed.dom.getParent(DL, 'div.mceTemp'); |
|
103 |
|
104 if ( DIV ) { |
|
105 P = ed.dom.create('p', {}, '<br>'); |
|
106 ed.dom.insertAfter( P, DIV ); |
|
107 ed.selection.select(P.firstChild); |
|
108 |
|
109 if ( tinymce.isIE ) { |
|
110 ed.selection.setContent(''); |
|
111 } else { |
|
112 ed.selection.setContent('<br _moz_dirty="">'); |
|
113 ed.selection.setCursorLocation(P, 0); |
|
114 } |
|
115 |
|
116 ed.dom.events.cancel(e); |
|
117 return false; |
|
118 } |
|
119 } |
|
120 }); |
87 }); |
121 |
88 |
122 ed.onBeforeSetContent.add(function(ed, o) { |
89 ed.onBeforeSetContent.add(function(ed, o) { |
123 o.content = ed.wpSetImgCaption(o.content); |
90 o.content = ed.wpSetImgCaption(o.content); |
124 }); |
91 }); |
133 }; |
100 }; |
134 |
101 |
135 ed.wpGetImgCaption = function(content) { |
102 ed.wpGetImgCaption = function(content) { |
136 return t._get_shcode(content); |
103 return t._get_shcode(content); |
137 }; |
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 }); |
138 }, |
122 }, |
139 |
123 |
140 _do_shcode : function(content) { |
124 _do_shcode : function(content) { |
141 return content.replace(/(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function(a,b,c){ |
125 return content.replace(/(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function(a,b,c){ |
142 var id, cls, w, cap, div_cls, img, trim = tinymce.trim; |
126 var id, cls, w, cap, div_cls, img, trim = tinymce.trim; |
219 return ret; |
203 return ret; |
220 }); |
204 }); |
221 }, |
205 }, |
222 |
206 |
223 _createButtons : function() { |
207 _createButtons : function() { |
224 var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton; |
208 var t = this, ed = tinymce.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina; |
225 |
209 |
226 DOM.remove('wp_editbtns'); |
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 |
227 |
215 |
228 DOM.add(document.body, 'div', { |
216 DOM.add(document.body, 'div', { |
229 id : 'wp_editbtns', |
217 id : 'wp_editbtns', |
230 style : 'display:none;' |
218 style : 'display:none;' |
231 }); |
219 }); |
232 |
220 |
233 editButton = DOM.add('wp_editbtns', 'img', { |
221 editButton = DOM.add('wp_editbtns', 'img', { |
234 src : t.url+'/img/image.png', |
222 src : isRetina ? t.url+'/img/image-2x.png' : t.url+'/img/image.png', |
235 id : 'wp_editimgbtn', |
223 id : 'wp_editimgbtn', |
236 width : '24', |
224 width : '24', |
237 height : '24', |
225 height : '24', |
238 title : ed.getLang('wpeditimage.edit_img') |
226 title : ed.getLang('wpeditimage.edit_img') |
239 }); |
227 }); |
240 |
228 |
241 tinymce.dom.Event.add(editButton, 'mousedown', function(e) { |
229 tinymce.dom.Event.add(editButton, 'mousedown', function(e) { |
242 var ed = tinyMCE.activeEditor; |
230 t._editImage(); |
243 ed.windowManager.bookmark = ed.selection.getBookmark('simple'); |
231 ed.plugins.wordpress._hideButtons(); |
244 ed.execCommand("WP_EditImage"); |
|
245 }); |
232 }); |
246 |
233 |
247 dellButton = DOM.add('wp_editbtns', 'img', { |
234 dellButton = DOM.add('wp_editbtns', 'img', { |
248 src : t.url+'/img/delete.png', |
235 src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png', |
249 id : 'wp_delimgbtn', |
236 id : 'wp_delimgbtn', |
250 width : '24', |
237 width : '24', |
251 height : '24', |
238 height : '24', |
252 title : ed.getLang('wpeditimage.del_img') |
239 title : ed.getLang('wpeditimage.del_img') |
253 }); |
240 }); |
254 |
241 |
255 tinymce.dom.Event.add(dellButton, 'mousedown', function(e) { |
242 tinymce.dom.Event.add(dellButton, 'mousedown', function(e) { |
256 var ed = tinyMCE.activeEditor, el = ed.selection.getNode(), p; |
243 var ed = tinymce.activeEditor, el = ed.selection.getNode(), parent; |
257 |
244 |
258 if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) { |
245 if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) { |
259 if ( (p = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(p, 'mceTemp') ) |
246 if ( (parent = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(parent, 'mceTemp') ) { |
260 ed.dom.remove(p); |
247 ed.dom.remove(parent); |
261 else if ( (p = ed.dom.getParent(el, 'A')) && p.childNodes.length == 1 ) |
248 } else { |
262 ed.dom.remove(p); |
249 if ( el.parentNode.nodeName == 'A' && el.parentNode.childNodes.length == 1 ) |
263 else |
250 el = el.parentNode; |
|
251 |
|
252 if ( el.parentNode.nodeName == 'P' && el.parentNode.childNodes.length == 1 ) |
|
253 el = el.parentNode; |
|
254 |
264 ed.dom.remove(el); |
255 ed.dom.remove(el); |
|
256 } |
265 |
257 |
266 ed.execCommand('mceRepaint'); |
258 ed.execCommand('mceRepaint'); |
267 return false; |
259 return false; |
268 } |
260 } |
269 }); |
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 } |
270 }, |
311 }, |
271 |
312 |
272 getInfo : function() { |
313 getInfo : function() { |
273 return { |
314 return { |
274 longname : 'Edit Image', |
315 longname : 'Edit Image', |