github/siyuan
4
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-05-19 02:21:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

🎨 fix https://github.com/siyuan-note/siyuan/issues/10189

Browse Source
This commit is contained in:
Vanessa 2024-01-24 15:32:29 +08:00
parent 164478def5
commit 4471bdff01
5 changed files with 91 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/src/protyle/render/av/asset.ts
View File

@ -226,8 +226,7 @@ export const editAssetItem = (protyle: IProtyle, data: IAV, cellElements: HTMLEl
menu.addItem({
iconHTML: "",
type: "readonly",
label: `<div class="b3-menu__label">${window.siyuan.languages.title}</div>
<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>`,
label: `${window.siyuan.languages.title}<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>`,
});
} else {
menu.addItem({
@ -296,10 +295,10 @@ export const addAssetLink = (protyle: IProtyle, data: IAV, cellElements: HTMLEle
menu.addItem({
iconHTML: "",
type: "readonly",
label: `<div class="b3-menu__label">${window.siyuan.languages.link}</div>
label: `${window.siyuan.languages.link}
<textarea rows="1" style="margin:4px 0;width: ${isMobile() ? "200" : "360"}px" class="b3-text-field"></textarea>
<div class="fn__hr"></div>
<div class="b3-menu__label">${window.siyuan.languages.title}</div>
${window.siyuan.languages.title}
<textarea style="width: ${isMobile() ? "200" : "360"}px;margin: 4px 0;" rows="1" class="b3-text-field"></textarea>`,
});
const rect = target.getBoundingClientRect();

5
app/src/protyle/render/av/filter.ts
View File

@ -270,6 +270,7 @@ export const setFilter = async (options: {
}
menu.addItem({
iconHTML: "",
type: "readonly",
label: `<select style="margin: 4px 0" class="b3-select fn__size200">${selectHTML}</select>`
});
if (filterType === "select" || filterType === "mSelect") {
@ -308,21 +309,25 @@ export const setFilter = async (options: {
}
menu.addItem({
iconHTML: "",
type: "readonly",
label: `<input style="margin: 4px 0" value="${value}" class="b3-text-field fn__size200">`
});
} else if (filterType === "number") {
menu.addItem({
iconHTML: "",
type: "readonly",
label: `<input style="margin: 4px 0" value="${options.filter.value?.number.isNotEmpty ? options.filter.value.number.content : ""}" class="b3-text-field fn__size200">`
});
} 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: `<input style="margin: 4px 0" value="${(dateValue.isNotEmpty || filterType !== "date") ? dayjs(dateValue.content).format("YYYY-MM-DD") : ""}" type="date" max="9999-12-31" class="b3-text-field fn__size200">`
});
menu.addItem({
iconHTML: "",
type: "readonly",
label: `<input style="margin: 4px 0" value="${dateValue.isNotEmpty2 ? dayjs(dateValue.content2).format("YYYY-MM-DD") : ""}" type="date" max="9999-12-31" class="b3-text-field fn__size200">`
});
}

7
app/src/protyle/render/av/openMenuPanel.ts
View File

@ -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});
}

70
app/src/protyle/render/av/relation.ts
View File

@ -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 = `<div class="b3-menu__items">${selectHTML || genSelectItemHTML("empty")}
options.menuElement.innerHTML = `<div class="fn__flex-column">
<div class="b3-menu__item fn__flex-column" data-type="nobg">
<div class="b3-menu__label">${avData.name}</div>
<input class="b3-text-field fn__flex-shrink"/>
</div>
<div class="fn__hr"></div>
<div class="b3-menu__items">
${selectHTML || genSelectItemHTML("empty")}
<button class="b3-menu__separator"></button>
${html || genSelectItemHTML("empty")}</div>`;
${html || genSelectItemHTML("empty")}
</div>`;
const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
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 `<span data-av-id="${colRelationData.avID}">${ids}</span>`;
return `<div data-av-id="${colRelationData.avID}" data-cell-ids="${ids}" class="fn__flex-column">
<div class="b3-menu__item fn__flex-column" data-type="nobg">
<div class="b3-menu__label">&nbsp;</div>
<input class="b3-text-field fn__flex-shrink"/>
</div>
<div class="fn__hr"></div>
<div class="b3-menu__items">
<img style="margin: 0 auto;display: block;width: 64px;height: 64px" src="/stage/loading-pure.svg">
</div>`;
} 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);
};

19
app/src/util/upDownHint.ts
View File

@ -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) {