[sysconfig] Overview: Make mouseover highlighting work in the other direction too

1 files changed, 71 insertions, 18 deletions

diff --git a/modules-available/sysconfig/clientscript.js b/modules-available/sysconfig/clientscript.js
index c86b8148..f3a47824 100644
--- a/modules-available/sysconfig/clientscript.js
+++ b/modules-available/sysconfig/clientscript.js
@@ -1,33 +1,86 @@
 
 // Mouseover and clicking
 
+var $ct = $('#conftable').find('.confrow');
+$ct.click(function() {
+    showmod(this, 'bold');
+}).mouseenter(function() {
+    showmod(this, 'fade');
+}).mouseleave(function() {
+    showmod(this, 'reset');
+});
+var $mt = $('#modtable').find('.modrow');
+$mt.click(function() {
+    showconf(this, 'bold');
+}).mouseenter(function() {
+    showconf(this, 'fade');
+}).mouseleave(function() {
+    showconf(this, 'reset');
+});
+
 var boldItem = false;
+var revList = false;
 
-function showmod(e, action) {
-    var list = $(e).attr('data-modlist');
-    list = list.split(',');
-    if (action === 'bold') {
-        $(boldItem).removeClass("slx-bold");
-        if (boldItem === e) {
-            action = 'fade';
-            boldItem = false;
+function showpre(e, action) {
+    if (boldItem && action !== 'bold') return 'reset';
+    if (boldItem) {
+        if (e === boldItem) action = 'fade';
+        boldItem = false;
+    }
+    $mt.removeClass("slx-bold slx-fade");
+    $ct.removeClass("slx-bold slx-fade");
+    return action;
+}
+
+function buildRevList() {
+    revList = {};
+    $ct.each(function() {
+        var elem = $(this);
+        var cid = elem.data('id')+'';
+        var list = (elem.data('modlist')+'').split(',');
+        for (var i = 0; i < list.length; ++i) {
+            if (!revList[list[i]]) revList[list[i]] = [];
+            revList[list[i]].push(cid);
         }
-    } else if (boldItem !== false) {
-        return;
+    });
+}
+
+function showconf(e, action) {
+    action = showpre(e, action);
+    if (action === 'reset') return;
+    var $e = $(e);
+    if (!revList) buildRevList();
+    var mid = $e.data('id')+'';
+    var list = revList[mid];
+    if (list && list.length > 0) $ct.each(function() {
+        var elem = $(this);
+        var cid = elem.data('id')+'';
+        if (list.indexOf(cid) === -1)
+            elem.addClass('slx-fade');
+        else if (action === 'bold')
+            elem.addClass('slx-bold');
+    }); else $ct.addClass('slx-fade');
+    if (action === 'bold') {
+        boldItem = e;
+        $e.addClass("slx-bold");
     }
-    $('.modrow').each(function () {
+}
+
+function showmod(e, action) {
+    action = showpre(e, action);
+    if (action === 'reset') return;
+    var $e = $(e);
+    var list = ($e.data('modlist')+'').split(',');
+    $mt.each(function () {
         var elem = $(this);
-        elem.removeClass("slx-fade slx-bold");
-        if (action === 'reset')
-            return;
-        if (action === 'bold' && list.indexOf(elem.attr('data-id')) !== -1)
-            elem.addClass("slx-bold");
-        if (list.indexOf(elem.attr('data-id')) === -1)
+        if (list.indexOf(elem.data('id')+'') === -1)
             elem.addClass("slx-fade");
+        else if (action === 'bold')
+            elem.addClass("slx-bold");
     });
     if (action === 'bold') {
         boldItem = e;
-        $(e).addClass("slx-bold");
+        $e.addClass("slx-bold");
     }
 }