☰

Better PCPartPicker

Toggle between table and grid view on PCPartPicker

  1. // ==UserScript==
  2. // @name         Better PCPartPicker
  3. // @namespace    https://github.com/victornpb
  4. // @version      0.6
  5. // @description  Toggle between table and grid view on PCPartPicker
  6. // @author       Victor
  7. // @contributionURL https://www.buymeacoffee.com/vitim
  8. // @match        https://pcpartpicker.com/*
  9. // @grant        GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Function to add the toggle button to .productList__actions
  16.     function addToggleButton() {
  17.         const actionsContainer = document.querySelector('.nav__bottom .nav__categories');
  18.         if (actionsContainer && !document.querySelector('#toggleGridButton')) { // Check if the button is already added
  19.             const toggleButton = document.createElement('button');
  20.             toggleButton.id = 'toggleGridButton';
  21.             toggleButton.title = 'Toggle Grid View (Better PCPartPicker)';
  22.             toggleButton.style.cssText = `
  23.               padding: 5px 5px;
  24.               background-color: #eda920;
  25.               color: #000000;
  26.               --font-size: 22px;
  27.               font-weight: bold;
  28.               border: none;
  29.               cursor: pointer;
  30.               display: flex;
  31.               align-items: center;
  32.               justify-content: center;
  33.               width: 100px;
  34.               margin: 5px;
  35.             `;
  36.              const svgIcon = `
  37.                   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  38.                       <rect x="1" y="1" width="6" height="6" fill="white"/>
  39.                       <rect x="9" y="1" width="6" height="6" fill="white"/>
  40.                       <rect x="1" y="9" width="6" height="6" fill="white"/>
  41.                       <rect x="9" y="9" width="6" height="6" fill="white"/>
  42.                   </svg>
  43.               `;
  44.               toggleButton.innerHTML = '᎒᎒᎒ Grid View';
  45.  
  46.             // Append the button to the actions container
  47.             actionsContainer.appendChild(toggleButton);
  48.  
  49.             // Add event listener to toggle grid view
  50.             let isGridView = false;
  51.             toggleButton.addEventListener('click', () => {
  52.                 isGridView = !isGridView;
  53.                 if (isGridView) {
  54.                     document.documentElement.classList.add('grid-view-active');
  55.                 } else {
  56.                     document.documentElement.classList.remove('grid-view-active');
  57.                 }
  58.             });
  59.         }
  60.     }
  61.  
  62.     // Initial styles for normal view
  63.     GM_addStyle(`
  64.         :root {
  65.             --size: 128px;
  66.         }
  67.  
  68.         table.productList--detailed tr td.td__name a .td__image {
  69.             width: var(--size);
  70.             height: var(--size);
  71.         }
  72.  
  73.         .productList--detailed .tr__product .td__imageWrapper {
  74.             width: var(--size) !important;
  75.             height: var(--size) !important;
  76.         }
  77.     `);
  78.  
  79.     // Scoped CSS for grid view
  80.     GM_addStyle(`
  81.         .grid-view-active table {
  82.             display: grid;
  83.             grid-template-columns: repeat(4, 1fr);
  84.             gap: 20px;
  85.         }
  86.  
  87.         .grid-view-active table thead {
  88.             display: none;
  89.         }
  90.  
  91.         .grid-view-active table tbody {
  92.             display: contents;
  93.         }
  94.  
  95.         .grid-view-active table .tr__product {
  96.             position: relative;
  97.             display: flex;
  98.             flex-direction: column;
  99.             border: 1px solid #ddd;
  100.             padding: 5px;
  101.             background-color: #f9f9f9;
  102.             align-items: center;
  103.             text-align: center;
  104.         }
  105.  
  106.         .grid-view-active table .td__checkbox {
  107.             position: absolute;
  108.             z-index: 99999;
  109.             left: 3px;
  110.             top: 3px;
  111.         }
  112.  
  113.         .grid-view-active table .td__name {
  114.             padding: 0px;
  115.         }
  116.  
  117.         .grid-view-active table .td__name a {
  118.             display: flex !important;
  119.             flex-direction: column;
  120.         }
  121.  
  122.         .grid-view-active table .td__imageWrapper {
  123.             width: 100%;
  124.             margin-bottom: 10px;
  125.         }
  126.  
  127.         .grid-view-active table .td__image {
  128.             width: 100%;
  129.             display: block;
  130.         }
  131.  
  132.         .grid-view-active table .td__nameWrapper {
  133.             margin-bottom: 10px;
  134.             font-weight: bold;
  135.         }
  136.  
  137.         .grid-view-active table .td__nameWrapper p {
  138.             margin: 0;
  139.             font-size: 1.1em;
  140.         }
  141.  
  142.         .grid-view-active table .td__spec,
  143.         .grid-view-active table .td__rating,
  144.         .grid-view-active table .td__price {
  145.             margin-bottom: 1px;
  146.         }
  147.  
  148.         .grid-view-active {
  149.             --size: 100%;
  150.         }
  151.  
  152.         #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 {
  153.             width: var(--size);
  154.             height: var(--size);
  155.         }
  156.  
  157.         .grid-view-active .productList--detailed .tr__product .td__imageWrapper {
  158.             width: var(--size) !important;
  159.             height: var(--size) !important;
  160.         }
  161.  
  162.         #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 {
  163.             height: var(--size) !important;
  164.         }
  165.     `);
  166.  
  167.     // Observe DOM changes to re-add the button if necessary
  168.     const observer = new MutationObserver(() => {
  169.         addToggleButton();
  170.     });
  171.  
  172.     // Start observing the body for changes
  173.     observer.observe(document.body, { childList: true, subtree: true });
  174.  
  175.     // Initial call to add the toggle button
  176.     addToggleButton();
  177. })();