Changeset 1245 for trunk

Timestamp:

02/20/10 04:22:59 (2 years ago)

Author:

gogo

Message:

ticket:1502

Add support for attributes being set in MootoolsFileManager? for images.
Split out the "modes" of MootoolsFileManager? into different javascript files.

Location:

trunk

Files:

• XinhaCore.js (modified) (6 diffs)
• plugins/MootoolsFileManager/MootoolsFileManager.FileManager.js (added)
• plugins/MootoolsFileManager/MootoolsFileManager.ImageManager.js (added)
• plugins/MootoolsFileManager/MootoolsFileManager.css (modified) (1 diff)
• plugins/MootoolsFileManager/MootoolsFileManager.js (modified) (5 diffs)
• plugins/MootoolsFileManager/backend.php (modified) (2 diffs)
• plugins/MootoolsFileManager/config.php (modified) (2 diffs)
• plugins/MootoolsFileManager/mootools-filemanager/.git/index (modified) (previous)
• plugins/MootoolsFileManager/mootools-filemanager/Backend/FileManager.php (modified) (6 diffs)
• plugins/MootoolsFileManager/mootools-filemanager/Css/FileManager.css (modified) (2 diffs)
• plugins/MootoolsFileManager/mootools-filemanager/Demos/mootools-more.js (modified) (8 diffs)
• plugins/MootoolsFileManager/mootools-filemanager/Language/Language.en.js (modified) (1 diff)
• plugins/MootoolsFileManager/mootools-filemanager/Source/Additions.js (modified) (1 diff)
• plugins/MootoolsFileManager/mootools-filemanager/Source/FileManager.js (modified) (13 diffs)
• plugins/MootoolsFileManager/mootools-filemanager/Source/Uploader.js (modified) (2 diffs)

trunk/XinhaCore.js

@@ -4073 +4073 @@
 
 /** Load one or more assets, sequentially, where an asset is a CSS file, or a javascript file.
- *
+ *  
  * Example Usage:
  *
@@ -4081 +4081 @@
  * on your loader object as and when you wish, you can chain the calls if you like.
  *
- * Note whenReady can only have one active callback at a time, but once it's been called you can
- * issue another whenReady(), if there is nothing waiting to be loaded, it will be executed immediately.
+ * You may add any number of callbacks using .whenReady() multiple times.
  *
  *   var myAssetLoader = Xinha.includeAssets();
@@ -4089 +4088 @@
  * 
  */
- 
+
 Xinha.includeAssets = function()
 {
-  var assetLoader = { pendingAssets: [ ], loaderRunning: false };
-  
-  assetLoader.callback = function() { };
+  var assetLoader = { pendingAssets: [ ], loaderRunning: false, loadedScripts: [ ] };
+  
+  assetLoader.callbacks = [ ];
   
   assetLoader.loadNext = function()
@@ -4132 +4131 @@
   };
   
