Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2025-12-22 17:40:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🎨 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
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>`; <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; break;
case "checkbox": 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; break;
case "template": case "template":
html = `<div class="fn__flex-1">${value.template.content}</div>`; html = `<div class="fn__flex-1">${value.template.content}</div>`;
@ -67,6 +67,11 @@ export const genAVValueHTML = (value: IAVCellValue) => {
<span class="fn__space"></span> <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>`; <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; 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; return html;
}; };
@ -117,34 +122,36 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
}); });
element.innerHTML = html; element.innerHTML = html;
element.addEventListener("click", (event) => { element.addEventListener("click", (event) => {
const target = event.target as HTMLElement; let target = event.target as HTMLElement;
const dateElement = hasClosestByAttribute(target, "data-type", "date"); while (target && !element.isSameNode(target)) {
if (dateElement) { const type = target.getAttribute("data-type");
popTextCell(protyle, [dateElement], "date"); if (type === "date") {
event.stopPropagation(); popTextCell(protyle, [target], "date");
event.preventDefault(); event.stopPropagation();
return; event.preventDefault();
} break
const mSelectElement = hasClosestByAttribute(target, "data-type", "select") || hasClosestByAttribute(target, "data-type", "mSelect"); } else if (type === "select" || type === "mSelect") {
if (mSelectElement) { popTextCell(protyle, [target], target.getAttribute("data-type") as TAVCol);
popTextCell(protyle, [mSelectElement], mSelectElement.getAttribute("data-type") as TAVCol); event.stopPropagation();
event.stopPropagation(); event.preventDefault();
event.preventDefault(); break
return; } else if (type === "mAsset") {
} popTextCell(protyle, [target], "mAsset");
const mAssetElement = hasClosestByAttribute(target, "data-type", "mAsset"); event.stopPropagation();
if (mAssetElement) { event.preventDefault();
popTextCell(protyle, [mAssetElement], "mAsset"); break
event.stopPropagation(); } else if (type === "checkbox") {
event.preventDefault(); popTextCell(protyle, [target], "checkbox");
return; event.stopPropagation();
} event.preventDefault();
const checkboxElement = hasClosestByAttribute(target, "data-type", "checkbox"); break
if (checkboxElement) { } else if (type === "relation") {
popTextCell(protyle, [checkboxElement], "checkbox"); popTextCell(protyle, [target], "relation");
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
return; break
}
target = target.parentElement;
} }
}); });
element.querySelectorAll(".b3-text-field--text").forEach((item: HTMLInputElement) => { 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 * as dayjs from "dayjs";
import {unicode2Emoji} from "../../../emoji"; import {unicode2Emoji} from "../../../emoji";
import {getColIconByType} from "./col"; import {getColIconByType} from "./col";
import {genAVValueHTML} from "./blockAttr";
export const getCellText = (cellElement: HTMLElement | false) => { export const getCellText = (cellElement: HTMLElement | false) => {
if (!cellElement) { 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 doOperations: IOperation[] = [];
const undoOperations: IOperation[] = []; const undoOperations: IOperation[] = [];
const avID = nodeElement.dataset.avId; const avID = nodeElement.dataset.avId;
const id = nodeElement.dataset.nodeId; const id = nodeElement.dataset.nodeId;
let text = ""; let text = "";
const cellElements: Element[] = Array.from(nodeElement.querySelectorAll(".av__cell--select")) || []; let cellElements: Element[];
if (cellElements.length === 0) { if (cElements?.length > 0) {
nodeElement.querySelectorAll(".av__row--select:not(.av__row--header)").forEach(rowElement => { cellElements = cElements;
rowElement.querySelectorAll(".av__cell").forEach(cellElement => { } else {
cellElements.push(cellElement); 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) => { cellElements.forEach((item: HTMLElement) => {
const rowElement = hasClosestByClassName(item, "av__row"); const rowElement = hasClosestByClassName(item, "av__row");
if (!rowElement) { if (!rowElement) {
return; return;
} }
const type = getTypeByCellElement(item); const type = getTypeByCellElement(item) || item.dataset.type;
if (["created", "updated", "template"].includes(type)) { if (["created", "updated", "template"].includes(type)) {
return; return;
} }
@ -527,6 +534,8 @@ export const updateCellsValue = (protyle: IProtyle, nodeElement: HTMLElement, va
}); });
if (!hasClosestByClassName(cellElements[0], "custom-attr")) { if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
updateAttrViewCellAnimation(item, cellValue); updateAttrViewCellAnimation(item, cellValue);
} else {
item.innerHTML = genAVValueHTML(cellValue)
} }
}); });
if (doOperations.length > 0) { 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; return true;
} }
if (event.key === "Backspace") { if (event.key === "Backspace") {
updateCellsValue(protyle, nodeElement); updateCellsValue(protyle, nodeElement, undefined, [selectCellElement]);
event.preventDefault(); event.preventDefault();
return true; return true;
} }

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

@ -313,7 +313,7 @@ export const openMenuPanel = (options: {
targetElement.after(sourceElement); targetElement.after(sourceElement);
} }
targetElement.classList.remove("dragover__bottom", "dragover__top"); 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; return;
} }
@ -879,7 +879,7 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "setRelationCell") { } 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.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; 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"); const menuElement = hasClosestByClassName(target, "b3-menu__items");
if (!menuElement) { if (!menuElement) {
return return
@ -302,6 +302,5 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
} }
} }
} }
updateCellsValue(protyle, nodeElement, newValue, cellElements);
updateCellsValue(protyle, nodeElement, newValue);
}; };