☰

ModularGrid Manufacturer Exception Filter

Add brand exclusion filtering to ModularGrid module browser

// ==UserScript==
// @name         ModularGrid Manufacturer Exception Filter
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Add brand exclusion filtering to ModularGrid module browser
// @author       Your name
// @match        https://modulargrid.net/e/modules/browser*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    const SELECTORS = {
        MARKETPLACE: '#SearchMarketplace',
        VENDOR: '#SearchVendor',
        SUBMIT_BOX: '.submit-box',
        CHECKBOXES: '#form-search .grid.last-row .input.cb',
        MODULES: '.box-module',
        VENDOR_LINK: '.lnk-vendor',
        MODULE_COUNT: '.browser .count',
        RESET_BUTTON: '#btn-reset-search',
        BRAND_EXCLUSION: '.brand-exclusion'
    };

    const STYLES = {
        CHECKBOX_CONTAINER: {
            display: 'flex',
            gap: '20px',
            marginTop: '10px'
        },
        HIDDEN_SPAN: {
            visibility: 'hidden',
            position: 'absolute',
            whiteSpace: 'nowrap'
        },
        ADDITIONAL_FILTER: {
            marginBottom: '5px'
        },
        ADDITIONAL_WRAPPER: {
            marginTop: '5px'
        }
    };

    class ModuleFilter {
        constructor() {
            this.init = this.init.bind(this);
            this.applyAllFilters = this.applyAllFilters.bind(this);
            this.resetFilters = this.resetFilters.bind(this);
            
            this.init();
        }

        init() {
            const elements = this.getRequiredElements();
            if (!elements) return;

            const { marketplaceContainer, submitBox, checkboxes } = elements;
            
            const exclusionContainer = this.createMainContainer();
            const additionalFiltersWrapper = this.createAdditionalFiltersWrapper();
            const mainFilter = this.createMainFilter(additionalFiltersWrapper);
            
            exclusionContainer.appendChild(this.createLabel());
            exclusionContainer.appendChild(mainFilter);
            exclusionContainer.appendChild(additionalFiltersWrapper);

            this.insertFilter(exclusionContainer, marketplaceContainer);
            this.setupCheckboxes(checkboxes, submitBox);
            this.setupResetButton();
        }

        appendElements(parent, elements) {
            elements.forEach(element => {
                if (element) parent.appendChild(element);
            });
        }

        getRequiredElements() {
            const marketplaceSelect = document.querySelector(SELECTORS.MARKETPLACE);
            const marketplaceContainer = marketplaceSelect?.closest('.input.select');
            const submitBox = document.querySelector(SELECTORS.SUBMIT_BOX);
            const checkboxes = Array.from(document.querySelectorAll(SELECTORS.CHECKBOXES));

            if (!marketplaceContainer || !submitBox || !checkboxes.length) {
                console.warn('Required elements not found');
                return null;
            }

            return { marketplaceContainer, submitBox, checkboxes };
        }

        createMainContainer() {
            const container = document.createElement('div');
            container.className = 'input select';
            return container;
        }

        createLabel() {
            const label = document.createElement('label');
            label.textContent = 'Exclude Manufacturer';
            return label;
        }

        createAdditionalFiltersWrapper() {
            const wrapper = document.createElement('div');
            Object.assign(wrapper.style, STYLES.ADDITIONAL_WRAPPER);
            return wrapper;
        }

        createMainFilter(additionalFiltersWrapper) {
            const inputAppend = document.createElement('div');
            inputAppend.className = 'input input-append';

            const select = this.createDropdown();
            const addButton = this.createButton('+', () => this.addNewFilter(additionalFiltersWrapper));

            inputAppend.appendChild(select);
            inputAppend.appendChild(addButton);
            this.adjustSelectWidth(select, { min: 100, max: 300, exact: null });
            select.addEventListener('change', () => this.applyAllFilters());

            return inputAppend;
        }

        createDropdown() {
            const select = document.createElement('select');
            select.className = 'brand-exclusion';

            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.text = '-';
            select.appendChild(defaultOption);

            const manufacturerSelect = document.querySelector(SELECTORS.VENDOR);
            if (manufacturerSelect) {
                Array.from(manufacturerSelect.options)
                    .filter(opt => opt.value !== '')
                    .forEach(opt => {
                        const option = document.createElement('option');
                        option.value = opt.value;
                        option.text = opt.text;
                        select.appendChild(option);
                    });
            }

            return select;
        }

        createButton(text, onClick) {
            const button = document.createElement('button');
            button.textContent = text;
            button.className = 'btn';
            button.type = 'button';
            
            button.addEventListener('click', (e) => {
                try {
                    onClick(e);
                } catch (error) {
                    console.warn('Button click handler failed:', error);
                }
            });
            
            return button;
        }

        addNewFilter(container) {
            const inputAppend = document.createElement('div');
            inputAppend.className = 'input input-append';
            Object.assign(inputAppend.style, STYLES.ADDITIONAL_FILTER);

            const select = this.createDropdown();
            const removeButton = this.createButton('×', () => {
                inputAppend.remove();
                this.applyAllFilters();
            });

            inputAppend.appendChild(select);
            inputAppend.appendChild(removeButton);
            container.appendChild(inputAppend);

            this.adjustSelectWidth(select, { min: 100, max: 300, exact: null });
            select.addEventListener('change', () => this.applyAllFilters());
        }

        adjustSelectWidth(select, { min = 100, max = 300, exact = null } = {}) {
            const span = document.createElement('span');
            Object.assign(span.style, { ...STYLES.HIDDEN_SPAN, font: window.getComputedStyle(select).font });
            document.body.appendChild(span);

            const maxWidth = Array.from(select.options).reduce((max, option) => {
                span.textContent = option.text;
                return Math.max(max, span.offsetWidth);
            }, 0);

            span.remove();
            const calculatedWidth = Math.min(Math.max(maxWidth + 30, min), max);
            select.style.width = exact ? `${exact}px` : `${calculatedWidth}px`;
        }

        setupCheckboxes(checkboxes, submitBox) {
            const container = document.createElement('div');
            Object.assign(container.style, STYLES.CHECKBOX_CONTAINER);

            checkboxes.forEach(checkbox => {
                checkbox.remove();
                container.appendChild(checkbox);
            });

            submitBox.parentNode.insertBefore(container, submitBox.nextSibling);
        }

        setupResetButton() {
            const resetButton = document.querySelector(SELECTORS.RESET_BUTTON);
            if (!resetButton) return;

            const originalClick = resetButton.onclick;
            resetButton.onclick = (e) => {
                if (originalClick) originalClick.call(resetButton, e);
                this.resetFilters();
            };
        }

        insertFilter(filter, referenceNode) {
            referenceNode.parentNode.insertBefore(filter, referenceNode.nextSibling);
        }

        applyAllFilters() {
            const excludedBrandIds = Array.from(document.querySelectorAll(SELECTORS.BRAND_EXCLUSION))
                .map(select => select.value)
                .filter(Boolean);

            excludedBrandIds.length ? this.hideExcludedModules(excludedBrandIds) : this.showAllModules();
        }

        showAllModules() {
            document.querySelectorAll(SELECTORS.MODULES)
                .forEach(module => module.style.display = '');
            this.updateModuleCount();
        }

        hideExcludedModules(excludedBrandIds) {
            let visibleCount = 0;
            document.querySelectorAll(SELECTORS.MODULES).forEach(module => {
                const manufacturerLink = module.querySelector(SELECTORS.VENDOR_LINK);
                if (manufacturerLink) {
                    const vendorId = manufacturerLink.href.split('/').pop();
                    module.style.display = excludedBrandIds.includes(vendorId) ? 'none' : '';
                    if (module.style.display === '') visibleCount++;
                }
            });
            this.updateModuleCount();
        }

        updateModuleCount() {
            const countElement = document.querySelector(SELECTORS.MODULE_COUNT);
            if (countElement) {
                const visibleCount = document.querySelectorAll(`${SELECTORS.MODULES}[style="display: ;"]`).length;
                countElement.textContent = `${visibleCount} module${visibleCount !== 1 ? 's' : ''}`;
            }
        }

        resetFilters() {
            document.querySelectorAll(SELECTORS.BRAND_EXCLUSION)
                .forEach(filter => filter.value = '');
            this.showAllModules();
        }
    }

    function initializeFilter() {
        try {
            new ModuleFilter();
        } catch (error) {
            console.warn('ModuleFilter initialization failed:', error);
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeFilter);
    } else {
        setTimeout(initializeFilter, 100);
    }
})();