Usability updates for MySpaces and Doclist portlets

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

config/alfresco/templates/client/doclist_preview_panel.ftl

@@ -28,7 +28,7 @@
 <#if node.isLocked >
                <td class="docAction docActionEditDetails docActionLocked">Edit Details</td>
 <#else>
-               <td class="docAction docActionEditDetails" onclick="window.open('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', '_blank');">Edit Details</td>
+               <td class="docAction docActionEditDetails" onclick="openWindowCallback('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', MyDocs.editDetailsCallback);">Edit Details</td>
 </#if>
             </tr>
             <tr>

config/alfresco/templates/client/myspaces_preview_panel.ftl

@@ -43,7 +43,7 @@
 <#if node.isLocked >
                <td class="spaceAction docActionEditDetails docActionLocked">Edit Details</td>
 <#else>
-               <td class="spaceAction docActionEditDetails" onclick="window.open('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', '_blank');">Edit Details</td>
+               <td class="spaceAction docActionEditDetails" onclick="openWindowCallback('${url.context}/command/ui/editcontentprops?container=plain&amp;noderef=${node.nodeRef}', MySpaces.editDetailsCallback);">Edit Details</td>
 </#if>
             </tr>
             <tr>

config/alfresco/templates/webscripts/org/alfresco/portlets/doclist.get.html.ftl

@@ -50,7 +50,7 @@
             <th><a id="docFilter3" class="docfilterLink <#if filter=3>docfilterLinkSelected</#if>" href="#" onclick="MyDocs.filter(3); return false;">PDF Documents</a></th>
             <th><a id="docFilter4" class="docfilterLink <#if filter=4>docfilterLinkSelected</#if>" href="#" onclick="MyDocs.filter(4); return false;">Recently Modified</a></th>
             <td align=right>
-               <a href="#" onclick="MyDocs.start(); return false;" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" style="vertical-align:-25%;padding-right:4px">Refresh</a>
+               <a href="#" onclick="MyDocs.refreshList(); return false;" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" style="vertical-align:-25%;padding-right:4px">Refresh</a>
             </td>
          </tr>
       </table>

config/alfresco/templates/webscripts/org/alfresco/portlets/doclistpanel.get.html.ftl

@@ -16,7 +16,7 @@
            (filter=3 && d.mimetype="application/pdf") ||
            (filter=4 && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1))>
       <#assign count=count+1>
-      <div class="docRow docRow${(count % 2 = 0)?string("Odd", "Even")}">
+      <div class="docRow docRow${(count % 2 = 0)?string("Odd", "Even")}" id="${d.id}">
          <div class="docIcon">
             <a href="${url.context}${d.url}" target="new"><img class="docIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
          </div>

config/alfresco/templates/webscripts/org/alfresco/portlets/myspaces.get.html.ftl

@@ -2,7 +2,7 @@
 
 <script type="text/javascript" src="/alfresco/scripts/ajax/yahoo/yahoo/yahoo-min.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/yahoo/connection/connection-min.js"></script>
-<script type="text/javascript" src="/alfresco/scripts/ajax/mootools.v1.11.js"></script>
+<script type="text/javascript" src="/alfresco/scripts/ajax/mootools.v1.11-mjh.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/common.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/summary-info.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/myspaces.js"></script>
@@ -86,7 +86,7 @@
             <th><a class="spacefilterLink <#if filter=3>spacefilterLinkSelected</#if>" href="#" onclick="MySpaces.filter(3); return false;">My Items</a></th>
             <th><a class="spacefilterLink <#if filter=4>spacefilterLinkSelected</#if>" href="#" onclick="MySpaces.filter(4); return false;">Recently Modified</a></th>
             <td align=right>
-               <a href="#" onclick="MySpaces.start(); return false;" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" class="spaceImageIcon">Refresh</a>
+               <a href="#" onclick="MySpaces.refreshList(); return false;" class="refreshViewLink"><img src="${url.context}/images/icons/reset.gif" border="0" width="16" height="16" class="spaceImageIcon">Refresh</a>
             </td>
          </tr>
       </table>

config/alfresco/templates/webscripts/org/alfresco/portlets/myspacespanel.get.html.ftl

@@ -9,7 +9,7 @@
          (args.f="3" && (d.properties.creator == user || d.properties.modifier == user)) ||
          (args.f="4" && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1)))>
    <#assign count=count+1>
-   <div class="spaceRow spaceRow${(count % 2 = 0)?string("Odd", "Even")}">
+   <div class="spaceRow spaceRow${(count % 2 = 0)?string("Odd", "Even")}" id="${d.id}">
       <div class="spaceIcon">
          <#if d.isDocument>
             <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>

source/web/jsp/close.jsp

