55 lines
2.0 KiB
JavaScript
55 lines
2.0 KiB
JavaScript
/**
|
|
* Search for settings that match the search string and highlight them.
|
|
*/
|
|
async function searchSettings() {
|
|
removeHighlighting(); // Remove previous highlights
|
|
const searchString = String($("#settingsSearch").val());
|
|
const searchableText = $("#user-settings-block-content"); // Get the HTML block
|
|
if (searchString.trim() !== "") {
|
|
highlightMatchingElements(searchableText[0], searchString); // Highlight matching elements
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check if the element is a child of a header element
|
|
* @param {HTMLElement | Text | Document | Comment} element Settings block HTML element
|
|
* @returns {boolean} True if the element is a child of a header element, false otherwise
|
|
*/
|
|
function isParentHeader(element) {
|
|
return $(element).closest('h4, h3').length > 0;
|
|
}
|
|
|
|
/**
|
|
* Recursively highlight elements that match the search string
|
|
* @param {HTMLElement | Text | Document | Comment} element Settings block HTML element
|
|
* @param {string} searchString Search string
|
|
*/
|
|
function highlightMatchingElements(element, searchString) {
|
|
$(element).contents().each(function () {
|
|
const isTextNode = this.nodeType === Node.TEXT_NODE;
|
|
const isElementNode = this.nodeType === Node.ELEMENT_NODE;
|
|
|
|
if (isTextNode && this.nodeValue.trim() !== "" && !isParentHeader(this)) {
|
|
const parentElement = $(this).parent();
|
|
const elementText = this.nodeValue;
|
|
|
|
if (elementText.toLowerCase().includes(searchString.toLowerCase())) {
|
|
parentElement.addClass('highlighted'); // Add CSS class to highlight matched elements
|
|
}
|
|
} else if (isElementNode && !$(this).is("h4")) {
|
|
highlightMatchingElements(this, searchString);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Remove highlighting from previously highlighted elements.
|
|
*/
|
|
function removeHighlighting() {
|
|
$(".highlighted").removeClass("highlighted"); // Remove CSS class from previously highlighted elements
|
|
}
|
|
|
|
jQuery(() => {
|
|
$('#settingsSearch').on('input change', searchSettings);
|
|
});
|