From 4471bdff01158eeb41f554e6c003684bf7d2373f Mon Sep 17 00:00:00 2001 From: Vanessa Date: Wed, 24 Jan 2024 15:32:29 +0800 Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/10189 --- app/src/protyle/render/av/asset.ts | 7 +- app/src/protyle/render/av/filter.ts | 5 ++ app/src/protyle/render/av/openMenuPanel.ts | 7 +- app/src/protyle/render/av/relation.ts | 74 ++++++++++++++++++++-- app/src/util/upDownHint.ts | 19 +++--- 5 files changed, 91 insertions(+), 21 deletions(-) diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts index d7af78a76..9b785523d 100644 --- a/app/src/protyle/render/av/asset.ts +++ b/app/src/protyle/render/av/asset.ts @@ -226,8 +226,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl menu.addItem({ iconHTML: "", type: "readonly", - label: `
${window.siyuan.languages.title}
-`, + label: `${window.siyuan.languages.title}`, }); } else { menu.addItem({ @@ -296,10 +295,10 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle menu.addItem({ iconHTML: "", type: "readonly", - label: `
${window.siyuan.languages.link}
+ label: `${window.siyuan.languages.link}
-
${window.siyuan.languages.title}
+${window.siyuan.languages.title} `, }); const rect = target.getBoundingClientRect(); diff --git a/app/src/protyle/render/av/filter.ts b/app/src/protyle/render/av/filter.ts index 9b7869072..a777cbe5d 100644 --- a/app/src/protyle/render/av/filter.ts +++ b/app/src/protyle/render/av/filter.ts @@ -270,6 +270,7 @@ export const setFilter = async (options: { } menu.addItem({ iconHTML: "", + type: "readonly", label: `` }); if (filterType === "select" || filterType === "mSelect") { @@ -308,21 +309,25 @@ export const setFilter = async (options: { } menu.addItem({ iconHTML: "", + type: "readonly", label: `` }); } else if (filterType === "number") { menu.addItem({ iconHTML: "", + type: "readonly", label: `` }); } else if (["date", "updated", "created"].includes(filterType)) { const dateValue = options.filter.value ? options.filter.value[filterType as "date"] : null; menu.addItem({ iconHTML: "", + type: "readonly", label: `` }); menu.addItem({ iconHTML: "", + type: "readonly", label: `` }); } diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index 80fa22db0..e85e1882c 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -117,7 +117,12 @@ export const openMenuPanel = (options: { setPosition(menuElement, cellRect.left, cellRect.bottom, cellRect.height); }, Constants.TIMEOUT_LOAD); // 等待加载 } else if (options.type === "relation") { - bindRelationEvent({menuElement, cellElements: options.cellElements}); + bindRelationEvent({ + menuElement, + cellElements: options.cellElements, + protyle: options.protyle, + blockElement: options.blockElement + }); } else if (options.type === "rollup") { bindRollupEvent({protyle: options.protyle, data, menuElement}); } diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts index 91ba31859..0e92557f0 100644 --- a/app/src/protyle/render/av/relation.ts +++ b/app/src/protyle/render/av/relation.ts @@ -214,11 +214,24 @@ const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string, } }; +const filterItem = (listElement: Element, key: string) => { + Array.from(listElement.children).forEach((item: HTMLElement) => { + if (item.dataset.id) { + if (item.textContent.includes(key)) { + item.classList.remove("fn__none"); + } else { + item.classList.add("fn__none") + } + } + }) +} export const bindRelationEvent = (options: { menuElement: HTMLElement, + protyle: IProtyle, + blockElement: Element, cellElements: HTMLElement[] }) => { - const hasIds = options.menuElement.textContent.split(","); + const hasIds = options.menuElement.firstElementChild.getAttribute("data-cell-ids").split(","); fetchPost("/api/av/renderAttributeView", { id: options.menuElement.firstElementChild.getAttribute("data-av-id"), }, response => { @@ -247,11 +260,51 @@ export const bindRelationEvent = (options: { html += genSelectItemHTML("unselect", item.id, item.cells[cellIndex].value.isDetached, item.cells[cellIndex].value.block.content || "Untitled"); } }); - options.menuElement.innerHTML = `
${selectHTML || genSelectItemHTML("empty")} - -${html || genSelectItemHTML("empty")}
`; + options.menuElement.innerHTML = `
+
+
${avData.name}
+ +
+
+
+ ${selectHTML || genSelectItemHTML("empty")} + + ${html || genSelectItemHTML("empty")} +
`; const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect(); - setPosition( options.menuElement, cellRect.left, cellRect.bottom, cellRect.height); + setPosition(options.menuElement, cellRect.left, cellRect.bottom, cellRect.height); + options.menuElement.querySelector(".b3-menu__items .b3-menu__item").classList.add("b3-menu__item--current"); + const inputElement = options.menuElement.querySelector("input") + inputElement.focus(); + const listElement = options.menuElement.querySelector(".b3-menu__items") + inputElement.addEventListener("keydown", (event) => { + event.stopPropagation(); + if (event.isComposing) { + return; + } + upDownHint(listElement, event, "b3-menu__item--current"); + const currentElement = options.menuElement.querySelector(".b3-menu__item--current") as HTMLElement; + if (event.key === "Enter" && currentElement && currentElement.getAttribute("data-type") === "setRelationCell") { + setRelationCell(options.protyle, options.blockElement as HTMLElement, currentElement, options.cellElements); + event.preventDefault(); + event.stopPropagation(); + } else if (event.key === "Escape") { + options.menuElement.parentElement.remove(); + event.preventDefault(); + event.stopPropagation(); + } + }) + inputElement.addEventListener("input", (event: InputEvent) => { + if (event.isComposing) { + return; + } + filterItem(listElement, inputElement.value); + event.stopPropagation(); + }) + inputElement.addEventListener("compositionend", (event) => { + event.stopPropagation(); + filterItem(listElement, inputElement.value); + }) }); }; @@ -268,7 +321,15 @@ export const getRelationHTML = (data: IAV, cellElements?: HTMLElement[]) => { cellElements[0].querySelectorAll("span").forEach((item) => { ids += `${item.getAttribute("data-id")},`; }); - return `${ids}`; + return `
+
+
 
+ +
+
+
+ +
`; } else { return ""; } @@ -320,6 +381,7 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty")); } } + menuElement.firstElementChild.classList.add("b3-menu__item--current") } updateCellsValue(protyle, nodeElement, newValue, cellElements); }; diff --git a/app/src/util/upDownHint.ts b/app/src/util/upDownHint.ts index 35bc760a2..2e2d364fe 100644 --- a/app/src/util/upDownHint.ts +++ b/app/src/util/upDownHint.ts @@ -1,3 +1,7 @@ +const isNormalItem = (currentHintElement: HTMLElement, className: string) => { + return currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className) +} + export const upDownHint = (listElement: Element, event: KeyboardEvent, classActiveName = "b3-list-item--focus") => { let currentHintElement: HTMLElement = listElement.querySelector("." + classActiveName); if (!currentHintElement) { @@ -10,15 +14,13 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi currentHintElement.classList.remove(classActiveName); currentHintElement = currentHintElement.nextElementSibling as HTMLElement; - while (currentHintElement && - (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) { + while (currentHintElement && isNormalItem(currentHintElement, className)) { currentHintElement = currentHintElement.nextElementSibling as HTMLElement; } if (!currentHintElement) { currentHintElement = listElement.children[0] as HTMLElement; - while (currentHintElement && - (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) { + while (currentHintElement && isNormalItem(currentHintElement, className)) { currentHintElement = currentHintElement.nextElementSibling as HTMLElement; } } @@ -37,8 +39,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi currentHintElement.classList.remove(classActiveName); currentHintElement = currentHintElement.previousElementSibling as HTMLElement; - while (currentHintElement && - (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) { + while (currentHintElement && isNormalItem(currentHintElement, className)) { currentHintElement = currentHintElement.previousElementSibling as HTMLElement; } @@ -64,8 +65,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi event.stopPropagation(); currentHintElement.classList.remove(classActiveName); currentHintElement = listElement.children[0] as HTMLElement; - while (currentHintElement && - (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) { + while (currentHintElement && isNormalItem(currentHintElement, className)) { currentHintElement = currentHintElement.nextElementSibling as HTMLElement; } if (!currentHintElement) { @@ -79,8 +79,7 @@ export const upDownHint = (listElement: Element, event: KeyboardEvent, classActi event.stopPropagation(); currentHintElement.classList.remove(classActiveName); currentHintElement = listElement.children[listElement.children.length - 1] as HTMLElement; - while (currentHintElement && - (currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className))) { + while (currentHintElement && isNormalItem(currentHintElement, className)) { currentHintElement = currentHintElement.previousElementSibling as HTMLElement; } if (!currentHintElement) {