Parcourir la source

[svn r21772] FS#2867 - The FCKEditor: Adding a preview tab to the "Insert/Edit video" dialog.

Ivan Tcholakov il y a 15 ans
Parent
commit
62cb7e4342

+ 10 - 0
main/inc/lib/fckeditor/editor/dialog/common/fck_dialog_common.css

@@ -48,6 +48,16 @@
 	background-color: #ffffff;
 }
 
+.MoviePreviewArea
+{
+	border: #000000 1px solid;
+	padding: 5px;
+	overflow: auto;
+	width: 100%;
+	height: 100%;
+	background-color: #ffffff;
+}
+
 .flvPreviewArea
 {
 	border: #000000 1px solid;

+ 1 - 1
main/inc/lib/fckeditor/editor/dialog/common/fck_dialog_common.js

@@ -58,7 +58,7 @@
 function GetCommonDialogCss( prefix )
 {
 	// CSS minified by http://iceyboard.no-ip.org/projects/css_compressor (see _dev/css_compression.txt).
-	return FCKConfig.BasePath + 'dialog/common/' + '|.ImagePreviewArea{border:#000 1px solid;overflow:auto;width:100%;height:230px;background-color:#fff}.FlashPreviewArea{border:#000 1px solid;padding:5px;overflow:auto;width:100%;height:230px;background-color:#fff}.flvPreviewArea{border:#000000 1px solid;padding:5px;overflow:auto;width:100%;height:100%;background-color:#ffffff;}.YouTubePreviewArea{border:#000000 1px solid;padding:5px;overflow:auto;width:100%;height:100%;background-color:#ffffff;}.BtnReset{float:left;background-position:center center;background-image:url(images/reset.gif);width:16px;height:16px;background-repeat:no-repeat;border:1px none;font-size:1px}.BtnLocked,.BtnUnlocked{float:left;background-position:center center;background-image:url(images/locked.gif);width:16px;height:16px;background-repeat:no-repeat;border:none 1px;font-size:1px}.BtnUnlocked{background-image:url(images/unlocked.gif)}.BtnOver{border:outset 1px;cursor:pointer;cursor:hand}' ;
+	return FCKConfig.BasePath + 'dialog/common/' + '|.ImagePreviewArea{border:#000 1px solid;overflow:auto;width:100%;height:230px;background-color:#fff}.FlashPreviewArea{border:#000 1px solid;padding:5px;overflow:auto;width:100%;height:230px;background-color:#fff}.MoviePreviewArea{border:#000000 1px solid;padding: 5px;overflow:auto;width:100%;height:100%;background-color:#ffffff;}.flvPreviewArea{border:#000000 1px solid;padding:5px;overflow:auto;width:100%;height:100%;background-color:#ffffff;}.YouTubePreviewArea{border:#000000 1px solid;padding:5px;overflow:auto;width:100%;height:100%;background-color:#ffffff;}.BtnReset{float:left;background-position:center center;background-image:url(images/reset.gif);width:16px;height:16px;background-repeat:no-repeat;border:1px none;font-size:1px}.BtnLocked,.BtnUnlocked{float:left;background-position:center center;background-image:url(images/locked.gif);width:16px;height:16px;background-repeat:no-repeat;border:none 1px;font-size:1px}.BtnUnlocked{background-image:url(images/unlocked.gif)}.BtnOver{border:outset 1px;cursor:pointer;cursor:hand}' ;
 }
 
 // Gets a element by its Id. Used for shorter coding.

+ 1 - 1
main/inc/lib/fckeditor/editor/dialog/fck_template.html

@@ -170,7 +170,7 @@ function LoadTemplatesXml()
 			else
 			    sInner += '<td valign="top"><img src="fck_template/images/noimage.gif"><br />' ;
 
-			sInner += '<div class="TplTitle"><a href="javascript:void(0);" title="'+oTemplate.Description+'" >' + oTemplate.Title + '<\/a><\/div>';			
+			sInner += '<div class="TplTitle"><a href="javascript:void(0);" title="'+oTemplate.Description+'" >' + oTemplate.Title + '<\/a><\/div>';
 
 			if ( oTemplate.Description )
 				sInner += '<div>' + oTemplate.Description + '<\/div>' ;

+ 7 - 0
main/inc/lib/fckeditor/editor/plugins/fckEmbedMovies/fck_embedmovies.html

@@ -102,6 +102,13 @@ document.write( FCKTools.GetStyleHtml( GetCommonDialogCss() ) ) ;
 			</tr>
 		</table>
 	</div>
+	<div id="divPreview" style="display: none">
+		<table cellSpacing="0" cellPadding="0" width="100%" height="100%">
+			<tr>
+				<td id="ePreviewCell" valign="top" class="MoviePreviewArea"><iframe src="fck_embedmovies_preview.html" frameborder="0" marginheight="0" marginwidth="0" style="width: 100%; height: 100%;"></iframe></td>
+			</tr>
+		</table>
+	</div>
 	<div id="divUpload" style="display: none">
 		<form id="frmUpload" method="post" target="UploadWindow" enctype="multipart/form-data" action="" onsubmit="javascript: return CheckUpload();">
 			<span fckLang="DlgLnkUpload">Upload</span><br />

+ 99 - 17
main/inc/lib/fckeditor/editor/plugins/fckEmbedMovies/fck_embedmovies.js

@@ -23,16 +23,28 @@ FCKLang['UploadError'] = FCKLang['UploadError'] ? FCKLang['UploadError'] : 'Erro
 
 // Set the dialog tabs.
 dialog.AddTab( 'Info', FCKLang.DlgInfoTab ) ;
-
+dialog.AddTab( 'Preview', FCKLang.DlgImgPreview ) ;
 if ( FCKConfig.VideoUpload )
+{
 	dialog.AddTab( 'Upload', FCKLang.DlgLnkUpload ) ;
+}
 
 
 // Function called when a dialog tag is selected.
 function OnDialogTabChange( tabCode )
 {
 	ShowE( 'divInfo', ( tabCode == 'Info' ) ) ;
+	ShowE( 'divPreview', ( tabCode == 'Preview' ) ) ;
 	ShowE( 'divUpload', ( tabCode == 'Upload' ) ) ;
+
+	if ( tabCode == 'Preview' )
+	{
+		UpdatePreview() ;
+	}
+	else
+	{
+		ClearPreview() ;
+	}
 }
 
 // <object><param><embed> alternative does not working properly
@@ -141,9 +153,9 @@ window.onload = function ()
 	dialog.SetOkButton( true ) ;
 
 	SelectField( 'txtUrl' ) ;
-} 
+}
 