+  assetLoader.loadScriptOnce = function(url, plugin)
+  {
+    for(var i = 0; i < this.loadedScripts.length; i++)
+    {
+      if(this.loadedScripts[i].url == url && this.loadedScripts[i].plugin == plugin)
+        return this; // Already done (or in process)
+    }
+    
+    return this.loadScript(url, plugin);
+  }
+  
   assetLoader.loadStyle = function(url, plugin)
   {
@@ -4144 +4154 @@
   assetLoader.whenReady = function(callback) 
   {
-    this.callback = callback;    
+    this.callbacks.push(callback);    
     if(!this.loaderRunning) this.loadNext();
     
@@ -4152 +4162 @@
   assetLoader.runCallback = function()
   {
-    this.callback();
-    this.callback = null;
+    while(this.callbacks.length)
+    { 
+      var _callback = this.callbacks.splice(0,1);
+      _callback[0]();
+      _callback = null;
+    }
     return this;
   }

trunk/plugins/MootoolsFileManager/MootoolsFileManager.css

@@ -1 @@
-.filemanager-container .filemanager { overflow:hidden; }
+.filemanager-container .filemanager { overflow:visible; }
+.filemanager-info-area { width:50%; float:left; clear:left; }
+.filemanager-preview-area { width:50%; float:left; clear:right; }
+div.filemanager-info-area dt, div.filemanager-preview-area dt { width:25%; margin-left:5px; }
+div.filemanager-info-area dd, div.filemanager-preview-area dd { width:auto; }
+
+div.filemanager-preview-area dt { float:left; }
+div.filemanager-preview-area h2 { display:none; }
+div.filemanager-preview-area img.preview { margin-left:5px; margin-right:5px; margin-top:0px; float:right; clear:right; max-width:140px; }
+div.filemanager-preview-area dl { float:left; clear:left; width:auto; }
+div.filemanager-preview div.object { margin-left:15%; margin-right:15%; margin-top:0px; float:right; clear:right; }
+
+div.filemanager td, div.filemanager th, div.filemanager input[type=text] {  
+  line-height: 20px;
+  font-size: 11px;
+}
+
+div.filemanager th
+{
+  font-weight:bold;
+  text-align:left;
+  padding-left:0px;
+}
+
+div.filemanager td.filemanager-f_alt input {width:100%;}
+
+div.filemanager table.filemanager-extended-options { width:550px; margin-left:5px; margin-right:5px; border-collapse:collapse; }
+
+
+table.filemanager-extended-options .buttonColor {
+  width :1em;
+  margin-left: 2px;
+  cursor: default;
+}
+
+table.filemanager-extended-options .buttonColor .chooser, table.filemanager-extended-options .buttonColor .nocolor {
+  height: 0.6em;
+  border: 1px solid;
+  padding: 0px 1em;
+  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
+}
+
+table.filemanager-extended-options .buttonColor .buttonClick {
+  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
+}
+table.filemanager-extended-options .buttonColor .buttonColor-hilite {
+  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
+}
+
+table.filemanager-extended-options .buttonColor .nocolor { padding: 0px; }
+table.filemanager-extended-options .buttonColor .nocolor-hilite { background-color: #fff; color: #f00; }
+
+div.filemanager-uploader-area { clear:both; }

trunk/plugins/MootoolsFileManager/MootoolsFileManager.js

@@ -61 +61 @@
 MootoolsFileManager.AssetLoader.loadStyle('MootoolsFileManager.css', 'MootoolsFileManager');
 
-// Initialise the plugin for an editor instance.
+
 function MootoolsFileManager(editor)
 {
@@ -68 +68 @@
   var cfg = editor.config;
     
-  Xinha._postback(editor.config.MootoolsFileManager.backend+'__function=read-config', editor.config.MootoolsFileManager.backend_data, function(phpcfg) { eval ('var f = '+phpcfg+';'); self.hookUpButtons(f); });  
+  // Do a callback to the PHP backend and get it to "decode" the configuration for us into a 
+  // javascript object.
+  Xinha._postback(editor.config.MootoolsFileManager.backend+'__function=read-config', editor.config.MootoolsFileManager.backend_data, 
+    function(phpcfg) 
+    { 
+      eval ('var f = '+phpcfg+';'); 
+      self.phpcfg = f; self.hookUpButtons(); 
+    });  
+    
   return;  
 };
 
-// Connect up the plugin to the buttons in the editor, depending on the php configuration.
-MootoolsFileManager.prototype.hookUpButtons = function(phpcfg) 
+/** Connect up/insert the appropriate buttons and load in the auxillary files.
+ *
+ *  The different "modes" of this plugin have been split into several auxilliary files
+ *  as it's likely you may not want them all (esp if we add more modes later).
+ *
+ *  Each mode's "include" is loaded as soon as we know it could be needed by the
+ *  editor, we don't wait until the button is pressed as that would be slow for
+ *  the user to respond.
+ * 
+ */
+ 
+MootoolsFileManager.prototype.hookUpButtons = function() 
 {
   var self = this;  
+  var phpcfg = self.phpcfg;
+  
   if (phpcfg.files_dir) 
   {
+    MootoolsFileManager.AssetLoader.loadScriptOnce('MootoolsFileManager.FileManager.js', 'MootoolsFileManager');
+    
     this.editor.config.registerButton({
         id        : "linkfile",
@@ -83 +105 @@
         image     : Xinha.getPluginDir('ExtendedFileManager') + '/img/ed_linkfile.gif',
         textMode  : false,
-        action    : function(editor) { self.OpenFileManager(); }
+        action    : function(editor) { MootoolsFileManager.AssetLoader.whenReady(function() { self.OpenFileManager(); }); }
         });
         
@@ -90 +112 @@
   
   if(phpcfg.images_dir)
-  {
+  {     
+    MootoolsFileManager.AssetLoader.loadScriptOnce('MootoolsFileManager.ImageManager.js', 'MootoolsFileManager');
+    
     // Override our Editors insert image button action.  
-    this.editor._insertImage = function()
-    {
-      self.OpenImageManager();
-    }
+    self.editor._insertImage = function()
+    {
+      MootoolsFileManager.AssetLoader.whenReady(function() { self.OpenImageManager(); });
+    }              
   } 
 };
 
-// Open a "files" mode of the plugin to allow to select a file to
-// create a link to.
-MootoolsFileManager.prototype.OpenFileManager = function(link) 
-{
-    var editor = this.editor;
-    var outparam = {"editor" : this.editor, param : null};
-    var self = this;
-    
-    if (typeof link == "undefined") 
-    {
-      link = this.editor.getParentElement();
-      if (link) 
-      {
-        if (/^img$/i.test(link.tagName))
-            link = link.parentNode;
-        if (!/^a$/i.test(link.tagName))
-            link = null;
-      }
-    }
-    
-    // If the link wasn't provided, and no link is currently in focus,
-    // make one from the selection.
-    if (!link) 
-    {
-      var sel = editor.getSelection();
-      var range = editor.createRange(sel);
-      var compare = 0;
-      
-      if (Xinha.is_ie) 
-      {
-        if ( sel.type == "Control" )
-        {
-          compare = range.length;
-        }
-        else
-        {
-          compare = range.compareEndPoints("StartToEnd", range);
-        }
-      } 
-      else 
-      {
-        compare = range.compareBoundaryPoints(range.START_TO_END, range);
-      }
-      
-      if (compare == 0) 
-      {
-        alert(Xinha._lc("You must select some text before making a new link.", 'MootoolsFileManager'));
-        return;
-      }
-      outparam.param = {
-          f_href : '',
-          f_title : '',
-          f_target : '',
-          f_usetarget : editor.config.makeLinkShowsTarget,
-          baseHref: editor.config.baseHref
-      };
+/** Helper method to scale (an image typically) to a new constraint.
+ *
+ * @param origdim object { width: 123,height: 456 } The original dimensions.
+ * @param newdim  object { width: 456, height: 123 } The new (maximum) dimensions.
+ * @param flexside 'width'|'height' (optional) the side which can be "flexible" 
+ *   Defaults to the "short" side.
+ * @return { width: 789, height: 987 } The scaled dimensions which should be used. 
+ */
+ 
+MootoolsFileManager.prototype.ScaleImage = function( origdim, newdim, flexside )
+{
+  if(!origdim.height || !origdim.width) return newdim; // No old size, stays new.
+  if(!newdim.height && !newdim.width) return origdim; // No new size, stays the same.
+    
+  if(!flexside)
+  {
+    if(origdim.width > origdim.height)
+    {
+      flexside = 'height'; // Landscape image, allow the height to flex.
     }
     else
     {
-      outparam.param = {
-          f_href   : Xinha.is_ie ? link.href : link.getAttribute("href"),
-          f_title  : link.title,
-          f_target : link.target,
-          f_usetarget : editor.config.makeLinkShowsTarget,
-          baseHref: editor.config.baseHref
-      };
-    }
-    
-    this.current_link = link;
-    if(!this.FileManagerWidget)
-    {    
-      this.FileManagerWidget = new FileManager({
-        url:            this.editor.config.MootoolsFileManager.backend +'__function=file-manager&',
-        assetBasePath:  Xinha.getPluginDir('MootoolsFileManager')+'/mootools-filemanager/Assets',
-        language:       _editor_lang,
-        selectable:     true,
-        uploadAuthData: this.editor.config.MootoolsFileManager.backend_data,
-        onComplete:     function(path, file, params) { self.FileManagerReturn(path,file,params); }
-        // @TODO : Add support to pass in the existing href, title etc...
-      });       
-    }
-    
-    this.FileManagerWidget.show();    
-};
-
-// Take the values from the file selection and make it (or update) a link
-MootoolsFileManager.prototype.FileManagerReturn = function(path, file, param)
-{
-  var editor = this.editor;
-  var a      = this.current_link;
-  
-  if (!param)
-  {
-    param =  { f_href: path, f_title: '', f_target: '' }
-  }
-  
-  if (!a)
-  {
-    try 
-    {
-      editor._doc.execCommand("createlink", false, param.f_href);
-      a = editor.getParentElement();
-      var sel = editor.getSelection();
-      var range = editor.createRange(sel);
-      if (!Xinha.is_ie) 
-      {
-        a = range.startContainer;
-        if (!/^a$/i.test(a.tagName)) 
-        {
-          a = a.nextSibling;
-          if (a == null)
-          {
-            a = range.startContainer.parentNode;
-          }
-        }
-      }
-    } catch(e) {}
-  }
-  else 
-  {
-    var href = param.f_href.trim();
-    editor.selectNodeContents(a);
-    if (href == "") 
-    {
-      editor._doc.execCommand("unlink", false, null);
-      editor.updateToolbar();
-      return false;
-    }
-    else 
-    {
-      a.href = href;
-    }
-  }
-  
-  if (!(a && /^a$/i.test(a.tagName)))
-  {
-    return false;
-  }
-  // @TODO: Add support to mfm for specifying target and title
-  a.target = param.f_target.trim();
-  a.title = param.f_title.trim();
-  editor.selectNodeContents(a);
-  editor.updateToolbar();
-};
-
-// Open an images mode of the plugin for the user to insert an image
-MootoolsFileManager.prototype.OpenImageManager = function(image)
-{
-  var editor = this.editor;  // for nested functions
-  var self   = this;
-  var outparam = null;
-  if (typeof image == "undefined") 
-  {
-    image = editor.getParentElement();
-    if (image && !/^img$/i.test(image.tagName))
-    {
-      image = null;
-    }
-  }
-
-  if ( image )
-  {
-    outparam =
-      {
-        f_url    : Xinha.is_ie ? image.src : image.src,
-        f_alt    : image.alt,
-        f_border : image.style.borderWidth ? image.style.borderWidth : image.border,
-        f_align  : image.align,
-        f_padding: image.style.padding,
-        f_margin : image.style.margin,
-        f_width  : image.width,
-        f_height  : image.height,
-        f_backgroundColor: image.style.backgroundColor,
-        f_borderColor: image.style.borderColor,
-        f_hspace:  image.hspace && image.hspace != '-1' ? parseInt(image.hspace) : '',
-        f_vspace: image.vspace && image.vspace != '-1' ? parseInt(image.vspace) : ''
-      };
-
-    outparam.f_border  = this.shortSize(outparam.f_border);
-    outparam.f_padding = this.shortSize(outparam.f_padding);
-    outparam.f_margin  = this.shortSize(outparam.f_margin);
-        
-    outparam.f_backgroundColor = this.convertToHex(outparam.f_backgroundColor);
-    outparam.f_borderColor = this.convertToHex(outparam.f_borderColor);
-  } 
-  
-  this.current_image = image;
-  if(!this.ImageManagerWidget)
-  {
-    this.ImageManagerWidget = new FileManager({
-      url:            this.editor.config.MootoolsFileManager.backend+'__function=image-manager&',
-      assetBasePath:  Xinha.getPluginDir('MootoolsFileManager')+'/mootools-filemanager/Assets',
-      language:       _editor_lang,
-      selectable:     true,
-      uploadAuthData: this.editor.config.MootoolsFileManager.backend_data,
-      onComplete:     function(path, file, params) { self.ImageManagerReturn(path,file,params); },
-      extendedAttributes: outparam
-      // @TODO : Add support to pass in the existing src, alt etc...
-    });     
-  }
-  
-  this.ImageManagerWidget.show();    
-};
-
-// Take the selected image and insert or update an image in the html
-MootoolsFileManager.prototype.ImageManagerReturn = function(path, file, param)
-{
-  var editor = this.editor;
-  var self   = this;
-  var image  = this.current_image;
-  
-  if (!param)
-  {
-    param =  { f_url: path }
-  }
-  
-  var img = image;
-  if (!img) {
-    if (Xinha.is_ie) {
-      var sel = editor._getSelection();
-      var range = editor._createRange(sel);
-      editor._doc.execCommand("insertimage", false, param.f_url);
-      img = range.parentElement();
-      // wonder if this works...
-      if (img.tagName.toLowerCase() != "img") {
-        img = img.previousSibling;
-      }
-    } else {
-      img = document.createElement('img');
-      img.src = param.f_url;
-      editor.insertNodeAtSelection(img);
-    }
-  } else {      
-    img.src = param.f_url;
-  }
-
-  for (field in param) {
-    var value = param[field];
-    // @TODO: Add ability to mfm for this to be possible.
-    switch (field) {
-        case "f_alt"    : img.alt  = value; break;
-        case "f_border" :
-        if(value.length)
-        {           
-          img.style.borderWidth = /[^0-9]/.test(value) ? value :  (parseInt(value) + 'px');
-          if(img.style.borderWidth && !img.style.borderStyle)
-          {
-            img.style.borderStyle = 'solid';
-          }
-        }
-        else
-        {
-          img.style.borderWidth = '';
-          img.style.borderStyle = '';
-        }
-        break;
-        
-        case "f_borderColor": img.style.borderColor = value; break;
-        case "f_backgroundColor": img.style.backgroundColor = value; break;
-          
-        case "f_padding": 
-        {
-          if(value.length)
-          {
-            img.style.padding = /[^0-9]/.test(value) ? value :  (parseInt(value) + 'px'); 
-          }
-          else
-          {
-            img.style.padding = '';
-          }
-        }
-        break;
-        
-        case "f_margin": 
-        {
-          if(value.length)
-          {
-            img.style.margin = /[^0-9]/.test(value) ? value :  (parseInt(value) + 'px'); 
-          }
-          else
-          {
-            img.style.margin = '';
-          }
-        }
-        break;
-        
-        case "f_align"  : img.align  = value; break;
-          
-        case "f_width" : 
-        {
-          if(!isNaN(parseInt(value))) { img.width  = parseInt(value); } else { img.width = ''; }
-        }
-        break;
-        
-        case "f_height":
-        {
-          if(!isNaN(parseInt(value))) { img.height = parseInt(value); } else { img.height = ''; }
-        }
-        break;
-        
-        case "f_hspace" : 
-        {
-          if(!isNaN(parseInt(value))) { img.hspace  = parseInt(value); } else { img.hspace = ''; }
-        }
-        break;
-        
-        case "f_vspace" : 
-        {
-          if(!isNaN(parseInt(value))) { img.vspace  = parseInt(value); } else { img.vspace = ''; }
-        }
-        break;
-    }
-  }
-};
-
-// Take a multi-part CSS size specification (eg sizes for 4 borders) and 
-// shrink it into one if possible.
+      flexside = 'width'; // Portrait image, allow the width to flex
+    }
+  }
+  
+  var knownside = null;
+  switch(flexside)
+  {
+    case 'height': knownside = 'width'; break;
+    case 'width' : knownside = 'height'; break;
+  }
+  
+  // If we DON'T know the known side, we need to flip it.
+  if(!newdim[knownside])
+  {
+    var t = knownside;
+    knownside = flexside;
+    flexside = t;
+  }
+  
+  var ratio = 0;
+  switch(flexside)
+  {
+    case 'width':  ratio = origdim.width / origdim.height; break;
+    case 'height': ratio = origdim.height / origdim.width; break;
+  }
+  
+  var rdim = {};
+  rdim[knownside] = newdim[knownside];
+  rdim[flexside]  = Math.floor(newdim[knownside] * ratio);
+  if(isNaN(rdim[knownside])) rdim[knownside] = null;
+  if(isNaN(rdim[flexside]))  rdim[flexside]  = null;
+  return rdim;
+}
+
+/** Take a multi-part CSS size specification (eg sizes for 4 borders) and 
+ * shrink it into one if possible.
+ */
+ 
 MootoolsFileManager.prototype.shortSize = function(cssSize)
 {
@@ -435 +202 @@
 };
 
-// Take a colour in rgb(a,b) format and convert to HEX
-// handles multiple colours in same string as well.
+/** Take a colour in rgb(a,b) format and convert to HEX
+ * handles multiple colours in same string as well.
+ */
+ 
 MootoolsFileManager.prototype.convertToHex = function(color) 
 {

trunk/plugins/MootoolsFileManager/backend.php

@@ -100 +100 @@
       'suggestedMaxImageDimension' => $IMConfig['suggested_images_image_dimension'],
             
-      'destroy'       => $IMConfig['allow_delete'],
-     // 'filter'        => $IMConfig['files_filter'],
+      'destroy'       => $IMConfig['allow_images_delete'],
+      'filter'        => 'image/',
             
     ));
@@ -122 +122 @@
       'suggestedMaxImageDimension' => $IMConfig['suggested_files_image_dimension'],
             
-      'destroy'       => $IMConfig['allow_delete'],
+      'destroy'       => $IMConfig['allow_files_delete'],
      // 'filter'        => $IMConfig['files_filter'],
             

trunk/plugins/MootoolsFileManager/config.php

@@ -111 +111 @@
 
   $IMConfig['allow_files_upload']     = false;
+  $IMConfig['allow_files_delete']     = false;
   $IMConfig['max_files_upload_size']  = '3M';
   $IMConfig['suggested_files_image_dimension']  = array('width' => 2048, 'height' => 1536);
 
-  $IMConfig['allow_images_upload']    = false;
+  $IMConfig['allow_images_upload']     = false;
+  $IMConfig['allow_images_delete']     = false;
   $IMConfig['max_images_upload_size']  = '3M';
   $IMConfig['suggested_images_image_dimension']  = array('width' => 1024, 'height' => 768);
@@ -175 +177 @@
 {
   $IMConfig = array_merge($IMConfig, $passed_data);
-  $IMConfig['backend_url'] .= xinha_passed_data_querystring() . '&';  
 }
-
+@session_write_close(); // Close session now so we don't lock.
 
 ?>

trunk/plugins/MootoolsFileManager/mootools-filemanager/Backend/FileManager.php

@@ -54 +54 @@
                         'dateFormat' => 'j M Y - H:i',
                         'maxUploadSize' => 1024 * 1024 * 3,
-                        'suggestedMaxImageDimension' => array('width' => 800, 'height' => 600),
                         'upload' => false,
                         'destroy' => false,
                         'safe' => true,
-                        'filter' => null
+                        'filter' => null,
+                        
+                        // Xinha: Allow to specify the "Resize Large Images" tolerance level.
+                        'suggestedMaxImageDimension' => array('width' => 800, 'height' => 600),
                 ), $options);
                 
@@ -127 +129 @@
                 // Xinha is supplying both the same (eg url = /foo/test and dir = /home/bar/public_html/foo/test )
                 // so we will rip off the first part of directory, below.
-                $url = $this->options['baseURL'] . '/' . preg_replace('/^[^\/]*\//', '', $this->post['directory'] . '/' . $this->post['file']);//$this->normalize(substr($file, strlen($this->path)+1));
+                $url = $this->options['baseURL'] . '/' . preg_replace('/^[^\/]*\//', '', $this->post['directory'] . '/' . $this->post['file']);
+                
                 $mime = $this->getMimeType($file);
                 $content = null;
-                $extra_return_detail = array();
+                
+    // Xinha: We want to get some more information about what has been selected in a way
+    // we can use it.  Effectively what gets put in here will be passed into the
+    // 'onDetails' event handler of your FileManager object (if any).
+    $extra_return_detail = array
+      (
+        'url'  => $url,
+        'mime' => $mime
+      );
                 
                 if (FileManagerUtility::startsWith($mime, 'image/')){
@@ -140 +151 @@
                                         <dt>${height}</dt><dd>' . $size[1] . 'px</dd>
                                 </dl>';
+                
+        // Xinha: Return some information about the image which can be access 
+        // from the onDetails event handler in FileManager
                                 $extra_return_detail['width']  = $size[0];
                                 $extra_return_detail['height'] = $size[1];
+                                
                 }elseif (FileManagerUtility::startsWith($mime, 'text/') || $mime == 'application/x-javascript'){
                         $filecontent = file_get_contents($file, null, null, 0, 300);
@@ -178 +193 @@
                         'content' => $content ? $content : '<div class="margin">
                                 ${nopreview}<br/><button value="' . $url . '">${download}</button>
-                        </div>',
-                        'url'     => $url,
-                        'mime'    => $mime,
+                        </div>'
                 ), $extra_return_detail));
         }
