| 1 |
import { useLayoutEffect, useRef, useState } from '@wordpress/element'; |
| 2 |
|
| 3 |
export const useIframeScale = ({ viewportWidth }) => { |
| 4 |
const containerRef = useRef(null); |
| 5 |
const [scale, setScale] = useState(1); |
| 6 |
const [contentHeight, setContentHeight] = useState(null); |
| 7 |
|
| 8 |
useLayoutEffect(() => { |
| 9 |
const el = containerRef.current; |
| 10 |
if (!el) return; |
| 11 |
const obs = new ResizeObserver(([entry]) => { |
| 12 |
setScale(entry.contentRect.width / viewportWidth); |
| 13 |
}); |
| 14 |
obs.observe(el); |
| 15 |
return () => obs.disconnect(); |
| 16 |
}, []); |
| 17 |
|
| 18 |
const handleIframeLoad = (e) => { |
| 19 |
const iframeDoc = e.target.contentDocument; |
| 20 |
if (!iframeDoc?.body) return; |
| 21 |
const height = iframeDoc.body.scrollHeight; |
| 22 |
if (height) setContentHeight(height); |
| 23 |
}; |
| 24 |
|
| 25 |
return { containerRef, scale, contentHeight, handleIframeLoad }; |
| 26 |
}; |
| 27 |
|
