changelog search improvements

Signed-off-by: Vladimir Mandic <mandic00@live.com>
This commit is contained in:
Vladimir Mandic
2024-11-01 09:02:35 -04:00
parent 28efae6b2d
commit 566f98d91b
2 changed files with 9 additions and 4 deletions
+6 -2
View File
@@ -22,17 +22,20 @@ let currentElement = -1;
function changelogNavigate(found) {
const result = gradioApp().getElementById('changelog_result');
result.innerHTML = '';
const text = document.createElement('p');
const onPrev = () => {
if (currentElement > 0) {
currentElement--;
found[currentElement].scrollIntoView();
text.innerHTML = ` &nbsp search item ${currentElement + 1} of ${found.length}`;
}
};
const onNext = () => {
if (currentElement < found.length - 1) {
currentElement++;
found[currentElement].scrollIntoView();
text.innerHTML = ` &nbsp search item ${currentElement + 1} of ${found.length}`;
}
};
@@ -40,15 +43,16 @@ function changelogNavigate(found) {
prev.innerHTML = ' ⇦ ';
prev.className = 'changelog_arrow';
prev.onclick = onPrev;
prev.title = 'Search previous';
result.appendChild(prev);
const next = document.createElement('p');
next.innerHTML = ' ⇨ ';
next.className = 'changelog_arrow';
next.title = 'Search next';
next.onclick = onNext;
result.appendChild(next);
const text = document.createElement('p');
text.innerHTML = ` &nbsp found ${found.length} items`;
result.appendChild(text);
}
@@ -60,7 +64,7 @@ async function initChangelog() {
if (changelogElements.length < 100) changelogElements = getAllChildren(md);
const found = [];
for (const el of changelogElements) {
if (getText(el).toLowerCase().includes(search.value.toLowerCase())) {
if (search.value.length > 1 && getText(el).toLowerCase().includes(search.value.toLowerCase())) {
el.classList.add('changelog_highlight');
found.push(el);
} else {
+3 -2
View File
@@ -321,8 +321,9 @@ div:has(>#tab-gallery-folders) { flex-grow: 0 !important; background-color: var(
/* changelog */
#changelog_markdown { max-height: 55vh; margin-top: 1em; }
#changelog_result { display: flex; cursor: pointer; margin-left: 1em; }
.changelog_arrow { font-size: 2em; margin-right: 0.5em; }
#changelog_result { display: flex; margin-left: 1em; align-items: center; }
.changelog_arrow { font-size: 2em; padding: 0.1em; cursor: pointer; height: 1em; background-color: var(--button-secondary-background-fill); }
.changelog_arrow:hover { background-color: var(--button-primary-border-color-hover); }
.changelog_highlight { background-color: var(--color-warning); }
/* loader */