Rollover animation added to myWebForms portlet. Bugfixes to portlet layouts for MSIE (some CSS work still pending)

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

config/alfresco/templates/webscripts/org/alfresco/portlets/mywebforms_get_html.ftl

@@ -2,6 +2,7 @@
 
 <script type="text/javascript" src="/alfresco/scripts/ajax/common.js"></script>
 <script type="text/javascript" src="/alfresco/scripts/ajax/mootools.js"></script>
+<script type="text/javascript" src="/alfresco/scripts/ajax/myforms.js"></script>
 <script type="text/javascript">setContextPath('${url.context}');</script>
 
 <#-- List the available web form objects in all web projects the user is assigned to -->
@@ -81,6 +82,11 @@ a.webProjectLink:link, a.webProjectLink:visited, a.webProjectLink:hover
    border-bottom: 1px solid #CCD4DB;
 }
 
+.webProjectForms
+{
+   overflow: hidden;
+}
+
 .webprojectDesc
 {
    color: #5A5741;

source/web/scripts/ajax/doclist.js

@@ -77,15 +77,15 @@ var MyDocs = {
          item.defMarginLeft = item.getStyle('margin-left').toInt();
          item.defFontSize = item.getStyle('font-size').toInt();;
          item.defBColor = (item.getStyle('background-color') == 'transparent') ? '' : item.getStyle('background-color');
-         detail.defHeight = 0;
+         detail.defHeight = 1;
          detail.setStyle('opacity', 0);
          detail.setStyle('display', 'block');
-         detail.setStyle('height', 0);
+         detail.setStyle('height', detail.defHeight);
          info.setStyle('opacity', 0);
          img.defSrc = img.src;
          img.bigSrc = img.src.replace(/filetypes\//, 'filetypes64/').replace(/.gif/, '.png');
-         resource.defHeight = 0;
+         resource.defHeight = 1;
-         resource.setStyle('height', 0);
+         resource.setStyle('height', resource.defHeight);
 
          // register 'mouseenter' (subclassed mouseover) event for each doc
          doc.addEvent('mouseenter', function(e)

source/web/scripts/ajax/myforms.js

@@ -0,0 +1,82 @@
+var MyWebForms = {
+
+   start: function()
+   {
+      if ($('formsPanel'))
+      {
+         MyWebForms.parseFormsPanels();
+         $('formsPanel').setStyle('visibility', 'visible');
+      }
+   },
+
+   parseFormsPanels: function()
+   {
+      var projects = $$('#formsPanel .webProjectRow');
+      var frms = $$('#formsPanel .webProjectForms');
+      var fxForm = new Fx.Elements(frms, {wait: false, duration: 300, transition: Fx.Transitions.linear});
+
+      projects.each(function(project, i)
+      {
+         var frm = frms[i];
+
+         // animated elements defaults
+         frm.maxHeight = frm.getStyle('height').toInt();
+         frm.defHeight = 1;
+         frm.setStyle('height', 0);
+         frm.setStyle('opacity', 0);
+
+         // register 'mouseenter' (subclassed mouseover) event for each project
+         project.addEvent('mouseenter', function(e)
+         {
+            var animForm = {};
+
+            // slide and fade in the frms panel
+            animForm[i] =
+            {
+               'height': [frm.getStyle('height').toInt(), frm.maxHeight],
+               'opacity': [frm.getStyle('opacity'), 1]
+            };
+
+            // reset styles on all other frms
+            projects.each(function(otherProject, j)
+            {
+               var otherfrm = frms[j];
+
+               if (otherProject != project)
+               {
+                  // does this frm panel need resetting back to it's default height?
+                  var h = otherfrm.getStyle('height').toInt();
+                  if (h != otherfrm.defHeight)
+                  {
+                     animForm[j] =
+                     {
+                        'height': [h, otherfrm.defHeight],
+                        'opacity': [otherfrm.getStyle('opacity'), 0]};
+                  }
+               }
+            });
+            fxForm.start(animForm);
+         });
+      });
+
+      $('formsPanel').addEvent('mouseleave', function(e)
+      {
+         // handler for mouse leaving the entire panel
+         var animForm = {};
+
+         projects.each(function(project, i)
+         {
+            var frm = frms[i];
+
+            animForm[i] =
+            {
+               'height': [frm.getStyle('height').toInt(), frm.defHeight],
+               'opacity': [frm.getStyle('opacity'), 0]
+            };
+         });
+         fxForm.start(animForm);
+      });
+   }
+};
+
+window.addEvent('load', MyWebForms.start);

source/web/scripts/ajax/mytasks.js

@@ -40,10 +40,10 @@ var MyTasks = {
          task.isOpen = false;
          task.loadingResources = false;
          item.defBColor = (item.getStyle('background-color') == 'transparent') ? '' : item.getStyle('background-color');
-         detail.defHeight = 0;
+         detail.defHeight = 1;
          detail.setStyle('opacity', 0);
          detail.setStyle('display', 'block');
-         detail.setStyle('height', 0);
+         detail.setStyle('height', detail.defHeight);
          info.setStyle('opacity', 0);
 
          // register 'mouseenter' event for each task