@@ -198 +211 @@
         
         protected function onCreate(){
-    try
+    if ($this->options['upload'])
     {
-      if (!$this->options['upload'])
-        throw new FileManagerException('disabled');
-        
                 if (empty($this->post['directory']) || empty($this->post['file'])) return;
                 
@@ -210 +220 @@
                 mkdir($file);
                 }
-                catch(FileManagerException $e){
-                /*
-      echo json_encode(array(
-        'status' => 0,
-        'error' => '${upload.' . $e->getMessage() . '}'
-      ));
-     */
-    }
-    
+                
                 $this->onView();
         }

trunk/plugins/MootoolsFileManager/mootools-filemanager/Css/FileManager.css

@@ -322 +322 @@
 }
 
-div.filemanager-preview ul, div.filemanager-preview div.textpreview {
+div.filemanager-preview ul, div.filemanager-uploader ul, div.filemanager-preview div.textpreview {
         border: 1px solid #bebebe;
         background: #fff;
@@ -352 +352 @@
         z-index: 1010;
 }
-
 /* UPLOAD */
+
 div.filemanager-container .file span {
         padding: 0 5px 0 0;

trunk/plugins/MootoolsFileManager/mootools-filemanager/Demos/mootools-more.js

@@ -53 +53 @@
 ...
 */
-(function(){
+(function(addEvent, removeEvent){
         
         var match = /(.*?):relay\(([^)]+)\)$/,
@@ -80 +80 @@
                 };
 
-        var oldAddEvent = Element.prototype.addEvent,
-                oldRemoveEvent = Element.prototype.removeEvent;
-                
         Element.implement({
 
@@ -95 +92 @@
                                         }.bind(this);
                                         monitors[type] = monitor;
-                                        oldAddEvent.call(this, splitted.event, monitor);
+                                        addEvent.call(this, splitted.event, monitor);
                                 }
                         }
-                        return oldAddEvent.apply(this, arguments);
+                        return addEvent.apply(this, arguments);
                 },
 
@@ -107 +104 @@
                                 if (!events || !events[type] || (fn && !events[type].keys.contains(fn))) return this;
 
-                                if (fn) oldRemoveEvent.apply(this, [type, fn]);
-                                else oldRemoveEvent.apply(this, type);
+                                if (fn) removeEvent.apply(this, [type, fn]);
+                                else removeEvent.apply(this, type);
 
                                 events = this.retrieve('events');
-                                if (events && events[type] && events[type].length == 0){
+                                if (events && events[type] && events[type].keys.length == 0){
                                         var monitors = this.retrieve('$moo:delegateMonitors', {});
-                                        oldRemoveEvent.apply(this, [splitted.event, monitors[type]]);
+                                        removeEvent.apply(this, [splitted.event, monitors[type]]);
                                         delete monitors[type];
                                 }
@@ -119 +116 @@
                         }
 
-                        return oldRemoveEvent.apply(this, arguments);
+                        return removeEvent.apply(this, arguments);
                 },
 
@@ -133 +130 @@
         });
 
