0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2023-12-25 00:20:51 +08:00
parent 5c53e3c9b2
commit ac3145976f
5 changed files with 58 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
app/src/protyle/render/av/blockAttr.ts
View file

@ -57,7 +57,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
<a href="tel:${value.phone.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconPhone"></use></svg></a>`;
break;
case "checkbox":
html = `<svg class="av__checkbox" style="height: 17px;"><use xlink:href="#icon${value.checkbox.checked?"Check":"Uncheck"}"></use></svg>`;
html = `<svg class="av__checkbox" style="height: 17px;"><use xlink:href="#icon${value.checkbox.checked ? "Check" : "Uncheck"}"></use></svg>`;
break;
case "template":
html = `<div class="fn__flex-1">${value.template.content}</div>`;
@ -67,6 +67,11 @@ export const genAVValueHTML = (value: IAVCellValue) => {
<span class="fn__space"></span>
<a href="mailto:${value.email.content}" target="_blank" aria-label="${window.siyuan.languages.openBy}" class="block__icon block__icon--show fn__flex-center b3-tooltips__w b3-tooltips"><svg><use xlink:href="#iconEmail"></use></svg></a>`;
break;
case "relation":
value.relation?.blockIDs.forEach((item, index) => {
html += `<span class="av__celltext--url" style="margin-right: 8px" data-id="${item}">${value.relation?.contents[index]}</span>`;
});
break;
}
return html;
};
@ -117,34 +122,36 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
});
element.innerHTML = html;
element.addEventListener("click", (event) => {
const target = event.target as HTMLElement;
const dateElement = hasClosestByAttribute(target, "data-type", "date");
if (dateElement) {
popTextCell(protyle, [dateElement], "date");
event.stopPropagation();
event.preventDefault();
return;
}
const mSelectElement = hasClosestByAttribute(target, "data-type", "select") || hasClosestByAttribute(target, "data-type", "mSelect");
if (mSelectElement) {
popTextCell(protyle, [mSelectElement], mSelectElement.getAttribute("data-type") as TAVCol);
event.stopPropagation();
event.preventDefault();
return;
}
const mAssetElement = hasClosestByAttribute(target, "data-type", "mAsset");
if (mAssetElement) {
popTextCell(protyle, [mAssetElement], "mAsset");
event.stopPropagation();
event.preventDefault();
return;
}
const checkboxElement = hasClosestByAttribute(target, "data-type", "checkbox");
if (checkboxElement) {
popTextCell(protyle, [checkboxElement], "checkbox");
event.stopPropagation();
event.preventDefault();
return;
let target = event.target as HTMLElement;
while (target && !element.isSameNode(target)) {
const type = target.getAttribute("data-type");
if (type === "date") {
popTextCell(protyle, [target], "date");
event.stopPropagation();
event.preventDefault();
break
} else if (type === "select" || type === "mSelect") {
popTextCell(protyle, [target], target.getAttribute("data-type") as TAVCol);
event.stopPropagation();
event.preventDefault();
break
} else if (type === "mAsset") {
popTextCell(protyle, [target], "mAsset");
event.stopPropagation();
event.preventDefault();
break
} else if (type === "checkbox") {
popTextCell(protyle, [target], "checkbox");
event.stopPropagation();
event.preventDefault();
break
} else if (type === "relation") {
popTextCell(protyle, [target], "relation");
event.stopPropagation();
event.preventDefault();
break
}
target = target.parentElement;
}
});
element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => {

25
app/src/protyle/render/av/cell.ts
View file

@ -9,6 +9,7 @@ import {focusBlock} from "../../util/selection";
import * as dayjs from "dayjs";
import {unicode2Emoji} from "../../../emoji";
import {getColIconByType} from "./col";
import {genAVValueHTML} from "./blockAttr";
export const getCellText = (cellElement: HTMLElement | false) => {
if (!cellElement) {
@ -479,27 +480,33 @@ const updateCellValueByInput = (protyle: IProtyle, type: TAVCol, cellElements: H
});
};
export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, value: string | any = "") => {
export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, value: string | any = "", cElements?: HTMLElement[]) => {
const doOperations: IOperation[] = [];
const undoOperations: IOperation[] = [];
const avID = nodeElement.dataset.avId;
const id = nodeElement.dataset.nodeId;
let text = "";
const cellElements: Element[] = Array.from(nodeElement.querySelectorAll(".av__cell--select")) || [];
if (cellElements.length === 0) {
nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
cellElements.push(cellElement);
let cellElements: Element[];
if (cElements?.length > 0) {
cellElements = cElements;
} else {
cellElements = Array.from(nodeElement.querySelectorAll(".av__cell--select"));
if (cellElements.length === 0) {
nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => {
rowElement.querySelectorAll(".av__cell").forEach(cellElement => {
cellElements.push(cellElement);
});
});
});
}
}
cellElements.forEach((item: HTMLElement) => {
const rowElement = hasClosestByClassName(item, "av__row");
if (!rowElement) {
return;
}
const type = getTypeByCellElement(item);
const type = getTypeByCellElement(item) || item.dataset.type;
if (["created", "updated", "template"].includes(type)) {
return;
}
@ -527,6 +534,8 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va
});
if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
updateAttrViewCellAnimation(item, cellValue);
} else {
item.innerHTML = genAVValueHTML(cellValue)
}
});
if (doOperations.length > 0) {

2
app/src/protyle/render/av/keydown.ts
View file

@ -35,7 +35,7 @@ export const avKeydown = (event: KeyboardEvent, nodeElement: HTMLElement, protyl
return true;
}
if (event.key === "Backspace") {
updateCellsValue(protyle, nodeElement);
updateCellsValue(protyle, nodeElement, undefined, [selectCellElement]);
event.preventDefault();
return true;
}

4
app/src/protyle/render/av/openMenuPanel.ts
View file

@ -313,7 +313,7 @@ export const openMenuPanel = (options: {
targetElement.after(sourceElement);
}
targetElement.classList.remove("dragover__bottom", "dragover__top");
setRelationCell(options.protyle, options.blockElement as HTMLElement, sourceElement.parentElement);
setRelationCell(options.protyle, options.blockElement as HTMLElement, sourceElement.parentElement, options.cellElements);
return;
}
@ -879,7 +879,7 @@ export const openMenuPanel = (options: {
event.stopPropagation();
break;
} else if (type === "setRelationCell") {
setRelationCell(options.protyle, options.blockElement as HTMLElement, target);
setRelationCell(options.protyle, options.blockElement as HTMLElement, target, options.cellElements);
event.preventDefault();
event.stopPropagation();
break;

5
app/src/protyle/render/av/relation.ts
View file

@ -255,7 +255,7 @@ export const getRelationHTML = (data: IAV, cellElements?: HTMLElement[]) => {
}
}
export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, target: HTMLElement) => {
export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, target: HTMLElement, cellElements: HTMLElement[]) => {
const menuElement = hasClosestByClassName(target, "b3-menu__items");
if (!menuElement) {
return
@ -302,6 +302,5 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
}
}
}
updateCellsValue(protyle, nodeElement, newValue);
updateCellsValue(protyle, nodeElement, newValue, cellElements);
};