Archive for the 'Web' Category

Flex File Manager - Source Files

Published at January 3, 2008 in Web and Flash. 4 Comments

This is in response to this post: http://www.castlesblog.com/2006/09/18/flexfm/

Flex file manager was something that I wrote with a demo version of Flex 2 and never really finished it. To my surprise I have had quite a few requests for the source code so I’ve finally gone and found all the files and packaged them up so you can download them from my website.

It uses a very old version of amfphp and only uses amf0 (I couldn’t quite work out how to do amf3 at the time). I think amfphp supports amf3 now so if someone is interested, they might want to modify it.

As for copyright stuff.. There are no restrictions on what you use as long as I (Marc Castles - www.castlesblog.com) get a mention in the credits if you use my source code.

The file manager was never really finished and I don’t even know how secure it is. I’m sure there are heaps of bugs so I wouldn’t suggest using it in a production environment.

Best of luck with it!

Download Flex File Manager

fckeditor delete file/folder

Published at December 6, 2007 in Web. 18 Comments

By default the fckeditor file browser that comes with it doesn't allow file deleting or folder deleting because of the security risk. Its a bit of a pain but it is possible to get the file browser to delete files. Here is how I went about it for php:

edit "editor/filemanager/connectors/php/commands.php" and add:

PLAIN TEXT
PHP:
  1. function DeleteFile( $resourceType, $currentFolder ) {
  2.     $file = $_SERVER['DOCUMENT_ROOT'].$_GET['FileUrl'];
  3.     if (is_file($file)) {
  4.         unlink($file);
  5.     } else {
  6.         echo '<error number="1" originaldescription="unable to locate file">' ;
  7.     }
  8. }
  9. function DeleteFolder( $resourceType, $currentFolder ) {
  10.     $folder = $_SERVER['DOCUMENT_ROOT'].$_GET['FolderName'];
  11.     if (is_dir($folder) )   {
  12.         DELETE_RECURSIVE_DIRS($folder);
  13.     } else {
  14.         echo '<error number="2" originaldescription="unable to locate folder">' ;
  15.     }
  16. }
  17. function DELETE_RECURSIVE_DIRS($dirname) { // recursive function to delete
  18.     // all subdirectories and contents:
  19.     if(is_dir($dirname))$dir_handle=opendir($dirname);
  20.     while($file=readdir($dir_handle)) {
  21.         if($file!="." && $file!="..") {
  22.             if(!is_dir($dirname."/".$file)) {
  23.                 unlink ($dirname."/".$file);
  24.             } else {
  25.                 DELETE_RECURSIVE_DIRS($dirname."/".$file);
  26.             }
  27.         }
  28.     }
  29.     closedir($dir_handle);
  30.     rmdir($dirname);
  31. }

modify editor/filemanager/connectors/php/connector.php so that the command switch looks like this:

PLAIN TEXT
PHP:
  1. switch ( $sCommand ) {
  2.     case 'GetFolders' :
  3.         GetFolders( $sResourceType, $sCurrentFolder ) ;
  4.     break ;
  5.     case 'GetFoldersAndFiles' :
  6.     GetFoldersAndFiles( $sResourceType, $sCurrentFolder ) ;
  7.     break ;
  8.     case 'CreateFolder' :
  9.         CreateFolder( $sResourceType, $sCurrentFolder ) ;
  10.     break ;
  11.     /******ADDED DELETE COMMANDS******/
  12.     case 'DeleteFile' :
  13.         DeleteFile( $sResourceType, $sCurrentFolder ) ;
  14.     break ;
  15.     case 'DeleteFolder' :
  16.         DeleteFolder( $sResourceType, $sCurrentFolder ) ;
  17.     break ;
  18. }

modify editor/filemanager/connectors/php/config.php allowed commands:

PLAIN TEXT
PHP:
  1. $Config['ConfigAllowedCommands'] = array('QuickUpload', 'FileUpload', 'GetFolders', 'GetFoldersAndFiles', 'CreateFolder', 'DeleteFile', 'DeleteFolder') ;

You will also need to make sure that this connector is enabled in this file also but you knew that already didn't you?

PLAIN TEXT
PHP:
  1. $Config['Enabled'] = true ;

