-
Notifications
You must be signed in to change notification settings - Fork 508
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use height of editor from height-data.json
- Loading branch information
1 parent
93aa399
commit 363f73f
Showing
7 changed files
with
170 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
import { useEffect, useLayoutEffect, useRef } from "react"; | ||
|
||
interface InteractiveEditorHeight { | ||
minFrameWidth: number; | ||
height: number; | ||
} | ||
export type InteractiveEditorHeights = InteractiveEditorHeight[]; | ||
interface InteractiveEditor { | ||
name: string; | ||
heights: InteractiveEditorHeights; | ||
} | ||
export interface InteractiveExamplesHeightData { | ||
editors: InteractiveEditor[]; | ||
examples: Record<string, string>; | ||
} | ||
|
||
/** | ||
* Replaces iframe created by EmbedInteractiveExample.ejs and sets its height dynamically based on editor heights provided from height-data.json | ||
*/ | ||
export function InteractiveExample({ | ||
src, | ||
heights, | ||
}: { | ||
src: string; | ||
heights: InteractiveEditorHeights; | ||
}) { | ||
const ref = useRef<HTMLIFrameElement>(null); | ||
|
||
useLayoutEffect(() => { | ||
if (ref.current) { | ||
setHeight(ref.current, heights); | ||
|
||
// Updating height whenever iframe is resized | ||
const observer = new ResizeObserver((entries) => | ||
entries.forEach((e) => | ||
setHeight(e.target as typeof ref.current, heights) | ||
) | ||
); | ||
observer.observe(ref.current); | ||
return () => (ref.current ? observer.unobserve(ref.current) : undefined); | ||
} | ||
}, [ref.current]); | ||
|
||
return ( | ||
<iframe | ||
ref={ref} | ||
className="interactive" | ||
src={src} | ||
title="MDN Web Docs Interactive Example" | ||
></iframe> | ||
); | ||
} | ||
|
||
function setHeight(frame: HTMLIFrameElement, heights) { | ||
const frameWidth = getIFrameWidth(frame); | ||
const height = calculateHeight(frameWidth, heights); | ||
frame.style.height = height; | ||
} | ||
|
||
/** | ||
* Calculates height of the iframe based on its width and data provided by height-data.json | ||
*/ | ||
function calculateHeight( | ||
frameWidth: number, | ||
heights: InteractiveEditorHeights | ||
) { | ||
let frameHeight = 0; | ||
for (const height of heights) { | ||
if (frameWidth >= height.minFrameWidth) { | ||
frameHeight = height.height; | ||
} | ||
} | ||
return `${frameHeight}px`; | ||
} | ||
|
||
function getIFrameWidth(frame: HTMLIFrameElement) { | ||
const styles = getComputedStyle(frame); | ||
|
||
return ( | ||
frame.clientWidth - | ||
parseFloat(styles.paddingLeft) - | ||
parseFloat(styles.paddingRight) | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.