diff options
author | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-12-04 17:54:04 +0100 |
---|---|---|
committer | Ismaël Bouya <ismael.bouya@normalesup.org> | 2017-12-04 17:54:04 +0100 |
commit | 317f8f8f0651488f226b5280a8f036c7c135c639 (patch) | |
tree | 97bd4889ab2822a00d4b0f0d5cde38b59f9f41de /sources/plugins/Audio/dialogs/audio.js | |
parent | 1096cdefb1c9a3f3c4ca6807e272da6c92e5ed9c (diff) | |
download | piedsjaloux-ckeditor-component-317f8f8f0651488f226b5280a8f036c7c135c639.tar.gz piedsjaloux-ckeditor-component-317f8f8f0651488f226b5280a8f036c7c135c639.tar.zst piedsjaloux-ckeditor-component-317f8f8f0651488f226b5280a8f036c7c135c639.zip |
Add oembed4.7.3
Diffstat (limited to 'sources/plugins/Audio/dialogs/audio.js')
-rw-r--r-- | sources/plugins/Audio/dialogs/audio.js | 350 |
1 files changed, 350 insertions, 0 deletions
diff --git a/sources/plugins/Audio/dialogs/audio.js b/sources/plugins/Audio/dialogs/audio.js new file mode 100644 index 0000000..5b72af9 --- /dev/null +++ b/sources/plugins/Audio/dialogs/audio.js | |||
@@ -0,0 +1,350 @@ | |||
1 | CKEDITOR.dialog.add( 'audio', function ( editor ) | ||
2 | { | ||
3 | var lang = editor.lang.audio; | ||
4 | |||
5 | function commitValue( audioNode, extraStyles ) | ||
6 | { | ||
7 | var value=this.getValue(); | ||
8 | |||
9 | if ( !value && this.id=='id' ) | ||
10 | value = generateId(); | ||
11 | |||
12 | audioNode.setAttribute( this.id, value); | ||
13 | |||
14 | if ( !value ) | ||
15 | return; | ||
16 | switch( this.id ) | ||
17 | { | ||
18 | case 'poster': | ||
19 | extraStyles.backgroundImage = 'url(' + value + ')'; | ||
20 | break; | ||
21 | case 'width': | ||
22 | extraStyles.width = value + 'px'; | ||
23 | break; | ||
24 | case 'height': | ||
25 | extraStyles.height = value + 'px'; | ||
26 | break; | ||
27 | } | ||
28 | } | ||
29 | |||
30 | function commitSrc( audioNode, extraStyles, audios ) | ||
31 | { | ||
32 | var match = this.id.match(/(\w+)(\d)/), | ||
33 | id = match[1], | ||
34 | number = parseInt(match[2], 10); | ||
35 | |||
36 | var audio = audios[number] || (audios[number]={}); | ||
37 | audio[id] = this.getValue(); | ||
38 | } | ||
39 | |||
40 | function loadValue( audioNode ) | ||
41 | { | ||
42 | if ( audioNode ) | ||
43 | this.setValue( audioNode.getAttribute( this.id ) ); | ||
44 | else | ||
45 | { | ||
46 | if ( this.id == 'id') | ||
47 | this.setValue( generateId() ); | ||
48 | } | ||
49 | } | ||
50 | |||
51 | function loadSrc( audioNode, audios ) | ||
52 | { | ||
53 | var match = this.id.match(/(\w+)(\d)/), | ||
54 | id = match[1], | ||
55 | number = parseInt(match[2], 10); | ||
56 | |||
57 | var audio = audios[number]; | ||
58 | if (!audio) | ||
59 | return; | ||
60 | this.setValue( audio[ id ] ); | ||
61 | } | ||
62 | |||
63 | function generateId() | ||
64 | { | ||
65 | var now = new Date(); | ||
66 | return 'audio' + now.getFullYear() + now.getMonth() + now.getDate() + now.getHours() + now.getMinutes() + now.getSeconds(); | ||
67 | } | ||
68 | |||
69 | // To automatically get the dimensions of the poster image | ||
70 | var onImgLoadEvent = function() | ||
71 | { | ||
72 | // Image is ready. | ||
73 | var preview = this.previewImage; | ||
74 | preview.removeListener( 'load', onImgLoadEvent ); | ||
75 | preview.removeListener( 'error', onImgLoadErrorEvent ); | ||
76 | preview.removeListener( 'abort', onImgLoadErrorEvent ); | ||
77 | |||
78 | this.setValueOf( 'info', 'width', preview.$.width ); | ||
79 | this.setValueOf( 'info', 'height', preview.$.height ); | ||
80 | }; | ||
81 | |||
82 | var onImgLoadErrorEvent = function() | ||
83 | { | ||
84 | // Error. Image is not loaded. | ||
85 | var preview = this.previewImage; | ||
86 | preview.removeListener( 'load', onImgLoadEvent ); | ||
87 | preview.removeListener( 'error', onImgLoadErrorEvent ); | ||
88 | preview.removeListener( 'abort', onImgLoadErrorEvent ); | ||
89 | }; | ||
90 | |||
91 | return { | ||
92 | title : lang.dialogTitle, | ||
93 | minWidth : 400, | ||
94 | minHeight : 200, | ||
95 | |||
96 | onShow : function() | ||
97 | { | ||
98 | // Clear previously saved elements. | ||
99 | this.fakeImage = this.audioNode = null; | ||
100 | // To get dimensions of poster image | ||
101 | this.previewImage = editor.document.createElement( 'img' ); | ||
102 | |||
103 | var fakeImage = this.getSelectedElement(); | ||
104 | if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == 'audio' ) | ||
105 | { | ||
106 | this.fakeImage = fakeImage; | ||
107 | |||
108 | var audioNode = editor.restoreRealElement( fakeImage ), | ||
109 | audios = [], | ||
110 | sourceList = audioNode.getElementsByTag( 'source', '' ); | ||
111 | if (sourceList.count()==0) | ||
112 | sourceList = audioNode.getElementsByTag( 'source', 'cke' ); | ||
113 | |||
114 | for ( var i = 0, length = sourceList.count() ; i < length ; i++ ) | ||
115 | { | ||
116 | var item = sourceList.getItem( i ); | ||
117 | audios.push( {src : item.getAttribute( 'src' ), type: item.getAttribute( 'type' )} ); | ||
118 | } | ||
119 | |||
120 | this.audioNode = audioNode; | ||
121 | |||
122 | this.setupContent( audioNode, audios ); | ||
123 | } | ||
124 | else | ||
125 | this.setupContent( null, [] ); | ||
126 | }, | ||
127 | |||
128 | onOk : function() | ||
129 | { | ||
130 | // If there's no selected element create one. Otherwise, reuse it | ||
131 | var audioNode = null; | ||
132 | if ( !this.fakeImage ) | ||
133 | { | ||
134 | audioNode = CKEDITOR.dom.element.createFromHtml( '<cke:audio></cke:audio>', editor.document ); | ||
135 | audioNode.setAttributes( | ||
136 | { | ||
137 | controls : 'controls' | ||
138 | } ); | ||
139 | } | ||
140 | else | ||
141 | { | ||
142 | audioNode = this.audioNode; | ||
143 | } | ||
144 | |||
145 | var extraStyles = {}, audios = []; | ||
146 | this.commitContent( audioNode, extraStyles, audios ); | ||
147 | |||
148 | var innerHtml = '', links = '', | ||
149 | link = lang.linkTemplate || '', | ||
150 | fallbackTemplate = lang.fallbackTemplate || ''; | ||
151 | for(var i=0; i<audios.length; i++) | ||
152 | { | ||
153 | var audio = audios[i]; | ||
154 | if ( !audio || !audio.src ) | ||
155 | continue; | ||
156 | innerHtml += '<cke:source src="' + audio.src + '" type="' + audio.type + '" />'; | ||
157 | links += link.replace('%src%', audio.src).replace('%type%', audio.type); | ||
158 | } | ||
159 | audioNode.setHtml( innerHtml + fallbackTemplate.replace( '%links%', links ) ); | ||
160 | |||
161 | // Refresh the fake image. | ||
162 | var newFakeImage = editor.createFakeElement( audioNode, 'cke_audio', 'audio', false ); | ||
163 | newFakeImage.setStyles( extraStyles ); | ||
164 | if ( this.fakeImage ) | ||
165 | { | ||
166 | newFakeImage.replace( this.fakeImage ); | ||
167 | editor.getSelection().selectElement( newFakeImage ); | ||
168 | } | ||
169 | else | ||
170 | { | ||
171 | // Insert it in a div | ||
172 | var div = new CKEDITOR.dom.element( 'DIV', editor.document ); | ||
173 | editor.insertElement( div ); | ||
174 | div.append( newFakeImage ); | ||
175 | } | ||
176 | }, | ||
177 | onHide : function() | ||
178 | { | ||
179 | if ( this.previewImage ) | ||
180 | { | ||
181 | this.previewImage.removeListener( 'load', onImgLoadEvent ); | ||
182 | this.previewImage.removeListener( 'error', onImgLoadErrorEvent ); | ||
183 | this.previewImage.removeListener( 'abort', onImgLoadErrorEvent ); | ||
184 | this.previewImage.remove(); | ||
185 | this.previewImage = null; // Dialog is closed. | ||
186 | } | ||
187 | }, | ||
188 | |||
189 | contents : | ||
190 | [ | ||
191 | { | ||
192 | id : 'info', | ||
193 | elements : | ||
194 | [ | ||
195 | { | ||
196 | type : 'hbox', | ||
197 | widths: [ '', '100px'], | ||
198 | children : [ | ||
199 | { | ||
200 | type : 'text', | ||
201 | id : 'poster', | ||
202 | label : lang.poster, | ||
203 | commit : commitValue, | ||
204 | setup : loadValue, | ||
205 | onChange : function() | ||
206 | { | ||
207 | var dialog = this.getDialog(), | ||
208 | newUrl = this.getValue(); | ||
209 | |||
210 | //Update preview image | ||
211 | if ( newUrl.length > 0 ) //Prevent from load before onShow | ||
212 | { | ||
213 | dialog = this.getDialog(); | ||
214 | var preview = dialog.previewImage; | ||
215 | |||
216 | preview.on( 'load', onImgLoadEvent, dialog ); | ||
217 | preview.on( 'error', onImgLoadErrorEvent, dialog ); | ||
218 | preview.on( 'abort', onImgLoadErrorEvent, dialog ); | ||
219 | preview.setAttribute( 'src', newUrl ); | ||
220 | } | ||
221 | } | ||
222 | }, | ||
223 | { | ||
224 | type : 'button', | ||
225 | id : 'browse', | ||
226 | hidden : 'true', | ||
227 | style : 'display:inline-block;margin-top:10px;', | ||
228 | filebrowser : | ||
229 | { | ||
230 | action : 'Browse', | ||
231 | target: 'info:poster', | ||
232 | url: editor.config.filebrowserImageBrowseUrl || editor.config.filebrowserBrowseUrl | ||
233 | }, | ||
234 | label : editor.lang.common.browseServer | ||
235 | }] | ||
236 | }, | ||
237 | { | ||
238 | type : 'hbox', | ||
239 | widths: [ '33%', '33%', '33%'], | ||
240 | children : [ | ||
241 | { | ||
242 | type : 'text', | ||
243 | id : 'width', | ||
244 | label : editor.lang.common.width, | ||
245 | 'default' : 400, | ||
246 | validate : CKEDITOR.dialog.validate.notEmpty( lang.widthRequired ), | ||
247 | commit : commitValue, | ||
248 | setup : loadValue | ||
249 | }, | ||
250 | { | ||
251 | type : 'text', | ||
252 | id : 'height', | ||
253 | label : editor.lang.common.height, | ||
254 | 'default' : 300, | ||
255 | validate : CKEDITOR.dialog.validate.notEmpty(lang.heightRequired ), | ||
256 | commit : commitValue, | ||
257 | setup : loadValue | ||
258 | }, | ||
259 | { | ||
260 | type : 'text', | ||
261 | id : 'id', | ||
262 | label : 'Id', | ||
263 | commit : commitValue, | ||
264 | setup : loadValue | ||
265 | } | ||
266 | ] | ||
267 | }, | ||
268 | { | ||
269 | type : 'hbox', | ||
270 | widths: [ '', '100px', '75px'], | ||
271 | children : [ | ||
272 | { | ||
273 | type : 'text', | ||
274 | id : 'src0', | ||
275 | label : lang.sourceaudio, | ||
276 | commit : commitSrc, | ||
277 | setup : loadSrc | ||
278 | }, | ||
279 | { | ||
280 | type : 'button', | ||
281 | id : 'browse', | ||
282 | hidden : 'true', | ||
283 | style : 'display:inline-block;margin-top:10px;', | ||
284 | filebrowser : | ||
285 | { | ||
286 | action : 'Browse', | ||
287 | target: 'info:src0', | ||
288 | url: editor.config.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl | ||
289 | }, | ||
290 | label : editor.lang.common.browseServer | ||
291 | }, | ||
292 | { | ||
293 | id : 'type0', | ||
294 | label : lang.sourceType, | ||
295 | type : 'select', | ||
296 | 'default' : 'audio/mp3', | ||
297 | items : | ||
298 | [ | ||
299 | [ 'MP3', 'audio/mp3' ], | ||
300 | [ 'WAV', 'audio/wav' ] | ||
301 | ], | ||
302 | commit : commitSrc, | ||
303 | setup : loadSrc | ||
304 | }] | ||
305 | }, | ||
306 | |||
307 | { | ||
308 | type : 'hbox', | ||
309 | widths: [ '', '100px', '75px'], | ||
310 | children : [ | ||
311 | { | ||
312 | type : 'text', | ||
313 | id : 'src1', | ||
314 | label : lang.sourceaudio, | ||
315 | commit : commitSrc, | ||
316 | setup : loadSrc | ||
317 | }, | ||
318 | { | ||
319 | type : 'button', | ||
320 | id : 'browse', | ||
321 | hidden : 'true', | ||
322 | style : 'display:inline-block;margin-top:10px;', | ||
323 | filebrowser : | ||
324 | { | ||
325 | action : 'Browse', | ||
326 | target: 'info:src1', | ||
327 | url: editor.config.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl | ||
328 | }, | ||
329 | label : editor.lang.common.browseServer | ||
330 | }, | ||
331 | { | ||
332 | id : 'type1', | ||
333 | label : lang.sourceType, | ||
334 | type : 'select', | ||
335 | 'default':'audio/wav', | ||
336 | items : | ||
337 | [ | ||
338 | [ 'MP3', 'audio/mp3' ], | ||
339 | [ 'WAV', 'audio/wav' ] | ||
340 | ], | ||
341 | commit : commitSrc, | ||
342 | setup : loadSrc | ||
343 | }] | ||
344 | } | ||
345 | ] | ||
346 | } | ||
347 | |||
348 | ] | ||
349 | }; | ||
350 | } ); | ||