migrate

public/scripts/setting-search.js

@@ -0,0 +1,54 @@
+/**
+ * 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
+}
+
+export function initSettingsSearch() {
+    $('#settingsSearch').on('input change', searchSettings);
+}