@@ -1 +1,7 @@
-<script>window.close();</script>
+<script type="text/javascript">
+	if ((window.opener) && (window.opener.alfrescoCallback))
+	{
+		window.opener.alfrescoCallback();
+	}
+	window.close();
+</script>

source/web/scripts/ajax/common.js

@@ -506,3 +506,39 @@ function uploadCompleteHelper(id, args)
                    upload.path.replace(/.*[\/\\]([^\/\\]+)/, "$1"),
                    args.error != "${UPLOAD_ERROR}" ? args.error : null);
 }
+
+var openWindowCallbackFn = null;
+
+function openWindowCallback(url, callback)
+{
+   // Store the callback function for later
+   openWindowCallbackFn = callback;
+   // Register our "well known" callback function
+   window.alfrescoCallback = openWindowOnCallback;
+   // Use a named window so that only one dialog is active at a time
+   window.open(url, 'alfrescoDialog', 'width=1024,height=768');
+}
+   
+function openWindowOnCallback(fromTimeout)
+{
+   if (typeof(fromTimeout)=='undefined')
+   {
+      window.setTimeout("openWindowOnCallback(true)", 10);
+   }
+   else
+   {
+      // Clear out the global callback function
+      window.alfrescoCallback = null;
+      // Try the callback function
+      try
+      {
+         openWindowCallbackFn();
+      }
+      catch (e)
+      {
+      }
+      openWindowCallbackFn = null;
+   }
+}
+
+

source/web/scripts/ajax/doclist.js

