|
1 |
|
2 (function() { |
|
3 tinymce.create('tinymce.plugins.wpGallery', { |
|
4 |
|
5 init : function(ed, url) { |
|
6 var t = this; |
|
7 |
|
8 t.url = url; |
|
9 t.editor = ed; |
|
10 t._createButtons(); |
|
11 |
|
12 // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...'); |
|
13 ed.addCommand('WP_Gallery', function() { |
|
14 if ( tinymce.isIE ) |
|
15 ed.selection.moveToBookmark( ed.wpGalleryBookmark ); |
|
16 |
|
17 var el = ed.selection.getNode(), |
|
18 gallery = wp.media.gallery, |
|
19 frame; |
|
20 |
|
21 // Check if the `wp.media.gallery` API exists. |
|
22 if ( typeof wp === 'undefined' || ! wp.media || ! wp.media.gallery ) |
|
23 return; |
|
24 |
|
25 // Make sure we've selected a gallery node. |
|
26 if ( el.nodeName != 'IMG' || ed.dom.getAttrib(el, 'class').indexOf('wp-gallery') == -1 ) |
|
27 return; |
|
28 |
|
29 frame = gallery.edit( '[' + ed.dom.getAttrib( el, 'title' ) + ']' ); |
|
30 |
|
31 frame.state('gallery-edit').on( 'update', function( selection ) { |
|
32 var shortcode = gallery.shortcode( selection ).string().slice( 1, -1 ); |
|
33 ed.dom.setAttrib( el, 'title', shortcode ); |
|
34 }); |
|
35 }); |
|
36 |
|
37 ed.onInit.add(function(ed) { |
|
38 // iOS6 doesn't show the buttons properly on click, show them on 'touchstart' |
|
39 if ( 'ontouchstart' in window ) { |
|
40 ed.dom.events.add(ed.getBody(), 'touchstart', function(e){ |
|
41 var target = e.target; |
|
42 |
|
43 if ( target.nodeName == 'IMG' && ed.dom.hasClass(target, 'wp-gallery') ) { |
|
44 ed.selection.select(target); |
|
45 ed.dom.events.cancel(e); |
|
46 ed.plugins.wordpress._hideButtons(); |
|
47 ed.plugins.wordpress._showButtons(target, 'wp_gallerybtns'); |
|
48 } |
|
49 }); |
|
50 } |
|
51 }); |
|
52 |
|
53 ed.onMouseDown.add(function(ed, e) { |
|
54 if ( e.target.nodeName == 'IMG' && ed.dom.hasClass(e.target, 'wp-gallery') ) { |
|
55 ed.plugins.wordpress._hideButtons(); |
|
56 ed.plugins.wordpress._showButtons(e.target, 'wp_gallerybtns'); |
|
57 } |
|
58 }); |
|
59 |
|
60 ed.onBeforeSetContent.add(function(ed, o) { |
|
61 o.content = t._do_gallery(o.content); |
|
62 }); |
|
63 |
|
64 ed.onPostProcess.add(function(ed, o) { |
|
65 if (o.get) |
|
66 o.content = t._get_gallery(o.content); |
|
67 }); |
|
68 }, |
|
69 |
|
70 _do_gallery : function(co) { |
|
71 return co.replace(/\[gallery([^\]]*)\]/g, function(a,b){ |
|
72 return '<img src="'+tinymce.baseURL+'/plugins/wpgallery/img/t.gif" class="wp-gallery mceItem" title="gallery'+tinymce.DOM.encode(b)+'" />'; |
|
73 }); |
|
74 }, |
|
75 |
|
76 _get_gallery : function(co) { |
|
77 |
|
78 function getAttr(s, n) { |
|
79 n = new RegExp(n + '=\"([^\"]+)\"', 'g').exec(s); |
|
80 return n ? tinymce.DOM.decode(n[1]) : ''; |
|
81 }; |
|
82 |
|
83 return co.replace(/(?:<p[^>]*>)*(<img[^>]+>)(?:<\/p>)*/g, function(a,im) { |
|
84 var cls = getAttr(im, 'class'); |
|
85 |
|
86 if ( cls.indexOf('wp-gallery') != -1 ) |
|
87 return '<p>['+tinymce.trim(getAttr(im, 'title'))+']</p>'; |
|
88 |
|
89 return a; |
|
90 }); |
|
91 }, |
|
92 |
|
93 _createButtons : function() { |
|
94 var t = this, ed = tinymce.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina; |
|
95 |
|
96 if ( DOM.get('wp_gallerybtns') ) |
|
97 return; |
|
98 |
|
99 isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera |
|
100 ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera |
|
101 |
|
102 DOM.add(document.body, 'div', { |
|
103 id : 'wp_gallerybtns', |
|
104 style : 'display:none;' |
|
105 }); |
|
106 |
|
107 editButton = DOM.add('wp_gallerybtns', 'img', { |
|
108 src : isRetina ? t.url+'/img/edit-2x.png' : t.url+'/img/edit.png', |
|
109 id : 'wp_editgallery', |
|
110 width : '24', |
|
111 height : '24', |
|
112 title : ed.getLang('wordpress.editgallery') |
|
113 }); |
|
114 |
|
115 tinymce.dom.Event.add(editButton, 'mousedown', function(e) { |
|
116 var ed = tinymce.activeEditor; |
|
117 ed.wpGalleryBookmark = ed.selection.getBookmark('simple'); |
|
118 ed.execCommand("WP_Gallery"); |
|
119 ed.plugins.wordpress._hideButtons(); |
|
120 }); |
|
121 |
|
122 dellButton = DOM.add('wp_gallerybtns', 'img', { |
|
123 src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png', |
|
124 id : 'wp_delgallery', |
|
125 width : '24', |
|
126 height : '24', |
|
127 title : ed.getLang('wordpress.delgallery') |
|
128 }); |
|
129 |
|
130 tinymce.dom.Event.add(dellButton, 'mousedown', function(e) { |
|
131 var ed = tinymce.activeEditor, el = ed.selection.getNode(); |
|
132 |
|
133 if ( el.nodeName == 'IMG' && ed.dom.hasClass(el, 'wp-gallery') ) { |
|
134 ed.dom.remove(el); |
|
135 |
|
136 ed.execCommand('mceRepaint'); |
|
137 ed.dom.events.cancel(e); |
|
138 } |
|
139 |
|
140 ed.plugins.wordpress._hideButtons(); |
|
141 }); |
|
142 }, |
|
143 |
|
144 getInfo : function() { |
|
145 return { |
|
146 longname : 'Gallery Settings', |
|
147 author : 'WordPress', |
|
148 authorurl : 'http://wordpress.org', |
|
149 infourl : '', |
|
150 version : "1.0" |
|
151 }; |
|
152 } |
|
153 }); |
|
154 |
|
155 tinymce.PluginManager.add('wpgallery', tinymce.plugins.wpGallery); |
|
156 })(); |