-CKEDITOR.dialog.add( 'audio', function ( editor )\r
-{\r
- var lang = editor.lang.audio;\r
-\r
- function commitValue( audioNode, extraStyles )\r
- {\r
- var value=this.getValue();\r
-\r
- if ( !value && this.id=='id' )\r
- value = generateId();\r
-\r
- audioNode.setAttribute( this.id, value);\r
-\r
- if ( !value )\r
- return;\r
- switch( this.id )\r
- {\r
- case 'poster':\r
- extraStyles.backgroundImage = 'url(' + value + ')';\r
- break;\r
- case 'width':\r
- extraStyles.width = value + 'px';\r
- break;\r
- case 'height':\r
- extraStyles.height = value + 'px';\r
- break;\r
- }\r
- }\r
-\r
- function commitSrc( audioNode, extraStyles, audios )\r
- {\r
- var match = this.id.match(/(\w+)(\d)/),\r
- id = match[1],\r
- number = parseInt(match[2], 10);\r
-\r
- var audio = audios[number] || (audios[number]={});\r
- audio[id] = this.getValue();\r
- }\r
-\r
- function loadValue( audioNode )\r
- {\r
- if ( audioNode )\r
- this.setValue( audioNode.getAttribute( this.id ) );\r
- else\r
- {\r
- if ( this.id == 'id')\r
- this.setValue( generateId() );\r
- }\r
- }\r
-\r
- function loadSrc( audioNode, audios )\r
- {\r
- var match = this.id.match(/(\w+)(\d)/),\r
- id = match[1],\r
- number = parseInt(match[2], 10);\r
-\r
- var audio = audios[number];\r
- if (!audio)\r
- return;\r
- this.setValue( audio[ id ] );\r
- }\r
-\r
- function generateId()\r
- {\r
- var now = new Date();\r
- return 'audio' + now.getFullYear() + now.getMonth() + now.getDate() + now.getHours() + now.getMinutes() + now.getSeconds();\r
- }\r
-\r
- // To automatically get the dimensions of the poster image\r
- var onImgLoadEvent = function()\r
- {\r
- // Image is ready.\r
- var preview = this.previewImage;\r
- preview.removeListener( 'load', onImgLoadEvent );\r
- preview.removeListener( 'error', onImgLoadErrorEvent );\r
- preview.removeListener( 'abort', onImgLoadErrorEvent );\r
-\r
- this.setValueOf( 'info', 'width', preview.$.width );\r
- this.setValueOf( 'info', 'height', preview.$.height );\r
- };\r
-\r
- var onImgLoadErrorEvent = function()\r
- {\r
- // Error. Image is not loaded.\r
- var preview = this.previewImage;\r
- preview.removeListener( 'load', onImgLoadEvent );\r
- preview.removeListener( 'error', onImgLoadErrorEvent );\r
- preview.removeListener( 'abort', onImgLoadErrorEvent );\r
- };\r
-\r
- return {\r
- title : lang.dialogTitle,\r
- minWidth : 400,\r
- minHeight : 200,\r
-\r
- onShow : function()\r
- {\r
- // Clear previously saved elements.\r
- this.fakeImage = this.audioNode = null;\r
- // To get dimensions of poster image\r
- this.previewImage = editor.document.createElement( 'img' );\r
-\r
- var fakeImage = this.getSelectedElement();\r
- if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == 'audio' )\r
- {\r
- this.fakeImage = fakeImage;\r
-\r
- var audioNode = editor.restoreRealElement( fakeImage ),\r
- audios = [],\r
- sourceList = audioNode.getElementsByTag( 'source', '' );\r
- if (sourceList.count()==0)\r
- sourceList = audioNode.getElementsByTag( 'source', 'cke' );\r
-\r
- for ( var i = 0, length = sourceList.count() ; i < length ; i++ )\r
- {\r
- var item = sourceList.getItem( i );\r
- audios.push( {src : item.getAttribute( 'src' ), type: item.getAttribute( 'type' )} );\r
- }\r
-\r
- this.audioNode = audioNode;\r
-\r
- this.setupContent( audioNode, audios );\r
- }\r
- else\r
- this.setupContent( null, [] );\r
- },\r
-\r
- onOk : function()\r
- {\r
- // If there's no selected element create one. Otherwise, reuse it\r
- var audioNode = null;\r
- if ( !this.fakeImage )\r
- {\r
- audioNode = CKEDITOR.dom.element.createFromHtml( '<cke:audio></cke:audio>', editor.document );\r
- audioNode.setAttributes(\r
- {\r
- controls : 'controls'\r
- } );\r
- }\r
- else\r
- {\r
- audioNode = this.audioNode;\r
- }\r
-\r
- var extraStyles = {}, audios = [];\r
- this.commitContent( audioNode, extraStyles, audios );\r
-\r
- var innerHtml = '', links = '',\r
- link = lang.linkTemplate || '',\r
- fallbackTemplate = lang.fallbackTemplate || '';\r
- for(var i=0; i<audios.length; i++)\r
- {\r
- var audio = audios[i];\r
- if ( !audio || !audio.src )\r
- continue;\r
- innerHtml += '<cke:source src="' + audio.src + '" type="' + audio.type + '" />';\r
- links += link.replace('%src%', audio.src).replace('%type%', audio.type);\r
- }\r
- audioNode.setHtml( innerHtml + fallbackTemplate.replace( '%links%', links ) );\r
-\r
- // Refresh the fake image.\r
- var newFakeImage = editor.createFakeElement( audioNode, 'cke_audio', 'audio', false );\r
- newFakeImage.setStyles( extraStyles );\r
- if ( this.fakeImage )\r
- {\r
- newFakeImage.replace( this.fakeImage );\r
- editor.getSelection().selectElement( newFakeImage );\r
- }\r
- else\r
- {\r
- // Insert it in a div\r
- var div = new CKEDITOR.dom.element( 'DIV', editor.document );\r
- editor.insertElement( div );\r
- div.append( newFakeImage );\r
- }\r
- },\r
- onHide : function()\r
- {\r
- if ( this.previewImage )\r
- {\r
- this.previewImage.removeListener( 'load', onImgLoadEvent );\r
- this.previewImage.removeListener( 'error', onImgLoadErrorEvent );\r
- this.previewImage.removeListener( 'abort', onImgLoadErrorEvent );\r
- this.previewImage.remove();\r
- this.previewImage = null; // Dialog is closed.\r
- }\r
- },\r
-\r
- contents :\r
- [\r
- {\r
- id : 'info',\r
- elements :\r
- [\r
- {\r
- type : 'hbox',\r
- widths: [ '', '100px'],\r
- children : [\r
- {\r
- type : 'text',\r
- id : 'poster',\r
- label : lang.poster,\r
- commit : commitValue,\r
- setup : loadValue,\r
- onChange : function()\r
- {\r
- var dialog = this.getDialog(),\r
- newUrl = this.getValue();\r
-\r
- //Update preview image\r
- if ( newUrl.length > 0 ) //Prevent from load before onShow\r
- {\r
- dialog = this.getDialog();\r
- var preview = dialog.previewImage;\r
-\r
- preview.on( 'load', onImgLoadEvent, dialog );\r
- preview.on( 'error', onImgLoadErrorEvent, dialog );\r
- preview.on( 'abort', onImgLoadErrorEvent, dialog );\r
- preview.setAttribute( 'src', newUrl );\r
- }\r
- }\r
- },\r
- {\r
- type : 'button',\r
- id : 'browse',\r
- hidden : 'true',\r
- style : 'display:inline-block;margin-top:10px;',\r
- filebrowser :\r
- {\r
- action : 'Browse',\r
- target: 'info:poster',\r
- url: editor.config.filebrowserImageBrowseUrl || editor.config.filebrowserBrowseUrl\r
- },\r
- label : editor.lang.common.browseServer\r
- }]\r
- },\r
- {\r
- type : 'hbox',\r
- widths: [ '33%', '33%', '33%'],\r
- children : [\r
- {\r
- type : 'text',\r
- id : 'width',\r
- label : editor.lang.common.width,\r
- 'default' : 400,\r
- validate : CKEDITOR.dialog.validate.notEmpty( lang.widthRequired ),\r
- commit : commitValue,\r
- setup : loadValue\r
- },\r
- {\r
- type : 'text',\r
- id : 'height',\r
- label : editor.lang.common.height,\r
- 'default' : 300,\r
- validate : CKEDITOR.dialog.validate.notEmpty(lang.heightRequired ),\r
- commit : commitValue,\r
- setup : loadValue\r
- },\r
- {\r
- type : 'text',\r
- id : 'id',\r
- label : 'Id',\r
- commit : commitValue,\r
- setup : loadValue\r
- }\r
- ]\r
- },\r
- {\r
- type : 'hbox',\r
- widths: [ '', '100px', '75px'],\r
- children : [\r
- {\r
- type : 'text',\r
- id : 'src0',\r
- label : lang.sourceaudio,\r
- commit : commitSrc,\r
- setup : loadSrc\r
- },\r
- {\r
- type : 'button',\r
- id : 'browse',\r
- hidden : 'true',\r
- style : 'display:inline-block;margin-top:10px;',\r
- filebrowser :\r
- {\r
- action : 'Browse',\r
- target: 'info:src0',\r
- url: editor.config.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl\r
- },\r
- label : editor.lang.common.browseServer\r
- },\r
- {\r
- id : 'type0',\r
- label : lang.sourceType,\r
- type : 'select',\r
- 'default' : 'audio/mp3',\r
- items :\r
- [\r
- [ 'MP3', 'audio/mp3' ],\r
- [ 'WAV', 'audio/wav' ]\r
- ],\r
- commit : commitSrc,\r
- setup : loadSrc\r
- }]\r
- },\r
-\r
- {\r
- type : 'hbox',\r
- widths: [ '', '100px', '75px'],\r
- children : [\r
- {\r
- type : 'text',\r
- id : 'src1',\r
- label : lang.sourceaudio,\r
- commit : commitSrc,\r
- setup : loadSrc\r
- },\r
- {\r
- type : 'button',\r
- id : 'browse',\r
- hidden : 'true',\r
- style : 'display:inline-block;margin-top:10px;',\r
- filebrowser :\r
- {\r
- action : 'Browse',\r
- target: 'info:src1',\r
- url: editor.config.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl\r
- },\r
- label : editor.lang.common.browseServer\r
- },\r
- {\r
- id : 'type1',\r
- label : lang.sourceType,\r
- type : 'select',\r
- 'default':'audio/wav',\r
- items :\r
- [\r
- [ 'MP3', 'audio/mp3' ],\r
- [ 'WAV', 'audio/wav' ]\r
- ],\r
- commit : commitSrc,\r
- setup : loadSrc\r
- }]\r
- }\r
- ]\r
- }\r
-\r
- ]\r
- };\r
-} );\r