@@ -10,6 +10,7 @@ var MyDocs = {
    Filter: null,
    Home: null,
    Query: null,
+   FxAll: null,
 
    start: function()
    {
@@ -56,10 +57,18 @@ var MyDocs = {
       // hide the ajax wait panel and show the main doc panel
       $('docPanel').setStyle('visibility', 'visible');
       $('docPanelOverlayAjax').setStyle('visibility', 'hidden');
+
+      if (MyDocs.postInit)
+      {
+         MyDocs.postInit();
+         MyDocs.postInit = null;
+      }
    },
 
    parseDocPanels: function()
    {
+      MyDocs.FxAll = [];
+
       var docs = $$('#docPanel .docRow');
       var items = $$('#docPanel .docItem');
       var infos = $$('#docPanel .docInfo');
@@ -115,6 +124,14 @@ var MyDocs = {
          }
       });
 
+      // Store all the effects so we can globally stop them later
+      MyDocs.FxAll.push(fxItem);
+      MyDocs.FxAll.push(fxDetail);
+      MyDocs.FxAll.push(fxInfo);
+      MyDocs.FxAll.push(fxIcon);
+      MyDocs.FxAll.push(fxResource);
+      MyDocs.FxAll.push(fxImage);
+
       docs.each(function(doc, i)
       {
          var item = items[i],
@@ -230,6 +247,9 @@ var MyDocs = {
                animResource = {},
                resourceHeight = resource.getStyle('height').toInt();
             
+            // make sure item title is highlighted
+            doc.addClass('docItemSelected');
+
             if (!doc.isOpen)
             {
                if (!resource.isLoaded)
@@ -449,28 +469,6 @@ var MyDocs = {
       });
    },
 
-   /**
-    * Update the view filter
-    */
-   filter: function(filter)
-   {
-      if (this.popupPanel != null) return;
-
-      $$('.docfilterLink').each(function(filterLink, i)
-      {
-         if (i == filter)
-         {
-            filterLink.addClass("docfilterLinkSelected");
-         }
-         else
-         {
-            filterLink.removeClass("docfilterLinkSelected");
-         }
-      });
-      MyDocs.Filter = filter;
-      MyDocs.start();
-   },
-
    /**
     * Delete a document item
     */
@@ -478,7 +476,7 @@ var MyDocs = {
    {
       if (confirm("Are you sure you want to delete: " + name))
       {
-         $("docPanelOverlay").setStyle('opacity', MyDocs.OVERLAY_OPACITY);
+         MyDocs.applyModal();
          
          // ajax call to delete item
          YAHOO.util.Connect.asyncRequest(
@@ -489,18 +487,18 @@ var MyDocs = {
                {
                   if (response.responseText.indexOf("OK:") == 0)
                   {
-                     MyDocs.start();
+                     MyDocs.refreshList();
                   }
                   else
                   {
                      alert("Error during delete of item: " + response.responseText);
-                     $("docPanelOverlay").setStyle('opacity', 0);
+                     MyDocs.removeModal();
                   }
                },
                failure: function(response)
                {
                   alert("Error during delete of item: " + response.responseText);
-                  $("docPanelOverlay").setStyle('opacity', 0);
+                  MyDocs.removeModal();
                }
             }, 
             "noderef=" + noderef
@@ -513,7 +511,7 @@ var MyDocs = {
     */
    checkoutItem: function(name, noderef)
    {
-      $("docPanelOverlay").setStyle('opacity', MyDocs.OVERLAY_OPACITY);
+      MyDocs.applyModal();
 
       // ajax call to delete item
       YAHOO.util.Connect.asyncRequest(
@@ -524,18 +522,18 @@ var MyDocs = {
             {
                if (response.responseText.indexOf("OK:") == 0)
                {
-                  MyDocs.start();
+                  MyDocs.refreshList();
                }
                else
                {
                   alert("Error during check out of item: " + response.responseText);
-                  $("docPanelOverlay").setStyle('opacity', 0);
+                  MyDocs.removeModal();
                }
             },
             failure: function(response)
             {
                alert("Error during check out of item: " + response.responseText);
-               $("docPanelOverlay").setStyle('opacity', 0);
+               MyDocs.removeModal();
             }
          }, 
          "noderef=" + noderef
@@ -547,7 +545,7 @@ var MyDocs = {
     */
    checkinItem: function(name, noderef)
    {
-      $("docPanelOverlay").setStyle('opacity', MyDocs.OVERLAY_OPACITY);
+      MyDocs.applyModal();
 
       // ajax call to delete item
       YAHOO.util.Connect.asyncRequest(
@@ -558,18 +556,18 @@ var MyDocs = {
             {
                if (response.responseText.indexOf("OK:") == 0)
                {
-                  MyDocs.start();
+                  MyDocs.refreshList();
                }
                else
                {
                   alert("Error during check in of item: " + response.responseText);
-                  $("docPanelOverlay").setStyle('opacity', 0);
+                  MyDocs.removeModal();
                }
             },
             failure: function(response)
             {
                alert("Error during check in of item: " + response.responseText);
-               $("docPanelOverlay").setStyle('opacity', 0);
+               MyDocs.removeModal();
             }
          }, 
          "noderef=" + noderef
@@ -643,7 +641,7 @@ var MyDocs = {
    {
       if (error == null)
       {
-         MyDocs.start();
+         MyDocs.refreshList();
       }
       else
       {
@@ -669,8 +667,104 @@ var MyDocs = {
       {
          this.fxOverlay.start(0);
       }
-   }
+   },
    
+   /**
+    * Update the view filter
+    */
+   filter: function(filter)
+   {
+      if (this.popupPanel != null) return;
+
+      $$('.docfilterLink').each(function(filterLink, i)
+      {
+         if (i == filter)
+         {
+            filterLink.addClass("docfilterLinkSelected");
+         }
+         else
+         {
+            filterLink.removeClass("docfilterLinkSelected");
+         }
+      });
+      MyDocs.Filter = filter;
+      MyDocs.refreshList(true);
+   },
+
+   /**
+    * Refresh the main data list contents within the docPanel container
+    */
+   refreshList: function(reopenActive)
+   {
+      // do we want to remember which panel was open?
+      if (reopenActive)
+      {
+         // do we have an open panel?
+         var openPanel = $E('#docPanel .docItemSelected');
+         var openPanelId = null;
+         if (openPanel != null)
+         {
+            openPanelId = openPanel.id;
+            // Re-open the panel if the id still exists
+            MyDocs.postInit = function()
+            {
+               if ($(openPanelId))
+               {
+                  $(openPanelId).fireEvent("click");
+   
+                  // scroll the open panel into view               
+                  var fxScroll = new Fx.Scroll($('docPanel'),
+                  {
+                     duration: MyDocs.ANIM_LENGTH,
+                     transition: Fx.Transitions.linear
+                  });
+                  fxScroll.toElement($(openPanelId));
+               }
+            }
+         }
+      }
+
+      // empty the main panel div and restart by reloading the panel contents
+      var docPanel = $('docPanel');
+      docPanel.setStyle('visibility', 'hidden');
+      // show the ajax wait panel
+      $('docPanelOverlayAjax').setStyle('visibility', 'visible');
+      
+      // Stop all the animation effects
+      MyDocs.FxAll.each(function(fx, i)
+      {
+         fx.stop();
+      });
+      
+      docPanel.empty();
+      docPanel.removeEvents('mouseleave');
+      MyDocs.start();
+   },
+   
+   /**
+    * Apply a semi-transparent modal overlay skin to the main panel area
+    */
+   applyModal: function()
+   {
+      $("docPanelOverlay").setStyle('opacity', MyDocs.OVERLAY_OPACITY);
+   },
+   
+   /**
+    * Remove the modal overlay skin from the main panel area
+    */
+   removeModal: function()
+   {
+      $("docPanelOverlay").setStyle('opacity', 0);
+   },
+   
+   /**
+    * Called when the Edit Details dialog returns
+    */
+   editDetailsCallback: function()
+   {
+      // Refresh the inner panel
+      MyDocs.refreshList(true);
+   }
 };
 
 window.addEvent('load', MyDocs.start);

source/web/scripts/ajax/myspaces.js

@@ -13,6 +13,7 @@ var MySpaces = {
    ServiceContext: null,
    popupPanel: null,
    ScriptUrlEncoder: null,
+   FxAll: null,
    
    start: function()
    {
@@ -77,6 +78,12 @@ var MySpaces = {
       // hide the ajax wait panel and show the main spaces panel
       $('spacePanelOverlayAjax').setStyle('visibility', 'hidden');
       $('spacePanel').setStyle('visibility', 'visible');
+
+      if (MySpaces.postInit)
+      {
+         MySpaces.postInit();
+         MySpaces.postInit = null;
+      }
    },
 
    /**
@@ -85,6 +92,8 @@ var MySpaces = {
     */
    parseSpacePanels: function()
    {
+      MySpaces.FxAll = [];
+      
       var spaces = $$('#spacePanel .spaceRow');
       var items = $$('#spacePanel .spaceItem');
       var infos = $$('#spacePanel .spaceInfo');
@@ -94,9 +103,13 @@ var MySpaces = {
       var imgs64 = $$('#spacePanel .spaceIconImage64');
       var resources = $$('#spacePanel .spaceResource');
       var fxItem = new Fx.Elements(items, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      MySpaces.FxAll.push(fxItem);
       var fxDetail = new Fx.Elements(details, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      MySpaces.FxAll.push(fxDetail);
       var fxInfo = new Fx.Elements(infos, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      MySpaces.FxAll.push(fxInfo);
       var fxIcon = new Fx.Elements(icons, {wait: false, duration: MySpaces.ANIM_LENGTH, transition: Fx.Transitions.linear});
+      MySpaces.FxAll.push(fxIcon);
       var fxResource = new Fx.Elements(resources,
       {
          wait: false,
@@ -126,6 +139,7 @@ var MySpaces = {
             });
          }
       });
+      MySpaces.FxAll.push(fxResource);
       var fxImage = new Fx.Elements(imgs,
       {
          wait: false,
@@ -139,6 +153,7 @@ var MySpaces = {
             });
          }
       });
+      MySpaces.FxAll.push(fxImage);
       
       spaces.each(function(space, i)
       {
@@ -255,6 +270,9 @@ var MySpaces = {
                animResource = {},
                resourceHeight = resource.getStyle('height').toInt();
             
+            // make sure item title is highlighted
+            space.addClass('spaceItemSelected');
+
             if (!space.isOpen)
             {
                if (!resource.isLoaded)
@@ -836,19 +854,54 @@ var MySpaces = {
          }
       });
       MySpaces.Filter = filter;
-      MySpaces.refreshList();
+      MySpaces.refreshList(true);
    },
 
    /**
     * Refresh the main data list contents within the spacePanel container
     */
-   refreshList: function()
+   refreshList: function(reopenActive)
    {
+      // do we want to remember which panel was open?
+      if (reopenActive)
+      {
+         // do we have an open panel?
+         var openPanel = $E('#spacePanel .spaceItemSelected');
+         var openPanelId = null;
+         if (openPanel != null)
+         {
+            openPanelId = openPanel.id;
+            // Re-open the panel if the id still exists
+            MySpaces.postInit = function()
+            {
+               if ($(openPanelId))
+               {
+                  $(openPanelId).fireEvent("click");
+   
+                  // scroll the open panel into view               
+                  var fxScroll = new Fx.Scroll($('spacePanel'),
+                  {
+                     duration: MySpaces.ANIM_LENGTH,
+                     transition: Fx.Transitions.linear
+                  });
+                  fxScroll.toElement($(openPanelId));
+               }
+            }
+         }
+      }
+
       // empty the main panel div and restart by reloading the panel contents
       var spacePanel = $('spacePanel');
       spacePanel.setStyle('visibility', 'hidden');
       // show the ajax wait panel
       $('spacePanelOverlayAjax').setStyle('visibility', 'visible');
+      
+      // Stop all the animation effects
+      MySpaces.FxAll.each(function(fx, i)
+      {
+         fx.stop();
+      });
+      
       spacePanel.empty();
       spacePanel.removeEvents('mouseleave');
       MySpaces.start();
@@ -870,6 +923,15 @@ var MySpaces = {
       $("spacePanelOverlay").setStyle('opacity', 0);
    },
    
+   /**
+    * Called when the Edit Details dialog returns
+    */
+   editDetailsCallback: function()
+   {
+      // The edit details dialog window has closed
+      MySpaces.refreshList(true);
+   },
+   
    /**
     * Display a message bubble of helpful info to the user. Calling this function in quick 
     * succession will cause previous message to be lost as the new ones are displayed.