modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete "Entering / exiting fullscreen" pattern documentation

Browse source 
Add `App_onhostcontextchanged_respondToDisplayMode` example showing how to
listen for display mode changes and update UI with `classList.toggle()`.

Update `App_requestDisplayMode_fullscreen` to `App_requestDisplayMode_toggle`
to show the common toggle pattern checking `availableDisplayModes` first.

Refactor full examples (pdf-server, shadertoy-server) to use
`classList.toggle(class, condition)` instead of add/remove branches.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jonathan Hefner 2026-01-19 14:22:00 -06:00
commit dce143e92e
1 changed files with 43 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

16
examples/pdf-server/src/mcp-app.ts
View file

@ -769,16 +769,12 @@ function handleHostContextChanged(ctx: McpUiHostContext) {
if (ctx.displayMode) {
const wasFullscreen = currentDisplayMode === "fullscreen";
currentDisplayMode = ctx.displayMode as "inline" | "fullscreen";
if (ctx.displayMode === "fullscreen") {
mainEl.classList.add("fullscreen");
log.info("Fullscreen mode enabled");
} else {
mainEl.classList.remove("fullscreen");
log.info("Inline mode");
// When exiting fullscreen, request resize to fit content
if (wasFullscreen && pdfDocument) {
requestFitToContent();
}
const isFullscreen = currentDisplayMode === "fullscreen";
mainEl.classList.toggle("fullscreen", isFullscreen);
log.info(isFullscreen ? "Fullscreen mode enabled" : "Inline mode");
// When exiting fullscreen, request resize to fit content
if (wasFullscreen && !isFullscreen && pdfDocument) {
requestFitToContent();
}
updateFullscreenButton();
}