mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-05-15 08:30:42 +08:00
✨ https://github.com/siyuan-note/siyuan/issues/8895 block attr
This commit is contained in:
Vanessa
parent
435ad45cb5
commit
1f9629de65
@ -136,77 +136,6 @@ const popDateMenu = (dateElement: HTMLElement) => {
|
||||
});
|
||||
}
|
||||
|
||||
const popSelectMenu = (mSelectElement: HTMLElement) => {
|
||||
const mSelectMenu = new Menu("custom-attr-av-select", () => {
|
||||
const mSelect: { content: string, color: string }[] = [];
|
||||
let mSelectHTML = "";
|
||||
window.siyuan.menus.menu.element.querySelectorAll(".svg").forEach(item => {
|
||||
const chipElement = item.parentElement.previousElementSibling.firstElementChild as HTMLElement;
|
||||
const content = chipElement.textContent.trim();
|
||||
const color = chipElement.dataset.color;
|
||||
mSelect.push({
|
||||
content,
|
||||
color
|
||||
});
|
||||
mSelectHTML += `<span class="b3-chip b3-chip--middle" style="background-color:var(--b3-font-background${color});color:var(--b3-font-color${color})">${content}</span>`;
|
||||
});
|
||||
fetchPost("/api/av/setAttributeViewBlockAttr", {
|
||||
avID: mSelectElement.dataset.avId,
|
||||
keyID: mSelectElement.dataset.colId,
|
||||
rowID: mSelectElement.dataset.blockId,
|
||||
cellID: mSelectElement.dataset.id,
|
||||
value: {
|
||||
mSelect
|
||||
}
|
||||
});
|
||||
mSelectElement.innerHTML = mSelectHTML;
|
||||
});
|
||||
if (mSelectMenu.isOpen) {
|
||||
return;
|
||||
}
|
||||
const names: string[] = [];
|
||||
mSelectElement.querySelectorAll(".b3-chip").forEach(item => {
|
||||
names.push(item.textContent.trim());
|
||||
});
|
||||
JSON.parse(mSelectElement.dataset.options || "").forEach((item: { name: string, color: string }) => {
|
||||
mSelectMenu.addItem({
|
||||
iconHTML: "",
|
||||
label: `<span class="b3-chip" data-color="${item.color}" style="height:24px;background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
|
||||
<span class="fn__ellipsis">${item.name}</span>
|
||||
</span>`,
|
||||
accelerator: names.includes(item.name) ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : Constants.ZWSP,
|
||||
click(element) {
|
||||
const acceleratorElement = element.querySelector(".b3-menu__accelerator");
|
||||
if (mSelectElement.dataset.type === "select") {
|
||||
window.siyuan.menus.menu.element.querySelectorAll(".b3-menu__accelerator").forEach(itemElement => {
|
||||
if (itemElement.isSameNode(acceleratorElement)) {
|
||||
if (acceleratorElement.querySelector("svg")) {
|
||||
acceleratorElement.innerHTML = "";
|
||||
} else {
|
||||
acceleratorElement.innerHTML = '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>';
|
||||
}
|
||||
} else {
|
||||
itemElement.innerHTML = "";
|
||||
}
|
||||
});
|
||||
return false;
|
||||
}
|
||||
if (acceleratorElement.querySelector("svg")) {
|
||||
acceleratorElement.innerHTML = "";
|
||||
} else {
|
||||
acceleratorElement.innerHTML = '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
});
|
||||
const mSelecttRect = mSelectElement.getBoundingClientRect();
|
||||
mSelectMenu.open({
|
||||
x: mSelecttRect.left,
|
||||
y: mSelecttRect.bottom
|
||||
});
|
||||
}
|
||||
|
||||
export const renderAVAttribute = (element: HTMLElement, id: string, protyle?: IProtyle) => {
|
||||
fetchPost("/api/av/getAttributeViewKeys", {id}, (response) => {
|
||||
let html = "";
|
||||
@ -252,7 +181,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone"].includes
|
||||
}
|
||||
const mSelectElement = hasClosestByAttribute(target, "data-type", "select") || hasClosestByAttribute(target, "data-type", "mSelect");
|
||||
if (mSelectElement) {
|
||||
popSelectMenu(mSelectElement);
|
||||
popTextCell(protyle, [mSelectElement], mSelectElement.getAttribute("data-type") as TAVCol);
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return;
|
||||
|
||||
@ -5,6 +5,7 @@ import {confirmDialog} from "../../../dialog/confirmDialog";
|
||||
import {upDownHint} from "../../../util/upDownHint";
|
||||
import {bindEditEvent, getEditHTML} from "./col";
|
||||
import {updateAttrViewCellAnimation} from "./action";
|
||||
import {genAVValueHTML} from "./blockAttr";
|
||||
|
||||
const filterSelectHTML = (key: string, options: { name: string, color: string }[]) => {
|
||||
let html = "";
|
||||
@ -98,7 +99,11 @@ export const removeCellOption = (protyle: IProtyle, data: IAV, cellElements: HTM
|
||||
mSelect: oldValue
|
||||
}
|
||||
});
|
||||
updateAttrViewCellAnimation(item);
|
||||
if (item.classList.contains("custom-attr__avvalue")) {
|
||||
item.innerHTML = genAVValueHTML(cellData.value);
|
||||
} else {
|
||||
updateAttrViewCellAnimation(item);
|
||||
}
|
||||
});
|
||||
transaction(protyle, doOperations, undoOperations);
|
||||
target.remove();
|
||||
@ -161,6 +166,11 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (cellElement.classList.contains("custom-attr__avvalue")) {
|
||||
cellElement.innerHTML = genAVValueHTML(cell.value);
|
||||
} else {
|
||||
updateAttrViewCellAnimation(cellElement);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
@ -234,6 +244,11 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (cellElement.classList.contains("custom-attr__avvalue")) {
|
||||
cellElement.innerHTML = genAVValueHTML(cell.value);
|
||||
} else {
|
||||
updateAttrViewCellAnimation(cellElement);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
@ -309,6 +324,11 @@ export const setColOption = (protyle: IProtyle, data: IAV, target: HTMLElement,
|
||||
return true;
|
||||
}
|
||||
});
|
||||
if (cellElement.classList.contains("custom-attr__avvalue")) {
|
||||
cellElement.innerHTML = genAVValueHTML(cell.value);
|
||||
} else {
|
||||
updateAttrViewCellAnimation(cellElement);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
});
|
||||
@ -394,7 +414,7 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
|
||||
}
|
||||
|
||||
const colId = cellElements[0].dataset.colId;
|
||||
let cellIndex = 0;
|
||||
let cellIndex: number;
|
||||
Array.from(cellElements[0].parentElement.querySelectorAll(".av__cell")).find((item: HTMLElement, index) => {
|
||||
if (item.dataset.id === cellElements[0].dataset.id) {
|
||||
cellIndex = index;
|
||||
@ -420,11 +440,19 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
|
||||
const rowID = item.parentElement.dataset.id;
|
||||
data.view.rows.find(row => {
|
||||
if (row.id === rowID) {
|
||||
cellData = row.cells[cellIndex];
|
||||
// 为空时 cellId 每次请求都不一致
|
||||
cellData.id = item.dataset.id;
|
||||
if (!cellData.value || !cellData.value.mSelect) {
|
||||
cellData.value = {mSelect: []} as IAVCellValue;
|
||||
if (typeof cellIndex === "number") {
|
||||
cellData = row.cells[cellIndex];
|
||||
// 为空时 cellId 每次请求都不一致
|
||||
cellData.id = item.dataset.id;
|
||||
if (!cellData.value || !cellData.value.mSelect) {
|
||||
cellData.value = {mSelect: []} as IAVCellValue;
|
||||
}
|
||||
} else {
|
||||
cellData = row.cells.find(cellItem => {
|
||||
if (cellItem.id === item.dataset.id) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
@ -479,7 +507,11 @@ export const addColOptionOrCell = (protyle: IProtyle, data: IAV, cellElements: H
|
||||
[colData.type]: oldValue
|
||||
}
|
||||
});
|
||||
updateAttrViewCellAnimation(item);
|
||||
if (item.classList.contains("custom-attr__avvalue")) {
|
||||
item.innerHTML = genAVValueHTML(cellData.value);
|
||||
} else {
|
||||
updateAttrViewCellAnimation(item);
|
||||
}
|
||||
});
|
||||
|
||||
if (currentElement.querySelector(".b3-menu__accelerator")) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user