explanation

Jörg Schlötterer · Jörg Schlötterer · commit c0a06003ba92 · 2016-03-16T16:35:12.000+01:00
diff --git a/SearchResultListVis/index.html b/SearchResultListVis/index.html
@@ -9,7 +9,12 @@
     <!--<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>-->
     <title></title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
+    <style>
+         .eexcess-highlight-fade {
+             -webkit-filter: grayscale(100%);
+             opacity: 0.3;
+        }
+    </style>
 </head>
 <body>
 
diff --git a/SearchResultListVis/js/helperMethods.js b/SearchResultListVis/js/helperMethods.js
@@ -1,4 +1,5 @@
 var currentFilter;
+var dict = {};
 
 $(document).ready(function () {
 
@@ -103,6 +104,39 @@ function addIsotopeGrid(msg) {
     else {
         var $items = $(addGridResultItems(msg));
         $('.eexcess_empty_result').hide();
+        // add full result data to items
+        msg.data.data.result.forEach(function (val, idx) {
+            var item = $($items[idx]);
+            item.data('result', val);
+            val.title.split(/[ .?!-:;,]+/).forEach(function (val) {
+                val = val.toLowerCase();
+                if (val.length > 3) {
+                    if (dict[val]) {
+                        dict[val].push($($items[idx]));
+                    } else {
+                        dict[val] = [$($items[idx])];
+                    }
+                }
+            });
+            item.hover(function (e) {
+                $('.eexcess-isotope-grid-item').addClass('eexcess-highlight-fade');
+                var terms = $(this).data('result').title.split(/[ .?!-:;,]+/);
+                terms.forEach(function (val) {
+                    val = val.toLowerCase();
+                    if (dict[val]) {
+                        dict[val].forEach(function (tile) {
+                            tile.addClass('eexcess-highlight-item');
+                            tile.removeClass('eexcess-highlight-fade');
+                        });
+                    }
+                });
+                window.top.postMessage({event: 'eexcess.explanation.highlight', data: terms}, '*');
+            }, function (e) {
+                $('.eexcess-isotope-grid-item').removeClass('eexcess-highlight-item');
+                $('.eexcess-isotope-grid-item').removeClass('eexcess-highlight-fade');
+                window.top.postMessage({event: 'eexcess.explanation.unhighlight'}, '*');
+            });
+        });
 
 
         //init isotope
diff --git a/SearchResultListVis/js/msgListeners.js b/SearchResultListVis/js/msgListeners.js
@@ -29,6 +29,25 @@ window.onmessage = function (msg) {
 
         } else if (msg.data.event === 'eexcess.error') {
             $(showError(msg.data.data));
+        } else if (msg.data.event === 'eexcess.explanation.highlight') {
+            //$('.eexcess-isotope-grid-item').removeClass('eexcess-highlight-item');
+            $('.eexcess-isotope-grid-item').addClass('eexcess-highlight-fade');
+            msg.data.data.forEach(function (val) {
+                val = val.toLowerCase();
+                if (dict[val]) {
+                    dict[val].forEach(function (val2) {
+                        if (val2.is(':visible')) {
+                            val2.addClass('eexcess-highlight-item');
+                            val2.removeClass('eexcess-highlight-fade');
+                        }
+                    });
+                }
+            })
+        } else if (msg.data.event === 'eexcess.explanation.unhighlight') {
+            $('.eexcess-isotope-grid-item').removeClass('eexcess-highlight-item');
+            $('.eexcess-isotope-grid-item').removeClass('eexcess-highlight-fade');
+        } else if (msg.data.event === 'eexcess.results.filter') {
+            $('.eexcess-isotope-grid').isotope({filter: '.eexcess-highlight-item'});
         }
 
     }
