alfresco-community-repo/source/web/scripts/ajax/mytasks.js

var MyTasks = {
   ANIM_LENGTH: 300,
   DETAIL_PANEL_HEIGHT: 137,
   Filter: null,
   ServiceContext: null,
   
   start: function()
   {
      if ($('taskPanel'))
      {
         var messagePanel = $("taskMessagePanel");
         messagePanel.setStyle('opacity', 0);
         messagePanel.setStyle('display', 'block');

         // fire off the ajax request to populate the task panel - the 'mytaskspanel' webscript
         // is responsible for rendering just the contents of the main panel div
         YAHOO.util.Connect.asyncRequest(
            "GET",
            MyTasks.ServiceContext + '/ui/mytaskspanel?f='+MyTasks.Filter,
            {
               success: function(response)
               {
                  // push the response into the task panel div
                  $('taskPanel').setHTML(response.responseText);
                  // extract the count value from a hidden div and display it
                  $('taskCount').setHTML($('taskCountValue').innerHTML);
                  // wire up all the events and animations
                  MyTasks.init();
               },
               failure: function(response)
               {
                  // display the error
                  $('taskPanel').setHTML($('displayTheError').innerHTML);
                  
                  // hide the ajax wait panel and show the main task panel
                  $('taskPanelOverlay').setStyle('visibility', 'hidden');
                  $('taskPanel').setStyle('visibility', 'visible');
               }
            }
         );
      }
   },
   
   init: function()
   {
      MyTasks.sortTasks();
      MyTasks.parseTaskPanels();
      
      // hide the ajax wait panel and show the main task panel
      $('taskPanelOverlay').setStyle('visibility', 'hidden');
      $('taskPanel').setStyle('visibility', 'visible');

      if (MyTasks.postInit)
      {
         MyTasks.postInit();
         MyTasks.postInit = null;
      }
   },

   parseTaskPanels: function()
   {
      var tasks = $$('#taskPanel .taskRow');
      var items = $$('#taskPanel .taskItem');
      var infos = $$('#taskPanel .taskInfo');
      var details = $$('#taskPanel .taskDetail');
      var resources = $$('#taskPanel .taskResources');
      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 scrollable area style is set
            this.elements.each(function(detail, i)
            {
               if (detail.parentNode.isOpen == true)
               {
                  $E('.taskResources', detail).setStyle('overflow', 'auto');
               }
            });
         }
      });
      tasks.each(function(task, i)
      {
         var item = items[i];
         var info = infos[i];
         var detail = details[i];
         var resource = resources[i];

         // animated elements defaults
         task.isOpen = false;
         task.loadingResources = false;
         item.defBColor = (item.getStyle('background-color') == 'transparent') ? '' : item.getStyle('background-color');
         detail.defHeight = 1;
         detail.setStyle('opacity', 0);
         detail.setStyle('display', 'block');
         detail.setStyle('height', detail.defHeight);
         info.setStyle('opacity', 0);

         // register 'mouseenter' event for each task
         task.addEvent('mouseenter', function(e)
         {
            if (task.isOpen)
               return;

            // highlight the item title
            task.addClass('taskItemSelected');

            // fade in info button
            var animInfo = {};
            var infoOpacity = info.getStyle('opacity');
            if (infoOpacity != 1)
            {
               animInfo[i] = {'opacity': [infoOpacity, 1]};
            }

            // reset styles on all closed tasks
            tasks.each(function(otherTask, j)
            {
               var otherInfo = infos[j];
               
               if ((otherTask != task) && (!otherTask.isOpen))
               {
                  // reset selected class
                  otherTask.removeClass('taskItemSelected');
                  // does the info button need fading out
                  var otherOpacity = otherInfo.getStyle('opacity');
                  if (otherOpacity != 0)
                  {
                     animInfo[j] = {'opacity': [otherOpacity, 0]};
                  }
               }
            });
            fxInfo.start(animInfo);
         });

         // register 'mouseleave' event for each task
         task.addEvent('mouseleave', function(e)
         {
            if (task.isOpen)
               return;

            // unhighlight the item title
            task.removeClass('taskItemSelected');

            // fade out info button
            var animInfo = {};
            var infoOpacity = info.getStyle('opacity');
            if (infoOpacity != 0)
            {
               animInfo[i] = {'opacity': [infoOpacity, 0]};
            }

            // reset styles on all closed tasks - needed in case any element is mid-animation
            tasks.each(function(otherTask, j)
            {
               var otherInfo = infos[j];
               
               if ((otherTask != task) && (!otherTask.isOpen))
               {
                  // does the info button need fading out
                  var otherOpacity = otherInfo.getStyle('opacity');
                  if (otherOpacity != 0)
                  {
                     animInfo[j] = {'opacity': [otherOpacity, 0]};
                  }
               }
            });
            fxInfo.start(animInfo);
         });

         // register 'click' event for each task
         task.addEvent('click', function(e)
         {
            var animInfo = {},
               animDetail = {},
               detailHeight = detail.getStyle('height').toInt(),
               infoOpacity = info.getStyle('opacity');
            
            if (!task.isOpen)
            {
               // open up this task
               // flag this task as open
               task.isOpen = true;
               task.addClass("taskItemSelected");
               task.addClass("taskItemSelectedOpen");
               
               if (task.loadingResources == false)
               {
                  // ajax call to populate the task resource list
                  task.loadingResources = true;
                  YAHOO.util.Connect.asyncRequest(
                     "POST",
                     getContextPath() + '/ajax/invoke/TaskInfoBean.sendTaskResources',
                     { 
                        success: function(response)
                        {
                           // set the resource list panel html
                           var resource = response.argument[0];
                           resource.innerHTML = response.responseText;
                        },
                        failure: handleErrorYahoo,    // global error handler
                        argument: [resource]
                     },
                     "taskId=" + task.id);
               }
               
               // fade in info button
               animInfo[i] = {'opacity': [infoOpacity, 1]};

               // slide and fade in the details panel
               animDetail[i] = {
                  '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
               tasks.each(function(otherTask, j)
               {
                  var otherInfo = infos[j],
                      otherDetail = details[j];
                  
                  if (otherTask != task)
                  {
                     // close any other open tasks
                     otherTask.isOpen = false;

                     // unhighlight the item title
                     otherTask.removeClass('taskItemSelected');
                     otherTask.removeClass("taskItemSelectedOpen");

                     // does this task detail panel need resetting back to it's default height?
                     var otherHeight = otherDetail.getStyle('height').toInt();
                     if (otherHeight != otherDetail.defHeight)
                     {
                        animDetail[j] = {
                           'height': [otherHeight, otherDetail.defHeight],
                           'opacity': [otherDetail.getStyle('opacity'), 0]};
                     }
                     // does the info button need fading out?
                     var otherOpacity = otherInfo.getStyle('opacity');
                     if (otherOpacity != 0)
                     {
                        animInfo[j] = {'opacity': [otherOpacity, 0]};
                     }
                     
                     $E('.taskResources', otherDetail).setStyle('overflow', 'hidden');
                  }
               });
            }
            else
            {
               // close this task
               // flag this task as closed
               task.isOpen = false;
               task.removeClass("taskItemSelectedOpen");
               
               // fade in info button
               animInfo[i] = {'opacity': [infoOpacity, 1]};

               // reset task back to it's default height
               animDetail[i] = {
                  'height': [detailHeight, detail.defHeight],
                  'opacity': [detail.getStyle('opacity'), 0]};
               
               $E('.taskResources', detail).setStyle('overflow', 'hidden');
            }
            fxInfo.start(animInfo);
            fxDetail.start(animDetail);
         });
      });

      $('taskPanel').addEvent('mouseleave', function(e)
      {
         var animInfo = {};
         // handler for mouse leaving the entire task panel
         tasks.each(function(task, i)
         {
            if (!task.isOpen)
            {
               task.removeClass('taskItemSelected');
               animInfo[i] = {'opacity': [infos[i].getStyle('opacity'), 0]};
            }
            else
            {
               animInfo[i] = {'opacity': [infos[i].getStyle('opacity'), 1]};
            }
         });
         fxInfo.start(animInfo);
      });
   },
   
   transitionTask: function(commandUrl, successMessage)
   {
      YAHOO.util.Connect.asyncRequest(
         "GET",
         getContextPath() + commandUrl,
         { 
            success: function(response)
            {
               MyTasks.displayMessage(successMessage);
               MyTasks.refreshList();
            },
            failure: function(e)
            {
               alert(e.status + " : ERROR failed to transition task.");
            }
         }
      );
   },
   
   /**
    * Refresh the main data list contents within the taskPanel container
    */
   refreshList: function(reopenActive)
   {
      // do we want to remember which panel was open?
      if (reopenActive)
      {
         // do we have an open panel?
         var openPanel = $E('#taskPanel .taskItemSelected');
         var openPanelId = null;
         if (openPanel != null)
         {
            openPanelId = openPanel.id;
            // Re-open the panel if the id still exists
            MyTasks.postInit = function()
            {
               if ($(openPanelId))
               {
                  $(openPanelId).fireEvent("click");
   
                  // scroll the open panel into view               
                  var fxScroll = new Fx.Scroll($('taskPanel'),
                  {
                     duration: MyTasks.ANIM_LENGTH,
                     transition: Fx.Transitions.linear
                  });
                  fxScroll.toElement($(openPanelId));
               }
            }
         }
      }

      // empty the main panel div and restart by reloading the panel contents
      var taskPanel = $('taskPanel');
      taskPanel.setStyle('visibility', 'hidden');
      // show the ajax wait panel
      $('taskPanelOverlay').setStyle('visibility', 'visible');
      taskPanel.empty();
      taskPanel.removeEvents('mouseleave');
      MyTasks.start();
   },
   
   /**
    * Update the view filter
    */
   filter: function(filter)
   {
      $$('#taskFilterBar li').each(function(filterLink, i)
      {
         if (i == filter)
         {
            filterLink.addClass("taskCurrent");
         }
         else
         {
            filterLink.removeClass("taskCurrent");
         }
      });
      MyTasks.Filter = filter;
      MyTasks.refreshList();
   },
   
   sortTasks: function()
   {
      var taskArray = new Array();
      $$('#taskPanel .taskRow').each(function(taskDiv, i)
      {
         taskArray[i] = {dueDate: taskDiv.getProperty('rel'), theDiv: taskDiv.clone()};
      });

      taskArray.sort(MyTasks.sortByDueDate);
      var taskPanel = $('taskPanel');
      taskPanel.empty();
      taskPanel.removeEvents('mouseleave');

      for(var i = 0; i < taskArray.length; i++)
      {
         taskArray[i].theDiv.injectInside(taskPanel);
      }
   },
   
   sortByDueDate: function(a, b)
   {
      var x = a.dueDate;
      var y = b.dueDate;
      return ((x < y) ? -1 : ((x > y) ? 1 : 0));
   },

   /**
    * Called when the Manage Task dialog returns
    */
   manageTaskCallback: function()
   {
      // The manage task dialog window has closed
      MyTasks.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.
    * 
    * @param message    Message text to display
    */
   displayMessage: function(message)
   {
      var panel = $("taskMessagePanel");
      if ($defined(panel.timeout))
      {
         clearTimeout(panel.timeout);
         panel.timeout = null;
      }
      
      panel.setStyle("opacity", 0);
      panel.setStyle("margin-top", -90);
      
      panel.getChildren()[1].setHTML(message);
      
      // reset the close box animation by refreshing the image source
      $("taskMessagePanelCloseImage").src = getContextPath() + "/images/icons/close_portlet_animation.gif";
      
      panel.fxMessage = new Fx.Styles(panel, 
      {
         duration: 1000,
         transition: Fx.Transitions.sineInOut
      });
      panel.fxMessage.start({'margin-top': -70, 'opacity': [0, 0.75]});

      
      panel.timeout = window.setTimeout(this.fadeOutMessage, 9000);
   },
   
   /**
    * Timer callback function to fade out the message panel
    */
   fadeOutMessage: function()
   {
      var panel = $("taskMessagePanel");
      panel.timeout = null;
      
      var fxMessage = new Fx.Styles(panel, 
      {
         duration: 1000,
         transition: Fx.Transitions.sineInOut
      });
      fxMessage.start({'margin-top': -90, 'opacity': [0]});
   },
   
   /**
    * Close the message panel immediately when the user clicks the close icon
    */
   closeMessage: function()
   {
      var panel = $("taskMessagePanel");
      if ($defined(panel.timeout))
      {
         clearTimeout(panel.timeout);
         panel.timeout = null;
      }
      panel.fxMessage.stop();
      panel.setStyle("opacity", 0);
   }   
};

window.addEvent('load', MyTasks.start);