Pages

Saturday, September 17, 2011

File Manager Update

Noticed a slight improvement with how data is populated and return.
If the file isn’t an image the width and height is equal to zero. Non-image files (png, jpg, bmp, gif, jpeg) width and height are set to 128 and a generic image is assign.
The testing for whether file’s width and height are zero was performed will displaying the image from JavaScript. This update moves the testing from JavaScript to when the files are being populated from the C# handler: fileManagerHandler.ashx.
C# Code below:
   1: protected void populate()
   2: {
   3:     using (adminDBEntities contxt = new adminDBEntities())
   4:     {
   5:         string relPath = requestVals.currentFolder;
   6:  
   7:         IEnumerable<zFileInfo> media = contxt.Medias.Where(m => m.path == relPath).OrderBy(m => m.name).Select(m => new zFileInfo
   8:                {
   9:                    id = m.ID,
  10:                    name = m.name,
  11:                    ext = m.MediaType.ext,
  12:                    path = m.path,
  13:                    w = m.width == 0 ? 128 : m.width,
  14:                    h = m.height == 0 ? 128 : m.height
  15:                });
  16:  
  17:         folder.files = media.ToList();
  18:     }
  19: }

This will reduce the JavaScript size and rendering files for display and much cleaner.
Posted by at No comments:
Labels: , ,

Friday, September 16, 2011

Just Another File Manager

Currently Updating 05/09/2014

HTML File Managers can be found in abundance on the web. However, I thought to write a my personal File Manager. Its idea is taken from many ideas scattered around the web and combined into something workable and able to incorporate it into my other designs.
fileManager
The tools used in its construction are: ASP.NET, C#, JQuery, JavaScript, Entity Framework, MS SQL Sever 2008, and CSS.
The File Manager allows:
  • Moving, Removing, and uploading binary files.
  • Create and navigate a directory hierarchy.
  • Be open as a child window and return a selected image.
  • Enlarge the viewing area to view a specific image.
