--- /dev/null
+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
projects / perso / Immae / Projets / packagist / piedsjaloux-ckeditor-component.git / blobdiff