-function CreateEmbeddedMovie( e, url )
+function CreateEmbeddedMovie( url )
 {
 	var sType, pluginspace, codebase, classid ;
 	var sExt = url.match( /\.(mpg|mpeg|mp4|avi|wmv|mov|asf)$/i ) ;
@@ -219,9 +231,6 @@ function CreateEmbeddedMovie( e, url )
 			html += '></embed>' ;
 		}
 
-		//e.innerHTML = html ;
-		//FCK.InsertHtml( html ) ;
-
 		return html;
 	}
 }
@@ -239,30 +248,23 @@ function Ok()
 		return false ;
 	}
 
-	// Disabled by Ivan Tcholakov.
-	//if ( !oContainerDiv )
-	//{
-	//	oContainerDiv = FCK.CreateElement( 'DIV' ) ;
-	//}
-
 	if ( !oEmbed )
 	{
-		oEmbed = FCK.EditorDocument.createElement( 'EMBED' ) ;		
+		oEmbed = FCK.EditorDocument.createElement( 'EMBED' ) ;
 		oFakeImage = null ;
 	}
 
-	url = GetE( 'txtUrl' ).value ; 
+	url = GetE( 'txtUrl' ).value ;
 
 	if ( !oFakeImage )
 	{	
 		oFakeImage = oEditor.FCKDocumentProcessor_CreateFakeImage( 'FCK__Video', oEmbed ) ;
 		oFakeImage.setAttribute( '_fckvideo', 'true', 0 ) ;
-		//oFakeImage = FCK.InsertElement( oFakeImage ) ;
 	}
 
 	oEditor.FCKEmbedAndObjectProcessor.RefreshView( oFakeImage, oEmbed ) ;	
 
-	html = CreateEmbeddedMovie( oContainerDiv, url ) ;	
+	html = CreateEmbeddedMovie( url ) ;	
 	FCK.InsertHtml( html ) ;
 
 	oEditor.FCKUndo.SaveUndoStep() ;
@@ -284,6 +286,86 @@ function SetUrl( url )
 	dialog.SetSelectedTab( 'Info' ) ;
 }
 
