Upload action implemented in My Spaces webscript portlet. Update of webscript javascripts to use helpful constants.

git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@5724 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261

source/web/scripts/ajax/common.js

@@ -394,31 +394,103 @@ function log(message)
 
 if (!String.prototype.startsWith)
 {
-  String.prototype.startsWith = function(s)
-  {
-    return this.indexOf(s) == 0;
-  }
+   String.prototype.startsWith = function(s)
+   {
+      return this.indexOf(s) == 0;
+   }
 }
 
 if (!Array.prototype.indexOf)
 {
-  Array.prototype.indexOf = function(o)
-  {
-    for (var i = 0; i < this.length; i++)
-    {
-      if (this[i] == o)
+   Array.prototype.indexOf = function(o)
+   {
+      for (var i = 0; i < this.length; i++)
       {
-        return i;
+         if (this[i] == o)
+         {
+            return i;
+         }
       }
-    }
-    return -1;
-  }
+      return -1;
+   }
 }
 
 if (!Array.prototype.peek)
 {
-  Array.prototype.peek = function(o)
-  {
-    return this[this.length - 1];
-  }
+   Array.prototype.peek = function(o)
+   {
+      return this[this.length - 1];
+   }
+}
+
+var _fileUploads = [];
+
+function handleUploadHelper(fileInputElement,
+                            uploadId,
+                            callback,
+                            contextPath,
+                            actionUrl,
+                            params)
+{
+   var id = fileInputElement.getAttribute("name");
+   var d = fileInputElement.ownerDocument;
+   var iframe = d.createElement("iframe");
+   iframe.style.display = "none";
+   iframe.name = id + "upload_frame";
+   iframe.id = iframe.name;
+   document.body.appendChild(iframe);
+   
+   // makes it possible to target the frame properly in IE.
+   window.frames[iframe.name].name = iframe.name;
+   
+   _fileUploads[uploadId] = { path: fileInputElement.value, callback: callback };
+   
+   var form = d.createElement("form");
+   d.body.appendChild(form);
+   form.id = id + "_upload_form";
+   form.name = form.id;
+   form.style.display = "none";
+   form.method = "post";
+   form.encoding = "multipart/form-data";
+   form.enctype = "multipart/form-data";
+   form.target = iframe.name;
+   actionUrl = actionUrl || "/uploadFileServlet";
+   form.action = contextPath + actionUrl;
+   form.appendChild(fileInputElement);
+   
+   var id = document.createElement("input");
+   id.type = "hidden";
+   form.appendChild(id);
+   id.name = "upload-id";
+   id.value = uploadId;
+   
+   if (params != undefined && params != null)
+   {
+      for (var i in params)
+      {
+         var p = document.createElement("input");
+         p.type = "hidden";
+         form.appendChild(p);
+         id.name = i;
+         id.value = params[i];
+      }
+   }
+   
+   var rp = document.createElement("input");
+   rp.type = "hidden";
+   form.appendChild(rp);
+   rp.name = "return-page";
+   rp.value = "javascript:window.parent.uploadCompleteHelper('" + uploadId + 
+              "',{error: '${UPLOAD_ERROR}'})";
+   
+   form.submit();
+}
+
+function uploadCompleteHelper(id, args)
+{
+   var upload = _fileUploads[id];
+   upload.callback(id, 
+                   upload.path, 
+                   upload.path.replace(/.*[\/\\]([^\/\\]+)/, "$1"),
+                   args.error != "${UPLOAD_ERROR}" ? args.error : null);
 }

source/web/scripts/ajax/doclist.js

