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

🎨 selected https://github.com/siyuan-note/siyuan/issues/7536

Browse source
This commit is contained in:
Vanessa 2023-06-30 23:57:11 +08:00
parent 21d4eea41b
commit 24c57bc647
10 changed files with 155 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

126
app/src/protyle/render/av/action.ts
View file

@ -4,7 +4,7 @@ import {transaction} from "../../wysiwyg/transaction";
import {openEditorTab} from "../../../menus/util";
import {copySubMenu} from "../../../menus/commonMenuItem";
import {popTextCell, showHeaderCellMenu} from "./cell";
import {getColIconByType} from "./col";
import {getColIconByType, updateHeader} from "./col";
import {emitOpenMenu} from "../../../plugin/EventBus";
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
@ -55,7 +55,31 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
const checkElement = hasClosestByClassName(event.target, "av__firstcol");
if (checkElement) {
// TODO
window.siyuan.menus.menu.remove();
const rowElement = checkElement.parentElement;
const useElement = checkElement.querySelector("use")
if (rowElement.classList.contains("av__row--header")) {
if ("#iconCheck" === useElement.getAttribute("xlink:href")) {
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconUncheck");
item.parentElement.classList.remove("av__row--select");
})
} else {
rowElement.parentElement.querySelectorAll(".av__firstcol").forEach(item => {
item.querySelector("use").setAttribute("xlink:href", "#iconCheck");
item.parentElement.classList.add("av__row--select");
})
}
} else {
if (useElement.getAttribute("xlink:href") === "#iconUncheck") {
checkElement.parentElement.classList.add("av__row--select");
useElement.setAttribute("xlink:href", "#iconCheck");
} else {
checkElement.parentElement.classList.remove("av__row--select");
useElement.setAttribute("xlink:href", "#iconUncheck");
}
}
updateHeader(rowElement);
event.preventDefault();
event.stopPropagation();
return true;
@ -81,7 +105,7 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
return false;
}
if (rowElement.classList.contains("av__row--header")) {
return false
return false
}
const blockElement = hasClosestBlock(rowElement);
if (!blockElement) {
@ -90,15 +114,45 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
event.preventDefault();
event.stopPropagation();
blockElement.querySelectorAll(".av__row--select").forEach(item => {
item.classList.remove("av__row--select");
});
const rowId = rowElement.getAttribute("data-id");
const menu = new Menu();
if (!rowElement.classList.contains("av__row--select")) {
blockElement.querySelectorAll(".av__row--select").forEach(item => {
item.classList.remove("av__row--select");
});
blockElement.querySelectorAll(".av__firstcol use").forEach(item => {
item.setAttribute("xlink:href", "#iconUncheck");
});
}
const menu = new Menu("av-row-menu");
if (menu.isOpen) {
return true;
}
rowElement.classList.add("av__row--select");
rowElement.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconCheck");
const rowIds: string[] = [];
const blockIds: string[] = [];
blockElement.querySelectorAll(".av__row--select:not(.av__row--header )").forEach(item => {
rowIds.push(item.getAttribute("data-id"));
blockIds.push(item.querySelector(".av__cell").getAttribute("data-block-id"));
});
updateHeader(rowElement);
menu.addItem({
icon: "iconTrashcan",
label: window.siyuan.languages.delete,
click() {
transaction(protyle, [{
action: "removeAttrViewBlock",
srcIDs: blockIds,
parentID: blockElement.getAttribute("data-av-id"),
}], [{
action: "insertAttrViewBlock",
parentID: blockElement.getAttribute("data-av-id"),
previousID: rowElement.previousElementSibling?.getAttribute("data-id") || "",
srcIDs: rowIds,
}]);
rowElement.remove();
}
});
menu.addItem({
icon: "iconCopy",
label: window.siyuan.languages.duplicate,
@ -106,39 +160,26 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
}
});
menu.addItem({
icon: "iconTrashcan",
label: window.siyuan.languages.delete,
click() {
transaction(protyle, [{
action: "removeAttrViewBlock",
srcIDs: [rowElement.querySelector(".av__cell").getAttribute("data-block-id")],
parentID: blockElement.getAttribute("data-av-id"),
}], [{
action: "insertAttrViewBlock",
parentID: blockElement.getAttribute("data-av-id"),
previousID: rowElement.previousElementSibling?.getAttribute("data-id") || "",
srcIDs: [rowId],
}]);
rowElement.remove();
}
});
if (rowIds.length === 1) {
menu.addSeparator();
openEditorTab(protyle.app, rowIds[0]);
menu.addItem({
label: window.siyuan.languages.copy,
icon: "iconCopy",
type: "submenu",
submenu: copySubMenu(rowIds[0])
});
}
menu.addSeparator();
openEditorTab(protyle.app, rowId);
menu.addItem({
label: window.siyuan.languages.copy,
icon: "iconCopy",
type: "submenu",
submenu: copySubMenu(rowId)
});
menu.addSeparator();
menu.addItem({
icon: "iconEdit",
label: window.siyuan.languages.edit,
click() {
if (rowIds.length === 1) {
menu.addItem({
icon: "iconEdit",
label: window.siyuan.languages.edit,
click() {
}
});
}
});
}
const editAttrSubmenu: IMenu[] = [];
rowElement.parentElement.querySelectorAll(".av__row--header .av__cell").forEach((cellElement) => {
editAttrSubmenu.push({
@ -154,6 +195,13 @@ export const avContextmenu = (protyle: IProtyle, event: MouseEvent & { detail: a
type: "submenu",
submenu: editAttrSubmenu
});
menu.addItem({
icon: "iconMove",
label: window.siyuan.languages.move,
click() {
}
});
if (protyle?.app?.plugins) {
emitOpenMenu({
plugins: protyle.app.plugins,

31
app/src/protyle/render/av/col.ts
View file

@ -1,3 +1,5 @@
import {hasClosestBlock} from "../../util/hasClosest";
export const getColIconByType = (type: TAVCol) => {
switch (type) {
case "text":
@ -6,3 +8,32 @@ export const getColIconByType = (type: TAVCol) => {
return "iconParagraph";
}
};
export const updateHeader = (rowElement: HTMLElement) => {
const blockElement = hasClosestBlock(rowElement);
if (!blockElement) {
return;
}
const selectCount = rowElement.parentElement.querySelectorAll(".av__row--select:not(.av__row--header)").length
const diffCount = rowElement.parentElement.childElementCount - 3 - selectCount
const headElement = rowElement.parentElement.firstElementChild
const headUseElement = headElement.querySelector("use")
const counterElement = blockElement.querySelector(".av__counter")
const avHeadElement = blockElement.querySelector(".av__header") as HTMLElement
if (diffCount === 0) {
headElement.classList.add("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconCheck");
} else if (diffCount === rowElement.parentElement.childElementCount - 3) {
headElement.classList.remove("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconUncheck");
counterElement.classList.add("fn__none")
avHeadElement.style.position = ""
return;
} else if (diffCount > 0) {
headElement.classList.add("av__row--select");
headUseElement.setAttribute("xlink:href", "#iconIndeterminateCheck");
}
counterElement.classList.remove("fn__none")
counterElement.innerHTML = `${selectCount} selected`
avHeadElement.style.position = "sticky"
}

9
app/src/protyle/render/av/render.ts
View file

@ -69,13 +69,14 @@ export const avRender = (element: Element, cb?: () => void) => {
e.style.width = e.parentElement.clientWidth + "px";
e.style.alignSelf = "center";
e.firstElementChild.outerHTML = `<div>
<div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};">
<div>
<div>tab1</div>
<div class="av__header" style="padding-left: ${paddingLeft};padding-right: ${paddingRight};">
<div class="layout-tab-bar fn__flex">
<div class="item item--focus">tab1</div>
</div>
<div contenteditable="true">
<div contenteditable="true" class="av__title">
${data.title}
</div>
<div class="av__counter fn__none"></div>
</div>
<div class="av__scroll">
<div style="padding-left: ${paddingLeft};padding-right: ${paddingRight};float: left;">