+var ePreview ;
+
+function SetPreviewElement( previewEl )
+{
+	ePreview = previewEl ;
+}
+
+function UpdatePreview()
+{
+	if ( !ePreview )
+		return ;
+
+	while ( ePreview.firstChild )
+		ePreview.removeChild( ePreview.firstChild ) ;
+
+	url = GetE( 'txtUrl' ).value ;
+
+	if ( url && url.length > 0 )
+	{
+		url = FCK.GetUrl( url, FCK.ABSOLUTE_URL ) ;
+		html = CreateEmbeddedMovie( url ) ;
+
+		ePreview.innerHTML = html ;
+		e = ePreview.firstChild ;
+		if ( !e )
+		{
+			return ;
+		}
+
+		SetAttribute ( e, 'autostart', 'false' ) ;
+		var autosize = GetAttribute( e, 'autosize', 'false' ).toLowerCase() ;
+
+		var max_width = 515 ;
+		var max_height = 275 ;
+		var width = parseInt( GetAttribute( e, 'width', 0 ), 10 ) ;
+		var height = parseInt( GetAttribute( e, 'height', 0 ), 10 ) ;
+		var margin_left = parseInt( ( max_width - width ) / 2, 10 ) ;
+		var margin_top = parseInt( ( max_height - height ) / 2, 10 ) ;
+
+		if ( !( ( autosize != 'true' ) && ( width > 0 ) && ( height > 0 ) ) )
+		{
+			margin_left = 0 ;
+			margin_top = 0 ;
+		}
+
+		if ( margin_left < 0 )
+		{
+			margin_left = 0 ;
+		}
+
+		if ( margin_top < 0 )
+		{
+			margin_top = 0 ;
+		}
+
+		if ( ePreview.currentStyle )
+		{
+			// IE
+			ePreview.style.marginLeft = margin_left ;
+			ePreview.style.marginTop = margin_top ;
+		}
+		else
+		{
+			// Other browsers
+			SetAttribute( ePreview, 'style', 'margin-left: ' + margin_left + 'px; margin-top: ' + margin_top + 'px;' ) ;
+		}
+	}
+}
+
+function ClearPreview()
+{
+	if ( !ePreview )
+		return ;
+
+	while ( ePreview.firstChild )
+		ePreview.removeChild( ePreview.firstChild ) ;
+
+	ePreview.innerHTML = '&nbsp;' ;
+}
+
 function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
 {
 	// Remove animation
@@ -319,7 +401,7 @@ function OnUploadCompleted( errorNumber, fileUrl, fileName, customMsg )
 	}
 	
 	SetUrl( fileUrl ) ;
-	GetE('frmUpload').reset() ;
+	GetE( 'frmUpload' ).reset() ;
 }
 
 var oUploadAllowedExtRegex = new RegExp( FCKConfig.VideoUploadAllowedExtensions, 'i' ) ;

+ 52 - 0
main/inc/lib/fckeditor/editor/plugins/fckEmbedMovies/fck_embedmovies_preview.html

@@ -0,0 +1,52 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
+<!--
+ *	Dokeos - elearning and course management software
+ *
+ *	Copyright (c) 2009 Dokeos SPRL
+ *	Copyright (c) 2009 Ivan Tcholakov <ivantcholakov@gmail.com>
+ *
+ *	For a full list of contributors, see "credits.txt".
+ *	The full license can be read in "license.txt".
+ *
+ *	This program is free software; you can redistribute it and/or
+ *	modify it under the terms of the GNU General Public License
+ *	as published by the Free Software Foundation; either version 2
+ *	of the License, or (at your option) any later version.
+ *
+ *	See the GNU General Public License for more details.
+ *
+ * Contact address: Dokeos, rue du Corbeau, 108, B-1030 Brussels, Belgium
+ * Mail: info@dokeos.com
+
+ * This plugin uses as a template some original source code of the
+ * FCKeditor 2.6.4, see for example the flash dialog or the image
+ * properties dialog.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title></title>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<meta name="robots" content="noindex, nofollow" />
+		<script src="../../dialog/common/fck_dialog_common.js" type="text/javascript"></script>
+
+		<script type="text/javascript">
+
+var FCKTools = window.parent.FCKTools ;
+var FCKConfig = window.parent.FCKConfig ;
+
+// Sets the Skin CSS
+document.write( FCKTools.GetStyleHtml( FCKConfig.SkinDialogCSS ) ) ;
+document.write( FCKTools.GetStyleHtml( GetCommonDialogCss( '../' ) ) ) ;
+
+if ( window.parent.FCKConfig.BaseHref.length > 0 )
+	document.write( '<base href="' + window.parent.FCKConfig.BaseHref + '">' ) ;
+
+window.onload = function()
+{
+	window.parent.SetPreviewElement( document.getElementById( 'movie_preview' ) ) ;
+}
+
+		</script>
+	</head>
+	<body style="color: #000000; background-color: #ffffff;"><div id="movie_preview"></div></body>
+</html>