Changeset 5021

Timestamp:

Oct 11, 2018, 9:23:33 AM (4 years ago)

Author:

Nicklas Nordborg

Message:

References #1067: Highlight related items in Case summary

The "root item" (=the item that was click on) now get yellowish color and an arrow marker icon.

Implemented automatic scrolling (sideways) in tables were the highlighted item is not currently visible.

Location:

extensions/net.sf.basedb.reggie/trunk/resources

Files:

• css/case_summary.css (modified) (2 diffs)
• images/marked.png (added)
• reports/case-summary.js (modified) (4 diffs)

extensions/net.sf.basedb.reggie/trunk/resources/css/case_summary.css

@@ -220 +220 @@
 }
 
+.info-table td.chained.rootitem
+{
+  background-color: #FFF880;
+}
+
+.info-table td.chained.rootitem::before
+{
+  content: url('../images/marked.png');
+}
+
 .info-table tbody td.yellow-specimen
 {
@@ -249 +259 @@
 {
   background-color: #A0FFA0 !important;
+}
+
+.info-table tr:hover td.chained.rootitem
+{
+  background-color: #F0F000 !important;
 }
 

extensions/net.sf.basedb.reggie/trunk/resources/reports/case-summary.js

@@ -743 +743 @@
     {
       var targetList = highlight.split(',');
-      cs.highlightChainedItems(targetList, targetList[0]);
+      var rootItem = cs.highlightChainedItems(targetList, targetList[0]);
+      if (rootItem)
+      {
+        Doc.addClass(rootItem.parentNode, 'rootitem');
+      }
     }
   }
@@ -752 +756 @@
     var targetList = Data.get(event.currentTarget, 'chain-id').split(',');
     cs.highlightChainedItems(targetList);
+    Doc.addClass(event.currentTarget.parentNode, 'rootitem');
   }
   
@@ -762 +767 @@
   {
     // 'targetList' is a possible list of 'chain-id' values that should be highlighted
+    // 'autoScroll' is used as a marker so that that only the first <td> within the same <table> is scrolled into view
+    var autoScroll = new Date().getTime();
+    var rootItem = null;
     for (var itemNo = 0; itemNo < chainedItems.length; itemNo++)
     {
@@ -768 +776 @@
       var inChain = cs.hasCommonElement(targetList, chainId);
       Doc.addOrRemoveClass(item.parentNode, 'chained', inChain);
+      Doc.removeClass(item.parentNode, 'rootitem');
+      
+      if (inChain)
+      {
+        // Try to scroll the highlighted item into view
+        // We need to get the <td> aligned left or right in the <div> that is the 
+        // parent to the <table>
+        var td = item.parentNode;
+        var tbl = td.parentNode.parentNode.parentNode; // Moving: td -> tr -> thead -> table
+        var div = tbl.parentNode;
+        if (div.autoScroll != autoScroll)
+        {
+          if (td.offsetLeft < div.scrollLeft) 
+          {
+            div.scrollLeft = td.offsetLeft;
+            div.autoScroll = autoScroll;
+          } 
+          else if (td.offsetLeft + td.offsetWidth > div.scrollLeft + div.offsetWidth)
+          {
+            div.scrollLeft = td.offsetLeft + td.offsetWidth - div.offsetWidth;
+            div.autoScroll = autoScroll;
+          }
+        }
+      }
+      
+      // This handles vertical scrolling to the root item
       if (scrollTo && chainId.indexOf(scrollTo) >= 0) 
       {
-        item.scrollIntoView();
+        item.parentNode.scrollIntoView();
         scrollTo = null;
-      }
-    }
+        rootItem = item;
+      }
+    }
+    return rootItem;
   }