-})();
+})(Element.prototype.addEvent, Element.prototype.removeEvent);
 
 /*
@@ -357 +354 @@
                         this.container = document.id(this.container.getDocument().body);
                 
-                var styles = element.getStyles('left', 'right', 'position');
+                var styles = element.getStyles('left', 'top', 'position');
                 if (styles.left == 'auto' || styles.top == 'auto')
                         element.setPosition(element.getPosition(element.getOffsetParent()));
@@ -750 +747 @@
         },
 
-        fireForParent: function(event, element) {
+        fireForParent: function(event, element) {      
                         parentNode = element.getParent();
                         if (parentNode == document.body) return;
                         if (parentNode.retrieve('tip:enter')) parentNode.fireEvent('mouseenter', event);
-                        else return this.fireForParent(parentNode, event);
+                        else return this.fireForParent(event, parentNode); // Why was this reversed in the original?
         },
 

trunk/plugins/MootoolsFileManager/mootools-filemanager/Language/Language.en.js

@@ -23 +23 @@
         size: 'Size:',
         dir: 'Path:',
-        modified: 'Last modified:',
+        modified: 'Created:',
         preview: 'Preview',
         close: 'Close',

trunk/plugins/MootoolsFileManager/mootools-filemanager/Source/Additions.js

@@ -88 +88 @@
                 if (this.options.content) this.el.getElement('div').adopt(this.options.content);
                 
-                Array.each(this.options.buttons, function(v){
+                Array.each(this.options.buttons, function(v){           
                         new Element('button', {'class': 'fm-dialog-' + v, text: this.options.language[v]}).addEvent('click', (function(e){
                                 if (e) e.stop();

trunk/plugins/MootoolsFileManager/mootools-filemanager/Source/FileManager.js

@@ -40 +40 @@
   - onHide: event fired when FileManager closes
   - onPreview: event fired when the user clicks an image in the preview
+  - onDetails: event fired when the details are updated after user picking a file
+  - onHidePreview: event fired when the "preview" is hidden (usually, user uploading file, or changing directory)
 ...
 */
@@ -56 +58 @@
                 onShow: $empty,
                 onHide: $empty,
-                onPreview: $empty*/
+                onPreview: $empty,
+                onDetails: $empty, // Xinha: Fired when an item is picked form the files list, supplied object (eg {width: 123, height:456} )
+                onHidePreview: $empty, // Xinha: Fired when the preview is hidden (eg when uploading) */
                 directory: '',
                 url: null,
@@ -103 +107 @@
                         
                         if (self.Current) self.Current.removeClass('selected');
-                        self.Current = this.addClass('selected');
+                        self.Current = this.addClass('selected'); // NB: Also sets self.Current
+      
+      // Xinha: We need to have Current assigned before fillInfo because fillInfo adds to it      
       self.fillInfo(file);
                         self.switchButton();
@@ -109 +115 @@
                 this.browser = new Element('ul', {'class': 'filemanager-browser'}).addEvents({
                         click: (function(){
-                                return self.deselect();
+                                // return self.deselect();
                         }),
                         'click:relay(li span.fi)': this.relayClick
                 }).inject(this.el);
                 
-                this.addMenuButton('create');
+                if (this.options.upload)     this.addMenuButton('create'); // Xinha: Create directory permission = upload
                 if (this.options.selectable) this.addMenuButton('open');
                 
@@ -124 +130 @@
                 ]);
 
-                this.info.adopt([head, new Element('h2', {text: this.language.information})]);
+    // Xinha: We need to groupt he headers and lists togethor because we will
+    // use some CSS to reorganise a bit.  So we create "infoarea" which 
+    // will contain the h2 and list for the "Information", that is
+    // modification date, size, directory etc...
+    var infoarea = new Element('div', {'class': 'filemanager-info-area'});
+
+                this.info.adopt([head, infoarea.adopt(new Element('h2', {text: this.language.information}))]);
 
                 new Element('dl').adopt([
@@ -135 +147 @@
                         new Element('dt', {text: this.language.dir}),
                         new Element('dd', {'class': 'filemanager-dir'})
-                ]).inject(this.info);
+                ]).inject(infoarea);
                 
                 this.preview = new Element('div', {'class': 'filemanager-preview'}).addEvent('click:relay(img.preview)', function(){
                         self.fireEvent('preview', [this.get('src')]);
                 });
-                this.info.adopt([
+                
+        // Xinha: We need to group the headers and lists togethor because we will
+    // use some CSS to reorganise a bit.  So we create "filemanager-preview-area" which 
+    // will contain the h2 for the preview and also the preview content returned from
+    // Backend/FileManager.php
+                this.info.adopt((new Element('div', {'class': 'filemanager-preview-area'})).adopt([
                         new Element('h2', {'class': 'filemanager-headline', text: this.language.preview}),
                         this.preview
-                ]);
+                ]));
                 
                 this.closeIcon = new Element('div', {
@@ -239 +256 @@
                 
                 this.fireEvent('complete', [
+      // Xinha: The URL path returned by normal MootoolsFileManager is odd, it includes the last component
+      // of the base directory, that is, if your base is /foo/bar/images then we get something like
+      // images/narf.jpg.
+      // To work around this we take the URL which was worked out by Backend/FileManager.php
+      // and return that as the url.       
                         this.normalize(this.Current.file_data ? this.Current.file_data.url : this.Directory + '/' + this.Current.retrieve('file').name),
                         this.Current.retrieve('file')
@@ -342 +364 @@
         },
 
-        rename: function(e, file){
+        rename: function(e, file){      
                 e.stop();
                 this.tips.hide();
@@ -439 +461 @@
                         self.relayClick.apply(el);
                 };
+                
+                if(0) // This (drag to move into subdirectory) is breaking IE, we don't need it that badly
+          // See: http://github.com/cpojer/mootools-filemanager/issues#issue/11
                 $$(els[0]).makeDraggable({
                         droppables: $$(this.droppables, els[1]),
@@ -538 +563 @@
                 this.fireHooks('cleanup');
                 this.preview.empty();
-
+                    
+    // Xinha: We need to remove our custom attributes form when the preview is hidden 
+    this.fireEvent('hidePreview');
+    
                 this.info.getElement('h1').set('text', file.name);
                 this.info.getElement('dd.filemanager-modified').set('text', file.date);
@@ -587 +615 @@
                                 });
                                 
+                                // Xinha: We need to add in a form for setting the attributes of images etc,
+                                // so we add this event and pass it the information we have about the item 
+                                // as returned by Backend/FileManager.php
+                                this.fireEvent('details', [j]);
+                                
+                                // Xinha: We also want to hold onto the data so we can access it
+                                // when selecting the image.
                                 if(this.Current) this.Current.file_data = j;
                         }).bind(this),
@@ -642 +677 @@
         
         initialize: function(options, filebrowser){
+    // Xinha: We need ALL requests from the FileManager to have our authorisation data on it
+    // normal MootoolsFileManager only has the flash send it :-(    
     if(filebrowser)
     {      
@@ -647 +684 @@
     }
     
+    // Xinha: We also need to clean up the url because our backend already includes a query string
+    // and MootoolsFileManager adds ?event=..... indiscriminately, our query string always
+    // ends in an ampersand, so we can just clean up '&?event=' to be '&event='
     options.url = options.url.replace(/&\?event=/, '&event=');
     

trunk/plugins/MootoolsFileManager/mootools-filemanager/Source/Uploader.js

@@ -76 +76 @@
                         }),
                         list: new Element('ul', {'class': 'filemanager-uploader-list'}),
-                        uploader: new Element('div', {opacity: 0}).adopt(
+                        uploader: new Element('div', {opacity: 0, 'class': 'filemanager-uploader-area'}).adopt(
                                 new Element('h2', {text: this.language.upload}),
                                 new Element('div', {'class': 'filemanager-uploader'})
@@ -223 +223 @@
                                 self.fillInfo();
                                 self.info.getElement('h2.filemanager-headline').setStyle('display', 'none');
-                                self.preview.adopt(self.upload.uploader);
+                                self.info.adopt(self.upload.uploader);
                                 self.upload.uploader.fade(1);
                         },