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

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

Browse source
This commit is contained in:
Vanessa 2025-05-23 12:29:38 +08:00
parent 1efd9f5711
commit d031a8fdab
2 changed files with 138 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

102
app/src/mobile/menu/search.ts
View file

@ -47,16 +47,17 @@ const replace = (element: Element, config: Config.IUILayoutTabSearchConfig, isAl
return;
}
saveKeyList("replaceKeys", replaceInputElement.value);
let currentLiElement: HTMLElement = searchListElement.querySelector(".b3-list-item--focus");
const currentLiElement: HTMLElement = searchListElement.querySelector(".b3-list-item--focus");
if (!currentLiElement) {
return;
}
loadElement.classList.remove("fn__none");
loadElement.nextElementSibling.classList.add("fn__none");
const currentId = currentLiElement.getAttribute("data-node-id");
fetchPost("/api/search/findReplace", {
k: config.method === 0 ? getKeyByLiElement(currentLiElement) : (document.querySelector("#toolbarSearch") as HTMLInputElement).value,
r: replaceInputElement.value,
ids: isAll ? [] : [currentLiElement.getAttribute("data-node-id")],
ids: isAll ? [] : [currentId],
types: config.types,
method: config.method,
replaceTypes: config.replaceTypes,
@ -73,41 +74,27 @@ const replace = (element: Element, config: Config.IUILayoutTabSearchConfig, isAl
return;
}
if (isAll) {
updateSearchResult(config, element);
updateSearchResult(config, element, false);
return;
}
reloadProtyle(window.siyuan.mobile.editor.protyle, false);
let newId = currentLiElement.getAttribute("data-node-id");
if (currentLiElement.nextElementSibling) {
currentLiElement.nextElementSibling.classList.add("b3-list-item--focus");
newId = currentLiElement.nextElementSibling.getAttribute("data-node-id");
} else if (currentLiElement.previousElementSibling) {
currentLiElement.previousElementSibling.classList.add("b3-list-item--focus");
newId = currentLiElement.previousElementSibling.getAttribute("data-node-id");
}
if (config.group === 1) {
if (currentLiElement.nextElementSibling || currentLiElement.previousElementSibling) {
currentLiElement.remove();
} else {
const nextDocElement = currentLiElement.parentElement.nextElementSibling || currentLiElement.parentElement.previousElementSibling.previousElementSibling?.previousElementSibling;
if (nextDocElement) {
nextDocElement.nextElementSibling.firstElementChild.classList.add("b3-list-item--focus");
nextDocElement.nextElementSibling.classList.remove("fn__none");
nextDocElement.firstElementChild.firstElementChild.classList.add("b3-list-item__arrow--open");
}
currentLiElement.parentElement.previousElementSibling.remove();
currentLiElement.parentElement.remove();
if (config.group === 1 && !newId) {
const nextDocElement = currentLiElement.parentElement.nextElementSibling || currentLiElement.parentElement.previousElementSibling.previousElementSibling?.previousElementSibling;
if (nextDocElement) {
newId = nextDocElement.nextElementSibling.firstElementChild.getAttribute("data-node-id");
}
} else {
currentLiElement.remove();
}
currentLiElement = searchListElement.querySelector(".b3-list-item--focus");
if (!currentLiElement) {
searchListElement.innerHTML = `<div class="b3-list--empty">${window.siyuan.languages.emptyContent}</div>`;
return;
}
if (searchListElement.scrollTop < currentLiElement.offsetTop - searchListElement.clientHeight + 30 ||
searchListElement.scrollTop > currentLiElement.offsetTop) {
searchListElement.scrollTop = currentLiElement.offsetTop - searchListElement.clientHeight + 30;
}
updateSearchResult(config, element, false, {
currentId,
newId
});
});
};
@ -167,10 +154,16 @@ const updateConfig = (element: Element, newConfig: Config.IUILayoutTabSearchConf
window.siyuan.menus.menu.remove();
};
const onRecentBlocks = (data: IBlock[], config: Config.IUILayoutTabSearchConfig, response?: IWebSocketData) => {
const onRecentBlocks = (data: IBlock[], config: Config.IUILayoutTabSearchConfig,
response?: IWebSocketData, focusId?: {
currentId?: string,
newId?: string
}) => {
const listElement = document.querySelector("#searchList");
let resultHTML = "";
data.forEach((item: IBlock, index: number) => {
let currentData;
let newData;
data.forEach((item: IBlock) => {
const title = getNotebookName(item.box) + getDisplayName(item.hPath, false);
if (item.children) {
resultHTML += `<div class="b3-list-item">
@ -180,8 +173,16 @@ const onRecentBlocks = (data: IBlock[], config: Config.IUILayoutTabSearchConfig,
${unicode2Emoji(getNotebookIcon(item.box) || window.siyuan.storage[Constants.LOCAL_IMAGES].note, "b3-list-item__graphic", true)}
<span class="b3-list-item__text" style="color: var(--b3-theme-on-surface)">${escapeGreat(title)}</span>
</div><div>`;
item.children.forEach((childItem, childIndex) => {
resultHTML += `<div style="padding-left: 36px" data-type="search-item" class="b3-list-item${childIndex === 0 && index === 0 ? " b3-list-item--focus" : ""}" data-node-id="${childItem.id}">
item.children.forEach((childItem) => {
if (focusId) {
if (childItem.id === focusId.currentId) {
currentData = childItem;
}
if (childItem.id === focusId.newId) {
newData = childItem;
}
}
resultHTML += `<div style="padding-left: 36px" data-type="search-item" class="b3-list-item" data-node-id="${childItem.id}">
<svg class="b3-list-item__graphic"><use xlink:href="#${getIconByType(childItem.type)}"></use></svg>
${unicode2Emoji(childItem.ial.icon, "b3-list-item__graphic", true)}
<span class="b3-list-item__text">${childItem.content}</span>
@ -190,7 +191,15 @@ ${childItem.tag ? `<span class="b3-list-item__meta b3-list-item__meta--ellipsis"
});
resultHTML += "</div>";
} else {
resultHTML += `<div class="b3-list-item b3-list-item--two${index === 0 ? " b3-list-item--focus" : ""}" data-type="search-item" data-node-id="${item.id}">
if (focusId) {
if (item.id === focusId.currentId) {
currentData = item;
}
if (item.id === focusId.newId) {
newData = item;
}
}
resultHTML += `<div class="b3-list-item b3-list-item--two" data-type="search-item" data-node-id="${item.id}">
<div class="b3-list-item__first">
<svg class="b3-list-item__graphic"><use xlink:href="#${getIconByType(item.type)}"></use></svg>
${unicode2Emoji(item.ial.icon, "b3-list-item__graphic", true)}
@ -222,10 +231,31 @@ ${childItem.tag ? `<span class="b3-list-item__meta b3-list-item__meta--ellipsis"
<span class="fn__flex-center">${config.page}/${response.data.pageCount || 1}</span>`;
}
listElement.previousElementSibling.querySelector('[data-type="result"]').innerHTML = countHTML;
if (!currentData) {
currentData = newData;
}
if (!currentData && data.length > 0) {
if (data[0].children) {
currentData = data[0].children[0];
} else {
currentData = data[0];
}
}
if (currentData) {
const currentList = listElement.querySelector(`[data-node-id="${currentData.id}"]`) as HTMLElement;
if (currentList) {
currentList.classList.add("b3-list-item--focus");
currentList.scrollIntoView();
}
}
};
let toolbarSearchTimeout = 0;
export const updateSearchResult = (config: Config.IUILayoutTabSearchConfig, element: Element, rmCurrentCriteria = false) => {
export const updateSearchResult = (config: Config.IUILayoutTabSearchConfig, element: Element, rmCurrentCriteria = false,
focusId?: {
currentId?: string,
newId?: string
}) => {
clearTimeout(toolbarSearchTimeout);
toolbarSearchTimeout = window.setTimeout(() => {
if (rmCurrentCriteria) {
@ -238,7 +268,7 @@ export const updateSearchResult = (config: Config.IUILayoutTabSearchConfig, elem
const inputElement = document.getElementById("toolbarSearch") as HTMLInputElement;
if (inputElement.value === "" && (!config.idPath || config.idPath.length === 0)) {
fetchPost("/api/block/getRecentUpdatedBlocks", {}, (response) => {
onRecentBlocks(response.data, config);
onRecentBlocks(response.data, config, undefined, focusId);
loadingElement.classList.add("fn__none");
previousElement.setAttribute("disabled", "true");
nextElement.setAttribute("disabled", "true");
@ -261,7 +291,7 @@ export const updateSearchResult = (config: Config.IUILayoutTabSearchConfig, elem
orderBy: config.sort,
page: config.page,
}, (response) => {
onRecentBlocks(response.data.blocks, config, response);
onRecentBlocks(response.data.blocks, config, response, focusId);
loadingElement.classList.add("fn__none");
if (config.page < response.data.pageCount) {
nextElement.removeAttribute("disabled");

132
app/src/search/util.ts
View file

@ -1174,11 +1174,12 @@ export const replace = (element: Element, config: Config.IUILayoutTabSearchConfi
return;
}
saveKeyList("replaceKeys", replaceInputElement.value);
let currentList: HTMLElement = searchPanelElement.querySelector(".b3-list-item--focus");
const currentList: HTMLElement = searchPanelElement.querySelector(".b3-list-item--focus");
if (!currentList || currentList.dataset.type === "search-new") {
return;
}
loadElement.classList.remove("fn__none");
const currentId = currentList.getAttribute("data-node-id");
fetchPost("/api/search/findReplace", {
k: config.method === 0 ? getKeyByLiElement(currentList) : searchInputElement.value,
r: replaceInputElement.value,
@ -1188,7 +1189,7 @@ export const replace = (element: Element, config: Config.IUILayoutTabSearchConfi
groupBy: config.group,
orderBy: config.sort,
page: config.page,
ids: isAll ? [] : [currentList.getAttribute("data-node-id")],
ids: isAll ? [] : [currentId],
replaceTypes: config.replaceTypes
}, (response) => {
loadElement.classList.add("fn__none");
@ -1197,7 +1198,7 @@ export const replace = (element: Element, config: Config.IUILayoutTabSearchConfi
return;
}
if (isAll) {
inputEvent(element, config, edit, true);
inputEvent(element, config, edit, false);
return;
}
const rootId = currentList.getAttribute("data-root-id");
@ -1206,48 +1207,31 @@ export const replace = (element: Element, config: Config.IUILayoutTabSearchConfi
reloadProtyle(item.editor.protyle, false);
}
});
let newId = currentList.getAttribute("data-node-id");
if (currentList.nextElementSibling) {
currentList.nextElementSibling.classList.add("b3-list-item--focus");
newId = currentList.nextElementSibling.getAttribute("data-node-id");
} else if (currentList.previousElementSibling) {
currentList.previousElementSibling.classList.add("b3-list-item--focus");
newId = currentList.previousElementSibling.getAttribute("data-node-id");
}
if (config.group === 1) {
if (currentList.nextElementSibling || currentList.previousElementSibling) {
currentList.remove();
} else {
const nextDocElement = currentList.parentElement.nextElementSibling || currentList.parentElement.previousElementSibling.previousElementSibling?.previousElementSibling;
if (nextDocElement) {
nextDocElement.nextElementSibling.firstElementChild.classList.add("b3-list-item--focus");
nextDocElement.nextElementSibling.classList.remove("fn__none");
nextDocElement.firstElementChild.firstElementChild.classList.add("b3-list-item__arrow--open");
}
currentList.parentElement.previousElementSibling.remove();
currentList.parentElement.remove();
if (config.group === 1 && !newId) {
const nextDocElement = currentList.parentElement.nextElementSibling || currentList.parentElement.previousElementSibling.previousElementSibling?.previousElementSibling;
if (nextDocElement) {
newId = nextDocElement.nextElementSibling.firstElementChild.getAttribute("data-node-id");
}
} else {
currentList.remove();
}
currentList = searchPanelElement.querySelector(".b3-list-item--focus");
if (!currentList) {
searchPanelElement.innerHTML = `<div class="b3-list--empty">${window.siyuan.languages.emptyContent}</div>`;
edit.protyle.element.classList.add("fn__none");
element.querySelector(".search__drag").classList.add("fn__none");
return;
}
if (searchPanelElement.scrollTop < currentList.offsetTop - searchPanelElement.clientHeight + 30 ||
searchPanelElement.scrollTop > currentList.offsetTop) {
searchPanelElement.scrollTop = currentList.offsetTop - searchPanelElement.clientHeight + 30;
}
getArticle({
edit,
id: currentList.getAttribute("data-node-id"),
config,
value: searchInputElement.value,
inputEvent(element, config, edit, false, {
currentId,
newId
});
});
};
export const inputEvent = (element: Element, config: Config.IUILayoutTabSearchConfig, edit: Protyle, rmCurrentCriteria = false) => {
export const inputEvent = (element: Element, config: Config.IUILayoutTabSearchConfig,
edit: Protyle, rmCurrentCriteria = false,
focusId?: {
currentId?: string,
newId?: string
}) => {
let inputTimeout = parseInt(element.getAttribute("data-timeout") || "0");
clearTimeout(inputTimeout);
inputTimeout = window.setTimeout(() => {
@ -1308,7 +1292,7 @@ export const inputEvent = (element: Element, config: Config.IUILayoutTabSearchCo
} else {
nextElement.setAttribute("disabled", "disabled");
}
onSearch(response.data.blocks, edit, element, config);
onSearch(response.data.blocks, edit, element, config, focusId);
let text = window.siyuan.languages.findInDoc.replace("${x}", response.data.matchedRootCount).replace("${y}", response.data.matchedBlockCount);
if (response.data.docMode) {
text = window.siyuan.languages.matchDoc.replace("${x}", response.data.matchedRootCount);
@ -1337,9 +1321,15 @@ export const getAttr = (block: IBlock) => {
return attrHTML;
};
const onSearch = (data: IBlock[], edit: Protyle, element: Element, config: Config.IUILayoutTabSearchConfig) => {
const onSearch = (data: IBlock[], edit: Protyle, element: Element, config: Config.IUILayoutTabSearchConfig,
focusId?: {
currentId?: string,
newId?: string
}) => {
let resultHTML = "";
data.forEach((item, index) => {
let currentData;
let newData;
data.forEach((item) => {
const title = getNotebookName(item.box) + getDisplayName(item.hPath, false);
if (item.children) {
resultHTML += `<div class="b3-list-item">
@ -1349,8 +1339,16 @@ const onSearch = (data: IBlock[], edit: Protyle, element: Element, config: Confi
${unicode2Emoji(getNotebookIcon(item.box) || window.siyuan.storage[Constants.LOCAL_IMAGES].note, "b3-list-item__graphic", true)}
<span class="b3-list-item__text ariaLabel" style="color: var(--b3-theme-on-surface)" aria-label="${escapeAriaLabel(title)}">${escapeGreat(title)}</span>
</div><div>`;
item.children.forEach((childItem, childIndex) => {
resultHTML += `<div style="padding-left: 36px" data-type="search-item" class="b3-list-item${childIndex === 0 && index === 0 ? " b3-list-item--focus" : ""}" data-node-id="${childItem.id}" data-root-id="${childItem.rootID}">
item.children.forEach((childItem) => {
if (focusId) {
if (childItem.id === focusId.currentId) {
currentData = childItem;
}
if (childItem.id === focusId.newId) {
newData = childItem;
}
}
resultHTML += `<div style="padding-left: 36px" data-type="search-item" class="b3-list-item" data-node-id="${childItem.id}" data-root-id="${childItem.rootID}">
<svg class="b3-list-item__graphic popover__block" data-id="${childItem.id}"><use xlink:href="#${getIconByType(childItem.type)}"></use></svg>
${unicode2Emoji(childItem.ial.icon, "b3-list-item__graphic", true)}
<span class="b3-list-item__text">${childItem.content}</span>
@ -1360,7 +1358,15 @@ ${childItem.tag ? `<span class="b3-list-item__meta b3-list-item__meta--ellipsis"
});
resultHTML += "</div>";
} else {
resultHTML += `<div data-type="search-item" class="b3-list-item${index === 0 ? " b3-list-item--focus" : ""}" data-node-id="${item.id}" data-root-id="${item.rootID}">
if (focusId) {
if (item.id === focusId.currentId) {
currentData = item;
}
if (item.id === focusId.newId) {
newData = item;
}
}
resultHTML += `<div data-type="search-item" class="b3-list-item" data-node-id="${item.id}" data-root-id="${item.rootID}">
<svg class="b3-list-item__graphic popover__block" data-id="${item.id}"><use xlink:href="#${getIconByType(item.type)}"></use></svg>
${unicode2Emoji(item.ial.icon, "b3-list-item__graphic", true)}
<span class="b3-list-item__text">${item.content}</span>
@ -1370,26 +1376,25 @@ ${item.tag ? `<span class="b3-list-item__meta b3-list-item__meta--ellipsis">${it
</div>`;
}
});
if (data[0]) {
if (!currentData) {
currentData = newData;
}
if (!currentData && data.length > 0) {
if (data[0].children) {
currentData = data[0].children[0];
} else {
currentData = data[0];
}
}
if (currentData) {
edit.protyle.element.classList.remove("fn__none");
element.querySelector(".search__drag").classList.remove("fn__none");
const searchInputElement = element.querySelector("#searchInput") as HTMLInputElement;
if (data[0].children) {
getArticle({
edit,
id: data[0].children[0].id,
config,
value: searchInputElement.value,
});
} else {
getArticle({
edit,
id: data[0].id,
config,
value: searchInputElement.value,
});
}
getArticle({
edit,
id: currentData.id,
config,
value: (element.querySelector("#searchInput") as HTMLInputElement).value,
});
} else {
edit.protyle.element.classList.add("fn__none");
element.querySelector(".search__drag").classList.add("fn__none");
@ -1409,4 +1414,11 @@ ${item.tag ? `<span class="b3-list-item__meta b3-list-item__meta--ellipsis">${it
${window.siyuan.languages.emptyContent}
</span>
</div>`);
if (currentData) {
const currentList = element.querySelector(`[data-node-id="${currentData.id}"]`) as HTMLElement;
if (currentList) {
currentList.classList.add("b3-list-item--focus");
currentList.scrollIntoView();
}
}
};