From 9736451166faed5425563c0f2af54c94823af62f Mon Sep 17 00:00:00 2001
From: Abhorrent_Anger <abhorrentanger@cock.li>
Date: Thu, 21 Mar 2024 21:06:09 +0200
Subject: [PATCH] Add previews for filtered items

---
 script.js | 39 ++++++++++++++++++++++++++++-----------
 style.css | 10 +++++++++-
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/script.js b/script.js
index 7445b22..2717e73 100644
--- a/script.js
+++ b/script.js
@@ -36,11 +36,11 @@ 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);
                         }
-                        
+
                     } else if (!(steam_id in checkable_accounts)) {
                         handleAccount(steam_id, steam_name);
                         checkable_accounts[steam_id] = steam_name;
@@ -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 + ')');
-        $('#filtered-accounts').append(link);
+        var link = getHiddenAccountLink(steam_id, steam_name);
+        $('#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();
 });
\ No newline at end of file
diff --git a/style.css b/style.css
index 3f20453..6802784 100644
--- a/style.css
+++ b/style.css
@@ -68,7 +68,7 @@ li {
 }
 
 .q-440-11,
-.q-440-11 .item-icon ,
+.q-440-11 .item-icon,
 .q-440-11 .bottom-right {
     background-color: rgb(110, 56, 26);
     border-color: rgb(144, 73, 34);
@@ -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,