mirror of
https://github.com/siyuan-note/siyuan.git
synced 2026-01-03 15:28:49 +01:00
This commit is contained in:
Vanessa
parent
5acd3aae08
commit
2ce6a43dcb
3 changed files with 147 additions and 106 deletions
|
|
@ -6,6 +6,101 @@ import {openEditorTab} from "../../../menus/util";
|
|||
import {copySubMenu} from "../../../menus/commonMenuItem";
|
||||
import {popTextCell} from "./cell";
|
||||
|
||||
const showHeaderCellMenu = (protyle: IProtyle, blockElement: HTMLElement, cellElement: HTMLElement) => {
|
||||
const type = cellElement.getAttribute("data-dtype") as TAVCol
|
||||
const menu = new Menu("av-header-cell");
|
||||
menu.addItem({
|
||||
icon: getIconByType(type),
|
||||
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
|
||||
bind() {
|
||||
|
||||
}
|
||||
});
|
||||
if (type !== "block") {
|
||||
menu.addItem({
|
||||
icon: "iconEdit",
|
||||
label: window.siyuan.languages.edit,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
menu.addSeparator();
|
||||
menu.addItem({
|
||||
icon: "iconUp",
|
||||
label: window.siyuan.languages.fileNameNatASC,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addItem({
|
||||
icon: "iconDown",
|
||||
label: window.siyuan.languages.fileNameNatDESC,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addItem({
|
||||
icon: "iconFilter",
|
||||
label: window.siyuan.languages.filter,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addSeparator();
|
||||
if (type !== "block") {
|
||||
menu.addItem({
|
||||
icon: "iconEyeoff",
|
||||
label: window.siyuan.languages.hide,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addItem({
|
||||
icon: "iconCopy",
|
||||
label: window.siyuan.languages.duplicate,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addItem({
|
||||
icon: "iconTrashcan",
|
||||
label: window.siyuan.languages.delete,
|
||||
click() {
|
||||
const id = cellElement.getAttribute("data-id")
|
||||
transaction(protyle, [{
|
||||
action: "removeAttrViewCol",
|
||||
id,
|
||||
parentID: blockElement.getAttribute("data-av-id"),
|
||||
}], [{
|
||||
action: "addAttrViewCol",
|
||||
name: cellElement.textContent.trim(),
|
||||
parentID: blockElement.getAttribute("data-av-id"),
|
||||
type: type,
|
||||
id
|
||||
}]);
|
||||
removeCol(cellElement)
|
||||
}
|
||||
});
|
||||
menu.addSeparator();
|
||||
}
|
||||
menu.addItem({
|
||||
label: `<div class="fn__flex" style="margin-bottom: 4px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
|
||||
<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.getAttribute("data-wrap") === "true" ? " checked" : ""}></div>`,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
const cellRect = cellElement.getBoundingClientRect();
|
||||
menu.open({
|
||||
x: cellRect.left,
|
||||
y: cellRect.bottom,
|
||||
h: cellRect.height
|
||||
});
|
||||
(window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement)?.select();
|
||||
|
||||
};
|
||||
|
||||
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
|
||||
const blockElement = hasClosestBlock(event.target);
|
||||
const addElement = hasClosestByAttribute(event.target, "data-type", "av-header-add");
|
||||
|
|
@ -16,17 +111,19 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
|||
label: window.siyuan.languages.text,
|
||||
click() {
|
||||
const id = Lute.NewNodeID();
|
||||
const type = "text";
|
||||
transaction(protyle, [{
|
||||
action: "addAttrViewCol",
|
||||
name: "Text",
|
||||
parentID: blockElement.getAttribute("data-av-id"),
|
||||
type: "text",
|
||||
type,
|
||||
id
|
||||
}], [{
|
||||
action: "removeAttrViewCol",
|
||||
id,
|
||||
parentID: blockElement.getAttribute("data-av-id"),
|
||||
}]);
|
||||
addCol(protyle, blockElement, id, type)
|
||||
}
|
||||
});
|
||||
const addRect = addElement.getBoundingClientRect();
|
||||
|
|
@ -43,96 +140,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
|||
const cellElement = hasClosestByClassName(event.target, "av__cell");
|
||||
if (cellElement && blockElement) {
|
||||
if (cellElement.parentElement.classList.contains("av__row--header")) {
|
||||
const type = cellElement.getAttribute("data-dtype") as TAVCol;
|
||||
const menu = new Menu("av-header-cell");
|
||||
menu.addItem({
|
||||
icon: getIconByType(type),
|
||||
label: `<input style="margin: 4px 0" class="b3-text-field" type="text" value="${cellElement.innerText.trim()}">`,
|
||||
bind() {
|
||||
|
||||
}
|
||||
});
|
||||
if (type !== "block") {
|
||||
menu.addItem({
|
||||
icon: "iconEdit",
|
||||
label: window.siyuan.languages.edit,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
menu.addSeparator();
|
||||
menu.addItem({
|
||||
icon: "iconUp",
|
||||
label: window.siyuan.languages.fileNameNatASC,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addItem({
|
||||
icon: "iconDown",
|
||||
label: window.siyuan.languages.fileNameNatDESC,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addItem({
|
||||
icon: "iconFilter",
|
||||
label: window.siyuan.languages.filter,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addSeparator();
|
||||
if (type !== "block") {
|
||||
menu.addItem({
|
||||
icon: "iconEyeoff",
|
||||
label: window.siyuan.languages.hide,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addItem({
|
||||
icon: "iconCopy",
|
||||
label: window.siyuan.languages.duplicate,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
menu.addItem({
|
||||
icon: "iconTrashcan",
|
||||
label: window.siyuan.languages.delete,
|
||||
click() {
|
||||
const id = cellElement.getAttribute("data-id")
|
||||
transaction(protyle, [{
|
||||
action: "removeAttrViewCol",
|
||||
id,
|
||||
parentID: blockElement.getAttribute("data-av-id"),
|
||||
}], [{
|
||||
action: "addAttrViewCol",
|
||||
name: cellElement.textContent.trim(),
|
||||
parentID: blockElement.getAttribute("data-av-id"),
|
||||
type: type,
|
||||
id
|
||||
}]);
|
||||
}
|
||||
});
|
||||
menu.addSeparator();
|
||||
}
|
||||
menu.addItem({
|
||||
label: `<div class="fn__flex" style="margin-bottom: 4px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
|
||||
<input type="checkbox" class="b3-switch fn__flex-center"${cellElement.getAttribute("data-wrap") === "true" ? " checked" : ""}></div>`,
|
||||
click() {
|
||||
|
||||
}
|
||||
});
|
||||
const cellRect = cellElement.getBoundingClientRect();
|
||||
menu.open({
|
||||
x: cellRect.left,
|
||||
y: cellRect.bottom,
|
||||
h: cellRect.height
|
||||
});
|
||||
(window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement)?.select();
|
||||
showHeaderCellMenu(protyle, blockElement, cellElement)
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
|
|
@ -176,6 +184,7 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
|
|||
previousID: rowElement.previousElementSibling?.getAttribute("data-id") || "",
|
||||
srcIDs: [rowId],
|
||||
}]);
|
||||
rowElement.remove();
|
||||
}
|
||||
});
|
||||
menu.addSeparator();
|
||||
|
|
@ -218,24 +227,53 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
|
|||
return true;
|
||||
}
|
||||
|
||||
|
||||
const addRow = () => {
|
||||
|
||||
const addCol = (protyle: IProtyle, blockElement: HTMLElement, id: string, type: TAVCol) => {
|
||||
let index = "0"
|
||||
blockElement.querySelectorAll(".av__row--header .av__cell").forEach((item) => {
|
||||
const dataIndex = item.getAttribute("data-index")
|
||||
if (dataIndex > index) {
|
||||
index = dataIndex
|
||||
}
|
||||
})
|
||||
blockElement.querySelectorAll(".av__row").forEach((item, index) => {
|
||||
let html = ''
|
||||
if (index === 0) {
|
||||
html = `<div class="av__cell" data-index="${index}" data-id="${id}" data-dtype="${type}" data-wrap="false" style="width: 200px;">
|
||||
<svg><use xlink:href="#iconAlignLeft"></use></svg>
|
||||
<span>Text</span>
|
||||
</div>`
|
||||
} else {
|
||||
html = `<div class="av__cell" data-index="${index}" style="width: 200px;"></div>`
|
||||
}
|
||||
item.lastElementChild.insertAdjacentHTML("beforebegin", html)
|
||||
})
|
||||
showHeaderCellMenu(protyle, blockElement, blockElement.querySelector(".av__row--header").lastElementChild.previousElementSibling as HTMLElement)
|
||||
}
|
||||
|
||||
const addCol = () => {
|
||||
|
||||
}
|
||||
|
||||
const removeRow = () => {
|
||||
|
||||
}
|
||||
|
||||
const removeCol = () => {
|
||||
|
||||
const removeCol = (cellElement: HTMLElement) => {
|
||||
const index = cellElement.getAttribute("data-index")
|
||||
const blockElement = hasClosestBlock(cellElement);
|
||||
if (!blockElement) {
|
||||
return false;
|
||||
}
|
||||
blockElement.querySelectorAll(".av__row").forEach((item) => {
|
||||
item.querySelector(`[data-index="${index}"]`).remove;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const updateCel = () => {
|
||||
|
||||
export const addAVRow = (blockElement: HTMLElement, ids: string[], previousID: string) => {
|
||||
const rowElement = previousID ? blockElement.querySelector(`[data-id=${previousID}]`) : blockElement.querySelector(".av__row--header")
|
||||
let html = ''
|
||||
ids.forEach((id) => {
|
||||
html += `<div class="av__row"><div class="av__firstcol"><svg><use xlink:href="#iconUncheck"></use></svg></div>`;
|
||||
Array.from(rowElement.children).forEach((item: HTMLElement, index) => {
|
||||
if (index === 0 || index === rowElement.childElementCount - 1) {
|
||||
return
|
||||
}
|
||||
html += `<div class="av__cell" data-index="${index}" style="width: ${item.style.width};>${id}</div>`;
|
||||
})
|
||||
html += "<div></div></div>";
|
||||
})
|
||||
rowElement.insertAdjacentHTML("afterend", html);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ const updateCellValue = (protyle: IProtyle, cellElement: HTMLElement, type: TAVC
|
|||
type,
|
||||
data: cellElement.textContent.trim(),
|
||||
}]);
|
||||
cellElement.textContent = inputElement.value;
|
||||
setTimeout(() => {
|
||||
avMaskElement.remove();
|
||||
})
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import {uploadLocalFiles} from "../upload";
|
|||
import {insertHTML} from "./insertHTML";
|
||||
import {isBrowser} from "../../util/functions";
|
||||
import {hideElements} from "../ui/hideElements";
|
||||
import {addAVRow} from "../render/av/action";
|
||||
|
||||
const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element,
|
||||
isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => {
|
||||
|
|
@ -813,6 +814,7 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
|
|||
id: targetElement.getAttribute("data-node-id"),
|
||||
parentID: targetElement.getAttribute("data-av-id"),
|
||||
}]);
|
||||
addAVRow(blockElement, sourceIds, previousID)
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue