diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts index 4d2d619bb..bd8123bab 100644 --- a/app/src/protyle/render/av/action.ts +++ b/app/src/protyle/render/av/action.ts @@ -135,7 +135,12 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle event.stopPropagation(); return true; } 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.stopPropagation(); return true; diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts index fec8bf574..41d87aaef 100644 --- a/app/src/protyle/render/av/openMenuPanel.ts +++ b/app/src/protyle/render/av/openMenuPanel.ts @@ -574,7 +574,12 @@ export const openMenuPanel = (options: { event.stopPropagation(); break; } else if (type === "set-page-size") { - setPageSize(target, options.protyle, avID); + setPageSize({ + target, + protyle: options.protyle, + avID, + nodeElement: options.blockElement + }); event.preventDefault(); event.stopPropagation(); break; diff --git a/app/src/protyle/render/av/row.ts b/app/src/protyle/render/av/row.ts index b91984398..e71034084 100644 --- a/app/src/protyle/render/av/row.ts +++ b/app/src/protyle/render/av/row.ts @@ -122,61 +122,97 @@ export const stickyRow = (blockElement: HTMLElement, elementRect: DOMRect, statu } }; -const updatePageSize = (currentPageSIze: string, newPageSize: string, protyle: IProtyle, avID: string) => { - if (currentPageSIze === newPageSize) { +const updatePageSize = (options: { + currentPageSize: string, + newPageSize: string, + protyle: IProtyle, + avID: string, + nodeElement: Element +}) => { + if (options.currentPageSize === options.newPageSize) { return; } - transaction(protyle, [{ + options.nodeElement.setAttribute("data-page-size", options.newPageSize); + transaction(options.protyle, [{ action: "setAttrViewPageSize", - avID, - data: parseInt(newPageSize), + avID: options.avID, + data: parseInt(options.newPageSize), }], [{ action: "setAttrViewPageSize", - data: parseInt(currentPageSIze), - avID, + data: parseInt(options.currentPageSize), + avID: options.avID, }]); 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"); if (menu.isOpen) { return; } - const currentPageSIze = target.dataset.size; + const currentPageSize = options.target.dataset.size; menu.addItem({ iconHTML: "", label: "10", - accelerator: currentPageSIze === "10" ? '' : undefined, + accelerator: currentPageSize === "10" ? '' : undefined, click() { - updatePageSize(currentPageSIze, "10", protyle, avID); + updatePageSize({ + currentPageSize, + newPageSize: "10", + protyle: options.protyle, + avID: options.avID, + nodeElement: options.nodeElement + }); } }); menu.addItem({ iconHTML: "", - accelerator: currentPageSIze === "25" ? '' : undefined, + accelerator: currentPageSize === "25" ? '' : undefined, label: "25", click() { - updatePageSize(currentPageSIze, "25", protyle, avID); + updatePageSize({ + currentPageSize, + newPageSize: "25", + protyle: options.protyle, + avID: options.avID, + nodeElement: options.nodeElement + }); } }); menu.addItem({ iconHTML: "", - accelerator: currentPageSIze === "50" ? '' : undefined, + accelerator: currentPageSize === "50" ? '' : undefined, label: "50", click() { - updatePageSize(currentPageSIze, "50", protyle, avID); + updatePageSize({ + currentPageSize, + newPageSize: "50", + protyle: options.protyle, + avID: options.avID, + nodeElement: options.nodeElement + }); } }); menu.addItem({ iconHTML: "", - accelerator: currentPageSIze === "100" ? '' : undefined, + accelerator: currentPageSize === "100" ? '' : undefined, label: "100", 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({ x: rect.left, y: rect.bottom