Add toolbar

Revadike · Jan 8, 2025 · a6f4240 · a6f4240
1 parent 8941d56
commit a6f4240
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 2 deletions.
diff --git a/css/content.css b/css/content.css
@@ -21,4 +21,67 @@
 .swi-block>span>a {
     cursor: help;
     text-decoration: none;
+}
+
+.swi-toolbar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #1b2838;
+    color: #c7d5e0;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    z-index: 9999;
+    border-top: 1px solid #000;
+}
+
+.swi-toolbar-section {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 0 10px;
+    border-right: 1px solid #2a475e;
+}
+
+.swi-toolbar-section:last-child {
+    border-right: none;
+}
+
+.swi-toolbar button {
+    background: #2a475e;
+    border: none;
+    color: #c7d5e0;
+    padding: 5px 10px;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.swi-toolbar button:hover {
+    background: #386589;
+}
+
+.swi-toolbar .icon-filter {
+    cursor: pointer;
+    opacity: 1;
+    transition: opacity 0.2s;
+}
+
+.swi-toolbar .icon-filter.filtered {
+    opacity: 0.5;
+}
+
+.swi-toolbar .depth-slider {
+    width: 100px;
+}
+
+.swi-toolbar .close-button {
+    margin-left: auto;
+    font-weight: bold;
+}
+
+.swi-hidden {
+    display: none !important;
 }
diff --git a/css/popup.css b/css/popup.css
@@ -35,7 +35,7 @@
 body {
     background: #171d25;
     height: 500px;
-    width: 400px;
+    width: 500px;
 }
 
 svg {
@@ -204,6 +204,10 @@ select {
     background: linear-gradient(to bottom, rgb(138, 33, 33) 5%, rgb(92, 23, 23) 95%) !important;
 }
 
+.button_margin {
+    margin: 0 14px;
+}
+
 .text_header {
     font-size: 25px;
     font-weight: bold;

diff --git a/popup.html b/popup.html
@@ -4,7 +4,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Steam Web Integration Settings</title>
-    <link rel="stylesheet" href="/css/popup.css">
+    <link rel="stylesheet" href="/css/popup.css?t=1736348458147">
     <link rel="stylesheet" href="/css/fontawesome.min.css">
     <link rel="stylesheet" href="/css/solid.min.css">
     <script type="application/javascript" src="scripts/jscolor.min.js"></script>
@@ -22,6 +22,7 @@
         <button id="run" class="button_base buttonDisable"><span>Run</span></button>
         <button id="clear" class="button_base buttonDisable"><span>Clear</span></button>
         <button id="reload" class="button_base buttonDisable"><span>Reload</span></button>
+        <button id="tools" class="button_base button_secondary button_margin"><span>Tools</span></button>
         <button data-modal="resetmodal" title="The good old factory reset." class="button_base button_danger"><span>Reset</span></button>
       </div>
     </div>

diff --git a/scripts/background.js b/scripts/background.js
@@ -289,6 +289,9 @@ chrome.contextMenus.onClicked.addListener((info, tab) => {
         case "clear-swi":
             chrome.tabs.sendMessage(tab.id, { "action": "clearSWI" });
             break;
+        case "show-tools":
+            chrome.tabs.sendMessage(tab.id, { "action": "showTools" });
+            break;
         case "add-to-blacklist":
             addToBlacklist(tab.url);
             break;
@@ -316,3 +319,8 @@ chrome.contextMenus.create({
     "title":    "Add to whitelist/blacklist",
     "contexts": ["page"],
 });
+chrome.contextMenus.create({
+    "id":       "show-tools",
+    "title":    "Show tools",
+    "contexts": ["page"],
+});
diff --git a/scripts/content.js b/scripts/content.js
@@ -355,4 +355,169 @@ async function init() {
     }
 }
 
+function applyFilters(activeFilters, depth) {
+    document.querySelectorAll(".swi-hidden").forEach((node) => node.classList.remove("swi-hidden"));
+    document.querySelectorAll(".swi-block").forEach((block) => {
+        const shouldHide = [...block.childNodes].some((node) => {
+            const classes = node.querySelector(".swi").classList;
+            return [...activeFilters].some((filter) => classes.contains(`fa-${filter}`));
+        });
+
+        let target = block;
+        for (let i = 0; i < depth; i++) {
+            if (target.parentNode) {
+                target = target.parentNode;
+            }
+        }
+
+        if (shouldHide) {
+            target.classList.add("swi-hidden");
+        }
+    });
+}
+
+function createToolbar(settings) {
+    const toolbar = document.createElement("div");
+    toolbar.className = "swi-toolbar";
+
+    // Filter section
+    const filterSection = document.createElement("div");
+    filterSection.className = "swi-toolbar-section";
+
+    // Create icon filters
+    const iconConfigs = [
+        { "name": "Owned", "color": settings.ownedColor, "icon": settings.ownedIcon },
+        { "name": "Unowned", "color": settings.unownedColor, "icon": settings.unownedIcon },
+        { "name": "Wishlist", "color": settings.wishlistColor, "icon": settings.wishlistIcon },
+        { "name": "Followed", "color": settings.followedColor, "icon": settings.followedIcon },
+        { "name": "Ignored", "color": settings.ignoredColor, "icon": settings.ignoredIcon },
+        { "name": "DLC", "color": settings.dlcColor, "icon": settings.dlcIcon },
+        { "name": "Decommissioned", "color": settings.decommissionedColor, "icon": settings.decommissionedIcon },
+        { "name": "Limited", "color": settings.limitedColor, "icon": settings.limitedIcon },
+        { "name": "Cards", "color": settings.cardColor, "icon": settings.cardIcon },
+        { "name": "Bundle", "color": settings.bundleColor, "icon": settings.bundleIcon },
+    ];
+
+    const activeFilters = new Set();
+
+    // Depth slider
+    const depthSlider = document.createElement("input");
+    depthSlider.type = "range";
+    depthSlider.min = "0";
+    depthSlider.max = "10";
+    depthSlider.value = "0";
+    depthSlider.className = "depth-slider";
+    depthSlider.title = "Filter Depth";
+
+    depthSlider.addEventListener("input", () => {
+        applyFilters(activeFilters, depthSlider.value);
+    });
+
+    filterSection.appendChild(depthSlider);
+    toolbar.appendChild(filterSection);
+
+    iconConfigs.forEach(({ name, color, icon }) => {
+        const iconSpan = document.createElement("span");
+        iconSpan.className = "icon-filter";
+        iconSpan.innerHTML = `<i class="swi fa-solid fa-${icon}" style="color: ${color}"></i>`;
+        iconSpan.title = name;
+
+        iconSpan.addEventListener("click", () => {
+            iconSpan.classList.toggle("filtered");
+            if (iconSpan.classList.contains("filtered")) {
+                activeFilters.add(icon);
+            } else {
+                activeFilters.delete(icon);
+            }
+            applyFilters(activeFilters, depthSlider.value);
+        });
+
+        filterSection.appendChild(iconSpan);
+    });
+
+    // Blacklist section
+    const blacklistSection = document.createElement("div");
+    blacklistSection.className = "swi-toolbar-section";
+
+    const blacklistButton = document.createElement("button");
+    blacklistButton.textContent = settings.whiteListMode ? "Add/Remove from Whitelist" : "Add/Remove from Blacklist";
+    blacklistButton.addEventListener("click", async() => {
+        const isBlacklisted = settings.blackList.split("\n").some((url) => location.href.includes(url.trim()));
+        if (isBlacklisted) {
+            settings.blackList = settings.blackList.split("\n")
+                .filter((url) => !location.href.includes(url.trim()))
+                .join("\n");
+            console.log({ settings });
+            await chrome.storage.local.set({ "swi_settings": settings });
+            chrome.runtime.sendMessage({ "action": "runSWI" });
+        } else {
+            settings.blackList += `\n${location.href}`;
+            console.log({ settings });
+            await chrome.storage.local.set({ "swi_settings": settings });
+            chrome.runtime.sendMessage({ "action": "clearSWI" });
+        }
+    });
+
+    blacklistSection.appendChild(blacklistButton);
+    toolbar.appendChild(blacklistSection);
+
+    // Copy section
+    const copySection = document.createElement("div");
+    copySection.className = "swi-toolbar-section";
+
+    const copyAppsButton = document.createElement("button");
+    copyAppsButton.textContent = "Copy Apps";
+    copyAppsButton.addEventListener("click", () => {
+        const appIds = [...document.querySelectorAll("[data-appid]")]
+            .map((el) => el.dataset.appid)
+            .join(",");
+        navigator.clipboard.writeText(appIds);
+        copyAppsButton.textContent = "Copied!";
+        setTimeout(() => {
+            copyAppsButton.textContent = "Copy Apps";
+        }, 1000);
+    });
+
+    const copySubsButton = document.createElement("button");
+    copySubsButton.textContent = "Copy Subs";
+    copySubsButton.addEventListener("click", () => {
+        const subIds = [...document.querySelectorAll("[data-subid]")]
+            .map((el) => el.dataset.subid)
+            .join(",");
+        navigator.clipboard.writeText(subIds);
+        copySubsButton.textContent = "Copied!";
+        setTimeout(() => {
+            copySubsButton.textContent = "Copy Subs";
+        }, 1000);
+    });
+
+    copySection.appendChild(copyAppsButton);
+    copySection.appendChild(copySubsButton);
+    toolbar.appendChild(copySection);
+
+    // Close button
+    const closeButton = document.createElement("button");
+    closeButton.textContent = "X";
+    closeButton.className = "close-button";
+    closeButton.addEventListener("click", () => toolbar.remove());
+
+    toolbar.appendChild(closeButton);
+
+    return toolbar;
+}
+
+// Add message listener for showTools action
+chrome.runtime.onMessage.addListener((message) => {
+    if (message.action === "showTools") {
+        const existingToolbar = document.querySelector(".swi-toolbar");
+        if (existingToolbar) {
+            existingToolbar.remove();
+        } else {
+            chrome.runtime.sendMessage({ "action": "getSettings" }).then((settings) => {
+                document.body.appendChild(createToolbar(settings));
+            });
+        }
+    }
+});
+
 init();
diff --git a/scripts/popup.js b/scripts/popup.js
@@ -195,6 +195,15 @@ document.addEventListener("DOMContentLoaded", async() => {
         chrome.runtime.sendMessage({ "action": "clearSWI" });
     });
 
+    document.getElementById("tools").addEventListener("click", () => {
+        chrome.tabs.query({
+            "active":        true,
+            "currentWindow": true,
+        }, (tabs) => {
+            chrome.tabs.sendMessage(tabs[0].id, { "action": "showTools" });
+        });
+    });
+
     document.getElementById("factoryReset").addEventListener("click", async() => {
         await factoryReset();
         location.reload();