Vanessa 2023-12-08 22:54:18 +08:00
parent d5c029962e
commit 8051f03ccc
3 changed files with 66 additions and 20 deletions

View file

@ -135,7 +135,12 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
event.stopPropagation(); event.stopPropagation();
return true; return true;
} else if (type === "set-page-size") { } else if (type === "set-page-size") {
setPageSize(target, protyle, blockElement.getAttribute("data-av-id")); setPageSize({
target,
protyle,
avID: blockElement.getAttribute("data-av-id"),
nodeElement: blockElement
});
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return true; return true;

View file

@ -574,7 +574,12 @@ export const openMenuPanel = (options: {
event.stopPropagation(); event.stopPropagation();
break; break;
} else if (type === "set-page-size") { } else if (type === "set-page-size") {
setPageSize(target, options.protyle, avID); setPageSize({
target,
protyle: options.protyle,
avID,
nodeElement: options.blockElement
});
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
break; break;

View file

@ -122,61 +122,97 @@ export const stickyRow = (blockElement: HTMLElement, elementRect: DOMRect, statu
} }
}; };
const updatePageSize = (currentPageSIze: string, newPageSize: string, protyle: IProtyle, avID: string) => { const updatePageSize = (options: {
if (currentPageSIze === newPageSize) { currentPageSize: string,
newPageSize: string,
protyle: IProtyle,
avID: string,
nodeElement: Element
}) => {
if (options.currentPageSize === options.newPageSize) {
return; return;
} }
transaction(protyle, [{ options.nodeElement.setAttribute("data-page-size", options.newPageSize);
transaction(options.protyle, [{
action: "setAttrViewPageSize", action: "setAttrViewPageSize",
avID, avID: options.avID,
data: parseInt(newPageSize), data: parseInt(options.newPageSize),
}], [{ }], [{
action: "setAttrViewPageSize", action: "setAttrViewPageSize",
data: parseInt(currentPageSIze), data: parseInt(options.currentPageSize),
avID, avID: options.avID,
}]); }]);
document.querySelector(".av__panel")?.remove(); document.querySelector(".av__panel")?.remove();
}; };
export const setPageSize = (target: HTMLElement, protyle: IProtyle, avID: string) => { export const setPageSize = (options: {
target: HTMLElement,
protyle: IProtyle,
avID: string,
nodeElement: Element
}) => {
const menu = new Menu("av-page-size"); const menu = new Menu("av-page-size");
if (menu.isOpen) { if (menu.isOpen) {
return; return;
} }
const currentPageSIze = target.dataset.size; const currentPageSize = options.target.dataset.size;
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
label: "10", label: "10",
accelerator: currentPageSIze === "10" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined, accelerator: currentPageSize === "10" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
click() { click() {
updatePageSize(currentPageSIze, "10", protyle, avID); updatePageSize({
currentPageSize,
newPageSize: "10",
protyle: options.protyle,
avID: options.avID,
nodeElement: options.nodeElement
});
} }
}); });
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
accelerator: currentPageSIze === "25" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined, accelerator: currentPageSize === "25" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
label: "25", label: "25",
click() { click() {
updatePageSize(currentPageSIze, "25", protyle, avID); updatePageSize({
currentPageSize,
newPageSize: "25",
protyle: options.protyle,
avID: options.avID,
nodeElement: options.nodeElement
});
} }
}); });
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
accelerator: currentPageSIze === "50" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined, accelerator: currentPageSize === "50" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
label: "50", label: "50",
click() { click() {
updatePageSize(currentPageSIze, "50", protyle, avID); updatePageSize({
currentPageSize,
newPageSize: "50",
protyle: options.protyle,
avID: options.avID,
nodeElement: options.nodeElement
});
} }
}); });
menu.addItem({ menu.addItem({
iconHTML: "", iconHTML: "",
accelerator: currentPageSIze === "100" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined, accelerator: currentPageSize === "100" ? '<svg class="svg" style="height: 30px; float: left;"><use xlink:href="#iconSelect"></use></svg>' : undefined,
label: "100", label: "100",
click() { click() {
updatePageSize(currentPageSIze, "100", protyle, avID); updatePageSize({
currentPageSize,
newPageSize: "100",
protyle: options.protyle,
avID: options.avID,
nodeElement: options.nodeElement
});
} }
}); });
const rect = target.getBoundingClientRect(); const rect = options.target.getBoundingClientRect();
menu.open({ menu.open({
x: rect.left, x: rect.left,
y: rect.bottom y: rect.bottom