☰

Better PCPartPicker

Toggle between table and grid view on PCPartPicker

// ==UserScript==
// @name         Better PCPartPicker
// @namespace    https://github.com/victornpb
// @version      0.6
// @description  Toggle between table and grid view on PCPartPicker
// @author       Victor
// @contributionURL https://www.buymeacoffee.com/vitim
// @match        https://pcpartpicker.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Function to add the toggle button to .productList__actions
    function addToggleButton() {
        const actionsContainer = document.querySelector('.nav__bottom .nav__categories');
        if (actionsContainer && !document.querySelector('#toggleGridButton')) { // Check if the button is already added
            const toggleButton = document.createElement('button');
            toggleButton.id = 'toggleGridButton';
            toggleButton.title = 'Toggle Grid View (Better PCPartPicker)';
            toggleButton.style.cssText = `
              padding: 5px 5px;
              background-color: #eda920;
              color: #000000;
              --font-size: 22px;
              font-weight: bold;
              border: none;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100px;
              margin: 5px;
            `;
             const svgIcon = `
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <rect x="1" y="1" width="6" height="6" fill="white"/>
                      <rect x="9" y="1" width="6" height="6" fill="white"/>
                      <rect x="1" y="9" width="6" height="6" fill="white"/>
                      <rect x="9" y="9" width="6" height="6" fill="white"/>
                  </svg>
              `;
              toggleButton.innerHTML = '᎒᎒᎒ Grid View';

            // Append the button to the actions container
            actionsContainer.appendChild(toggleButton);

            // Add event listener to toggle grid view
            let isGridView = false;
            toggleButton.addEventListener('click', () => {
                isGridView = !isGridView;
                if (isGridView) {
                    document.documentElement.classList.add('grid-view-active');
                } else {
                    document.documentElement.classList.remove('grid-view-active');
                }
            });
        }
    }

    // Initial styles for normal view
    GM_addStyle(`
        :root {
            --size: 128px;
        }

        table.productList--detailed tr td.td__name a .td__image {
            width: var(--size);
            height: var(--size);
        }

        .productList--detailed .tr__product .td__imageWrapper {
            width: var(--size) !important;
            height: var(--size) !important;
        }
    `);

    // Scoped CSS for grid view
    GM_addStyle(`
        .grid-view-active table {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .grid-view-active table thead {
            display: none;
        }

        .grid-view-active table tbody {
            display: contents;
        }

        .grid-view-active table .tr__product {
            position: relative;
            display: flex;
            flex-direction: column;
            border: 1px solid #ddd;
            padding: 5px;
            background-color: #f9f9f9;
            align-items: center;
            text-align: center;
        }

        .grid-view-active table .td__checkbox {
            position: absolute;
            z-index: 99999;
            left: 3px;
            top: 3px;
        }

        .grid-view-active table .td__name {
            padding: 0px;
        }

        .grid-view-active table .td__name a {
            display: flex !important;
            flex-direction: column;
        }

        .grid-view-active table .td__imageWrapper {
            width: 100%;
            margin-bottom: 10px;
        }

        .grid-view-active table .td__image {
            width: 100%;
            display: block;
        }

        .grid-view-active table .td__nameWrapper {
            margin-bottom: 10px;
            font-weight: bold;
        }

        .grid-view-active table .td__nameWrapper p {
            margin: 0;
            font-size: 1.1em;
        }

        .grid-view-active table .td__spec,
        .grid-view-active table .td__rating,
        .grid-view-active table .td__price {
            margin-bottom: 1px;
        }

        .grid-view-active {
            --size: 100%;
        }

        #partlist .partlist table tbody tr td.td__image a, #user-saved-partlists .partlist table tbody tr td.td__image a, #user-completed-builds .partlist table tbody tr td.td__image a, #user-inventory-products .partlist table tbody tr td.td__image a, #user-favorite-products .partlist table tbody tr td.td__image a, #userbuild-pick-partlist .partlist table tbody tr td.td__image a, #buildguide-view .partlist table tbody tr td.td__image a {
            width: var(--size);
            height: var(--size);
        }

        .grid-view-active .productList--detailed .tr__product .td__imageWrapper {
            width: var(--size) !important;
            height: var(--size) !important;
        }

        #partlist .partlist table tbody tr td, #user-saved-partlists .partlist table tbody tr td, #user-completed-builds .partlist table tbody tr td, #user-inventory-products .partlist table tbody tr td, #user-favorite-products .partlist table tbody tr td, #userbuild-pick-partlist .partlist table tbody tr td, #buildguide-view .partlist table tbody tr td {
            height: var(--size) !important;
        }
    `);

    // Observe DOM changes to re-add the button if necessary
    const observer = new MutationObserver(() => {
        addToggleButton();
    });

    // Start observing the body for changes
    observer.observe(document.body, { childList: true, subtree: true });

    // Initial call to add the toggle button
    addToggleButton();
})();