ladill-give/resources/js/ladill-search-shortcut.js

function isEditableTarget(element) {
    if (!(element instanceof HTMLElement)) {
        return false;
    }

    const tag = element.tagName;

    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
        return true;
    }

    return element.isContentEditable;
}

function isVisibleInput(input) {
    if (!(input instanceof HTMLElement)) {
        return false;
    }

    const style = window.getComputedStyle(input);

    return style.display !== 'none'
        && style.visibility !== 'hidden'
        && style.opacity !== '0';
}

function findSearchInput() {
    const marked = [...document.querySelectorAll('[data-ladill-search-input]')];
    const visibleMarked = marked.find(isVisibleInput);

    if (visibleMarked) {
        return visibleMarked;
    }

    if (marked.length > 0) {
        return marked[0];
    }

    return document.querySelector('[x-data*="topbarSearch"] input');
}

function focusSearchInput() {
    const input = findSearchInput();

    if (!input) {
        const fallbackUrl = document.body?.dataset?.ladillSearchUrl;

        if (fallbackUrl) {
            window.location.href = fallbackUrl;
        }

        return false;
    }

    if (!isVisibleInput(input)) {
        const fallbackUrl = document.body?.dataset?.ladillSearchUrl;

        if (fallbackUrl) {
            window.location.href = fallbackUrl;

            return true;
        }
    }

    input.focus();

    if (input instanceof HTMLInputElement && (input.type === 'text' || input.type === 'search')) {
        input.select();
    }

    return true;
}

export function registerLadillSearchShortcut() {
    if (window.__ladillSearchShortcutRegistered) {
        return;
    }

    window.__ladillSearchShortcutRegistered = true;

    document.addEventListener('keydown', (event) => {
        if (event.key !== '/' && event.code !== 'Slash') {
            return;
        }

        if (event.ctrlKey || event.metaKey || event.altKey) {
            return;
        }

        if (isEditableTarget(document.activeElement)) {
            return;
        }

        event.preventDefault();
        focusSearchInput();
    });
}