Create compatibility with WP Grid Builder

That makes sense! I noticed it had Search & Filter Pro compatibility, and plans for FacetWP, hence the question.

Anyway, I’ve been tinkering with it for the last couple of days to make it work myself, and it does!

document.addEventListener('DOMContentLoaded', function() {
    const container = document.querySelector('.wpgb-viewport');

    function getQueryParamFromURL() {
        const urlParams = new URLSearchParams(window.location.search);
        for (const [key, value] of urlParams) {
            if (key.startsWith('_') && key.length > 1) {
                return value;
            }
        }
        return '';  // Returns empty if no matching param is found
    }

    let lastSearchTerm = '';
    let lastHeight = container.style.height;

    function highlightText(force = false) {
        const searchTerm = getQueryParamFromURL();
        if (!searchTerm || (searchTerm === lastSearchTerm && !force)) return;

        lastSearchTerm = searchTerm;
        const elementsToMark = container.querySelectorAll('.wpgb-card');
        const instance = new Mark(elementsToMark);
        instance.unmark({
            done: function() {
                instance.mark(searchTerm, {
                    element: 'mark',
                    className: 'highlight'
                });
            }
        });
    }

    const observer = new MutationObserver(mutations => {
        mutations.forEach(mutation => {
            if (mutation.attributeName === 'style') {
                let newHeight = container.style.height;
                if (newHeight !== lastHeight) {
                    lastHeight = newHeight;
                    highlightText(true);
                }
            }
        });
    });

    observer.observe(container, {
        attributes: true,
        attributeFilter: ['style']
    });

    highlightText(); // Initial call to highlight any existing content
});

$searchTerm = '';
foreach ($_GET as $key => $value) {
    if (strpos($key, '_') === 0 && strlen($key) > 1) {
        $searchTerm = sanitize_text_field($value);
            break;
    }
}

wp_localize_script('wpgb-highlight-script', 'wpgbParams', array(
    'searchTerm' => $searchTerm
));

Hi there,

I’ve made it a separate plugin for now, so no worries about anything being overwritten. It only utilizes mark.js, not the added functionalities added by hlst-extend, so better integration is definitely possible. The plugin folder is wp-grid-builder and the main file is wp-grid-builder.php. I can send you a copy of the plugin if that helps?