Vanessa 2024-05-27 10:25:43 +08:00
parent c4d72c16c3
commit cf4c5396ab

View file

@ -65,7 +65,7 @@ export const openSnippets = () => {
<div class="fn__flex-1"></div>
<div class="b3-form__icon">
<svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
<input data-type="css" data-action="search" type="text" placeholder="${window.siyuan.languages.enterKey} ${window.siyuan.languages.search}" class="b3-text-field b3-form__icon-input">
<input data-type="css" data-action="search" type="text" placeholder="${window.siyuan.languages.search}" class="b3-text-field b3-form__icon-input">
</div>
<div class="fn__space"></div>
<span aria-label="${window.siyuan.languages.addAttr} CSS" id="addCodeSnippetCSS" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
@ -81,7 +81,7 @@ export const openSnippets = () => {
<div class="fn__flex-1"></div>
<div class="b3-form__icon">
<svg class="b3-form__icon-icon"><use xlink:href="#iconSearch"></use></svg>
<input data-type="js" data-action="search" type="text" placeholder="${window.siyuan.languages.enterKey} ${window.siyuan.languages.search}" class="b3-text-field b3-form__icon-input">
<input data-type="js" data-action="search" type="text" placeholder="${window.siyuan.languages.search}" class="b3-text-field b3-form__icon-input">
</div>
<div class="fn__space"></div>
<span aria-label="${window.siyuan.languages.addAttr} JS" id="addCodeSnippetJS" class="b3-tooltips b3-tooltips__sw block__icon block__icon--show">
@ -162,28 +162,34 @@ export const openSnippets = () => {
}
});
dialog.element.querySelectorAll('[data-action="search"]').forEach((inputItem: HTMLInputElement) => {
inputItem.addEventListener("keydown", (event: KeyboardEvent) => {
if (event.key === "Enter" && !event.isComposing) {
fetchPost("/api/snippet/getSnippet", {
type: "all",
enabled: 2,
keyword: inputItem.value
}, (searchResponse) => {
dialog.element.querySelectorAll(`.fn__flex-1 > div > [data-type="${inputItem.dataset.type}"]`).forEach((snipeetPanel: Element) => {
snipeetPanel.classList.add("fn__none");
});
searchResponse.data.snippets.forEach((snippetItem: ISnippet) => {
if (snippetItem.type === inputItem.dataset.type) {
dialog.element.querySelector(`[data-id="${snippetItem.id}"]`).classList.remove("fn__none");
}
});
});
inputItem.addEventListener("input", (event: KeyboardEvent) => {
if (event.isComposing) {
return
}
filterSnippet(dialog, inputItem)
});
inputItem.addEventListener("compositionend", () => {
filterSnippet(dialog, inputItem)
});
});
});
};
const filterSnippet = (dialog: Dialog, inputItem: HTMLInputElement) => {
dialog.element.querySelectorAll(`.fn__flex-1 > div > [data-type="${inputItem.dataset.type}"]`).forEach((snippetPanel: Element) => {
const snippetName = snippetPanel.querySelector("input").value.toLowerCase();
const snippetContent = snippetPanel.querySelector("textarea").value.toLowerCase();
const searchValue = inputItem.value.toLowerCase();
if (!searchValue ||
(snippetName && (searchValue.includes(snippetName) || snippetName.includes(searchValue))) ||
(snippetContent && (snippetContent.includes(searchValue) || searchValue.includes(snippetContent)))) {
snippetPanel.classList.remove("fn__none");
} else {
snippetPanel.classList.add("fn__none");
}
});
}
const genSnippet = (options: ISnippet) => {
return `<div data-id="${options.id || ""}" data-type="${options.type}">
<div class="fn__hr--b"></div>