modify editor/filemanager/browser/default/frmresourceslist.html.html so that the functions look like this:

PLAIN TEXT
PHP:
  1. oListManager.GetFolderRowHtml = function( folderName, folderPath, folderUrl ) //added folderUrl
  2. {   
  3.     // Build the link to view the folder.
  4.     var sLink = '<a href="#" onclick="OpenFolder(\'' + folderPath.replace( /'/g, '\\\'') + '\');return false;">' ;
  5.  
  6.     return '<tr>' +
  7.             '<td width="16">' +
  8.                 sLink +
  9.                 '<img alt="" src="images/Folder.gif" width="16" height="16" border="0"></a>' +
  10.             '</td><td nowrap colspan="2">&nbsp;' +
  11.                 sLink +
  12.                 folderName +
  13.                 '</a>' +
  14.         '</td><td align="right"><a href="#" onclick="DeleteFolder(\''+folderName+'\',\''+ folderUrl.replace( /'/g, '\\\'') + '\');return false;">DELETE</a></td></tr>' ;
  15. }
  16.  
  17. oListManager.GetFileRowHtml = function( fileName, fileUrl, fileSize )
  18. {      
  19.     // Build the link to view the folder.
  20.     var sLink = '<a href="#" onclick="OpenFile(\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ;
  21.  
  22.     // Get the file icon.
  23.     var sIcon = oIcons.GetIcon( fileName ) ;
  24.  
  25.     return '<tr>' +
  26.             '<td width="16">' +
  27.                 sLink +
  28.                 '<img src="'+fileUrl+'" border="0" style="border:1px solid black; margin:5px;" alt="" height="70" /></a>' +
  29.             '</td><td>&nbsp;' +
  30.                 sLink +
  31.                 fileName +
  32.                 '</a>' +
  33.             '</td><td align="right" nowrap>&nbsp;' +
  34.                 fileSize +
  35.                 ' KB' +
  36.         '</td><td align="right"><a href="#" onclick="DeleteFile(\''+fileName+'\',\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">DELETE</a></td></tr>' ;
  37. }
  38.  
  39. function DeleteFile( fileName, fileUrl )
  40. {
  41.     if (confirm('Are you sure you wish to delete ' + fileName + '?')) {
  42.         oConnector.SendCommand( 'DeleteFile', "FileUrl=" + escape( fileUrl ), Refresh ) ;
  43.     }
  44.  
  45. }
  46.  
  47. function DeleteFolder( folderName, folderPath )
  48. {
  49.     if (confirm('Are you sure you wish to delete \'' + folderName + '\' and all files in it?')) {
  50.         oConnector.SendCommand( 'DeleteFolder', "FolderName=" + escape( folderPath + folderName ), Refresh ) ;
  51.     }
  52. }

*NOTE* This will also show a thumbnail image - you can change the function to turn this off if you want *NOTE*
oh and also in the function modify this..

PLAIN TEXT
PHP:
  1. oHtml.Append( oListManager.GetFolderRowHtml( sFolderName, sCurrentFolderPath + sFolderName + "/" ) ) ;

to be this...

PLAIN TEXT
PHP:
  1. oHtml.Append( oListManager.GetFolderRowHtml( sFolderName, sCurrentFolderPath + sFolderName + "/", sCurrentFolderUrl ) ) ;

I think that is all.. if I missed anything let me know and I will update this quide.

Refresh FCKeditor without refreshing the whole page

Published at October 15, 2007 in Web. 1 Comment

I've come up with a solution that will refresh the entire editor (reloads the format drop down as well) without refreshing the whole page. I've been stumped on this for quite a while and needed to get it working so that I could use javascript to change an editor's CSS to match a template.

I added the following code to the fckeditor.html file..

PLAIN TEXT
CODE:
  1. // mod to allow for custom editor area css
  2. if(FCKURLParams['EditorAreaCSS'])
  3. FCKConfig.EditorAreaCSS = FCKURLParams['EditorAreaCSS'];

and that allows me to pass in a parameter to the iframe that will force the editor to use the new CSS.

To refresh the editor using javascript I have used the following:

