c241158d322937e57b0fff79438c4020b9bee132
[autoinstalls/wordpress.git] / 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                         // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
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
33                         ed.onInit.add(function(ed) {
34                                 ed.dom.events.add(ed.getBody(), 'dragstart', function(e) {
35                                         var parent;
36
37                                         if ( e.target.nodeName == 'IMG' && ( parent = ed.dom.getParent(e.target, 'div.mceTemp') ) ) {
38                                                 ed.selection.select(parent);
39                                         }
40                                 });
41                         });
42
43                         // resize the caption <dl> when the image is soft-resized by the user (only possible in Firefox and IE)
44                         ed.onMouseUp.add(function(ed, e) {
45                                 if ( tinymce.isWebKit || tinymce.isOpera )
46                                         return;
47
48                                 if ( mouse.x && (e.clientX != mouse.x || e.clientY != mouse.y) ) {
49                                         var n = ed.selection.getNode();
50
51                                         if ( 'IMG' == n.nodeName ) {
52                                                 window.setTimeout(function(){
53                                                         var DL = ed.dom.getParent(n, 'dl.wp-caption'), width;
54
55                                                         if ( n.width != mouse.img_w || n.height != mouse.img_h )
56                                                                 n.className = n.className.replace(/size-[^ "']+/, '');
57
58                                                         if ( DL ) {
59                                                                 width = ed.dom.getAttrib(n, 'width') || n.width;
60                                                                 width = parseInt(width, 10);
61                                                                 ed.dom.setStyle(DL, 'width', 10 + width);
62                                                                 ed.execCommand('mceRepaint');
63                                                         }
64                                                 }, 100);
65                                         }
66                                 }
67                                 mouse = {};
68                         });
69
70                         // show editimage buttons
71                         ed.onMouseDown.add(function(ed, e) {
72                                 var target = e.target;
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                         });
121
122                         ed.onBeforeSetContent.add(function(ed, o) {
123                                 o.content = ed.wpSetImgCaption(o.content);
124                         });
125
126                         ed.onPostProcess.add(function(ed, o) {
127                                 if (o.get)
128                                         o.content = ed.wpGetImgCaption(o.content);
129                         });
130
131                         ed.wpSetImgCaption = function(content) {
132                                 return t._do_shcode(content);
133                         };
134
135                         ed.wpGetImgCaption = function(content) {
136                                 return t._get_shcode(content);
137                         };
138                 },
139
140                 _do_shcode : function(content) {
141                         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;
143
144                                 id = b.match(/id=['"]([^'"]*)['"] ?/);
145                                 b = b.replace(id[0], '');
146
147                                 cls = b.match(/align=['"]([^'"]*)['"] ?/);
148                                 b = b.replace(cls[0], '');
149
150                                 w = b.match(/width=['"]([0-9]*)['"] ?/);
151                                 b = b.replace(w[0], '');
152
153                                 c = trim(c);
154                                 img = c.match(/((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)([\s\S]*)/i);
155
156                                 if ( img && img[2] ) {
157                                         cap = trim( img[2] );
158                                         img = trim( img[1] );
159                                 } else {
160                                         // old captions shortcode style
161                                         cap = trim(b).replace(/caption=['"]/, '').replace(/['"]$/, '');
162                                         img = c;
163                                 }
164
165                                 id = ( id && id[1] ) ? id[1] : '';
166                                 cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
167                                 w = ( w && w[1] ) ? w[1] : '';
168
169                                 if ( !w || !cap )
170                                         return c;
171
172                                 div_cls = 'mceTemp';
173                                 if ( cls == 'aligncenter' )
174                                         div_cls += ' mceIEcenter';
175
176                                 return '<div class="'+div_cls+'"><dl id="'+id+'" class="wp-caption '+cls+'" style="width: '+( 10 + parseInt(w) )+
177                                 'px"><dt class="wp-caption-dt">'+img+'</dt><dd class="wp-caption-dd">'+cap+'</dd></dl></div>';
178                         });
179                 },
180
181                 _get_shcode : function(content) {
182                         return content.replace(/<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function(a, b){
183                                 var ret = b.replace(/<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function(a,b,c,cap){
184                                         var id, cls, w;
185
186                                         w = c.match(/width="([0-9]*)"/);
187                                         w = ( w && w[1] ) ? w[1] : '';
188
189                                         if ( !w || !cap )
190                                                 return c;
191
192                                         id = b.match(/id="([^"]*)"/);
193                                         id = ( id && id[1] ) ? id[1] : '';
194
195                                         cls = b.match(/class="([^"]*)"/);
196                                         cls = ( cls && cls[1] ) ? cls[1] : '';
197                                         cls = cls.match(/align[a-z]+/) || 'alignnone';
198
199                                         cap = cap.replace(/\r\n|\r/g, '\n').replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g, function(a){
200                                                 // no line breaks inside HTML tags
201                                                 return a.replace(/[\r\n\t]+/, ' ');
202                                         });
203
204                                         // convert remaining line breaks to <br>
205                                         cap = cap.replace(/\s*\n\s*/g, '<br />');
206
207                                         return '[caption id="'+id+'" align="'+cls+'" width="'+w+'"]'+c+' '+cap+'[/caption]';
208                                 });
209
210                                 if ( ret.indexOf('[caption') !== 0 ) {
211                                         // the caption html seems brocken, try to find the image that may be wrapped in a link
212                                         // and may be followed by <p> with the caption text.
213                                         ret = b.replace(/[\s\S]*?((?:<a [^>]+>)?<img [^>]+>(?:<\/a>)?)(<p>[\s\S]*<\/p>)?[\s\S]*/gi, '<p>$1</p>$2');
214                                 }
215
216                                 return ret;
217                         });
218                 },
219
220                 _createButtons : function() {
221                         var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
222
223                         DOM.remove('wp_editbtns');
224
225                         DOM.add(document.body, 'div', {
226                                 id : 'wp_editbtns',
227                                 style : 'display:none;'
228                         });
229
230                         editButton = DOM.add('wp_editbtns', 'img', {
231                                 src : t.url+'/img/image.png',
232                                 id : 'wp_editimgbtn',
233                                 width : '24',
234                                 height : '24',
235                                 title : ed.getLang('wpeditimage.edit_img')
236                         });
237
238                         tinymce.dom.Event.add(editButton, 'mousedown', function(e) {
239                                 var ed = tinyMCE.activeEditor;
240                                 ed.windowManager.bookmark = ed.selection.getBookmark('simple');
241                                 ed.execCommand("WP_EditImage");
242                         });
243
244                         dellButton = DOM.add('wp_editbtns', 'img', {
245                                 src : t.url+'/img/delete.png',
246                                 id : 'wp_delimgbtn',
247                                 width : '24',
248                                 height : '24',
249                                 title : ed.getLang('wpeditimage.del_img')
250                         });
251
252                         tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
253                                 var ed = tinyMCE.activeEditor, el = ed.selection.getNode(), p;
254
255                                 if ( el.nodeName == 'IMG' && ed.dom.getAttrib(el, 'class').indexOf('mceItem') == -1 ) {
256                                         if ( (p = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(p, 'mceTemp') )
257                                                 ed.dom.remove(p);
258                                         else if ( (p = ed.dom.getParent(el, 'A')) && p.childNodes.length == 1 )
259                                                 ed.dom.remove(p);
260                                         else
261                                                 ed.dom.remove(el);
262
263                                         ed.execCommand('mceRepaint');
264                                         return false;
265                                 }
266                         });
267                 },
268
269                 getInfo : function() {
270                         return {
271                                 longname : 'Edit Image',
272                                 author : 'WordPress',
273                                 authorurl : 'http://wordpress.org',
274                                 infourl : '',
275                                 version : "1.0"
276                         };
277                 }
278         });
279
280         tinymce.PluginManager.add('wpeditimage', tinymce.plugins.wpEditImage);
281 })();