Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-30 04:05:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Vanessa 2023-11-20 11:12:02 +08:00
parent ec4da7cde7
commit c8ea33c5ce
13 changed files with 372 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -133,223 +133,18 @@ export const genCellValue = (colType: TAVCol, value: string | any) => {
type: colType,
mAsset: value as IAVCellAssetValue[]
};
} else if (colType === "checkbox") {
cellValue = {
type: colType,
checkbox: {
checked: value ? true : false
}
};
}
}
return cellValue;
};
const calcItem = (options: {
menu: Menu,
protyle: IProtyle,
label: string,
operator: string,
oldOperator: string,
colId: string,
avId: string
}) => {
options.menu.addItem({
iconHTML: "",
label: options.label,
click() {
transaction(options.protyle, [{
action: "setAttrViewColCalc",
avID: options.avId,
id: options.colId,
data: {
operator: options.operator
}
}], [{
action: "setAttrViewColCalc",
avID: options.avId,
id: options.colId,
data: {
operator: options.oldOperator
}
}]);
}
});
};
export const openCalcMenu = (protyle: IProtyle, calcElement: HTMLElement) => {
const blockElement = hasClosestBlock(calcElement);
if (!blockElement) {
return;
}
const rowElement = hasClosestByClassName(calcElement, "av__row--footer");
if (!rowElement) {
return;
}
rowElement.classList.add("av__row--show");
const menu = new Menu("av-calc", () => {
rowElement.classList.remove("av__row--show");
});
if (menu.isOpen) {
return;
}
const type = calcElement.dataset.dtype as TAVCol;
const colId = calcElement.dataset.colId;
const avId = blockElement.dataset.avId;
const oldOperator = calcElement.dataset.operator;
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "",
label: window.siyuan.languages.calcOperatorNone
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count all",
label: window.siyuan.languages.calcOperatorCountAll
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count values",
label: window.siyuan.languages.calcOperatorCountValues
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count unique values",
label: window.siyuan.languages.calcOperatorCountUniqueValues
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count empty",
label: window.siyuan.languages.calcOperatorCountEmpty
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Count not empty",
label: window.siyuan.languages.calcOperatorCountNotEmpty
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Percent empty",
label: window.siyuan.languages.calcOperatorPercentEmpty
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Percent not empty",
label: window.siyuan.languages.calcOperatorPercentNotEmpty
});
if (["number", "template"].includes(type)) {
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Sum",
label: window.siyuan.languages.calcOperatorSum
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Average",
label: window.siyuan.languages.calcOperatorAverage
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Median",
label: window.siyuan.languages.calcOperatorMedian
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Min",
label: window.siyuan.languages.calcOperatorMin
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Max",
label: window.siyuan.languages.calcOperatorMax
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Range",
label: window.siyuan.languages.calcOperatorRange
});
} else if (["date", "created", "updated"].includes(type)) {
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Earliest",
label: window.siyuan.languages.calcOperatorEarliest
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Latest",
label: window.siyuan.languages.calcOperatorLatest
});
calcItem({
menu,
protyle,
colId,
avId,
oldOperator,
operator: "Range",
label: window.siyuan.languages.calcOperatorRange
});
}
const calcRect = calcElement.getBoundingClientRect();
menu.open({x: calcRect.left, y: calcRect.bottom, h: calcRect.height});
};
export const cellScrollIntoView = (blockElement: HTMLElement, cellElement: Element, onlyHeight = true) => {
const cellRect = cellElement.getBoundingClientRect();
if (!onlyHeight) {
@ -427,7 +222,7 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
}
cellRect = cellElements[0].getBoundingClientRect();
let html = "";
const style = `style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px;width:${Math.max(cellRect.width, 58)}px;height: ${cellRect.height}px"`;
const style = `style="position:absolute;left: ${cellRect.left}px;top: ${cellRect.top}px;width:${Math.max(cellRect.width, 25)}px;height: ${cellRect.height}px"`;
if (["text", "url", "email", "phone", "block", "template"].includes(type)) {
html = `<textarea ${style} class="b3-text-field">${cellElements[0].firstElementChild.textContent}</textarea>`;
} else if (type === "number") {
@ -439,6 +234,8 @@ export const popTextCell = (protyle: IProtyle, cellElements: HTMLElement[], type
openMenuPanel({protyle, blockElement, type: "asset", cellElements});
} else if (type === "date") {
openMenuPanel({protyle, blockElement, type: "date", cellElements});
} else if (type === "checkbox") {
updateCellValue(protyle, type, cellElements);
}
if (!hasClosestByClassName(cellElements[0], "custom-attr")) {
cellElements[0].classList.add("av__cell--select");
@ -548,22 +345,28 @@ const updateCellValue = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElem
const cellId = item.getAttribute("data-id");
const colId = item.getAttribute("data-col-id");
const inputValue: {
content: string | number,
isNotEmpty?: boolean
} = {
content: (avMaskElement.querySelector(".b3-text-field") as HTMLInputElement).value
};
content?: string | number,
isNotEmpty?: boolean,
checked?: boolean,
} = {};
const oldValue: {
content: string | number,
isNotEmpty?: boolean
} = {
content: type === "block" ? item.firstElementChild.textContent.trim() : item.textContent.trim()
};
content?: string | number,
isNotEmpty?: boolean,
checked?: boolean,
} = {};
if (type === "number") {
oldValue.content = parseFloat(oldValue.content as string);
oldValue.isNotEmpty = typeof oldValue.content === "number" && !isNaN(oldValue.content);
inputValue.content = parseFloat(inputValue.content as string);
inputValue.isNotEmpty = typeof inputValue.content === "number" && !isNaN(inputValue.content);
} else if (type === "checkbox") {
const useElement = item.querySelector("use")
inputValue.checked = useElement.getAttribute("xlink:href") === "#iconUncheck"
oldValue.checked = !inputValue.checked
useElement.setAttribute("xlink:href", inputValue.checked ? "#iconCheck" : "#iconUncheck")
} else {
inputValue.content = (avMaskElement.querySelector(".b3-text-field") as HTMLInputElement).value
oldValue.content = type === "block" ? item.firstElementChild.textContent.trim() : item.textContent.trim()
}
if (objEquals(inputValue, oldValue)) {
return;
@ -607,6 +410,6 @@ const updateCellValue = (protyle: IProtyle, type: TAVCol, cellElements: HTMLElem
focusBlock(blockElement);
}
setTimeout(() => {
avMaskElement.remove();
avMaskElement?.remove();
});
};