This commit is contained in:
Vanessa
parent
6f57cbb65b
commit
adcdcefaf4
5 changed files with 85 additions and 41 deletions
|
|
@ -163,7 +163,7 @@ export const renderAVAttribute = (element: HTMLElement, id: string, protyle: IPr
|
|||
table.keyValues?.forEach(item => {
|
||||
html += `<div class="block__icons av__row" data-id="${id}" data-col-id="${item.key.id}">
|
||||
<div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
|
||||
<div class="block__logo ariaLabel${item.values[0].type === "block" ? "" : " fn__pointer"}" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}"">
|
||||
<div class="block__logo ariaLabel${item.values[0].type === "block" ? "" : " fn__pointer"}" data-type="editCol" data-position="parentW" aria-label="${escapeAttr(item.key.name)}">
|
||||
${item.key.icon ? unicode2Emoji(item.key.icon, "block__logoicon", true) : `<svg class="block__logoicon"><use xlink:href="#${getColIconByType(item.key.type)}"></use></svg>`}
|
||||
<span>${item.key.name}</span>
|
||||
</div>
|
||||
|
|
@ -178,7 +178,7 @@ class="fn__flex-1 fn__flex${["url", "text", "number", "email", "phone", "block"]
|
|||
<div class="fn__flex">
|
||||
<div class="fn__space"></div><div class="fn__space"></div>
|
||||
<button data-type="addColumn" class="b3-button b3-button--outline"><svg><use xlink:href="#iconAdd"></use></svg>${window.siyuan.languages.addAttr}</button>
|
||||
</div></div>`;
|
||||
</div><div class="fn__hr--b"></div></div>`;
|
||||
});
|
||||
if (element.innerHTML === "") {
|
||||
let dragBlockElement: HTMLElement;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {removeAttrViewColAnimation, updateAttrViewCellAnimation} from "./action"
|
|||
import {openEmojiPanel, unicode2Emoji} from "../../../emoji";
|
||||
import {focusBlock} from "../../util/selection";
|
||||
import {toggleUpdateRelationBtn} from "./relation";
|
||||
import {bindRollupEvent, getRollupHTML} from "./rollup";
|
||||
import {bindRollupData, getRollupHTML} from "./rollup";
|
||||
|
||||
export const duplicateCol = (options: {
|
||||
protyle: IProtyle,
|
||||
|
|
@ -166,7 +166,7 @@ export const getEditHTML = (options: {
|
|||
return `<div class="b3-menu__items">
|
||||
${html}
|
||||
<button class="b3-menu__separator"></button>
|
||||
<button class="b3-menu__item${options.isCustomAttr ? " fn__none" : ""}" data-type="${colData.hidden ? "showCol" : "hideCol"}">
|
||||
<button class="b3-menu__item" data-type="${colData.hidden ? "showCol" : "hideCol"}">
|
||||
<svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
|
||||
<span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
|
||||
</button>
|
||||
|
|
@ -362,7 +362,7 @@ export const bindEditEvent = (options: {
|
|||
toggleUpdateRelationBtn(options.menuElement, avID);
|
||||
}
|
||||
}
|
||||
bindRollupEvent(options);
|
||||
bindRollupData(options);
|
||||
};
|
||||
|
||||
export const getColNameByType = (type: TAVCol) => {
|
||||
|
|
@ -439,28 +439,52 @@ const addAttrViewColAnimation = (options: {
|
|||
icon?: string,
|
||||
previousID: string
|
||||
}) => {
|
||||
if (!options.blockElement || !options.blockElement.classList.contains("av")) {
|
||||
if (!options.blockElement) {
|
||||
return;
|
||||
}
|
||||
options.blockElement.querySelectorAll(".av__row").forEach((item, index) => {
|
||||
let previousElement;
|
||||
if (options.previousID) {
|
||||
previousElement = item.querySelector(`[data-col-id="${options.previousID}"]`);
|
||||
} else {
|
||||
previousElement = item.lastElementChild.previousElementSibling;
|
||||
}
|
||||
let html = "";
|
||||
if (index === 0) {
|
||||
// av__pulse 用于检测是否新增，和 render 中 isPulse 配合弹出菜单
|
||||
html = `<div class="av__cell av__cell--header" draggable="true" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" data-wrap="false" style="width: 200px;">
|
||||
if (options.blockElement.classList.contains("av")) {
|
||||
options.blockElement.querySelectorAll(".av__row").forEach((item, index) => {
|
||||
let previousElement;
|
||||
if (options.previousID) {
|
||||
previousElement = item.querySelector(`[data-col-id="${options.previousID}"]`);
|
||||
} else {
|
||||
previousElement = item.lastElementChild.previousElementSibling;
|
||||
}
|
||||
let html = "";
|
||||
if (index === 0) {
|
||||
// av__pulse 用于检测是否新增，和 render 中 isPulse 配合弹出菜单
|
||||
html = `<div class="av__cell av__cell--header" draggable="true" data-icon="${options.icon || ""}" data-col-id="${options.id}" data-dtype="${options.type}" data-wrap="false" style="width: 200px;">
|
||||
${options.icon ? unicode2Emoji(options.icon, "av__cellheadericon", true) : `<svg class="av__cellheadericon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>`}
|
||||
<span class="av__celltext fn__flex-1">${options.name}</span>
|
||||
<div class="av__widthdrag av__pulse"></div>
|
||||
</div>`;
|
||||
} else {
|
||||
html = '<div class="av__cell" style="width: 200px"><span class="av__pulse"></span></div>';
|
||||
} else {
|
||||
html = '<div class="av__cell" style="width: 200px"><span class="av__pulse"></span></div>';
|
||||
}
|
||||
previousElement.insertAdjacentHTML("afterend", html);
|
||||
});
|
||||
} else {
|
||||
const nodeId= options.blockElement.getAttribute("data-node-id");
|
||||
options.blockElement.querySelector(".fn__hr").insertAdjacentHTML("beforebegin", `<div class="block__icons av__row" data-id="${nodeId}" data-col-id="${options.id}">
|
||||
<div class="block__icon" draggable="true"><svg><use xlink:href="#iconDrag"></use></svg></div>
|
||||
<div class="block__logo ariaLabel" data-type="editCol" data-position="parentW" aria-label="${getColNameByType(options.type)}">
|
||||
<svg class="block__logoicon"><use xlink:href="#${getColIconByType(options.type)}"></use></svg>
|
||||
<span>${getColNameByType(options.type)}</span>
|
||||
</div>
|
||||
<div data-col-id="${options.id}" data-block-id="${nodeId}" data-type="${options.type}" data-options="[]" class="fn__flex-1 fn__flex">
|
||||
<div class="fn__flex-1"></div>
|
||||
</div>
|
||||
</div>`);
|
||||
}
|
||||
openMenuPanel({
|
||||
protyle: options.protyle,
|
||||
blockElement: options.blockElement,
|
||||
type: "edit",
|
||||
colId: options.id,
|
||||
editData: {
|
||||
previousID: options.previousID,
|
||||
colData: genColDataByType(options.type, options.id),
|
||||
}
|
||||
previousElement.insertAdjacentHTML("afterend", html);
|
||||
});
|
||||
window.siyuan.menus.menu.remove();
|
||||
};
|
||||
|
|
@ -1196,3 +1220,20 @@ export const addCol = (protyle: IProtyle, blockElement: Element, previousID?: st
|
|||
});
|
||||
return menu;
|
||||
};
|
||||
|
||||
const genColDataByType = (type: TAVCol, id: string) => {
|
||||
const colData: IAVColumn = {
|
||||
hidden: false,
|
||||
icon: "",
|
||||
id,
|
||||
name: getColNameByType(type),
|
||||
numberFormat: "",
|
||||
pin: false,
|
||||
template: "",
|
||||
type,
|
||||
width: "",
|
||||
wrap: false,
|
||||
calc: null
|
||||
}
|
||||
return colData
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ import {focusBlock, getEditorRange} from "../../util/selection";
|
|||
import {avRender} from "./render";
|
||||
import {setPageSize} from "./row";
|
||||
import {bindRelationEvent, getRelationHTML, openSearchAV, setRelationCell, updateRelation} from "./relation";
|
||||
import {bindRollupEvent, getRollupHTML, goSearchRollupCol} from "./rollup";
|
||||
import {bindRollupData, getRollupHTML, goSearchRollupCol} from "./rollup";
|
||||
import {updateCellsValue} from "./cell";
|
||||
import {openCalcMenu} from "./calc";
|
||||
|
||||
|
|
@ -36,6 +36,11 @@ export const openMenuPanel = (options: {
|
|||
blockElement: Element,
|
||||
type: "select" | "properties" | "config" | "sorts" | "filters" | "edit" | "date" | "asset" | "switcher" | "relation" | "rollup",
|
||||
colId?: string, // for edit, rollup
|
||||
// 使用前端构造的数据
|
||||
editData?: {
|
||||
previousID: string,
|
||||
colData: IAVColumn,
|
||||
},
|
||||
cellElements?: HTMLElement[], // for select & date & relation & asset
|
||||
cb?: (avPanelElement: Element) => void
|
||||
}) => {
|
||||
|
|
@ -68,6 +73,18 @@ export const openMenuPanel = (options: {
|
|||
} else if (options.type === "asset") {
|
||||
html = getAssetHTML(options.cellElements);
|
||||
} else if (options.type === "edit") {
|
||||
if (options.editData) {
|
||||
if (options.editData.previousID) {
|
||||
data.view.columns.find((item, index) => {
|
||||
if (item.id === options.editData.previousID) {
|
||||
data.view.columns.splice(index + 1, 0, options.editData.colData);
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
data.view.columns.splice(0, 0, options.editData.colData);
|
||||
}
|
||||
}
|
||||
html = getEditHTML({protyle: options.protyle, data, colId: options.colId, isCustomAttr});
|
||||
} else if (options.type === "date") {
|
||||
html = getDateHTML(data.view, options.cellElements);
|
||||
|
|
@ -124,7 +141,7 @@ export const openMenuPanel = (options: {
|
|||
blockElement: options.blockElement
|
||||
});
|
||||
} else if (options.type === "rollup") {
|
||||
bindRollupEvent({protyle: options.protyle, data, menuElement});
|
||||
bindRollupData({protyle: options.protyle, data, menuElement});
|
||||
}
|
||||
if (["select", "date", "relation", "rollup"].includes(options.type)) {
|
||||
const inputElement = menuElement.querySelector("input");
|
||||
|
|
@ -311,12 +328,12 @@ export const openMenuPanel = (options: {
|
|||
transaction(options.protyle, [{
|
||||
action: "updateAttrViewColOptions",
|
||||
id: colId,
|
||||
avID: data.id,
|
||||
avID,
|
||||
data: changeData,
|
||||
}], [{
|
||||
action: "updateAttrViewColOptions",
|
||||
id: colId,
|
||||
avID: data.id,
|
||||
avID,
|
||||
data: oldData,
|
||||
}]);
|
||||
if (options.cellElements) {
|
||||
|
|
|
|||
|
|
@ -296,29 +296,15 @@ export const refreshAV = (protyle: IProtyle, operation: IOperation) => {
|
|||
} else {
|
||||
Array.from(protyle.wysiwyg.element.querySelectorAll(`[data-av-id="${operation.avID}"]`)).forEach((item: HTMLElement) => {
|
||||
item.removeAttribute("data-render");
|
||||
const isPulse = item.querySelector(".av__pulse");
|
||||
avRender(item, protyle, () => {
|
||||
if (operation.action === "addAttrViewCol" && isPulse) {
|
||||
openMenuPanel({protyle, blockElement: item, type: "edit", colId: operation.id});
|
||||
}
|
||||
|
||||
const attrElement = document.querySelector(`.b3-dialog--open[data-key="${Constants.DIALOG_ATTR}"] div[data-av-id="${operation.avID}"]`) as HTMLElement;
|
||||
if (attrElement) {
|
||||
// 更新属性面板
|
||||
renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle, (newElment) => {
|
||||
if (operation.action === "addAttrViewCol") {
|
||||
openMenuPanel({
|
||||
protyle,
|
||||
blockElement: newElment.querySelector(`div[data-av-id="${operation.avID}"]`),
|
||||
type: "edit",
|
||||
colId: operation.id
|
||||
});
|
||||
}
|
||||
});
|
||||
renderAVAttribute(attrElement.parentElement, attrElement.dataset.nodeId, protyle);
|
||||
}
|
||||
}, ["addAttrViewView", "duplicateAttrViewView"].includes(operation.action) ? operation.id :
|
||||
(operation.action === "removeAttrViewView" ? null : undefined));
|
||||
});
|
||||
}
|
||||
}, ["insertAttrViewBlock", "addAttrViewCol"].includes(operation.action) ? 2 : 100);
|
||||
}, ["insertAttrViewBlock"].includes(operation.action) ? 2 : 100);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@ export const getRollupHTML = (options: { data?: IAV, cellElements?: HTMLElement[
|
|||
</button>`;
|
||||
};
|
||||
|
||||
export const bindRollupEvent = (options: {
|
||||
export const bindRollupData = (options: {
|
||||
protyle: IProtyle,
|
||||
data: IAV,
|
||||
menuElement: HTMLElement
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue