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

3 files changed, 74 insertions, 21 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");
     }
 }
 
diff --git a/modules-available/sysconfig/templates/list-configs.html b/modules-available/sysconfig/templates/list-configs.html
index eb67d7a3..205317b8 100644
--- a/modules-available/sysconfig/templates/list-configs.html
+++ b/modules-available/sysconfig/templates/list-configs.html
@@ -21,7 +21,7 @@
 				<table id="conftable" class="slx-table table-hover" style="width:100%">
 					{{#configs}}
 					<tr>
-						<td data-modlist="{{modlist}}" class="slx-pointer" onclick="showmod(this, 'bold')" onmouseover="showmod(this, 'fade')" onmouseout="showmod(this, 'reset')" width="100%">
+						<td data-id="{{configid}}" data-modlist="{{modlist}}" class="confrow slx-pointer" width="100%">
 							<table class="slx-ellipsis"><tr><td>{{config}}</td></tr></table>
 						</td>
 						<td>
@@ -120,4 +120,4 @@
 		</div>
 	</div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/modules-available/sysconfig/templates/list-modules.html b/modules-available/sysconfig/templates/list-modules.html
index f15814f2..a55253ec 100644
--- a/modules-available/sysconfig/templates/list-modules.html
+++ b/modules-available/sysconfig/templates/list-modules.html
@@ -12,7 +12,7 @@
 					{{#modules}}
 					<tr>
 						<td class="badge text-nowrap">{{moduleType}}</td>
-						<td data-id="{{id}}" class="modrow" width="100%"><table class="slx-ellipsis"><tr><td>{{title}}</td></tr></table></td>
+						<td data-id="{{id}}" class="modrow slx-pointer" width="100%"><table class="slx-ellipsis"><tr><td>{{title}}</td></tr></table></td>
 						<td class="text-nowrap">
 							{{#allowDownload}}
 							<button class="btn btn-default btn-xs" name="list" value="{{id}}" title="{{lang_show}}"><span class="glyphicon glyphicon-eye-open"></span></button>