From 38d654f84111c02d7fb6a83c13961e8a41b8d9fc Mon Sep 17 00:00:00 2001
From: Pablo Fernandez <pfernandez@talentsoft.com>
Date: Wed, 25 Feb 2015 15:37:39 +0100
Subject: [PATCH] Header columns and rows cells are highlighted when hovering a
 cell

---
 js/comparison_table.js               | 15 +++++++++++++++
 styles/simple.css                    |  3 +++
 unified/unified_comparison_table.css |  3 +++
 unified/unified_comparison_table.js  | 16 ++++++++++++++++
 4 files changed, 37 insertions(+)

diff --git a/js/comparison_table.js b/js/comparison_table.js
index 936a0c7..18c6a21 100644
--- a/js/comparison_table.js
+++ b/js/comparison_table.js
@@ -169,6 +169,7 @@
         }
       }
     }
+    highlightOnHover($table);
     return $table;
   };
 
@@ -225,4 +226,18 @@
     return canv;
   };
 
+  highlightOnHover = function($table){
+    $table
+        .delegate('td.cell', 'mouseenter', function(){
+            var $headerColumnCell = $(this).closest('table').find('tr:first td:eq('+$(this).index()+')');
+            var $headerRowCell = $(this).siblings(':first');
+            $headerColumnCell.add($headerRowCell).addClass('highlight-cell');
+        })
+        .delegate('td.cell','mouseleave',function(){
+            $(this).closest('table')
+                    .find('td.highlight-cell')
+                    .removeClass('highlight-cell'); 
+        });
+  };
+  
 }).call(this);
diff --git a/styles/simple.css b/styles/simple.css
index a8cf916..534f999 100644
--- a/styles/simple.css
+++ b/styles/simple.css
@@ -12,6 +12,9 @@ table.comparisons td.row.header {
 table.comparisons td.cell {
     padding: 1.5px;
 }
+table.comparisons td.highlight-cell {
+  background-color:#DDDDDD;
+}
 table.comparisons td.cell div {
     width: 25px;
     height: 25px;
diff --git a/unified/unified_comparison_table.css b/unified/unified_comparison_table.css
index b098ac1..5deb9f0 100644
--- a/unified/unified_comparison_table.css
+++ b/unified/unified_comparison_table.css
@@ -54,6 +54,9 @@ table.comparisons td.cell {
   padding: 1.5px;
   cursor: pointer;
 }
+table.comparisons td.highlight-cell {
+  background-color:#E3E3E3;
+}
 table.comparisons td.cell div {
   width: 25px;
   height: 25px;
diff --git a/unified/unified_comparison_table.js b/unified/unified_comparison_table.js
index af5355e..22271ad 100644
--- a/unified/unified_comparison_table.js
+++ b/unified/unified_comparison_table.js
@@ -173,6 +173,7 @@
         }
       }
     }
+    highlightOnHover($table);
     return $table;
   };
 
@@ -240,6 +241,7 @@
         }
       }
     }
+    highlightOnHover($table);
     return $table;
   };
 
@@ -285,4 +287,18 @@
     return canv;
   };
 
+  highlightOnHover = function($table){
+    $table
+        .delegate('td.cell','mouseenter',function(){
+            var $headerColumnCell = $(this).closest('table').find('tr:first td:eq('+$(this).index()+')');
+            var $headerRowCell = $(this).siblings(':first');
+            $headerColumnCell.add($headerRowCell).addClass('highlight-cell');
+        })
+        .delegate('td.cell','mouseleave',function(){
+            $(this).closest('table')
+                    .find('td.highlight-cell')
+                    .removeClass('highlight-cell'); 
+        });
+  };
+  
 }).call(this);