File Manager works with two MS SQL tables with a one-to-many cascade relationship:
fileManagerDBTbles
Files are uploaded using AsyncFileUpload control. I could not find a way working by uploading files asynchronously, so  I embedded the the AsyncFileUpload control within an external .aspx page, and this external page is displayed within an iframe element.
uploadFiles
Below is the code for both the fileManager.aspx and fileUpload.aspx pages:
fileManager Code (Code behind page does not have any C# code):
   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fileManager.aspx.cs" Inherits="FileManager._default" %>
   2:  
   3: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
   4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   5: <html xmlns="http://www.w3.org/1999/xhtml">
   6: <head runat="server">
   7:     <title></title>
   8:     <link href="css/fileManager.css" rel="stylesheet" type="text/css" />
   9:     <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
   1:  


   2:     <script src="../js/jquery-ui-1.8.14.min.js" type="text/javascript">


   1: </script>


   2:     <script src="../js/json2.js" type="text/javascript">


   1: </script>


   2:     <script src="js/fileManager.js" type="text/javascript">


   1: </script>


   2:     <script type="text/javascript">


   3:         $(function () {


   4:             fileManager.init('<%: VirtualPathUtility.ToAbsolute("~") %>', "media");


   5:         });


   6:     

</script>
  10: </head>
  11: <body>
  12:     <form runat="server">
  13:     <asp:ScriptManager ID="ScriptManager1" runat="server">
  14:     </asp:ScriptManager>
  15:     <div id="fileMngerBox">
  16:         <div id="fileMngerHead">
  17:             <div>
  18:                 Home Folder
  19:             </div>
  20:             <img id="imgHome" src="images/Home.png" border="0" alt="Home" /><span></span>
  21:         </div>
  22:         <div id="fileMngerContents">
  23:             <div id="fileMngerDirBox">
  24:                 <div id="fileMngerDir">
  25:                 </div>
  26:             </div>
  27:             <div id="fileMngerImgDsply">
  28:             <h2>
  29:             <img src="images/uploading.gif" alt="Wait While Loading..." />
  30:             Retrieving Files...</h2>
  31:             </div>
  32:             <p id="flyoutCMDs">
  33:                 <img src="images/x.gif" class="fRight" title="" alt="Remove Image" />
  34:                 <img src="images/check.png" class="fLeft" title="" alt="Select Image" />
  35:             </p>
  36:         </div>
  37:         <div id="fileMngerFooter">
  38:             <div>
  39:                 New Folder&nbsp;
  40:                 <input type="text" name="dirNew" value="" />
  41:                 <img src="images/iconsAdd.jpg" border="0" alt="Add New Folder" title="Add New Folder" />
  42:                 <abbr id="waitResult" class="waitResult" runat="server">
  43:                     <img src="images/uploading.gif" alt="Please wait, uploading file." />
  44:                     &nbsp;Please Wait...
  45:                 </abbr>
  46:             </div>
  47:             <div class="rightAlign">
  48:                 <span>
  49:                     <iframe height="28" src="fileUpload.aspx" frameborder="0" scrolling="no" />
  50:                 </span>
  51:             </div>
  52:         </div>
  53:     </div>
  54:     </form>
  55: </body>
  56: </html>





fileUploader Code:
fileUploader code behind page handles the submitting of uploading image. The coding for the code behind page follows.


   1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fileUpload.aspx.cs" Inherits="FileManager.fileManager.fileUpload" %>
   2:  
   3: <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
   4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   5: <html xmlns="http://www.w3.org/1999/xhtml">
   6: <head runat="server">
   7:     <title></title>
   8:     <style type="text/css">
   9:         body
  10:         {
  11:             margin: 0;
  12:             padding: 0;
  13:             text-align: right;
  14:             background-color: #bbb;
  15:         }
  16:         input[type='file']
  17:         {
  18:             position: absolute;
  19:             top: 0px;
  20:             right: 8px;
  21:             z-index: 2;
  22:             opacity: 0;
  23:             filter: alpha(opacity=0);
  24:         }
  25:         img
  26:         {
  27:         }
  28:     </style>
  29:     <script type="text/javascript">
   1:  


   2:         var uploadComplete = function () {


   3:             var obj = window.parent.fileManager;


   4:             if (typeof obj !== "undefined") {


   5:                 obj.fileUploaded();


   6:             }


   7:         }


   8:         var uploadStarted = function () {


   9:             if (typeof window.parent !== "undefined" && typeof window.parent.fileManager !== "undefined") {


  10:                 var elem = document.getElementById("currentFolder");


  11:                 elem.value = window.parent.fileManager.dataVals.currentFolder;


  12:             }


  13:         }


  14:         var uploadErr = function () {


  15:  


  16:         }


  17:     

</script>
  30: </head>
  31: <body>
  32:     <form id="form1" runat="server">
  33:     <asp:ScriptManager ID="ScriptManager1" runat="server">
  34:     </asp:ScriptManager>
  35:     <asp:HiddenField ID="currentFolder" runat="server" />
  36:     <abbr id="uploadResult" runat="server">
  37:         <img src="images/uploading.gif" alt="Please wait, uploading file." />
  38:     </abbr>
  39:     <input type="button" value="Upload File" />
  40:     <asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnUploadedComplete="uf_UploadedComplete"
  41:         OnClientUploadStarted="uploadStarted" OnClientUploadComplete="uploadComplete"
  42:         ThrobberID="uploadResult" />
  43:     </form>
  44: </body>
  45: </html>





fileUploader code behind page code:


   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web;
   5: using System.Web.UI;
   6: using System.Web.UI.WebControls;
   7: using System.IO;
   8: using deDogs.ManageImage;
   9: using adminDataContext;
  10: using System.Transactions;
  11:  
  12: namespace FileManager.fileManager
  13: {
  14:     public partial class fileUpload : System.Web.UI.Page
  15:     {
  16:         private struct fInfo
  17:         {
  18:             public string fName;
  19:             public dimensions size;
  20:             public string path;
  21:             public string ext;
  22:         }
  23:         protected void Page_Load(object sender, EventArgs e)
  24:         {
  25:         }
  26:  
  27:         protected void uf_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
  28:         {
  29:             using (TransactionScope transaction = new TransactionScope())
  30:             {
  31:                 try
  32:                 {
  33:                     using (adminDBEntities contxt = new adminDBEntities())
  34:                     {
  35:                         MediaType mediaType;
  36:                         fInfo fi;
  37:                         HttpFileCollection postedFiles = Request.Files;
  38:                         string imgExts = ".bmp, .gif, .jpeg, .jpg, .png";
  39:  
  40:                         for (int i = 0; i < postedFiles.Count; i++)
  41:                         {                            
  42:                             fi.fName = postedFiles[i].FileName;
  43:                             fi.ext = fi.fName.Substring(fi.fName.LastIndexOf("."));
  44:                             fi.path = currentFolder.Value;
  45:  
  46:                             if (imgExts.IndexOf(fi.ext) == -1)
  47:                             {
  48:                                 fi.size.width = 0;
  49:                                 fi.size.height = 0;
  50:                             } else {
  51:                                 fi.size = deDogs.ManageImage.Image.size(postedFiles[i]);
  52:                             }
  53:  
  54:                             postedFiles[i].SaveAs(MapPath(fi.path + fi.fName));
  55:  
  56:                             mediaType = contxt.MediaTypes.Where(m => m.ext == fi.ext).First();
  57:                             mediaType.Medias.Add(new Media
  58:                             {
  59:                                 name = fi.fName,
  60:                                 width = fi.size.width,
  61:                                 height = fi.size.height,
  62:                                 path = fi.path,
  63:                                 iDate = DateTime.Now,
  64:                                 uDate = DateTime.Now
  65:                             });
  66:                         }
  67:                         contxt.SaveChanges();
  68:                         transaction.Complete();
  69:                     }
  70:                 }
  71:                 catch (Exception) {}
  72:             }
  73:         }
  74:     }
  75: }






fileManagerHandler.ashx handles the asynchronous AJAX calls for retrieving, moving, adding, removing files, and creating new directories. Handlers C# code is below:


   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web;
   5: using System.Web.Script.Serialization;
   6: using adminDataContext;
   7: using System.IO;
   8: using System.Transactions;
   9:  
  10: namespace FileManager.fileManager
  11: {
  12:     public class zFolder
  13:     {
  14:         public zFolder()
  15:         {
  16:             this.files = new List<zFileInfo>();
  17:         }
  18:         public List<zFileInfo> files { get; set; }
  19:         public ParentDIR directories { get; set; }
  20:         public string err { get; set; }
  21:     }
  22:     public class zFileInfo
  23:     {
  24:         public int id { get; set; }
  25:         public string name { get; set; }
  26:         public string ext { get; set; }
  27:         public string path { get; set; }
  28:         public int w { get; set; }
  29:         public int h { get; set; }
  30:     }
  31:     public class ParentDIR
  32:     {
  33:         public ParentDIR()
  34:         {
  35:             this.subDir = new List<ParentDIR>();
  36:         }
  37:         public string name { get; set; }
  38:         public string path { get; set; }
  39:         public List<ParentDIR> subDir { get; set; }
  40:     }
  41:     public class fileManager : IHttpHandler
  42:     {
  43:         private class RequestVals
  44:         {
  45:             public int id { get; set; }
  46:             public string file { get; set; }
  47:             public int action { get; set; }
  48:             public string currentFolder { get; set; }
  49:             public string folder { get; set; }
  50:         }
  51:  
  52:         private const int cIMGS = 0, cDIRS = 1, cBOTH = 2, cMOVE = 3, cREMOVE = 4, cADD = 5;
  53:  
  54:         RequestVals requestVals = new RequestVals();
  55:         zFolder folder = new zFolder();
  56:  
  57:         public void ProcessRequest(HttpContext context)
  58:         {
  59:             context.Response.ContentType = "application/json";
  60:             JavaScriptSerializer serializer = new JavaScriptSerializer();
  61:             System.Threading.Thread.Sleep(4000);
  62:             string p = HttpContext.Current.Request["p"];
  63:             try
  64:             {
  65:                 requestVals = serializer.Deserialize<RequestVals>(p);
  66:  
  67:                 switch (requestVals.action)
  68:                 {
  69:                     case cIMGS:
  70:                         populate();
  71:                         break;
  72:                     case cDIRS:
  73:                         folder.directories = dirsList(requestVals.currentFolder);
  74:                         break;
  75:                     case cBOTH:
  76:                         populate();
  77:                         folder.directories = dirsList(requestVals.currentFolder);
  78:                         break;
  79:                     case cMOVE:
  80:                         move();
  81:                         populate();
  82:                         break;
  83:                     case cREMOVE:
  84:                         remove();
  85:                         populate();
  86:                         break;
  87:                     case cADD:
  88:                         add();
  89:                         folder.directories = dirsList(requestVals.currentFolder);
  90:                         break;
  91:                 }
  92:             }
  93:             catch (Exception)
  94:             {
  95:             }
  96:  
  97:             context.Response.Write(serializer.Serialize(folder));
  98:         }
  99:  
 100:         protected void populate()
 101:         {
 102:             using (adminDBEntities contxt = new adminDBEntities())
 103:             {
 104:                 string relPath = requestVals.currentFolder;
 105:  
 106:                 IEnumerable<zFileInfo> media = contxt.Medias.Where(m => m.path == relPath).OrderBy(m => m.name).Select(m => new zFileInfo
 107:                 {
 108:                     id = m.ID,
 109:                     name = m.name,
 110:                     ext = m.MediaType.ext,
 111:                     path = m.path,
 112:                     w = m.width,
 113:                     h = m.height
 114:                 });
 115:  
 116:                 folder.files = media.ToList();
 117:             }
 118:         }
 119:  
 120:         protected ParentDIR dirsList(string path)
 121:         {
 122:             DirectoryInfo d = new DirectoryInfo(HttpContext.Current.Request.MapPath("~" + path));
 123:             ParentDIR parentDir = new ParentDIR();
 124:  
 125:             parentDir.name = d.Name;
 126:             parentDir.path = path;
 127:  
 128:             string subPath;
 129:             foreach (var item in d.GetDirectories())
 130:             {
 131:                 subPath = path + item.Name + "/";
 132:                 parentDir.subDir.Add(dirsList(subPath));
 133:             }
 134:  
 135:             return parentDir;
 136:         }
 137:  
 138:         protected void move()
 139:         {
 140:             using (adminDBEntities contxt = new adminDBEntities())
 141:             {
 142:                 using (TransactionScope transaction = new TransactionScope())
 143:                 {
 144:                     try
 145:                     {
 146:  
 147:                         Media media = contxt.Medias.Where(m => m.ID == requestVals.id && m.path == requestVals.currentFolder).FirstOrDefault();
 148:                         if (media == null)
 149:                         {
 150:                             throw new Exception("Could not find specified file?");
 151:                         }
 152:  
 153:                         media.path = requestVals.folder;
 154:                         media.uDate = DateTime.Now;
 155:                         contxt.SaveChanges();
 156:  
 157:                         string source = HttpContext.Current.Request.MapPath("~" + requestVals.currentFolder + requestVals.file);
 158:                         string destination = HttpContext.Current.Request.MapPath("~" + requestVals.folder + requestVals.file);
 159:  
 160:                         if (File.Exists(destination))
 161:                         {
 162:                             throw new Exception("File already exists in destination folder (" + destination + ")!");
 163:                         }
 164:                         else
 165:                         {
 166:                             File.Move(source, destination);
 167:  
 168:                             if (!File.Exists(destination))
 169:                             {
 170:                                 throw new Exception("Problem moveing the file to destination folder?");
 171:                             }
 172:                         }
 173:  
 174:                         transaction.Complete();
 175:                         contxt.AcceptAllChanges();
 176:                     }
 177:                     catch (Exception ex)
 178:                     {
 179:                         folder.err = "An error occured. The operation cannot be completed." + ex.Message;
 180:                     }
 181:                 }
 182:             }
 183:         }
 184:         protected void remove()
 185:         {
 186:             using (adminDBEntities contxt = new adminDBEntities())
 187:             {
 188:                 IEnumerable<Media> medias = contxt.Medias.Where(m => m.ID == requestVals.id);
 189:                 foreach (var media in medias)
 190:                 {
 191:                     contxt.Medias.DeleteObject(media);
 192:                 }
 193:                 contxt.SaveChanges();
 194:             }
 195:         }
 196:         protected void add()
 197:         {
 198:             DirectoryInfo di = new DirectoryInfo(HttpContext.Current.Request.MapPath(requestVals.currentFolder));
 199:             if (di.Exists)
 200:             {
 201:                 di.CreateSubdirectory(requestVals.file);
 202:             }
 203:         }
 204:         public bool IsReusable
 205:         {
 206:             get
 207:             {
 208:                 return false;
 209:             }
 210:         }
 211:     }
 212: }

Another Handler is used to retrieve the files after the page is loaded. I might be incorrect, but I found that the page load faster by using this method:


   1: <img width="180" height="135" title="animal8.jpg" class="ui-draggable" id="img_996" style="margin-top: 16px;" 
   2: src="/fileManager/ThumbHandler.ashx?dmens":{"width":800,"height":600},"max":{"width":180,"height":135},"ext":".jpg","imgName":"/media/animal8.jpg"}"

   3: p={"

   4: complete="complete" jQuery16209628216109583416="9"/>





The image src attribute calls ThumbHandler.ashx handler with a query string containing a JSON name/value pair. Below is the handler’s code:


   1: using System;
   2: using System.Collections.Generic;
   3: using System.Linq;
   4: using System.Web;
   5: using System.IO;
   6: using System.Web.Script.Serialization;
   7: using System.Drawing.Imaging;
   8: using System.Drawing;
   9: using System.Drawing.Drawing2D;
  10: using adminDataContext;
  11:  
  12: namespace ThumbHandler
  13: {
  14:     public struct ScaleImage
  15:     {
  16:         public string imgName;
  17:         public ScaleFactors dmens;
  18:         public ScaleFactors max;
  19:         public string ext;
  20:     }
  21:     public struct ScaleFactors
  22:     {
  23:         public int width;
  24:         public int height;
  25:     }
  26:  
  27:     public class ThumbHandler : IHttpHandler
  28:     {
  29:         ScaleImage imageInfo = new ScaleImage();
  30:  
  31:         public void ProcessRequest(HttpContext context)
  32:         {
  33:             try
  34:             {
  35:                 JavaScriptSerializer serializer = new JavaScriptSerializer();
  36:                 string p = context.Request["p"];
  37:                 imageInfo = serializer.Deserialize<ScaleImage>(p);
  38:  
  39:                 adminDBEntities contxt = new adminDBEntities();
  40:                 int ext = contxt.MediaTypes.Where(m=>m.ext == imageInfo.ext).Select(m => m.ext).Count();
  41:  
  42:                 if (ext > 0)
  43:                 {
  44:                     Bitmap bmp = thumbs(imageInfo);
  45:                     bmp.Save(context.Response.OutputStream, imgFormat(imageInfo.ext));
  46:                 }
  47:             }
  48:             catch (Exception)
  49:             {
  50:             }
  51:  
  52:         }
  53:  
  54:         public bool IsReusable
  55:         {
  56:             get
  57:             {
  58:                 return false;
  59:             }
  60:         }
  61:  
  62:         public Bitmap thumbs(ScaleImage img)
  63:         {
  64:             Bitmap thumbnail;
  65:             using (System.Drawing.Image image = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath("~" + img.imgName)))
  66:             {
  67:  
  68:                 ScaleFactors sf = scaleImage(image);
  69:  
  70:                 //Bitmap bmp = new Bitmap(sf.width, sf.height);
  71:                 //Graphics gr = Graphics.FromImage(bmp);
  72:                 //gr.SmoothingMode = SmoothingMode.HighQuality;
  73:                 //gr.CompositingQuality = CompositingQuality.HighQuality;
  74:                 //gr.InterpolationMode = InterpolationMode.High;
  75:                 //Rectangle rectDestination = new Rectangle(0, 0, sf.width, sf.height);
  76:                 //gr.DrawImage(image, rectDestination, 0, 0, image.Width, image.Height, GraphicsUnit.Pixel);
  77:                 //bmp.Save();
  78:  
  79:                 //a holder for the result
  80:                 thumbnail = new Bitmap(sf.width, sf.height);
  81:                 //use a graphics object to draw the resized image into the bitmap   
  82:                 using (Graphics graphics = Graphics.FromImage(thumbnail))
  83:                 {
  84:                     //set the resize quality modes to high quality
  85:                     graphics.CompositingQuality = CompositingQuality.HighQuality;
  86:                     graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
  87:                     graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
  88:                     graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
  89:                     //draw the image into the target bitmap
  90:                     Rectangle rectDestination = new Rectangle(0, 0, sf.width, sf.height);
  91:                     graphics.DrawImage(image, 0, 0, thumbnail.Width, thumbnail.Height);
  92:                 }
  93:                 //return the resulting bitmap
  94:             }
  95:             return thumbnail;
  96:  
  97:             //System.Drawing.Image thumbnailImage = image.GetThumbnailImage(sf.width, sf.height, new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback), IntPtr.Zero);
  98:  
  99:             //// make a memory stream to work with the image bytes
 100:             //MemoryStream imageStream = new MemoryStream();
 101:  
 102:             //// put the image into the memory stream
 103:             //ImageFormat imgFormat;
 104:  
 105:  
 106:             //thumbnailImage.Save(imageStream, imgFormat);
 107:  
 108:             // make byte array the same size as the image
 109:             //byte[] imageContent = new Byte[imageStream.Length];
 110:  
 111:             // rewind the memory stream
 112:             //imageStream.Position = 0;
 113:  
 114:             // load the byte array with the image
 115:             //imageStream.Read(imageContent, 0, (int)imageStream.Length);
 116:  
 117:             //return imageContent;
 118:         }
 119:  
 120:         public ScaleFactors scaleImage(Image img)
 121:         {
 122:             ScaleFactors sf;
 123:  
 124:             sf.width = img.Width;
 125:             sf.height = img.Height;
 126:  
 127:             int deltaWidth = sf.width - imageInfo.max.width;
 128:             int deltaHeight = sf.height - imageInfo.max.height;
 129:             double scaleFactor;
 130:  
 131:             if (deltaHeight > deltaWidth)
 132:             {
 133:                 scaleFactor = (double)imageInfo.max.height / (double)sf.height;
 134:             }
 135:             else
 136:             {
 137:                 scaleFactor = (double)imageInfo.max.width / (double)sf.width;
 138:             }
 139:  
 140:             sf.width = (int)(scaleFactor * sf.width);
 141:             sf.height = (int)(scaleFactor * sf.height);
 142:  
 143:             return sf;
 144:         }
 145:  
 146:         public ImageFormat imgFormat(string ext)
 147:         {
 148:             ImageFormat imgformat;
 149:  
 150:             switch (ext)
 151:             {
 152:                 case ".gif":
 153:                     imgformat = ImageFormat.Gif;
 154:                     break;
 155:                 case ".bmp":
 156:                     imgformat = ImageFormat.Bmp;
 157:                     break;
 158:                 case ".tiff":
 159:                     imgformat = ImageFormat.Tiff;
 160:                     break;
 161:                 case ".png":
 162:                     imgformat = ImageFormat.Png;
 163:                     break;
 164:                 case ".icon":
 165:                     imgformat = ImageFormat.Icon;
 166:                     break;
 167:                 default:
 168:                     imgformat = ImageFormat.Jpeg;
 169:                     break;
 170:             }
 171:  
 172:             return imgformat;
 173:  
 174:         }
 175:         public bool ThumbnailCallback()
 176:         {
 177:             return true;
 178:         }
 179:     }
 180: }





