☰

FAB.com Additional Asset Filters

A Tampermonkey userscript to add additional asset filters to FAB.com (formerly the Unreal Engine Marketplace)

  1. // ==UserScript==
  2. // @name         FAB.com Additional Asset Filters
  3. // @namespace    https://github.com/Drakmyth/tampermonkey-userscripts
  4. // @version      0.2
  5. // @author       Drakmyth
  6. // @description  A Tampermonkey userscript to add additional asset filters to FAB.com (formerly the Unreal Engine Marketplace)
  7. // @homepage     https://github.com/Drakmyth/tampermonkey-userscripts
  8. // @supportURL   https://github.com/Drakmyth/tampermonkey-userscripts/issues?q=is%3Aopen+is%3Aissue+label%3Aue-marketplace-filters
  9. // @license      MIT
  10. // @match        https://www.fab.com/search*
  11. // @run-at       document-body
  12. // @grant        none
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     `use strict`;
  17.  
  18.     var hideOwned = false;
  19.  
  20.     function doControlsExist() {
  21.         var sortContainer = getSortContainer();
  22.         return sortContainer.querySelector(`.tmnky-custom-control`);
  23.     }
  24.  
  25.     function addControls() {
  26.         var hideOwnedCheckbox = createCheckbox(`Hide Owned Assets`, hideOwned, toggleHideOwned);
  27.  
  28.         var sortContainer = getSortContainer();
  29.         var onSaleCheckbox = sortContainer.querySelector(`:nth-child(4)`)
  30.  
  31.         if (onSaleCheckbox && onSaleCheckbox.parentElement === sortContainer) {
  32.             sortContainer.insertBefore(hideOwnedCheckbox, onSaleCheckbox);
  33.         }
  34.     }
  35.  
  36.     function getSortContainer() {
  37.         return document.getElementsByClassName(`fabkit-Surface-root`)[0].childNodes[0];
  38.     }
  39.  
  40.     function createCheckbox(text, initial, onChange) {
  41.         var checkboxAccordionHeaderContainer = document.createElement(`h2`);
  42.         checkboxAccordionHeaderContainer.className = `fabkit-Accordion-headerContainer tmnky-custom-control`;
  43.  
  44.         var checkboxAccordionHeader = document.createElement(`label`);
  45.         checkboxAccordionHeader.className = `fabkit-Accordion-header`;
  46.         var textElement = document.createTextNode(text);
  47.         checkboxAccordionHeader.appendChild(textElement);
  48.         checkboxAccordionHeaderContainer.appendChild(checkboxAccordionHeader);
  49.  
  50.         var checkboxAccordionHeaderRight = document.createElement(`div`);
  51.         checkboxAccordionHeaderRight.className = `fabkit-Accordion-headerRight`;
  52.         checkboxAccordionHeader.appendChild(checkboxAccordionHeaderRight);
  53.  
  54.         var checkboxSwitchRoot = document.createElement(`div`);
  55.         checkboxSwitchRoot.className = `fabkit-Switch-root fabkit-Switch--sm`;
  56.         checkboxAccordionHeaderRight.appendChild(checkboxSwitchRoot)
  57.  
  58.         var checkboxElement = document.createElement(`input`);
  59.         checkboxElement.type = `checkbox`;
  60.         checkboxElement.className = `input`;
  61.         checkboxElement.checked = initial;
  62.         checkboxElement.addEventListener(`change`, onChange);
  63.         checkboxSwitchRoot.appendChild(checkboxElement);
  64.  
  65.         var checkboxSwitchWrapperElement = document.createElement(`div`);
  66.         checkboxSwitchWrapperElement.className = `fabkit-Switch-wrapper`;
  67.         checkboxSwitchRoot.appendChild(checkboxSwitchWrapperElement);
  68.  
  69.         var checkboxSwitchHandle = document.createElement(`div`);
  70.         checkboxSwitchHandle.className = `fabkit-Switch-handle`;
  71.         checkboxSwitchWrapperElement.appendChild(checkboxSwitchHandle);
  72.  
  73.         return checkboxAccordionHeaderContainer;
  74.     }
  75.  
  76.     function getAssetContainers() {
  77.         return document.querySelectorAll(`.fabkit-ResultGrid-root>li`);
  78.     }
  79.  
  80.     function toggleHideOwned(event) {
  81.         hideOwned = event.target.checked;
  82.         onBodyChange();
  83.     }
  84.  
  85.     function isContainerOwned(container) {
  86.         var ownedLabel = container.querySelector(`div>div:nth-child(2)>div:nth-child(2)`);
  87.         return ownedLabel.innerText === `Owned`;
  88.     }
  89.  
  90.     function onBodyChange(mut) {
  91.  
  92.         if (!doControlsExist()) {
  93.             addControls();
  94.         }
  95.  
  96.         var assetContainers = getAssetContainers();
  97.  
  98.         for (let container of assetContainers) {
  99.             var isOwned = isContainerOwned(container);
  100.             if (hideOwned && isOwned) {
  101.                 container.style.display = `none`;
  102.             } else {
  103.                 container.style.display = null;
  104.             }
  105.         }
  106.     }
  107.  
  108.     var mo = new MutationObserver(onBodyChange);
  109.     mo.observe(document.body, {childList: true, subtree: true});
  110. })();