search bar for user settings panel

This commit is contained in:
RossAscends 2023-09-19 14:19:22 +09:00
parent 10f27f41d1
commit eb6e987f55
4 changed files with 74 additions and 1 deletions

View File

@ -2674,7 +2674,7 @@
<h3><span data-i18n="User Settings">User Settings</span></h3>
<div id="version_display"></div>
</div>
<div class="flex-container spaceEvenly">
<div id="user-settings-block-content" class="flex-container spaceEvenly">
<div id="UI-Theme-Block" class="flex-container flexFlowColumn wide100p">
<div id="color-picker-block" class="flex-container flexFlowColumn flexNoGap">
<div id="UI-Mode-Block">

View File

@ -0,0 +1,57 @@
export { MODULE_NAME };
const MODULE_NAME = 'settingsSearch';
async function addSettingsSearchHTML() {
const html = `
<div class="wide100p">
<div class="justifyLeft">
<textarea id="settingsSearch" class="wide100p textarea_compact margin-bot-10px" rows="1" placeholder="Search Settings"></textarea>
</div>
</div>`
$("#user-settings-block").prepend(html);
}
async function searchSettings() {
removeHighlighting(); // Remove previous highlights
let searchString = $("#settingsSearch").val();
let searchableText = $("#user-settings-block-content"); // Get the HTML block
if (searchString.trim() !== "") {
highlightMatchingElements(searchableText[0], searchString); // Highlight matching elements
}
}
function isParentHeader(element) {
return $(element).closest('h4, h3').length > 0;
}
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);
}
});
}
function removeHighlighting() {
$(".highlighted").removeClass("highlighted"); // Remove CSS class from previously highlighted elements
}
jQuery(() => {
addSettingsSearchHTML();
$('#settingsSearch').on('input change', searchSettings);
});

View File

@ -0,0 +1,11 @@
{
"display_name": "Settings Search",
"loading_order": 15,
"requires": [],
"optional": [],
"js": "index.js",
"css": "style.css",
"author": "RossAscends",
"version": "1.0.0",
"homePage": "https://github.com/SillyTavern/SillyTavern"
}

View File

@ -0,0 +1,5 @@
.highlighted {
color: black;
background-color: yellow;
text-shadow: none !important;
}