1
/**
2
 * Search for settings that match the search string and highlight them.
3
 */
4
async function searchSettings() {
5
    removeHighlighting(); // Remove previous highlights
6
    const searchString = String($('#settingsSearch').val());
7
    const searchableText = $('#user-settings-block-content'); // Get the HTML block
8
    if (searchString.trim() !== '') {
9
        highlightMatchingElements(searchableText[0], searchString); // Highlight matching elements
10
    }
11
}
12

13
/**
14
 * Check if the element is a child of a header element
15
 * @param {HTMLElement | Text | Document | Comment} element Settings block HTML element
16
 * @returns {boolean} True if the element is a child of a header element, false otherwise
17
 */
18
function isParentHeader(element) {
19
    return $(element).closest('h4, h3').length > 0;
20
}
21

22
/**
23
 * Recursively highlight elements that match the search string
24
 * @param {HTMLElement | Text | Document | Comment} element Settings block HTML element
25
 * @param {string} searchString Search string
26
 */
27
function highlightMatchingElements(element, searchString) {
28
    $(element).contents().each(function () {
29
        const isTextNode = this.nodeType === Node.TEXT_NODE;
30
        const isElementNode = this.nodeType === Node.ELEMENT_NODE;
31

32
        if (isTextNode && this.nodeValue.trim() !== '' && !isParentHeader(this)) {
33
            const parentElement = $(this).parent();
34
            const elementText = this.nodeValue;
35

36
            if (elementText.toLowerCase().includes(searchString.toLowerCase())) {
37
                parentElement.addClass('highlighted'); // Add CSS class to highlight matched elements
38
            }
39
        } else if (isElementNode && !$(this).is('h4')) {
40
            highlightMatchingElements(this, searchString);
41
        }
42
    });
43
}
44

45
/**
46
 * Remove highlighting from previously highlighted elements.
47
 */
48
function removeHighlighting() {
49
    $('.highlighted').removeClass('highlighted');  // Remove CSS class from previously highlighted elements
50
}
51

52
export function initSettingsSearch() {
53
    $('#settingsSearch').on('input change', searchSettings);
54
}