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