JLC Parts Category Filter

jlcparts-category-filter.js

// ==UserScript==
// @name         JLC Parts Category Filter
// @namespace    https://yaqwsx.github.io/jlcparts/#/
// @version      2024-07-29
// @description  Add a category filter to the excellent JLC Parts Thing
// @author       James Sleeman < [email protected] >
// @match        https://yaqwsx.github.io/jlcparts/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=github.io
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function addCategoryFilter()
    {
        var newDiv = document.createElement('div');
        newDiv.className = 'w-full flex p-2';
        newDiv.innerHTML = '<label class="flex-none block py-1 mr-2">Filter Categories:</label><input type="text" class="block flex-1 bg-white appearance-none border-2 border-gray-500 rounded w-full py-1 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" value=""> (text or /regexp/)';
        var insertBefore = document.querySelector('#category-select').parentElement.nextSibling;
        insertBefore.parentElement.insertBefore(newDiv, insertBefore);

        newDiv.querySelector('input[type=text]').onkeyup = function()
        {
            var search     = newDiv.querySelector('input[type=text]').value;

            // No or blank search matches all
            if(!search.length || search.match(/^\s*$/))
            {
                search = /./;
            }
            // Literal RegExp in the search /foo.*bar/
            else if(search.match(/^\//))
            {
                search = new RegExp(search.replace(/^\/(.*)\/(.*)/, '$1'), search.replace(/^\/(.*)\/(.*)/, '$2'));
            }
            // Plaintext string in the search
            else
            {
                search = new RegExp(search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
            }

            console.log(search);

            var allSelects = [... document.querySelector('#category-select').parentElement.parentElement.querySelectorAll('select')];
            allSelects.forEach(function(s){
                var hasOption = false;
                var allOptions = [... s.querySelectorAll('option')];
                allOptions.forEach(function(o){
                    if(o.text.match(search))
                    {
                        o.style.visibility = 'visible';
                        o.style.display = '';
                        hasOption = true;
                    }
                    else
                    {
                        o.style.visibility = 'hidden';
                        o.style.display = 'none';
                    }
                });

                if(!hasOption)
                {
                    s.parentElement.style.display = 'none';
                }
                else
                {
                    s.parentElement.style.display = '';
                }
            });
        }
    }

    window.setTimeout(addCategoryFilter,1000);

    // Your code here...
})();