4 |
4 |
5 init : function(ed, url) { |
5 init : function(ed, url) { |
6 var t = this; |
6 var t = this; |
7 |
7 |
8 t.url = url; |
8 t.url = url; |
|
9 t.editor = ed; |
9 t._createButtons(); |
10 t._createButtons(); |
10 |
11 |
11 // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...'); |
12 // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...'); |
12 ed.addCommand('WP_Gallery', function() { |
13 ed.addCommand('WP_Gallery', function() { |
13 var el = ed.selection.getNode(), post_id, vp = tinymce.DOM.getViewPort(), |
14 if ( tinymce.isIE ) |
14 H = vp.h - 80, W = ( 640 < vp.w ) ? 640 : vp.w; |
15 ed.selection.moveToBookmark( ed.wpGalleryBookmark ); |
15 |
16 |
16 if ( el.nodeName != 'IMG' ) return; |
17 var el = ed.selection.getNode(), |
17 if ( ed.dom.getAttrib(el, 'class').indexOf('wpGallery') == -1 ) return; |
18 gallery = wp.media.gallery, |
|
19 frame; |
18 |
20 |
19 post_id = tinymce.DOM.get('post_ID').value; |
21 // Check if the `wp.media.gallery` API exists. |
20 tb_show('', tinymce.documentBaseURL + 'media-upload.php?post_id='+post_id+'&tab=gallery&TB_iframe=true&width='+W+'&height='+H); |
22 if ( typeof wp === 'undefined' || ! wp.media || ! wp.media.gallery ) |
|
23 return; |
21 |
24 |
22 tinymce.DOM.setStyle( ['TB_overlay','TB_window','TB_load'], 'z-index', '999999' ); |
25 // Make sure we've selected a gallery node. |
|
26 if ( el.nodeName != 'IMG' || ed.dom.getAttrib(el, 'class').indexOf('wpGallery') == -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, 'wpGallery') ) { |
|
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 } |
23 }); |
51 }); |
24 |
52 |
25 ed.onMouseDown.add(function(ed, e) { |
53 ed.onMouseDown.add(function(ed, e) { |
26 if ( e.target.nodeName == 'IMG' && ed.dom.hasClass(e.target, 'wpGallery') ) |
54 if ( e.target.nodeName == 'IMG' && ed.dom.hasClass(e.target, 'wpGallery') ) { |
|
55 ed.plugins.wordpress._hideButtons(); |
27 ed.plugins.wordpress._showButtons(e.target, 'wp_gallerybtns'); |
56 ed.plugins.wordpress._showButtons(e.target, 'wp_gallerybtns'); |
|
57 } |
28 }); |
58 }); |
29 |
59 |
30 ed.onBeforeSetContent.add(function(ed, o) { |
60 ed.onBeforeSetContent.add(function(ed, o) { |
31 o.content = t._do_gallery(o.content); |
61 o.content = t._do_gallery(o.content); |
32 }); |
62 }); |
59 return a; |
89 return a; |
60 }); |
90 }); |
61 }, |
91 }, |
62 |
92 |
63 _createButtons : function() { |
93 _createButtons : function() { |
64 var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton; |
94 var t = this, ed = tinymce.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina; |
65 |
95 |
66 DOM.remove('wp_gallerybtns'); |
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 |
67 |
101 |
68 DOM.add(document.body, 'div', { |
102 DOM.add(document.body, 'div', { |
69 id : 'wp_gallerybtns', |
103 id : 'wp_gallerybtns', |
70 style : 'display:none;' |
104 style : 'display:none;' |
71 }); |
105 }); |
72 |
106 |
73 editButton = DOM.add('wp_gallerybtns', 'img', { |
107 editButton = DOM.add('wp_gallerybtns', 'img', { |
74 src : t.url+'/img/edit.png', |
108 src : isRetina ? t.url+'/img/edit-2x.png' : t.url+'/img/edit.png', |
75 id : 'wp_editgallery', |
109 id : 'wp_editgallery', |
76 width : '24', |
110 width : '24', |
77 height : '24', |
111 height : '24', |
78 title : ed.getLang('wordpress.editgallery') |
112 title : ed.getLang('wordpress.editgallery') |
79 }); |
113 }); |
80 |
114 |
81 tinymce.dom.Event.add(editButton, 'mousedown', function(e) { |
115 tinymce.dom.Event.add(editButton, 'mousedown', function(e) { |
82 var ed = tinyMCE.activeEditor; |
116 var ed = tinymce.activeEditor; |
83 ed.windowManager.bookmark = ed.selection.getBookmark('simple'); |
117 ed.wpGalleryBookmark = ed.selection.getBookmark('simple'); |
84 ed.execCommand("WP_Gallery"); |
118 ed.execCommand("WP_Gallery"); |
|
119 ed.plugins.wordpress._hideButtons(); |
85 }); |
120 }); |
86 |
121 |
87 dellButton = DOM.add('wp_gallerybtns', 'img', { |
122 dellButton = DOM.add('wp_gallerybtns', 'img', { |
88 src : t.url+'/img/delete.png', |
123 src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png', |
89 id : 'wp_delgallery', |
124 id : 'wp_delgallery', |
90 width : '24', |
125 width : '24', |
91 height : '24', |
126 height : '24', |
92 title : ed.getLang('wordpress.delgallery') |
127 title : ed.getLang('wordpress.delgallery') |
93 }); |
128 }); |
94 |
129 |
95 tinymce.dom.Event.add(dellButton, 'mousedown', function(e) { |
130 tinymce.dom.Event.add(dellButton, 'mousedown', function(e) { |
96 var ed = tinyMCE.activeEditor, el = ed.selection.getNode(); |
131 var ed = tinymce.activeEditor, el = ed.selection.getNode(); |
97 |
132 |
98 if ( el.nodeName == 'IMG' && ed.dom.hasClass(el, 'wpGallery') ) { |
133 if ( el.nodeName == 'IMG' && ed.dom.hasClass(el, 'wpGallery') ) { |
99 ed.dom.remove(el); |
134 ed.dom.remove(el); |
100 |
135 |
101 ed.execCommand('mceRepaint'); |
136 ed.execCommand('mceRepaint'); |
102 return false; |
137 ed.dom.events.cancel(e); |
103 } |
138 } |
|
139 |
|
140 ed.plugins.wordpress._hideButtons(); |
104 }); |
141 }); |
105 }, |
142 }, |
106 |
143 |
107 getInfo : function() { |
144 getInfo : function() { |
108 return { |
145 return { |