@@ -1,4 +1,10 @@
 var MyDocs = {
+   IMG_SMALL: 16,
+   IMG_LARGE: 64,
+   ANIM_LENGTH: 300,
+   DETAIL_MARGIN: 56,
+   TITLE_FONT_SIZE: 18,
+   RESOURCE_PANEL_HEIGHT: 150,
 
    start: function()
    {
@@ -19,10 +25,10 @@ var MyDocs = {
       var imgs = $$('#docPanel .docIconImage');
       var imgs64 = $$('#docPanel .docIconImage64');
       var resources = $$('#docPanel .docResource');
-      var fxItem = new Fx.Elements(items, {wait: false, duration: 300, transition: Fx.Transitions.linear});
-      var fxDetail = new Fx.Elements(details, {wait: false, duration: 300, transition: Fx.Transitions.linear});
-      var fxInfo = new Fx.Elements(infos, {wait: false, duration: 300, transition: Fx.Transitions.linear});
-      var fxIcon = new Fx.Elements(icons, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxItem = new Fx.Elements(items, {wait: false, duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      var fxDetail = new Fx.Elements(details, {wait: false, duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      var fxInfo = new Fx.Elements(infos, {wait: false, duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      var fxIcon = new Fx.Elements(icons, {wait: false, duration: MyDocs.ANIM_LENGTH, transition: Fx.Transitions.linear});
       var fxResource = new Fx.Elements(resources,
       {
          wait: false,
@@ -55,13 +61,13 @@ var MyDocs = {
       var fxImage = new Fx.Elements(imgs,
       {
          wait: false,
-         duration: 300,
+         duration: MyDocs.ANIM_LENGTH,
          transition: Fx.Transitions.linear,
          onComplete: function()
          {
             this.elements.each(function(img, i)
             {
-               img.src = (img.getStyle('height').toInt() == 16) ? img.defSrc : img.bigSrc;
+               img.src = (img.getStyle('height').toInt() == MyDocs.IMG_SMALL) ? img.defSrc : img.bigSrc;
             });
          }
       });
@@ -104,20 +110,20 @@ var MyDocs = {
             doc.addClass('docItemSelected');
             // move the item title to the right
             animItem[i] = {
-               'margin-left': [item.getStyle('margin-left').toInt(), 56],
-               'font-size': [item.getStyle('font-size').toInt(), 18]
+               'margin-left': [item.getStyle('margin-left').toInt(), MyDocs.DETAIL_MARGIN],
+               'font-size': [item.getStyle('font-size').toInt(), MyDocs.TITLE_FONT_SIZE]
             };
             // fade in the info button
             animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
             // slide and fade in the details panel
             animDetail[i] = {
-               'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+               'height': [detail.getStyle('height').toInt(), detail.defHeight + MyDocs.IMG_LARGE],
                'opacity': [detail.getStyle('opacity'), 1]
             };
             // grow the doctype image
             animImage[i] = {
-               'height': [img.getStyle('height').toInt(), 64],
-               'width': [img.getStyle('width').toInt(), 64]
+               'height': [img.getStyle('height').toInt(), MyDocs.IMG_LARGE],
+               'width': [img.getStyle('width').toInt(), MyDocs.IMG_LARGE]
             };
             img.src = img.bigSrc;
 
@@ -157,11 +163,11 @@ var MyDocs = {
                   }
                   // does the image need shrinking?
                   var ih = otherImg.getStyle('height').toInt();
-                  if (ih != 16)
+                  if (ih != MyDocs.IMG_SMALL)
                   {
                      animImage[j] = {
-                        'height': [ih, 16],
-                        'width': [ih, 16]
+                        'height': [ih, MyDocs.IMG_SMALL],
+                        'width': [ih, MyDocs.IMG_SMALL]
                      };
                   }
                }
@@ -224,7 +230,7 @@ var MyDocs = {
                
                // slide and fade in the resources panel
                animResource[i] = {
-                  'height': [resourceHeight, resource.defHeight + 150],
+                  'height': [resourceHeight, resource.defHeight + MyDocs.RESOURCE_PANEL_HEIGHT],
                   'opacity': [resource.getStyle('opacity'), 1]};
    
                // close other open documents and toggle this one if it's already open
@@ -241,20 +247,20 @@ var MyDocs = {
                      // continue animations that may have been going on before the click
                      // move the item title to the right
                      animItem[j] = {
-                        'margin-left': [otherItem.getStyle('margin-left').toInt(), 56],
-                        'font-size': [otherItem.getStyle('font-size').toInt(), 18]
+                        'margin-left': [otherItem.getStyle('margin-left').toInt(), MyDocs.DETAIL_MARGIN],
+                        'font-size': [otherItem.getStyle('font-size').toInt(), MyDocs.TITLE_FONT_SIZE]
                      };
                      // fade in the info button
                      animInfo[j] = {'opacity': [otherInfo.getStyle('opacity'), 1]};
                      // slide and fade in the details panel
                      animDetail[j] = {
-                        'height': [otherDetail.getStyle('height').toInt(), otherDetail.defHeight + 64],
+                        'height': [otherDetail.getStyle('height').toInt(), otherDetail.defHeight + MyDocs.IMG_LARGE],
                         'opacity': [otherDetail.getStyle('opacity'), 1]
                      };
                      // grow the doctype image
                      animImage[j] = {
-                        'height': [otherImg.getStyle('height').toInt(), 64],
-                        'width': [otherImg.getStyle('width').toInt(), 64]
+                        'height': [otherImg.getStyle('height').toInt(), MyDocs.IMG_LARGE],
+                        'width': [otherImg.getStyle('width').toInt(), MyDocs.IMG_LARGE]
                      };
                   }
                   else
@@ -289,11 +295,11 @@ var MyDocs = {
                      }
                      // does the image need shrinking?
                      var ih = otherImg.getStyle('height').toInt();
-                     if (ih != 16)
+                     if (ih != MyDocs.IMG_SMALL)
                      {
                         animImage[j] = {
-                           'height': [ih, 16],
-                           'width': [ih, 16]
+                           'height': [ih, MyDocs.IMG_SMALL],
+                           'width': [ih, MyDocs.IMG_SMALL]
                         };
                      }
    
@@ -359,20 +365,20 @@ var MyDocs = {
                // continue animations that may have been going on before the click
                // move the item title to the right
                animItem[i] = {
-                  'margin-left': [item.getStyle('margin-left').toInt(), 56],
-                  'font-size': [item.getStyle('font-size').toInt(), 18]
+                  'margin-left': [item.getStyle('margin-left').toInt(), MyDocs.DETAIL_MARGIN],
+                  'font-size': [item.getStyle('font-size').toInt(), MyDocs.TITLE_FONT_SIZE]
                };
                // fade in the info button
                animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
                // slide and fade in the details panel
                animDetail[i] = {
-                  'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+                  'height': [detail.getStyle('height').toInt(), detail.defHeight + MyDocs.IMG_LARGE],
                   'opacity': [detail.getStyle('opacity'), 1]
                };
                // grow the doctype image
                animImage[i] = {
-                  'height': [img.getStyle('height').toInt(), 64],
-                  'width': [img.getStyle('width').toInt(), 64]
+                  'height': [img.getStyle('height').toInt(), MyDocs.IMG_LARGE],
+                  'width': [img.getStyle('width').toInt(), MyDocs.IMG_LARGE]
                };
             }
             else
@@ -388,8 +394,8 @@ var MyDocs = {
                };
                animInfo[i] = {'opacity': [infos[i].getStyle('opacity'), 0]};
                animImage[i] = {
-                  'height': [img.getStyle('height').toInt(), 16],
-                  'width': [img.getStyle('width').toInt(), 16]
+                  'height': [img.getStyle('height').toInt(), MyDocs.IMG_SMALL],
+                  'width': [img.getStyle('width').toInt(), MyDocs.IMG_SMALL]
                };
             }
          });

source/web/scripts/ajax/myforms.js

@@ -1,5 +1,6 @@
 var MyWebForms = {
-
+   ANIM_LENGTH: 300,
+   
    start: function()
    {
       if ($('formsPanel'))
@@ -13,7 +14,7 @@ var MyWebForms = {
    {
       var projects = $$('#formsPanel .webProjectRow');
       var frms = $$('#formsPanel .webProjectForms');
-      var fxForm = new Fx.Elements(frms, {wait: false, duration: 300, transition: Fx.Transitions.sineInOut});
+      var fxForm = new Fx.Elements(frms, {wait: false, duration: MyWebForms.ANIM_LENGTH, transition: Fx.Transitions.sineInOut});
 
       projects.each(function(project, i)
       {

source/web/scripts/ajax/myspaces.js

@@ -1,5 +1,11 @@
 var MySpaces = {
-
+   IMG_SMALL: 16,
+   IMG_LARGE: 64,
+   ANIM_LENGTH: 300,
+   DETAIL_MARGIN: 56,
+   TITLE_FONT_SIZE: 18,
+   fileInput: null,
+   
    start: function()
    {
       if ($('spacePanel'))
@@ -18,20 +24,20 @@ var MySpaces = {
       var icons = $$('#spacePanel .spaceIcon');
       var imgs = $$('#spacePanel .spaceIconImage');
       var imgs64 = $$('#spacePanel .spaceIconImage64');
-      var fxItem = new Fx.Elements(items, {wait: false, duration: 300, transition: Fx.Transitions.linear});
-      var fxDetail = new Fx.Elements(details, {wait: false, duration: 300, transition: Fx.Transitions.linear});
-      var fxInfo = new Fx.Elements(infos, {wait: false, duration: 300, transition: Fx.Transitions.linear});
-      var fxIcon = new Fx.Elements(icons, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+      var fxItem = new Fx.Elements(items, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      var fxDetail = new Fx.Elements(details, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      var fxInfo = new Fx.Elements(infos, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      var fxIcon = new Fx.Elements(icons, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
       var fxImage = new Fx.Elements(imgs,
       {
          wait: false,
-         duration: 300,
+         duration: MySpaces.ANIM_LENGTH,
          transition: Fx.Transitions.linear,
          onComplete: function()
          {
             this.elements.each(function(img, i)
             {
-               img.src = (img.getStyle('height').toInt() == 16) ? img.defSrc : img.bigSrc;
+               img.src = (img.getStyle('height').toInt() == MySpaces.IMG_SMALL) ? img.defSrc : img.bigSrc;
             });
          }
       });
@@ -71,20 +77,20 @@ var MySpaces = {
             space.addClass('spaceItemSelected');
             // move the item title to the right
             animItem[i] = {
-               'margin-left': [item.getStyle('margin-left').toInt(), 56],
-               'font-size': [item.getStyle('font-size').toInt(), 18]
+               'margin-left': [item.getStyle('margin-left').toInt(), MySpaces.DETAIL_MARGIN],
+               'font-size': [item.getStyle('font-size').toInt(), MySpaces.TITLE_FONT_SIZE]
             };
             // fade in the info button
             animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
             // slide and fade in the details panel
             animDetail[i] = {
-               'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+               'height': [detail.getStyle('height').toInt(), detail.defHeight + MySpaces.IMG_LARGE],
                'opacity': [detail.getStyle('opacity'), 1]
             };
             // grow the spacetype image
             animImage[i] = {
-               'height': [img.getStyle('height').toInt(), 64],
-               'width': [img.getStyle('width').toInt(), 64]
+               'height': [img.getStyle('height').toInt(), MySpaces.IMG_LARGE],
+               'width': [img.getStyle('width').toInt(), MySpaces.IMG_LARGE]
             };
             img.src = img.bigSrc;
 
@@ -124,11 +130,11 @@ var MySpaces = {
                   }
                   // does the image need shrinking?
                   var ih = otherImg.getStyle('height').toInt();
-                  if (ih != 16)
+                  if (ih != MySpaces.IMG_SMALL)
                   {
                      animImage[j] = {
-                        'height': [ih, 16],
-                        'width': [ih, 16]
+                        'height': [ih, MySpaces.IMG_SMALL],
+                        'width': [ih, MySpaces.IMG_SMALL]
                      };
                   }
                }
@@ -160,20 +166,20 @@ var MySpaces = {
                // continue animations that may have been going on before the click
                // move the item title to the right
                animItem[i] = {
-                  'margin-left': [item.getStyle('margin-left').toInt(), 56],
-                  'font-size': [item.getStyle('font-size').toInt(), 18]
+                  'margin-left': [item.getStyle('margin-left').toInt(), MySpaces.DETAIL_MARGIN],
+                  'font-size': [item.getStyle('font-size').toInt(), MySpaces.TITLE_FONT_SIZE]
                };
                // fade in the info button
                animInfo[i] = {'opacity': [info.getStyle('opacity'), 1]};
                // slide and fade in the details panel
                animDetail[i] = {
-                  'height': [detail.getStyle('height').toInt(), detail.defHeight + 64],
+                  'height': [detail.getStyle('height').toInt(), detail.defHeight + MySpaces.IMG_LARGE],
                   'opacity': [detail.getStyle('opacity'), 1]
                };
                // grow the spacetype image
                animImage[i] = {
-                  'height': [img.getStyle('height').toInt(), 64],
-                  'width': [img.getStyle('width').toInt(), 64]
+                  'height': [img.getStyle('height').toInt(), MySpaces.IMG_LARGE],
+                  'width': [img.getStyle('width').toInt(), MySpaces.IMG_LARGE]
                };
             }
             else
@@ -189,8 +195,8 @@ var MySpaces = {
                };
                animInfo[i] = {'opacity': [infos[i].getStyle('opacity'), 0]};
                animImage[i] = {
-                  'height': [img.getStyle('height').toInt(), 16],
-                  'width': [img.getStyle('width').toInt(), 16]
+                  'height': [img.getStyle('height').toInt(), MySpaces.IMG_SMALL],
+                  'width': [img.getStyle('width').toInt(), MySpaces.IMG_SMALL]
                };
             }
          });
@@ -203,8 +209,60 @@ var MySpaces = {
    
    upload: function(actionEl)
    {
-      var panel = $E(".spaceUploadPanel", actionEl);
-      panel.setStyle("display", "block");
+      var panel = $E(".spaceUploadPanel", $(actionEl).getParent());
+      panel.setStyle("opacity", 0);
+      panel.setStyle("display", "inline");
+      
+      // Generate a file upload element
+      // To perform the actual upload, the element is moved to a hidden iframe
+      // from which the upload is performed - this is required as javascript cannot
+      // set the important properties on a file upload element for security reasons.
+      // <input size="35" style="width:100%" type="file" value="" id="_upload" name="_upload">
+      if (this.fileInput == null)
+      {
+         var fileInput = $(document.createElement("input"));
+         fileInput.type = "file";
+         fileInput.name = "_upload";
+         fileInput.size = "35";
+         fileInput.setStyle("width", "100%");
+         fileInput.injectTop(panel);
+         this.fileInput = fileInput;
+      }
+      
+      var anim = new Fx.Styles(panel, {duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      anim.start({'opacity': 1});
+   },
+   
+   uploadOK: function(actionEl, path)
+   {
+      // call the upload help to perform the upload
+      handleUploadHelper(this.fileInput,
+                         "1",   // TODO: generate unique ID (parent space noderef?)
+                         MySpaces.uploadCompleteHandler,
+                         getContextPath(),
+                         "/ajax/invoke/FileUploadBean.uploadFile",
+                         {currentPath: path.replace("_%_", "'")});   // decode path
+      this.fileInput = null;
+      this.uploadClose(actionEl);
+   },
+   
+   uploadClose: function(actionEl)
+   {
+      var panel = $(actionEl).getParent();
+      panel.setStyle("display", "none");
+   },
+   
+   uploadCompleteHandler: function(id, path, fileName, error)
+   {
+      if (error == null)
+      {
+         // TODO: refresh!
+         alert("Uploaded: " + fileName);
+      }
+      else
+      {
+         alert("ERROR: " + error);
+      }
    }
 };
 

source/web/scripts/ajax/mytasks.js

@@ -1,5 +1,7 @@
 var MyTasks = {
-
+   ANIM_LENGTH: 300,
+   DETAIL_PANEL_HEIGHT: 132,
+   
    start: function()
    {
       if ($('taskPanel'))
@@ -15,8 +17,8 @@ var MyTasks = {
       var infos = $$('#taskPanel .taskInfo');
       var details = $$('#taskPanel .taskDetail');
       var resources = $$('#taskPanel .taskResources');
-      var fxInfo = new Fx.Elements(infos, {wait: false, duration: 300, transition: Fx.Transitions.sineInOut});
-      var fxDetail = new Fx.Elements(details, {wait: false, duration: 300, transition: Fx.Transitions.sineInOut,
+      var fxInfo = new Fx.Elements(infos, {wait: false, duration: MyTasks.ANIM_LENGTH, transition: Fx.Transitions.sineInOut});
+      var fxDetail = new Fx.Elements(details, {wait: false, duration: MyTasks.ANIM_LENGTH, transition: Fx.Transitions.sineInOut,
          onComplete: function()
          {
             // event handler to ensure 
@@ -157,7 +159,7 @@ var MyTasks = {
 
                // slide and fade in the details panel
                animDetail[i] = {
-                  'height': [detailHeight, detail.defHeight + 132],
+                  'height': [detailHeight, detail.defHeight + MyTasks.DETAIL_PANEL_HEIGHT],
                   'opacity': [detail.getStyle('opacity'), 1]};
 
                // close other open tasks and toggle this one if it's already open