mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-05-15 00:21:00 +08:00
This commit is contained in:
Vanessa
parent
55fb8b19ab
commit
ed31305d1d
@ -45,7 +45,7 @@ import {hideElements} from "../protyle/ui/hideElements";
|
||||
import {emitOpenMenu} from "../plugin/EventBus";
|
||||
import {openMobileFileById} from "../mobile/editor";
|
||||
import {openBacklink, openGraph} from "../layout/dock/util";
|
||||
import {updateHeader} from "../protyle/render/av/col";
|
||||
import {updateHeader} from "../protyle/render/av/row";
|
||||
|
||||
export const fileAnnotationRefMenu = (protyle: IProtyle, refElement: HTMLElement) => {
|
||||
const nodeElement = hasClosestBlock(refElement);
|
||||
|
||||
@ -4,7 +4,8 @@ import {transaction} from "../../wysiwyg/transaction";
|
||||
import {openEditorTab} from "../../../menus/util";
|
||||
import {copySubMenu} from "../../../menus/commonMenuItem";
|
||||
import {openCalcMenu, popTextCell} from "./cell";
|
||||
import {getColIconByType, showColMenu, updateHeader} from "./col";
|
||||
import {getColIconByType, showColMenu} from "./col";
|
||||
import {insertAttrViewBlockAnimation, updateHeader} from "./row";
|
||||
import {emitOpenMenu} from "../../../plugin/EventBus";
|
||||
import {addCol} from "./addCol";
|
||||
import {openMenuPanel} from "./openMenuPanel";
|
||||
@ -18,6 +19,7 @@ import {Constants} from "../../../constants";
|
||||
import {openAsset} from "../../../editor/util";
|
||||
import {getSearch, isMobile} from "../../../util/functions";
|
||||
import {unicode2Emoji} from "../../../emoji";
|
||||
import {selectRow} from "./row";
|
||||
|
||||
export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLElement }) => {
|
||||
const blockElement = hasClosestBlock(event.target);
|
||||
@ -61,30 +63,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
||||
const checkElement = hasClosestByClassName(event.target, "av__firstcol");
|
||||
if (checkElement) {
|
||||
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);
|
||||
selectRow(checkElement, "toggle");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return true;
|
||||
@ -176,11 +155,13 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
|
||||
|
||||
const cellElement = hasClosestByClassName(event.target, "av__cell");
|
||||
if (cellElement && !cellElement.parentElement.classList.contains("av__row--header")) {
|
||||
cellElement.parentElement.parentElement.querySelectorAll(".av__row--select").forEach(item => {
|
||||
item.querySelector(".av__firstcol use").setAttribute("xlink:href", "#iconUncheck");
|
||||
item.classList.remove("av__row--select");
|
||||
});
|
||||
popTextCell(protyle, [cellElement]);
|
||||
const type = cellElement.parentElement.parentElement.firstElementChild.querySelector(`[data-col-id="${cellElement.getAttribute("data-col-id")}"]`).getAttribute("data-dtype") as TAVCol;
|
||||
if (type === "updated" || type === "created") {
|
||||
selectRow(cellElement.parentElement.querySelector(".av__firstcol"), "toggle");
|
||||
} else {
|
||||
selectRow(cellElement.parentElement.querySelector(".av__firstcol"), "unselect");
|
||||
popTextCell(protyle, [cellElement]);
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return true;
|
||||
@ -367,20 +348,3 @@ export const removeAttrViewColAnimation = (blockElement: Element, id: string) =>
|
||||
item.remove();
|
||||
});
|
||||
};
|
||||
|
||||
export const insertAttrViewBlockAnimation = (blockElement: Element, size: number, previousId: string, avId?: string) => {
|
||||
const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header");
|
||||
let colHTML = "";
|
||||
previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement) => {
|
||||
colHTML += `<div class="av__cell" style="width: ${item.style.width}" ${item.getAttribute("data-block-id") ? ' data-detached="true"' : ""}><span class="av__pulse"></span></div>`;
|
||||
});
|
||||
|
||||
let html = "";
|
||||
new Array(size).fill(1).forEach(() => {
|
||||
html += `<div class="av__row" data-avid="${avId}">
|
||||
<div style="width: 24px"></div>
|
||||
${colHTML}
|
||||
</div>`;
|
||||
});
|
||||
previousElement.insertAdjacentHTML("afterend", html);
|
||||
};
|
||||
|
||||
@ -306,35 +306,6 @@ export const getColIconByType = (type: TAVCol) => {
|
||||
}
|
||||
};
|
||||
|
||||
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 && rowElement.parentElement.childElementCount - 3 !== 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";
|
||||
};
|
||||
|
||||
export const addAttrViewColAnimation = (options: {
|
||||
blockElement: Element,
|
||||
protyle: IProtyle,
|
||||
|
||||
74
app/src/protyle/render/av/row.ts
Normal file
74
app/src/protyle/render/av/row.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import {hasClosestBlock} from "../../util/hasClosest";
|
||||
|
||||
export const selectRow = (checkElement: Element, type: "toggle" | "select" | "unselect") => {
|
||||
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 (type === "select" || (useElement.getAttribute("xlink:href") === "#iconUncheck" && type === "toggle")) {
|
||||
checkElement.parentElement.classList.add("av__row--select");
|
||||
useElement.setAttribute("xlink:href", "#iconCheck");
|
||||
} else if (type === "unselect" || (useElement.getAttribute("xlink:href") === "#iconCheck" && type === "toggle")) {
|
||||
checkElement.parentElement.classList.remove("av__row--select");
|
||||
useElement.setAttribute("xlink:href", "#iconUncheck");
|
||||
}
|
||||
}
|
||||
updateHeader(rowElement);
|
||||
}
|
||||
|
||||
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 && rowElement.parentElement.childElementCount - 3 !== 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";
|
||||
};
|
||||
|
||||
export const insertAttrViewBlockAnimation = (blockElement: Element, size: number, previousId: string, avId?: string) => {
|
||||
const previousElement = blockElement.querySelector(`.av__row[data-id="${previousId}"]`) || blockElement.querySelector(".av__row--header");
|
||||
let colHTML = "";
|
||||
previousElement.querySelectorAll(".av__cell").forEach((item: HTMLElement) => {
|
||||
colHTML += `<div class="av__cell" style="width: ${item.style.width}" ${item.getAttribute("data-block-id") ? ' data-detached="true"' : ""}><span class="av__pulse"></span></div>`;
|
||||
});
|
||||
|
||||
let html = "";
|
||||
new Array(size).fill(1).forEach(() => {
|
||||
html += `<div class="av__row" data-avid="${avId}">
|
||||
<div style="width: 24px"></div>
|
||||
${colHTML}
|
||||
</div>`;
|
||||
});
|
||||
previousElement.insertAdjacentHTML("afterend", html);
|
||||
};
|
||||
@ -19,7 +19,7 @@ import {uploadLocalFiles} from "../upload";
|
||||
import {insertHTML} from "./insertHTML";
|
||||
import {isBrowser} from "../../util/functions";
|
||||
import {hideElements} from "../ui/hideElements";
|
||||
import {insertAttrViewBlockAnimation} from "../render/av/action";
|
||||
import {insertAttrViewBlockAnimation} from "../render/av/row";
|
||||
|
||||
const moveToNew = (protyle: IProtyle, sourceElements: Element[], targetElement: Element, newSourceElement: Element,
|
||||
isSameDoc: boolean, isBottom: boolean, isCopy: boolean) => {
|
||||
|
||||
@ -76,7 +76,7 @@ import {removeSearchMark} from "../toolbar/util";
|
||||
import {activeBlur, hideKeyboardToolbar} from "../../mobile/util/keyboardToolbar";
|
||||
import {commonClick} from "./commonClick";
|
||||
import {avClick, avContextmenu, updateAVName} from "../render/av/action";
|
||||
import {updateHeader} from "../render/av/col";
|
||||
import {updateHeader} from "../render/av/row";
|
||||
|
||||
export class WYSIWYG {
|
||||
public lastHTMLs: { [key: string]: string } = {};
|
||||
@ -187,10 +187,12 @@ export class WYSIWYG {
|
||||
private setEmptyOutline(protyle: IProtyle, element: HTMLElement) {
|
||||
// 图片移除选择状态应放在前面，否则 https://github.com/siyuan-note/siyuan/issues/4173
|
||||
protyle.wysiwyg.element.querySelectorAll(".img--select, .av__cell--select, .av__row--select").forEach((item: HTMLElement) => {
|
||||
if (item.classList.contains("av__row--select")) {
|
||||
if (item.classList.contains("av__row--select") && !hasClosestByClassName(element, "av")) {
|
||||
updateHeader(item);
|
||||
item.classList.remove("av__row--select");
|
||||
|
||||
}
|
||||
item.classList.remove("img--select", "av__cell--select", "av__row--select");
|
||||
item.classList.remove("img--select", "av__cell--select");
|
||||
});
|
||||
|
||||
let nodeElement = element;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user