Add previews for filtered items

script.js

@@ -36,7 +36,7 @@ function handleItem(item, price) {
                     if (ignorable_accounts.includes(steam_id)) {
                         if (!ignored_accounts.includes(steam_id)) {
                             var ignore_accounts = $('#ignored-accounts');
-                            ignore_accounts.append('<a href="https://next.backpack.tf/profiles/' + steam_id + '">' + steam_name + '</a>; ');
+                            ignore_accounts.append(getHiddenAccountLink(steam_id, steam_name) + '; ');
                             ignore_accounts.fadeIn();
                             ignored_accounts.push(steam_id);
                         }
@@ -92,16 +92,25 @@ function handleAccount(steam_id, steam_name) {
 }
 
 function getHiddenAccountLink(steam_id, steam_name) {
-    return '<a href="https://next.backpack.tf/profiles/' + steam_id + '">' + steam_name + '</a>; ';
+    return '<a href="https://next.backpack.tf/profiles/' + steam_id + '">' + steam_name + '</a>';
+}
+
+function previewFilteredItem() {
+    $('li', $(this)).fadeIn(100)
+}
+
+function hideFilteredItem() {
+    $('li', $(this)).fadeOut(100)
 }
 
 function handleHTML(steam_id, steam_name, html_string) {
     var html = $.parseHTML(html_string);
     var filtered_item_count = 0;
+    var filtered_item_previews = [];
     var decaled_items = $('div.decal', html);
     if (decaled_items.length == 0) {
         var empty_accounts = $('#empty-accounts');
-        empty_accounts.append(getHiddenAccountLink(steam_id, steam_name));
+        empty_accounts.append(getHiddenAccountLink(steam_id, steam_name) + '; ');
         empty_accounts.fadeIn();
         return false;
     }
@@ -112,18 +121,26 @@ function handleHTML(steam_id, steam_name, html_string) {
         var is_strange = parent.hasClass('q-440-11');
         var is_uncraftable = parent.hasClass('nocraft');
         var is_price_in_keys = $('.bottom-right span', parent).text().includes('key');
-        if (is_strange || is_uncraftable || is_price_in_keys) {
-            filtered_item_count++;
-            return;
-        }
         var url = "https://next.backpack.tf/item/" + parent.attr('data-id');
         var a = $('<a href="' + url + '"></a>');
         a.append(parent);
+        if (is_strange || is_uncraftable || is_price_in_keys) {
+            filtered_item_count++;
+            parent.addClass('filtered-item');
+            a.on("mouseenter", previewFilteredItem).on("mouseleave", hideFilteredItem)
+            a.append(filtered_item_count);
+            var separator = '';
+            if (filtered_item_previews.length) {
+                separator = ', ';
+            }
+            filtered_item_previews.push(separator, a)
+            return;
+        }
         inventory.append(a);
     });
     if (filtered_item_count) {
-        var link = getHiddenAccountLink(steam_id, steam_name + ' (' + filtered_item_count + ')');
+        var link = getHiddenAccountLink(steam_id, steam_name);
-        $('#filtered-accounts').append(link);
+        $('#filtered-accounts').append(link, ' (', filtered_item_previews, '); ');
         $('#filtered-accounts').fadeIn();
     }
     var item_count = inventory.children().length - 1;
@@ -152,5 +169,5 @@ function handleHTML(steam_id, steam_name, html_string) {
 
 $(document).ready(function () {
     handleAccounts();
-    fetchAccounts();
+    //fetchAccounts();
 });

style.css

@@ -99,6 +99,14 @@ li {
     margin-top: 3px;
 }
 
+.filtered-item {
+    color: #eee;
+    position: absolute;
+    margin-left: -64px;
+    margin-top: 30px;
+    display: none;
+}
+
 a,
 a:link,
 a:visited,