Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-20 00:20:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

🎨 https://github.com/siyuan-note/siyuan/issues/10550

Browse source
This commit is contained in:
Vanessa 2024-03-09 11:32:26 +08:00
parent 8b1f42acea
commit 2ff5850e21
1 changed files with 13 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/src/protyle/render/av/render.ts
View file

@ -58,13 +58,16 @@ export const avRender = (element: Element, protyle: IProtyle, cb?: () => void, v
fetchPost("/api/av/setDatabaseBlockView", {id: e.dataset.nodeId, viewID}); fetchPost("/api/av/setDatabaseBlockView", {id: e.dataset.nodeId, viewID});
e.setAttribute(Constants.CUSTOM_SY_AV_VIEW, newViewID); e.setAttribute(Constants.CUSTOM_SY_AV_VIEW, newViewID);
} }
let searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
const isSearching = searchInputElement && document.activeElement.isSameNode(searchInputElement);
const query = searchInputElement?.value || "";
fetchPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), { fetchPost(created ? "/api/av/renderHistoryAttributeView" : (snapshot ? "/api/av/renderSnapshotAttributeView" : "/api/av/renderAttributeView"), {
id: e.getAttribute("data-av-id"), id: e.getAttribute("data-av-id"),
created, created,
snapshot, snapshot,
pageSize: parseInt(e.dataset.pageSize) || undefined, pageSize: parseInt(e.dataset.pageSize) || undefined,
viewID: newViewID, viewID: newViewID,
query: (e.querySelector('.b3-text-field[data-type="av-search"]') as HTMLInputElement)?.value || "" query
}, (response) => { }, (response) => {
const data = response.data.view as IAVTable; const data = response.data.view as IAVTable;
if (!e.dataset.pageSize) { if (!e.dataset.pageSize) {
@ -175,7 +178,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
e.firstElementChild.outerHTML = `<div class="av__container" style="--av-background:${e.style.backgroundColor || "var(--b3-theme-background)"}"> e.firstElementChild.outerHTML = `<div class="av__container" style="--av-background:${e.style.backgroundColor || "var(--b3-theme-background)"}">
<div class="av__header"> <div class="av__header">
<div class="fn__flex av__views"> <div class="fn__flex av__views${isSearching ? " av__views--show" : ""}">
<div class="layout-tab-bar fn__flex"> <div class="layout-tab-bar fn__flex">
${tabHTML} ${tabHTML}
</div> </div>
@ -203,7 +206,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
<svg><use xlink:href="#iconSearch"></use></svg> <svg><use xlink:href="#iconSearch"></use></svg>
</span> </span>
<div style="position: relative"> <div style="position: relative">
<input style="width:0;padding-left: 0;padding-right: 0;" data-type="av-search" class="b3-text-field b3-text-field--text" placeholder="${window.siyuan.languages.search}"> <input style="${isSearching ? "width:128px" : "width:0;padding-left: 0;padding-right: 0;"}" data-type="av-search" class="b3-text-field b3-text-field--text" placeholder="${window.siyuan.languages.search}">
</div> </div>
<div class="fn__space"></div> <div class="fn__space"></div>
<span data-type="av-more" class="block__icon"> <span data-type="av-more" class="block__icon">
@ -271,7 +274,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
const avMaskElement = document.querySelector(".av__mask"); const avMaskElement = document.querySelector(".av__mask");
if (avMaskElement) { if (avMaskElement) {
(avMaskElement.querySelector("textarea, input") as HTMLTextAreaElement)?.focus(); (avMaskElement.querySelector("textarea, input") as HTMLTextAreaElement)?.focus();
} else if (!document.querySelector(".av__panel")) { } else if (!document.querySelector(".av__panel") && !isSearching) {
focusBlock(e); focusBlock(e);
} }
} }
@ -280,7 +283,7 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
const range = getSelection().getRangeAt(0); const range = getSelection().getRangeAt(0);
if (!hasClosestByClassName(range.startContainer, "av__title")) { if (!hasClosestByClassName(range.startContainer, "av__title")) {
const blockElement = hasClosestBlock(range.startContainer); const blockElement = hasClosestBlock(range.startContainer);
if (blockElement && e.isSameNode(blockElement)) { if (blockElement && e.isSameNode(blockElement) && !isSearching) {
focusBlock(e); focusBlock(e);
} }
} }
@ -290,7 +293,11 @@ ${cell.color ? `color:${cell.color};` : ""}">${renderCell(cell.value)}</div>`;
cb(); cb();
} }
const viewsElement = e.querySelector(".av__views") as HTMLElement; const viewsElement = e.querySelector(".av__views") as HTMLElement;
const searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement; searchInputElement = e.querySelector('[data-type="av-search"]') as HTMLInputElement;
searchInputElement.value = query;
if (isSearching) {
searchInputElement.focus();
}
searchInputElement.addEventListener("input", (event: KeyboardEvent) => { searchInputElement.addEventListener("input", (event: KeyboardEvent) => {
if (event.isComposing) { if (event.isComposing) {
return; return;