Add audio, color and fonts

[perso/Immae/Projets/packagist/ludivine-ckeditor-component.git] / sources / plugins / Audio / dialogs / audio.js

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