kodi/webmanager-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SHIFT-CMD-F zoek functionaliteit toegevoegd

Browse Source
This commit is contained in:
kodi
2026-03-12 11:22:24 +01:00
parent 8c2fbfef74
commit 6f8f884d75
20 changed files with 688 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/html/app.js
+146
View File
@@ -8,6 +8,7 @@ let state = {
visibleItems: [],
currentRowIndex: -1,
selectionAnchorIndex: null,
pendingSelectionPath: null,
},
right: {
currentPath: "/Volumes",
@@ -17,6 +18,7 @@ let state = {
visibleItems: [],
currentRowIndex: -1,
selectionAnchorIndex: null,
pendingSelectionPath: null,
},
},
activePane: "left",
@@ -46,6 +48,11 @@ let settingsState = {
activeTab: "general",
logsLoaded: false,
};
let searchState = {
pane: "left",
path: "/Volumes",
query: "",
};
const THEME_STORAGE_KEY = "webmanager-theme";
function preferredTheme() {
@@ -199,6 +206,17 @@ function settingsElements() {
};
}
function searchElements() {
return {
overlay: document.getElementById("search-modal"),
closeButton: document.getElementById("search-close-btn"),
context: document.getElementById("search-context"),
input: document.getElementById("search-input"),
error: document.getElementById("search-error"),
results: document.getElementById("search-results"),
};
}
async function apiRequest(method, url, body) {
const options = { method, headers: {} };
if (body !== undefined) {
@@ -724,6 +742,16 @@ async function loadBrowsePane(pane) {
model.selectedItem = model.selectedItems.length > 0 ? model.selectedItems[model.selectedItems.length - 1] : null;
}
if (model.pendingSelectionPath) {
const pendingIndex = visibleItems.findIndex((item) => !item.isParent && item.path === model.pendingSelectionPath);
if (pendingIndex >= 0) {
const pendingItem = visibleItems[pendingIndex];
model.currentRowIndex = pendingIndex;
setSingleSelectionAtIndex(pane, selectedEntryFromItem(pendingItem), pendingIndex);
}
model.pendingSelectionPath = null;
}
renderPaneItems(pane);
scrollCurrentRowIntoView(pane);
setStatus(`Loaded ${pane}: ${data.path}`);
@@ -1382,6 +1410,96 @@ function closeVideoViewer() {
video.player.load();
}
function isSearchOpen() {
return !searchElements().overlay.classList.contains("hidden");
}
function closeSearch() {
const elements = searchElements();
elements.overlay.classList.add("hidden");
elements.error.textContent = "";
}
function renderSearchResults(items) {
const elements = searchElements();
elements.results.innerHTML = "";
if (!Array.isArray(items) || items.length === 0) {
const empty = document.createElement("div");
empty.className = "popup-meta";
empty.textContent = "No matches found.";
elements.results.append(empty);
return;
}
for (const item of items) {
const row = document.createElement("button");
row.type = "button";
row.className = "search-result";
row.onclick = () => activateSearchResult(item);
const name = document.createElement("div");
name.className = "search-result-name";
name.textContent = item.name;
const path = document.createElement("div");
path.className = "search-result-path";
path.textContent = item.parent_path;
const meta = document.createElement("div");
meta.className = "search-result-meta";
meta.textContent = `${item.type} · ${item.root}`;
row.append(name, path, meta);
elements.results.append(row);
}
}
function activateSearchResult(item) {
const pane = state.activePane;
closeSearch();
if (item.type === "directory") {
navigateTo(pane, item.path);
return;
}
paneState(pane).pendingSelectionPath = item.path;
navigateTo(pane, item.parent_path);
}
function openSearch() {
const pane = state.activePane;
const elements = searchElements();
searchState.pane = pane;
searchState.path = paneState(pane).currentPath;
searchState.query = "";
elements.context.textContent = `Searching under: ${searchState.path}`;
elements.input.value = "";
elements.error.textContent = "";
elements.results.innerHTML = "";
elements.overlay.classList.remove("hidden");
elements.input.focus();
elements.input.select();
}
async function submitSearch() {
const elements = searchElements();
const query = elements.input.value.trim();
searchState.query = query;
elements.error.textContent = "";
elements.results.innerHTML = "";
try {
const data = await apiRequest("GET", `/api/search?${new URLSearchParams({
path: searchState.path,
query,
}).toString()}`);
renderSearchResults(data.items);
if (data.truncated) {
elements.error.textContent = "Result limit reached. Showing first matches.";
}
} catch (err) {
elements.error.textContent = err.message;
}
}
function setSettingsTab(tab) {
const elements = settingsElements();
settingsState.activeTab = tab === "logs" ? "logs" : "general";
@@ -1686,6 +1804,19 @@ function clearSelectionForActivePane() {
}
function handleKeyboardShortcuts(event) {
if (isSearchOpen()) {
if (event.key === "Escape") {
event.preventDefault();
closeSearch();
return;
}
if (event.key === "Enter") {
event.preventDefault();
submitSearch();
return;
}
return;
}
if (isRenamePopupOpen()) {
if (event.key === "Escape") {
event.preventDefault();
@@ -1760,6 +1891,13 @@ function handleKeyboardShortcuts(event) {
return;
}
const isSearchShortcut = event.key.toLowerCase() === "f" && event.shiftKey && !event.altKey && (event.metaKey || event.ctrlKey);
if (isSearchShortcut) {
event.preventDefault();
openSearch();
return;
}
if (actionShortcutHandled(event)) {
event.preventDefault();
return;
@@ -1893,6 +2031,14 @@ function setupEvents() {
}
};
const search = searchElements();
search.closeButton.onclick = closeSearch;
search.overlay.onclick = (event) => {
if (event.target === search.overlay) {
closeSearch();
}
};
const wildcard = wildcardPopupElements();
wildcard.cancelButton.onclick = closeWildcardPopup;
wildcard.applyButton.onclick = submitWildcardPopup;
webui/html/index.html
+12
View File
@@ -99,6 +99,18 @@
</div>
</div>
<div id="search-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="search-title">
<div class="popup-card search-card">
<button id="search-close-btn" class="viewer-close" type="button" aria-label="Close search">X</button>
<h3 id="search-title">Search</h3>
<div id="search-context" class="popup-meta"></div>
<label for="search-input" class="popup-label">Query</label>
<input id="search-input" class="search-input" type="text" autocomplete="off" placeholder="Enter at least 3 characters">
<div id="search-error" class="error"></div>
<div id="search-results" class="search-results"></div>
</div>
</div>
<div id="wildcard-popup" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="wildcard-popup-title">
<div class="popup-card">
<h3 id="wildcard-popup-title">Wildcard Select</h3>
webui/html/style.css
+48
View File
@@ -524,6 +524,54 @@ button:disabled {
border: 1px solid var(--color-border);
}
.search-card {
width: min(680px, calc(100vw - 32px));
}
.search-input {
width: 100%;
}
.search-results {
display: grid;
gap: 8px;
max-height: 320px;
overflow: auto;
margin-top: 10px;
}
.search-result {
display: grid;
gap: 2px;
width: 100%;
text-align: left;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-elevated);
}
.search-result:hover {
border-color: var(--color-active-border);
}
.search-result-name {
font-weight: 600;
color: var(--color-text);
}
.search-result-path {
color: var(--color-muted);
font-size: 0.9rem;
}
.search-result-meta {
color: var(--color-muted);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.settings-card {
position: relative;
width: min(760px, calc(100vw - 32px));