]> scripts.mit.edu Git - autoinstalls/wordpress.git/blob - wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js
WordPress 3.4
[autoinstalls/wordpress.git] / wp-includes / js / tinymce / plugins / wpeditimage / js / editimage.dev.js
1
2 var tinymce = null, tinyMCEPopup, tinyMCE, wpImage;
3
4 tinyMCEPopup = {
5         init: function() {
6                 var t = this, w, ti;
7
8                 // Find window & API
9                 w = t.getWin();
10                 tinymce = w.tinymce;
11                 tinyMCE = w.tinyMCE;
12                 t.editor = tinymce.EditorManager.activeEditor;
13                 t.params = t.editor.windowManager.params;
14                 t.features = t.editor.windowManager.features;
15
16                 // Setup local DOM
17                 t.dom = t.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document);
18                 t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);
19         },
20
21         getWin : function() {
22                 return (!window.frameElement && window.dialogArguments) || opener || parent || top;
23         },
24
25         getParam : function(n, dv) {
26                 return this.editor.getParam(n, dv);
27         },
28
29         close : function() {
30                 var t = this;
31
32                 // To avoid domain relaxing issue in Opera
33                 function close() {
34                         t.editor.windowManager.close(window);
35                         tinymce = tinyMCE = t.editor = t.params = t.dom = t.dom.doc = null; // Cleanup
36                 };
37
38                 if (tinymce.isOpera)
39                         t.getWin().setTimeout(close, 0);
40                 else
41                         close();
42         },
43
44         execCommand : function(cmd, ui, val, a) {
45                 a = a || {};
46                 a.skip_focus = 1;
47
48                 this.restoreSelection();
49                 return this.editor.execCommand(cmd, ui, val, a);
50         },
51
52         storeSelection : function() {
53                 this.editor.windowManager.bookmark = tinyMCEPopup.editor.selection.getBookmark(1);
54         },
55
56         restoreSelection : function() {
57                 var t = tinyMCEPopup;
58
59                 if ( tinymce.isIE )
60                         t.editor.selection.moveToBookmark(t.editor.windowManager.bookmark);
61         }
62 }
63 tinyMCEPopup.init();
64
65 wpImage = {
66         preInit : function() {
67                 // import colors stylesheet from parent
68                 var ed = tinyMCEPopup.editor, win = tinyMCEPopup.getWin(), styles = win.document.styleSheets, url, i;
69
70                 for ( i = 0; i < styles.length; i++ ) {
71                         url = styles.item(i).href;
72                         if ( url && url.indexOf('colors') != -1 ) {
73                                 document.getElementsByTagName('head')[0].appendChild( ed.dom.create('link', {rel:'stylesheet', href: url}) );
74                                 break;
75                         }
76                 }
77         },
78
79         I : function(e) {
80                 return document.getElementById(e);
81         },
82
83         current : '',
84         link : '',
85         link_rel : '',
86         target_value : '',
87         current_size_sel : 's100',
88         width : '',
89         height : '',
90         align : '',
91         img_alt : '',
92
93         setTabs : function(tab) {
94                 var t = this;
95
96                 if ( 'current' == tab.className ) return false;
97                 t.I('div_advanced').style.display = ( 'tab_advanced' == tab.id ) ? 'block' : 'none';
98                 t.I('div_basic').style.display = ( 'tab_basic' == tab.id ) ? 'block' : 'none';
99                 t.I('tab_basic').className = t.I('tab_advanced').className = '';
100                 tab.className = 'current';
101                 return false;
102         },
103
104         img_seturl : function(u) {
105                 var t = this, rel = t.I('link_rel').value;
106
107                 if ( 'current' == u ) {
108                         t.I('link_href').value = t.current;
109                         t.I('link_rel').value = t.link_rel;
110                 } else {
111                         t.I('link_href').value = t.link;
112                         if ( rel ) {
113                                 rel = rel.replace( /attachment|wp-att-[0-9]+/gi, '' );
114                                 t.I('link_rel').value = tinymce.trim(rel);
115                         }
116                 }
117         },
118
119         imgAlignCls : function(v) {
120                 var t = this, cls = t.I('img_classes').value;
121
122                 t.I('img_demo').className = t.align = v;
123
124                 cls = cls.replace( /align[^ "']+/gi, '' );
125                 cls += (' ' + v);
126                 cls = cls.replace( /\s+/g, ' ' ).replace( /^\s/, '' );
127
128                 if ( 'aligncenter' == v ) {
129                         t.I('hspace').value = '';
130                         t.updateStyle('hspace');
131                 }
132
133                 t.I('img_classes').value = cls;
134         },
135
136         showSize : function(el) {
137                 var t = this, demo = t.I('img_demo'), w = t.width, h = t.height, id = el.id || 's100', size;
138
139                 size = parseInt(id.substring(1)) / 200;
140                 demo.width = Math.round(w * size);
141                 demo.height = Math.round(h * size);
142
143                 t.showSizeClear();
144                 el.style.borderColor = '#A3A3A3';
145                 el.style.backgroundColor = '#E5E5E5';
146         },
147
148         showSizeSet : function() {
149                 var t = this, s130, s120, s110;
150
151                 if ( (t.width * 1.3) > parseInt(t.preloadImg.width) ) {
152                         s130 = t.I('s130'), s120 = t.I('s120'), s110 = t.I('s110');
153
154                         s130.onclick = s120.onclick = s110.onclick = null;
155                         s130.onmouseover = s120.onmouseover = s110.onmouseover = null;
156                         s130.style.color = s120.style.color = s110.style.color = '#aaa';
157                 }
158         },
159
160         showSizeRem : function() {
161                 var t = this, demo = t.I('img_demo'), f = document.forms[0];
162
163                 demo.width = Math.round(f.width.value * 0.5);
164                 demo.height = Math.round(f.height.value * 0.5);
165                 t.showSizeClear();
166                 t.I(t.current_size_sel).style.borderColor = '#A3A3A3';
167                 t.I(t.current_size_sel).style.backgroundColor = '#E5E5E5';
168
169                 return false;
170         },
171
172         showSizeClear : function() {
173                 var divs = this.I('img_size').getElementsByTagName('div'), i;
174
175                 for ( i = 0; i < divs.length; i++ ) {
176                         divs[i].style.borderColor = '#f1f1f1';
177                         divs[i].style.backgroundColor = '#f1f1f1';
178                 }
179         },
180
181         imgEditSize : function(el) {
182                 var t = this, f = document.forms[0], W, H, w, h, id;
183
184                 if ( ! t.preloadImg || ! t.preloadImg.width || ! t.preloadImg.height )
185                         return;
186                 
187                 W = parseInt(t.preloadImg.width), H = parseInt(t.preloadImg.height), w = t.width || W, h = t.height || H, id = el.id || 's100';
188
189                 size = parseInt(id.substring(1)) / 100;
190
191                 w = Math.round(w * size);
192                 h = Math.round(h * size);
193
194                 f.width.value = Math.min(W, w);
195                 f.height.value = Math.min(H, h);
196
197                 t.current_size_sel = id;
198                 t.demoSetSize();
199         },
200
201         demoSetSize : function(img) {
202                 var demo = this.I('img_demo'), f = document.forms[0];
203
204                 demo.width = f.width.value ? Math.round(f.width.value * 0.5) : '';
205                 demo.height = f.height.value ? Math.round(f.height.value * 0.5) : '';
206         },
207
208         demoSetStyle : function() {
209                 var f = document.forms[0], demo = this.I('img_demo'), dom = tinyMCEPopup.editor.dom;
210
211                 if (demo) {
212                         dom.setAttrib(demo, 'style', f.img_style.value);
213                         dom.setStyle(demo, 'width', '');
214                         dom.setStyle(demo, 'height', '');
215                 }
216         },
217
218         origSize : function() {
219                 var t = this, f = document.forms[0], el = t.I('s100');
220
221                 f.width.value = t.width = t.preloadImg.width;
222                 f.height.value = t.height = t.preloadImg.height;
223                 t.showSizeSet();
224                 t.demoSetSize();
225                 t.showSize(el);
226         },
227
228         init : function() {
229                 var ed = tinyMCEPopup.editor, h;
230
231                 h = document.body.innerHTML;
232                 document.body.innerHTML = ed.translate(h);
233                 window.setTimeout( function(){wpImage.setup();}, 500 );
234         },
235
236         setup : function() {
237                 var t = this, c, el, link, fname, f = document.forms[0], ed = tinyMCEPopup.editor,
238                         d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa;
239
240                 document.dir = tinyMCEPopup.editor.getParam('directionality','');
241
242                 if ( tinyMCEPopup.editor.getParam('wpeditimage_disable_captions', false) )
243                         t.I('cap_field').style.display = 'none';
244
245                 tinyMCEPopup.restoreSelection();
246                 el = ed.selection.getNode();
247                 if (el.nodeName != 'IMG')
248                         return;
249
250                 f.img_src.value = d.src = link = ed.dom.getAttrib(el, 'src');
251                 ed.dom.setStyle(el, 'float', '');
252                 t.getImageData();
253                 c = ed.dom.getAttrib(el, 'class');
254
255                 if ( DL = dom.getParent(el, 'dl') ) {
256                         dlc = ed.dom.getAttrib(DL, 'class');
257                         dlc = dlc.match(/align[^ "']+/i);
258                         if ( dlc && ! dom.hasClass(el, dlc) ) {
259                                 c += ' '+dlc;
260                                 tinymce.trim(c);
261                         }
262
263                         DD = ed.dom.select('dd.wp-caption-dd', DL);
264                         if ( DD && DD[0] )
265                                 caption = ed.serializer.serialize(DD[0]).replace(/^<p>/, '').replace(/<\/p>$/, '');
266                 }
267
268                 f.img_cap_text.value = caption;
269                 f.img_title.value = ed.dom.getAttrib(el, 'title');
270                 f.img_alt.value = ed.dom.getAttrib(el, 'alt');
271                 f.border.value = ed.dom.getAttrib(el, 'border');
272                 f.vspace.value = ed.dom.getAttrib(el, 'vspace');
273                 f.hspace.value = ed.dom.getAttrib(el, 'hspace');
274                 f.align.value = ed.dom.getAttrib(el, 'align');
275                 f.width.value = t.width = ed.dom.getAttrib(el, 'width');
276                 f.height.value = t.height = ed.dom.getAttrib(el, 'height');
277                 f.img_classes.value = c;
278                 f.img_style.value = ed.dom.getAttrib(el, 'style');
279
280                 // Move attribs to styles
281                 if ( dom.getAttrib(el, 'hspace') )
282                         t.updateStyle('hspace');
283
284                 if ( dom.getAttrib(el, 'border') )
285                         t.updateStyle('border');
286
287                 if ( dom.getAttrib(el, 'vspace') )
288                         t.updateStyle('vspace');
289
290                 if ( pa = ed.dom.getParent(el, 'A') ) {
291                         f.link_href.value = t.current = ed.dom.getAttrib(pa, 'href');
292                         f.link_title.value = ed.dom.getAttrib(pa, 'title');
293                         f.link_rel.value = t.link_rel = ed.dom.getAttrib(pa, 'rel');
294                         f.link_style.value = ed.dom.getAttrib(pa, 'style');
295                         t.target_value = ed.dom.getAttrib(pa, 'target');
296                         f.link_classes.value = ed.dom.getAttrib(pa, 'class');
297                 }
298
299                 f.link_target.checked = ( t.target_value && t.target_value == '_blank' ) ? 'checked' : '';
300
301                 fname = link.substring( link.lastIndexOf('/') );
302                 fname = fname.replace(/-[0-9]{2,4}x[0-9]{2,4}/, '' );
303                 t.link = link.substring( 0, link.lastIndexOf('/') ) + fname;
304
305                 if ( c.indexOf('alignleft') != -1 ) {
306                         t.I('alignleft').checked = "checked";
307                         d.className = t.align = "alignleft";
308                 } else if ( c.indexOf('aligncenter') != -1 ) {
309                         t.I('aligncenter').checked = "checked";
310                         d.className = t.align = "aligncenter";
311                 } else if ( c.indexOf('alignright') != -1 ) {
312                         t.I('alignright').checked = "checked";
313                         d.className = t.align = "alignright";
314                 } else if ( c.indexOf('alignnone') != -1 ) {
315                         t.I('alignnone').checked = "checked";
316                         d.className = t.align = "alignnone";
317                 }
318
319                 if ( t.width && t.preloadImg.width )
320                         t.showSizeSet();
321                 
322                 document.body.style.display = '';
323         },
324
325         remove : function() {
326                 var ed = tinyMCEPopup.editor, p, el;
327
328                 tinyMCEPopup.restoreSelection();
329                 el = ed.selection.getNode();
330                 if (el.nodeName != 'IMG') return;
331
332                 if ( (p = ed.dom.getParent(el, 'div')) && ed.dom.hasClass(p, 'mceTemp') )
333                         ed.dom.remove(p);
334                 else if ( (p = ed.dom.getParent(el, 'A')) && p.childNodes.length == 1 )
335                         ed.dom.remove(p);
336                 else ed.dom.remove(el);
337
338                 ed.execCommand('mceRepaint');
339                 tinyMCEPopup.close();
340                 return;
341         },
342
343         update : function() {
344                 var t = this, f = document.forms[0], ed = tinyMCEPopup.editor, el, b, fixSafari = null,
345                         DL, P, A, DIV, do_caption = null, img_class = f.img_classes.value, html,
346                         id, cap_id = '', cap, DT, DD, cap_width, div_cls, lnk = '', pa, aa, caption;
347
348                 tinyMCEPopup.restoreSelection();
349                 el = ed.selection.getNode();
350
351                 if (el.nodeName != 'IMG') return;
352                 if (f.img_src.value === '') {
353                         t.remove();
354                         return;
355                 }
356
357                 if ( f.img_cap_text.value != '' && f.width.value != '' ) {
358                         do_caption = 1;
359                         img_class = img_class.replace( /align[^ "']+\s?/gi, '' );
360                 }
361
362                 A = ed.dom.getParent(el, 'a');
363                 P = ed.dom.getParent(el, 'p');
364                 DL = ed.dom.getParent(el, 'dl');
365                 DIV = ed.dom.getParent(el, 'div');
366
367                 tinyMCEPopup.execCommand("mceBeginUndoLevel");
368
369                 if ( f.width.value != el.width || f.height.value != el.height )
370                         img_class = img_class.replace(/size-[^ "']+/, '');
371
372                 ed.dom.setAttribs(el, {
373                         src : f.img_src.value,
374                         title : f.img_title.value,
375                         alt : f.img_alt.value,
376                         width : f.width.value,
377                         height : f.height.value,
378                         style : f.img_style.value,
379                         'class' : img_class
380                 });
381
382                 if ( f.link_href.value ) {
383                         // Create new anchor elements
384                         if ( A == null ) {
385                                 if ( ! f.link_href.value.match(/https?:\/\//i) )
386                                         f.link_href.value = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.link_href.value);
387
388                                 ed.getDoc().execCommand("unlink", false, null);
389                                 tinyMCEPopup.execCommand("mceInsertLink", false, "#mce_temp_url#", {skip_undo : 1});
390
391                                 tinymce.each(ed.dom.select("a"), function(n) {
392                                         if ( ed.dom.getAttrib(n, 'href') == '#mce_temp_url#' ) {
393
394                                                 ed.dom.setAttribs(n, {
395                                                         href : f.link_href.value,
396                                                         title : f.link_title.value,
397                                                         rel : f.link_rel.value,
398                                                         target : (f.link_target.checked == true) ? '_blank' : '',
399                                                         'class' : f.link_classes.value,
400                                                         style : f.link_style.value
401                                                 });
402                                         }
403                                 });
404                         } else {
405                                 ed.dom.setAttribs(A, {
406                                         href : f.link_href.value,
407                                         title : f.link_title.value,
408                                         rel : f.link_rel.value,
409                                         target : (f.link_target.checked == true) ? '_blank' : '',
410                                         'class' : f.link_classes.value,
411                                         style : f.link_style.value
412                                 });
413                         }
414                 }
415
416                 if ( do_caption ) {
417                         cap_width = 10 + parseInt(f.width.value);
418                         div_cls = (t.align == 'aligncenter') ? 'mceTemp mceIEcenter' : 'mceTemp';
419                         caption = f.img_cap_text.value;
420
421                         caption = caption.replace(/\r\n|\r/g, '\n').replace(/<[a-zA-Z0-9]+( [^<>]+)?>/g, function(a){
422                                 return a.replace(/[\r\n\t]+/, ' ');
423                         });
424
425                         caption = caption.replace(/\s*\n\s*/g, '<br />');
426
427                         if ( DL ) {
428                                 ed.dom.setAttribs(DL, {
429                                         'class' : 'wp-caption '+t.align,
430                                         style : 'width: '+cap_width+'px;'
431                                 });
432
433                                 if ( DIV )
434                                         ed.dom.setAttrib(DIV, 'class', div_cls);
435
436                                 if ( (DT = ed.dom.getParent(el, 'dt')) && (DD = DT.nextSibling) && ed.dom.hasClass(DD, 'wp-caption-dd') )
437                                         ed.dom.setHTML(DD, caption);
438
439                         } else {
440                                 if ( (id = f.img_classes.value.match( /wp-image-([0-9]{1,6})/ )) && id[1] )
441                                         cap_id = 'attachment_'+id[1];
442
443                                 if ( f.link_href.value && (lnk = ed.dom.getParent(el, 'a')) ) {
444                                         if ( lnk.childNodes.length == 1 ) {
445                                                 html = ed.dom.getOuterHTML(lnk);
446                                         } else {
447                                                 html = ed.dom.getOuterHTML(lnk);
448                                                 html = html.match(/<a [^>]+>/i);
449                                                 html = html+ed.dom.getOuterHTML(el)+'</a>';
450                                         }
451                                 } else {
452                                         html = ed.dom.getOuterHTML(el);
453                                 }
454
455                                 html = '<dl id="'+cap_id+'" class="wp-caption '+t.align+'" style="width: '+cap_width+
456                                 'px"><dt class="wp-caption-dt">'+html+'</dt><dd class="wp-caption-dd">'+caption+'</dd></dl>';
457
458                                 cap = ed.dom.create('div', {'class': div_cls}, html);
459
460                                 if ( P ) {
461                                         P.parentNode.insertBefore(cap, P);
462                                         if ( P.childNodes.length == 1 )
463                                                 ed.dom.remove(P);
464                                         else if ( lnk && lnk.childNodes.length == 1 )
465                                                 ed.dom.remove(lnk);
466                                         else ed.dom.remove(el);
467                                 } else if ( pa = ed.dom.getParent(el, 'TD,TH,LI') ) {
468                                         pa.appendChild(cap);
469                                         if ( lnk && lnk.childNodes.length == 1 )
470                                                 ed.dom.remove(lnk);
471                                         else ed.dom.remove(el);
472                                 }
473                         }
474
475                 } else {
476                         if ( DL && DIV ) {
477                                 if ( f.link_href.value && (aa = ed.dom.getParent(el, 'a')) ) html = ed.dom.getOuterHTML(aa);
478                                 else html = ed.dom.getOuterHTML(el);
479
480                                 P = ed.dom.create('p', {}, html);
481                                 DIV.parentNode.insertBefore(P, DIV);
482                                 ed.dom.remove(DIV);
483                         }
484                 }
485
486                 if ( f.img_classes.value.indexOf('aligncenter') != -1 ) {
487                         if ( P && ( ! P.style || P.style.textAlign != 'center' ) )
488                                 ed.dom.setStyle(P, 'textAlign', 'center');
489                 } else {
490                         if ( P && P.style && P.style.textAlign == 'center' )
491                                 ed.dom.setStyle(P, 'textAlign', '');
492                 }
493
494                 if ( ! f.link_href.value && A ) {
495                         b = ed.selection.getBookmark();
496                         ed.dom.remove(A, 1);
497                         ed.selection.moveToBookmark(b);
498                 }
499
500                 tinyMCEPopup.execCommand("mceEndUndoLevel");
501                 ed.execCommand('mceRepaint');
502                 tinyMCEPopup.close();
503         },
504
505         updateStyle : function(ty) {
506                 var dom = tinyMCEPopup.dom, v, f = document.forms[0], img = dom.create('img', {style : f.img_style.value});
507
508                 if (tinyMCEPopup.editor.settings.inline_styles) {
509                         // Handle align
510                         if (ty == 'align') {
511                                 dom.setStyle(img, 'float', '');
512                                 dom.setStyle(img, 'vertical-align', '');
513
514                                 v = f.align.value;
515                                 if (v) {
516                                         if (v == 'left' || v == 'right')
517                                                 dom.setStyle(img, 'float', v);
518                                         else
519                                                 img.style.verticalAlign = v;
520                                 }
521                         }
522
523                         // Handle border
524                         if (ty == 'border') {
525                                 dom.setStyle(img, 'border', '');
526
527                                 v = f.border.value;
528                                 if (v || v == '0') {
529                                         if (v == '0')
530                                                 img.style.border = '0';
531                                         else
532                                                 img.style.border = v + 'px solid black';
533                                 }
534                         }
535
536                         // Handle hspace
537                         if (ty == 'hspace') {
538                                 dom.setStyle(img, 'marginLeft', '');
539                                 dom.setStyle(img, 'marginRight', '');
540
541                                 v = f.hspace.value;
542                                 if (v) {
543                                         img.style.marginLeft = v + 'px';
544                                         img.style.marginRight = v + 'px';
545                                 }
546                         }
547
548                         // Handle vspace
549                         if (ty == 'vspace') {
550                                 dom.setStyle(img, 'marginTop', '');
551                                 dom.setStyle(img, 'marginBottom', '');
552
553                                 v = f.vspace.value;
554                                 if (v) {
555                                         img.style.marginTop = v + 'px';
556                                         img.style.marginBottom = v + 'px';
557                                 }
558                         }
559
560                         // Merge
561                         f.img_style.value = dom.serializeStyle(dom.parseStyle(img.style.cssText));
562                         this.demoSetStyle();
563                 }
564         },
565
566         checkVal : function(f) {
567
568                 if ( f.value == '' ) {
569         //              if ( f.id == 'width' ) f.value = this.width || this.preloadImg.width;
570         //              if ( f.id == 'height' ) f.value = this.height || this.preloadImg.height;
571                         if ( f.id == 'img_src' ) f.value = this.I('img_demo').src || this.preloadImg.src;
572                 }
573         },
574
575         resetImageData : function() {
576                 var f = document.forms[0];
577
578                 f.width.value = f.height.value = '';
579         },
580
581         updateImageData : function() {
582                 var f = document.forms[0], t = wpImage, w = f.width.value, h = f.height.value;
583
584                 if ( !w && h )
585                         w = f.width.value = t.width = Math.round( t.preloadImg.width / (t.preloadImg.height / h) );
586                 else if ( w && !h )
587                         h = f.height.value = t.height = Math.round( t.preloadImg.height / (t.preloadImg.width / w) );
588
589                 if ( !w )
590                         f.width.value = t.width = t.preloadImg.width;
591
592                 if ( !h )
593                         f.height.value = t.height = t.preloadImg.height;
594
595                 t.showSizeSet();
596                 t.demoSetSize();
597                 if ( f.img_style.value )
598                         t.demoSetStyle();
599         },
600
601         getImageData : function() {
602                 var t = wpImage, f = document.forms[0];
603
604                 t.preloadImg = new Image();
605                 t.preloadImg.onload = t.updateImageData;
606                 t.preloadImg.onerror = t.resetImageData;
607                 t.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.img_src.value);
608         }
609 };
610
611 window.onload = function(){wpImage.init();}
612 wpImage.preInit();
613