CSS and JavaScript is listed below:


   1: /// <reference path="jquery-1.5-vsdoc.js" />
   2:  
   3: var fileManager = {
   4:     startPos: 0
   5:     , xhr: null
   6:     , root: ""
   7:     , holdBGColor: ""
   8:     , basePath: ""
   9:     , scrollTop: 0
  10:     , timeOut: null
  11:     , wiatImg: null
  12:     , actions: { IMGS: 0, DIRS: 1, BOTH: 2, MOVE: 3, REMOVE: 4, ADD: 5 }
  13:     , max: { w: 180, h: 167 }
  14:     , dataVals: { currentFolder: "" }
  15:     , dirs: []
  16:     , request: function () {
  17:  
  18:         $("abbr#waitResult").addClass("waitResult");
  19:  
  20:         if (fileManager.xhr !== null) {
  21:             fileManager.xhr.abort();
  22:         }
  23:  
  24:         fileManager.xhr = $.ajax({
  25:             type: "POST",
  26:             url: "fileManagerHandler.ashx",
  27:             data: { p: JSON.stringify(fileManager.dataVals) },
  28:             dataType: "json",
  29:             complete: fileManager.handleAsyncComplete,
  30:             success: fileManager.handleAsyncRequest,
  31:             error: fileManager.handleAsyncError
  32:         });
  33:     }
  34:   , handleAsyncRequest: function (data) {
  35:  
  36:       if (typeof data === "undefined" || data === null || !(data.hasOwnProperty("files") || data.hasOwnProperty("directories"))) {
  37:           return;
  38:       }
  39:  
  40:       var i, obj = $("#fileMngerImgDsply");
  41:       obj.empty();
  42:       if (fileManager.dataVals.action !== fileManager.actions.DIRS && fileManager.dataVals.action !== fileManager.actions.ADD) {
  43:           if (data.files !== null) {
  44:               if (data.files.length > 0) {
  45:                   for (i = 0; i < data.files.length; i++) {
  46:                       var img = $(fileManager.displayImgs(data.files[i]));
  47:  
  48:                       obj.append(img);
  49:  
  50:                       var imgDsply = img.find(".imgDsply");
  51:                       imgDsply.find("img").css({ "margin-top": (imgDsply.height() - imgDsply.find("img").height()) / 2 });
  52:  
  53:                   }
  54:               } else {
  55:                   obj.append("<h2><img src='images/empty.png' alt='Empty Folder' /><div>Empty</div></h2>");
  56:               }
  57:           }
  58:       }
  59:  
  60:       if (data.directories !== null) {
  61:           obj = $("#fileMngerDir");
  62:  
  63:           var uObj = obj.find("img[title='" + fileManager.dataVals.currentFolder + "']");
  64:  
  65:           if (uObj.length !== 0) {
  66:               obj = uObj.parent();
  67:               obj.find("p").remove();
  68:  
  69:               fileManager.writeDirs(data.directories, obj);
  70:  
  71:               uObj.trigger("click");
  72:               $("#fileMngerFooter input[type='text']").val("");
  73:           } else {
  74:               obj.find("p").remove();
  75:               fileManager.writeDirs(data.directories, obj);
  76:           }
  77:       }
  78:  
  79:   }
  80:   , handleAsyncComplete: function () {
  81:       fileManager.hideFlyoutCMDs();
  82:       $("#fileMngerImgDsply").scrollTop(fileManager.scrollTop);
  83:       $("abbr#waitResult").removeClass("waitResult");
  84:   }
  85:   , handleAsyncError: function (xhr, status, e) {
  86:       if (e !== "abort") {
  87:           fileManager.hideFlyoutCMDs();
  88:           $("abbr#waitResult").removeClass("waitResult");
  89:           $("#fileMngerImgDsply").empty().append("<h2>Error occured while retrieving files. Please retry your request.</h2>");
  90:           alert(e);
  91:       }
  92:   }
  93:     , displayImgs: function (dt) {
  94:         var imgBox = document.createElement("div");
  95:         imgBox.className = "imgBox";
  96:  
  97:         var div = document.createElement("div");
  98:         div.className = "imgDsply";
  99:  
 100:         var img = fileManager.writeImg(dt);
 101:         div.appendChild(img);
 102:  
 103:         imgBox.appendChild(div);
 104:  
 105:         div = document.createElement("div");
 106:         div.className = "captionImgDsply";
 107:         div.innerHTML = "<b>" + dt.name + "</b><br />" + dt.w + "x" + dt.h;
 108:         imgBox.appendChild(div);
 109:  
 110:         $(img).draggable({
 111:             helper: "clone",
 112:             opacity: "0.25"
 113:         });
 114:         $(imgBox).mouseenter(function () {
 115:             fileManager.flyoutCMDs(dt, $(this))
 116:         });
 117:         return imgBox;
 118:     }
 119:     , writeImg: function (data) {
 120:         var root = fileManager.root + "fileManager/";
 121:         var ext = $.trim(data.ext);
 122:         var chgFile = false;
 123:         var d = fileManager.calcDimensions(data.w, data.h);
 124:  
 125:         if (fileManager.fileExts.indexOf(ext) !== -1) {
 126:             chgFile = true;
 127:             data.w = 128;
 128:             data.h = 128;
 129:             d.w = 128;
 130:             d.h = 128;
 131:         }
 132:  
 133:         if (data.w < fileManager.max.w && data.h < fileManager.max.h) {
 134:             d.w = data.w;
 135:             d.h = data.h;
 136:         }
 137:         var qStr = {
 138:             dmens: { width: data.w, height: data.h },
 139:             max: { width: d.w, height: d.h },
 140:             ext: ext
 141:         }
 142:  
 143:         if (chgFile) {
 144:             qStr.imgName = root + "images/fileicons/" + ext.replace(".", "") + ".png";
 145:         } else {
 146:             qStr.imgName = data.path + data.name;
 147:         }
 148:  
 149:         var img = document.createElement("img");
 150:         img.id = "img_" + data.id;
 151:         img.src = root + "ThumbHandler.ashx?p=" + JSON.stringify(qStr);
 152:         img.title = data.name;
 153:         img.width = d.w;
 154:         img.height = d.h;
 155:  
 156:         img.onclick = function () { fileManager.bigImg({ name: data.name, ext: data.ext, w: data.w, h: data.h }); return false; };
 157:         return img;
 158:     }
 159:     , writeDirs: function (oDir, obj) {
 160:         var div, img, elem, i;
 161:         for (i = 0; i < oDir.subDir.length; i++) {
 162:  
 163:             elem = $("<p>");
 164:  
 165:             $("<img>")
 166:             .attr({ "src": fileManager.root + "fileManager/images/folder_close.png", "alt": "Directory Collapsed", "title": oDir.subDir[i].path })
 167:             .droppable({
 168:                 tolerance: "pointer",
 169:                 greedy: true,
 170:                 drop: function (e, ui) {
 171:                     var file = ui.draggable.attr("title");
 172:                     var folder = $(this).attr("title");
 173:                     if (confirm("Are you sure you want to move " + file + " to " + folder)) {
 174:                         var Id = ui.draggable.attr("id");
 175:                         var id = Id.substring(Id.lastIndexOf("_") + 1);
 176:                         fileManager.dataVals.action = fileManager.actions.MOVE;
 177:                         fileManager.dataVals.file = file;
 178:                         fileManager.dataVals.folder = folder;
 179:                         fileManager.dataVals.id = id;
 180:                         fileManager.request();
 181:                     }
 182:                 }
 183:             }).appendTo(elem);
 184:  
 185:             $("<span>").attr("title", oDir.subDir[i].name).hover(function () {
 186:                 fileManager.holdBGColor = $(this).css("background-color");
 187:                 $(this).css("background-color", "#ddd");
 188:             }, function () {
 189:                 $(this).css("background-color", fileManager.holdBGColor);
 190:             }).append(oDir.subDir[i].name).appendTo(elem);
 191:  
 192:             obj.append(elem);
 193:  
 194:             if (oDir.subDir[i].subDir.length !== 0) {
 195:                 fileManager.writeDirs(oDir.subDir[i], elem);
 196:             }
 197:         }
 198:     }
 199:     , folderClick: function (e) {
 200:         var obj = $(e.target);  //Clicked on folder image.
 201:  
 202:         //Test if clicked item is an folder image.
 203:         //Image elements have a src attribute, and if not then return.
 204:         var attr = obj.attr("src");
 205:         if (typeof attr === "undefined" || attr === false) {
 206:             return false;
 207:         }
 208:  
 209:         var parent = obj.parent();
 210:         fileManager.toggleFolders(parent);
 211:  
 212:         //Was there a control click or command click was raised
 213:         if (e.metaKey) {
 214:             parent.find("img:first").attr("src", fileManager.root + "fileManager/images/folder_open.png").end()
 215:             .find("p").hide();
 216:         } else {
 217:             parent.children("p").show();
 218:             obj.attr("src", fileManager.root + "fileManager/images/folder_open.png");
 219:         }
 220:  
 221:         fileManager.refreshPath(obj.attr("title"), parent);
 222:  
 223:         e.stopPropagation();
 224:     }
 225:     , refreshPath: function (path, parent) {
 226:         $("#fileMngerHead div").html(parent.find("span").html() + " Folder");   //Set Header as title of folder
 227:  
 228:         //No need to retrieve new data when clicked on same folder.
 229:         if (fileManager.dataVals.currentFolder === path) {
 230:             return false;
 231:         }
 232:  
 233:         $("#fileMngerImgDsply").empty().append("<h2><img src='images/uploading.gif' alt='Wait While Loading...' />Retrieving Files...</h2>");
 234:  
 235:         fileManager.dataVals.currentFolder = path; //Store current folder path
 236:  
 237:         fileManager.breadCrumbsClick(path); //Write header crumbs to current location
 238:  
 239:         //Request image data of current folder
 240:         fileManager.dataVals.action = fileManager.actions.IMGS;
 241:         fileManager.request();
 242:     }
 243:     , toggleFolders: function (obj) {
 244:  
 245:         //Close all folders and open any Grand Parents.
 246:         $("#fileMngerDir img").attr("src", fileManager.root + "fileManager/images/folder_close.png");
 247:         obj.parents("p").find("img:first").attr("src", fileManager.root + "fileManager/images/folder_open.png");
 248:  
 249:     }
 250:     , breadCrumbsClick: function (path) {
 251:         var headBox = $("#fileMngerHead span").html("");
 252:         var sPath = fileManager.root + fileManager.basePath;
 253:         var p = path.replace(sPath, "").split("/");
 254:  
 255:         $.each(p, function (i, value) {
 256:             if (value !== "") {
 257:                 sPath += value + "/";
 258:                 var path = sPath;
 259:  
 260:                 $("<img>").attr({ "src": "images/seperator.png", "class": "bcSeperator", "alt": "Bread Crumb Seperator" }).appendTo(headBox);
 261:  
 262:                 $("<a>").attr({ "href": "#" })
 263:                 .text(value)
 264:                 .click(function (e) {
 265:                     $("#fileMngerDir img[title='" + path + "']").trigger("click");
 266:                     e.stopPropagation();
 267:                 })
 268:                 .appendTo(headBox);
 269:             }
 270:         });
 271:     }
 272:     , hideFlyoutCMDs: function () {
 273:         $("#flyoutCMDs").hide();
 274:     }
 275:     , calcDimensions: function (w, h) {
 276:         var p, d = {};
 277:         if (w > h) {
 278:             p = h / w;
 279:             d.w = fileManager.max.w;
 280:             d.h = Math.floor(fileManager.max.w * p);
 281:             if (d.h > fileManager.max.h) {
 282:                 d.h = fileManager.max.h;
 283:                 d.w = parseInt(d.h * w / h);
 284:             }
 285:         } else {
 286:             p = w / h;
 287:             d.h = fileManager.max.h;
 288:             d.w = Math.floor(d.h * p);
 289:             if (d.w > fileManager.max.w) {
 290:                 d.w = fileManager.max.w;
 291:                 d.h = parseInt(d.w * h / w);
 292:             }
 293:         }
 294:         return d;
 295:     }
 296:     , flyoutCMDs: function (details, imgBox) {
 297:         try {
 298:             var img = $(imgBox).find("img");
 299:             var dt = $.parseJSON(img.attr("src").replace(fileManager.root + "fileManager/ThumbHandler.ashx?p=", ""));
 300:             var cm = $("#flyoutCMDs img:first");
 301:             var parent = cm.parent();
 302:  
 303:             var sId = img.attr("id");
 304:             var title = { id: sId.substring(sId.lastIndexOf("_") + 1), imgName: dt.imgName, width: dt.dmens.width, height: dt.dmens.height };
 305:  
 306:             title.action = "Remove";
 307:             cm.attr("title", JSON.stringify(title));
 308:             title.action = "SV";
 309:             cm.next().attr("title", JSON.stringify(title));
 310:  
 311:             parent.show();
 312:             var position = imgBox.position();
 313:             parent.css({ "top": position.top + 12, "left": position.left + 12 });
 314:         } catch (e) {
 315:  
 316:         }
 317:     }
 318:     , removeImg: function (e) {
 319:         try {
 320:             var t = $.parseJSON($(e.target).attr("title"));
 321:             var ext = t.imgName.substring(t.imgName.lastIndexOf("."));
 322:             var name = t.imgName.substring(t.imgName.lastIndexOf("/") + 1);
 323:  
 324:             if (t.action === "Remove") {
 325:                 if (confirm("Are you sure you want to remove " + name + "?")) {
 326:                     fileManager.scrollTop = $("#fileMngerImgDsply").scrollTop();
 327:                     fileManager.dataVals.action = fileManager.actions.REMOVE;
 328:                     fileManager.dataVals.file = name;
 329:                     fileManager.dataVals.id = t.id;
 330:                     fileManager.request();
 331:                 }
 332:             } else {
 333:                 var isType = typeof fileManager_Select;
 334:                 if (isType !== "undefined" && isType === "function") {
 335:  
 336:                 } else {
 337:                     fileManager.bigImg({ name: name, ext: ext, w: t.width, h: t.height });
 338:                 }
 339:             }
 340:         } catch (ex) {
 341:  
 342:         }
 343:         e.stopPropagation();
 344:     }
 345:     , bigImg: function (dt) {
 346:         var parentBox = $("#fileMngerContents");
 347:         var divBox = $("<div>").addClass("bigImg").css("width", parentBox.width());
 348:         divBox.appendTo(parentBox);
 349:  
 350:         var hVals = { w: fileManager.max.w, h: fileManager.max.h };
 351:         fileManager.max.w = divBox.width();
 352:         fileManager.max.h = divBox.height();
 353:  
 354:         var d = fileManager.calcDimensions(dt.w, dt.h);
 355:         divBox.css("padding-top", Math.floor((divBox.height() - d.h) / 2));
 356:  
 357:         var qStr = { imgName: fileManager.root + fileManager.dataVals.currentFolder + dt.name, dmens: { width: dt.w, height: dt.h }, max: { width: d.w, height: d.h }, ext: dt.ext };
 358:  
 359:         var img = $("<img>").attr({
 360:             "src": fileManager.root + "fileManager/ThumbHandler.ashx?p=" + JSON.stringify(qStr),
 361:             "title": dt.name,
 362:             "width": d.w,
 363:             "height": d.h
 364:         });
 365:  
 366:         divBox.append(img);
 367:  
 368:         fileManager.max.w = hVals.w;
 369:         fileManager.max.h = hVals.h;
 370:  
 371:         $(document).click(function (e) {
 372:             if ($(e.target).parents("div.imgBox").length === 0) {
 373:                 $(".bigImg").remove();
 374:                 $(document).unbind("click");
 375:             }
 376:         });
 377:  
 378:     }
 379:     , goHome: function (e) {
 380:  
 381:         $("#fileMngerDir img").attr("src", fileManager.root + "fileManager/images/folder_close.png");
 382:  
 383:         if (e.metaKey) {
 384:             $("#fileMngerDir > p p").hide();
 385:         }
 386:         //$("#fileMngerDir img[title='" + path + "']");
 387:         var path = fileManager.root + fileManager.basePath;
 388:         if (path === fileManager.dataVals.currentFolder) {
 389:             return;
 390:         }
 391:  
 392:         $("#fileMngerImgDsply").empty().append("<h2><img src='images/uploading.gif' alt='Wait While Loading...' />Retrieving Files...</h2>");
 393:  
 394:         $("#fileMngerHead span").html("");
 395:         fileManager.dataVals.currentFolder = path;
 396:         fileManager.dataVals.action = fileManager.actions.IMGS;
 397:         fileManager.request();
 398:  
 399:         $("#fileMngerHead div").html("Home Folder");
 400:         e.stopPropagation();
 401:     }
 402:     , newDir: function (e) {
 403:         var obj = $(e.target);
 404:  
 405:         var attr = obj.attr("src");
 406:         if (typeof attr === "undefined" || attr === false) {
 407:             return false;
 408:         }
 409:         var txt = $("#fileMngerFooter input[type='text']").val();
 410:         stipTxt = txt.replace(/^[^a-z0-9_ -]+$/ig, "");
 411:         if (stipTxt !== "") {
 412:             fileManager.dataVals.action = fileManager.actions.ADD;
 413:             fileManager.dataVals.file = txt;
 414:             fileManager.request();
 415:         } else {
 416:             alert("Invalid directory name.");
 417:         }
 418:         e.stopPropagation();
 419:     }
 420:    , init: function (root, basePath) {
 421:        if (typeof root === "undefined" || root === "") {
 422:            alert("Missing to include root path within aspx page");
 423:            return;
 424:        }
 425:        if (typeof basePath === "undefined" || basePath === "") {
 426:            alert("Missing to include media path within aspx page");
 427:            return;
 428:        }
 429:  
 430:        basePath = basePath + "/";
 431:        root = root + "/";
 432:  
 433:        fileManager.basePath = basePath.replace(/\/\//g, "/");
 434:        fileManager.root = root.replace(/\/\//g, "/");
 435:        fileManager.dataVals.currentFolder = fileManager.root + fileManager.basePath;
 436:  
 437:        fileManager.waitImg = document.createElement("img");
 438:        fileManager.waitImg.src = fileManager.root + "fileManager/images/wait.gif";
 439:  
 440:        $("#fileMngerDir").click(fileManager.folderClick);
 441:        $("#fileMngerImgDsply").scroll(fileManager.hideFlyoutCMDs)
 442:        .mouseleave(function () { fileManager.timeOut = setTimeout(fileManager.hideFlyoutCMDs, 300); });
 443:        $("#flyoutCMDs").click(fileManager.removeImg)
 444:        .mouseenter(function () { clearTimeout(fileManager.timeOut); })
 445:        $("#imgHome").attr("title", fileManager.dataVals.currentFolder).click(fileManager.goHome);
 446:        $("#fileMngerFooter img").click(fileManager.newDir);
 447:  
 448:        fileManager.dataVals.action = fileManager.actions.BOTH;
 449:        fileManager.request();
 450:    }
 451:    , fileUploaded: function () {
 452:        fileManager.dataVals.action = fileManager.actions.IMGS;
 453:        fileManager.request();
 454:    }
 455:    , fileExts: ".avi, .chm, .css, .dll, .doc, .docx, .f4v, .fla, .flv, .htm, .html, .ini, .jar, .js, .lasso, .mdb, .mov, .mp3, .mpg, .pdf, .php, .ppt, .py, .rb, .real, .reg, .rtf, .sql, .swf, .txt, .vbs, .wav, .wma, .wmv, .xls, .xml, .xsl, .zip"
 456:    , imgExts: ".bmp, .gif, .jpeg, .jpg, .png"
 457: };






   1: body
   2: {
   3:     position: relative;
   4:     margin: 0;
   5:     padding: 0;
   6:     border: 0;
   7:     color: #333;
   8:     letter-spacing: .07em; /* font-family: "Myriad Pro" , Arial, Helvetica, sans-serif; */
   9:     font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
  10:     font-size: 65.5%;
  11: }
  12: a, a:link, a:visited, a:active, a:hover
  13: {
  14:     text-decoration: none;
  15:     color: #333;
  16: }
  17: img
  18: {
  19:     display: block;
  20: }
  21: h2
  22: {
  23:     margin-left:24px;
  24: }
  25: h2 img
  26: {
  27:     display:inline-block;
  28:     margin-right:6px;
  29: }
  30: h2 div
  31: {
  32:     text-align:center;
  33:     width: 128px;
  34: }
  35: /*
  36: Main Framing
  37: */
  38: #fileMngerBox
  39: {
  40:     margin: 0 auto;
  41:     max-width: 95%;
  42:     height: 600px;
  43:     font-size: 1em;
  44:     margin: 12px auto 0;
  45: }
  46: /*
  47: Head Section  
  48: =========================== */
  49: #fileMngerHead
  50: {
  51:     padding: 12px;
  52:     font-size: 1.1em;
  53:     font-weight: bold;
  54:     background-image: url(../images/headGradient.jpg);
  55:     background-repeat: repeat-x;
  56:     overflow: hidden;
  57: }
  58: #fileMngerHead div
  59: {
  60:     text-align: right;
  61:     font-size: 1.6em;
  62:     margin-right: 24px;
  63: }
  64: #fileMngerHead span
  65: {
  66:     display: inline-block;
  67:     font-size: 1.1em;
  68: }
  69: #fileMngerHead img
  70: {
  71:     margin-bottom: -3px;
  72:     display: inline-block;
  73:     width: 32px;
  74:     height: 32px;
  75: }
  76: #fileMngerHead img.bcSeperator
  77: {
  78:     width: 1px;
  79:     height: 16px;
  80:     margin: 0px 12px -3px;
  81: }
  82: /*
  83: Content Section
  84: =========================== */
  85: #fileMngerContents
  86: {
  87:     position: relative;
  88:     height: 80%;
  89:     overflow: hidden;
  90: }
  91: #fileMngerContents > div
  92: {
  93:     float: left;
  94:     height: 100%;
  95: }
  96: /*
  97: Directory Display
  98: =========================== */
  99: #fileMngerDirBox
 100: {
 101:     width: 28%;
 102:     background-color: #eee;
 103: }
 104: #fileMngerDir
 105: {
 106:     height: 100%;
 107:     overflow: scroll;
 108:     font-size: 1.1em;
 109: }
 110: #fileMngerDir a
 111: {
 112:     color: #333;
 113:     text-decoration: none;
 114: }
 115: #fileMngerDir img
 116: {
 117:     float: left;
 118:     width: 25px;
 119:     height: 25px;
 120:     margin-right: 4px;
 121: }
 122: #fileMngerDir p
 123: {
 124:     width: 300%;
 125:     margin: 4px 0px 0px 12px;
 126: }
 127: #fileMngerDir > p p
 128: {
 129:     display: none;
 130:     margin-left: 24px;
 131: }
 132: #fileMngerDir > p span
 133: {
 134:     padding: 4px 0px 4px 8px;
 135:     display: block;
 136:     width: 85%;
 137: }
 138: /*
 139: Image Display
 140: =========================== */
 141: #fileMngerImgDsply
 142: {
 143:     width: 72%;
 144:     background-color: #ddd;
 145:     overflow: auto;
 146: }
 147: #fileMngerImgDsply .imgBox
 148: {
 149:     float: left;
 150:     height: 250px;
 151:     width: 200px;
 152:     padding: 8px 4px 0px;
 153: }
 154: #fileMngerImgDsply .imgBox > div
 155: {
 156:     text-align: center;
 157:     margin: 0 auto;
 158: }
 159: #fileMngerImgDsply .imgBox .imgDsply
 160: {
 161:     height: 167px;
 162:     overflow: hidden;
 163:     background-color: #000;
 164: }
 165: #fileMngerImgDsply .imgBox > div img
 166: {
 167:     margin: 0 auto;
 168: }
 169: #fileMngerImgDsply .imgBox .captionImgDsply
 170: {
 171:     margin-top: 16px;
 172:     padding: 0 8px;
 173:     word-wrap: break-word;
 174: }
 175: /*
 176: Footer Section
 177: =========================== */
 178: #fileMngerFooter
 179: {
 180:     background-color: #bbb;
 181:     padding: 18px;
 182:     overflow: hidden;
 183: }
 184: #fileMngerFooter div
 185: {
 186:     float: left;
 187:     font-weight: bold;
 188:     width: 50%;
 189: }
 190: #fileMngerFooter .rightAlign
 191: {
 192:     text-align: right;
 193: }
 194: #fileMngerFooter .rightAlign > span
 195: {
 196:     display: inline-block;
 197:     position: relative;
 198: }
 199: #fileMngerFooter input[type=text]
 200: {
 201:     width: 200px;
 202: }
 203: #fileMngerFooter img
 204: {
 205:     width: 16px;
 206:     height: 16px;
 207:     margin-bottom: -3px;
 208:     display: inline-block;
 209: }
 210: /*
 211: Display Big Image
 212: =========================== */
 213: #fileMngerBox .bigImg
 214: {
 215:     position: absolute;
 216:     top: 0px;
 217:     left: 0px;
 218:     background-color: #000;
 219:     color: #fff;
 220: }
 221: #fileMngerBox .bigImg img
 222: {
 223:     margin: 0 auto;
 224: }
 225: /*
 226: Popup Context Menu
 227: =========================== */
 228: #flyoutCMDs
 229: {
 230:     position: absolute;
 231:     display: none;
 232:     top: 0px;
 233:     left: 0px;
 234:     width: 100px;
 235:     height: 24px;
 236:     background-image: url(../images/navBar.png);
 237: }
 238: #flyoutCMDs img
 239: {
 240:     width: 12px;
 241:     height: 12px;
 242:     padding-top: 6px;
 243:     cursor: pointer;
 244: }
 245: #flyoutCMDs img.fRight
 246: {
 247:     float: right;
 248:     padding-right: 20px;
 249: }
 250: #flyoutCMDs img.fLeft
 251: {
 252:     float: left;
 253:     padding-left: 20px;
 254: }
 255: #waitBox
 256: {
 257:     width: 200px;
 258:     height:167px;
 259:     margin: 8px 4px 0px;
 260:     background-color: #ccc;
 261: }
 262: #waitBox div
 263: {
 264:     padding-top:50px;
 265: }
 266: #waitBox img
 267: {
 268:     width: 32px;
 269:     height: 32px;
 270:     margin:0 auto;
 271: }
 272: abbr 
 273: {
 274:     display:none;
 275: }
 276: abbr.waitResult 
 277: {
 278:     display: inline-block;
 279:     margin-left: 12px;
 280: }
Posted by at No comments:
Labels: , ,
Subscribe to: Posts (Atom)