PLAIN TEXT
CODE:
  1. var oEditor = FCKeditorAPI.GetInstance('content') ; //get editor object
  2. document.getElementById("content").value = oEditor.GetHTML(); //save any changes
  3. document.getElementById("content___Frame").src=document.getElementById("content___Frame").src.replace(/templates\/(.*)\/fck.css/,"templates/"+template+"/fck.css"); //refresh the iframe with new css

I also needed to change my fckeditor.class.php so that the src attribute of the iframe was something like this:

PLAIN TEXT
CODE:
  1. /puppy/fckeditor/editor/fckeditor.html?InstanceName=content&amp;Toolbar=Puppy&amp;EditorAreaCSS=/templates/mytemplate/fck.css

css table row background image

Published at February 8, 2007 in Web. 1 Comment

I had a little bit of a problem today where I couldn't get an image in a table header to span accross multiple cells. I wanted to span a gradient from one side of the It worked great in Firefox but failed in IE6/7 and safari. Infact I couldn't get an image to span accross multiple table rows. I've used colours before but this was different because I wanted a seemless gradient. The code I was trying was along the lines as:

PLAIN TEXT
CSS:
  1. .header {
  2. background:url(gradient.jpg) repeat-y top left;
  3. }

PLAIN TEXT
HTML:
  1. <table border="0" cellpadding="5" cellspacing="0">
  2. <tr class="header">
  3. <th width="240">Heading</th>
  4. <th width="240">Another Heading</th>
  5. </tr>
  7. <td>row 1, cell 1</td>
  8. <td>row 1, cell 2</td>
  9. </tr>
  11. <td>row 2, cell 1</td>
  12. <td>row 2, cell 2</td>
  13. </tr>
  15. <td>row 3, cell 1</td>
  16. <td>row 3, cell 2</td>
  17. </tr>
  19. <td>row 4, cell 1</td>
  20. <td>row 4, cell 2</td>
  21. </tr>
  22. </table>

And as you can see from the following renderings it only worked in Firefox and safari correctly (isn't that a surprise).

firefox_opera.png

ie_safari.png

I tried a few work arounds and searched the web for solutions but didn't really find any obvious solution. In the end I decided to make the table background the gradient and fill the table cells with a colour that sat on top of the gradient. This ended up working quite well and worked in all browsers. I would argue the code is cleaner as well as you don't need to add any class tags etc.

PLAIN TEXT
CSS:
  1. table {
  2. background:url(gradient.jpg) repeat-y top left;
  3. }
  4. table td{
  5. background-color:white;
  6. }

PLAIN TEXT
HTML:
  1. <table border="0" cellpadding="5" cellspacing="0">
  3. <th width="240">Heading</th>
  4. <th width="240">Another Heading</th>
  5. </tr>
  7. <td>row 1, cell 1</td>
  8. <td>row 1, cell 2</td>
  9. </tr>
  11. <td>row 2, cell 1</td>
  12. <td>row 2, cell 2</td>
  13. </tr>
  15. <th width="240">Heading</th>
  16. <th width="240">Another Heading</th>
  17. </tr>
  19. <td>row 3, cell 1</td>
  20. <td>row 3, cell 2</td>
  21. </tr>
  23. <td>row 4, cell 1</td>
  24. <td>row 4, cell 2</td>
  25. </tr>
  26. </table>

Feel free to point out that I'm completely wrong and there is a much better way to do this. At the moment tho its working quite well.

GridMove Web Grid

Published at September 10, 2006 in Web. 0 Comments

I just stumbled across a nifty little utility for windows called GridMove that allows you to specify a visual grid that application windows can snap to. All you need to do is click on the title bar and drag the application window to the predefined grid area that you want to change that window to. This can be really handy for single screen computers as window management can get frustrating when using multiple applications.

I thought this would be really handy for testing websites at different resolutions so I made up a web.grid that has 800x600, 1024x768, 1152x864 and then the full resolution. When I want to test a website at a different resolution all I need to do is grab the title bar of my browser and drag the windows to the size I want. How easy is that!

Here is a screenshot of me resizing firefox to 800x600...

GridMove

Here is a link to my grid file. (*NOTE* I set this up for dual monitors). Save this into the Grid directory that GridMove creates.

Enjoy.

**DIGG THIS POST**