feat(iframe): 添加父窗口与iframe间的页面跳转API
暴露OCDIframeAPI接口,包含getFirstVisiblePageNo和gotoPage方法 移除demo.html中重复实现的页面跳转逻辑,改用新API
This commit is contained in:
1 parent
27c85de1c4
commit
1335932afa
3 files changed
+506
-480
No files matched your search
+63
@@ -456,6 +456,69 @@ window.onload = function () {
|
||||
}
|
||||
}
|
||||
|
||||
// 在 iframe 场景下对父窗口暴露:当前页获取与页码跳转
|
||||
// 说明:返回值与入参均为 1 基页码(第 1 页记为 1)
|
||||
winAny.OCDIframeAPI = {
|
||||
getFirstVisiblePageNo: (): number => {
|
||||
try {
|
||||
const container = instance.command.getContainer()
|
||||
const canvases = Array.from(
|
||||
container.querySelectorAll('canvas[data-index]')
|
||||
) as HTMLCanvasElement[]
|
||||
if (!canvases.length) return 1
|
||||
const viewHeight = Math.max(
|
||||
document.documentElement.clientHeight,
|
||||
window.innerHeight || 0
|
||||
)
|
||||
const visible = canvases
|
||||
.map(c => {
|
||||
const rect = c.getBoundingClientRect()
|
||||
const overlapY = Math.min(rect.bottom, viewHeight) - Math.max(rect.top, 0)
|
||||
return { c, rect, overlapY }
|
||||
})
|
||||
.filter(x => x.overlapY > 0)
|
||||
.sort((a, b) => a.rect.top - b.rect.top)
|
||||
let chosen: HTMLCanvasElement | null = visible.length ? visible[0].c : null
|
||||
if (!chosen) {
|
||||
chosen = canvases.sort(
|
||||
(a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top
|
||||
)[0] || null
|
||||
}
|
||||
const idx = Number((chosen?.dataset.index ?? '0'))
|
||||
return Number.isFinite(idx) ? idx + 1 : 1
|
||||
} catch {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
gotoPage: (pageNo: number): boolean => {
|
||||
try {
|
||||
if (!Number.isFinite(pageNo) || pageNo <= 0) return false
|
||||
const index = Math.max(0, Math.floor(pageNo - 1))
|
||||
const container = instance.command.getContainer()
|
||||
const target = container.querySelector(
|
||||
`canvas[data-index="${index}"]`
|
||||
) as HTMLCanvasElement | null
|
||||
if (!target) return false
|
||||
// 滚动到该页(居中)
|
||||
target.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
|
||||
// 触发一次居中位置的 mousedown,让编辑器内部更新 pageNo
|
||||
const rect = target.getBoundingClientRect()
|
||||
const clientX = rect.left + rect.width / 2
|
||||
const clientY = rect.top + rect.height / 2
|
||||
const evt = new MouseEvent('mousedown', {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
clientX,
|
||||
clientY
|
||||
})
|
||||
target.dispatchEvent(evt)
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const undoDom = document.querySelector<HTMLDivElement>('.menu-item__undo')!
|
||||
undoDom.title = `撤销(${isApple ? '⌘' : 'Ctrl'}+Z)`
|
||||
undoDom.onclick = function () {
|
||||
|
||||
Reference in new issue
Block a user