Skip to content

Embed: fill the iframe, scroll the code inside, report the natural height (P53b) - #61

Open
cedricvogel-leo wants to merge 1 commit into
mainfrom
feature/embed-visible-height
Open

cedricvogel-leo wants to merge 1 commit into
mainfrom
feature/embed-visible-height

Conversation

@cedricvogel-leo

Copy link
Copy Markdown
Collaborator

P53b, the editor half. The macro half is glpython-edu/glpython-liascript (separate PR). Merge this one first: it deploys the embed, and the new macro relies on it.

What was wrong

I checked this in the real LiaScript player at 1440×900. The element that scrolls the course is .lia-slide__container, 772 px visible below LiaScript's 78 px top bar. The embed was 962 px tall:

  • the visualizer alone took 720 px (80 % of the window, measured once at load);
  • the step bar, footer and console came on top of that.

So the stepper and the footer could never be in view together. The P53 footer was inside the capped area; causes 1 and 2 were the real ones.

Change

  • The embed fills its iframe (src/embed/style.css). A taller step scrolls .visualizer-view, between the step bar and the footer, which stay in view. Without the visualizer, a long output scrolls the console. Only those two give way; the bars and the output panel keep their height. The windowHeight / visualizerHeight caps are gone (the parameters are ignored).
  • glpython:resize reports the natural height (naturalHeight in src/embed/App.tsx): the root with the code area and the console at their content's height. A clipped embed doesn't stay small, and a stretched one (large) doesn't stay big. It also reports visualizing (new optional field, no version bump: old parents ignore it, and the macro treats a missing field as before). The report also watches the content, since the root keeps its size while filling the iframe.
  • demo.html caps the iframe at 80 % of the window, like the macro.
  • README and CLAUDE.md are updated.
  • The IDE is unchanged: everything is scoped to .embed-app; the protocol type only gains an optional field.

Checks

  • lint (only the known cursor warning), both builds, test:protocol, runtime, hints, layout, tree, svg, console all pass.
  • test:console:
    • The harness now acts like the macro: iframe = min(reported, ?cap=).
    • The steady-height cases use cap=720.
    • New case «the embed's height»:
      • at the cap, the code scrolls;
      • the bar, the footer and the current line are in view;
      • the iframe's own page doesn't scroll;
      • a larger cap gives the full height, a smaller one shrinks it again (no sticking);
      • a short program doesn't scroll;
      • a long output scrolls the console.
    • The Ctrl+D case now waits for its EOFError (a race in the check).
  • Real LiaScript player, new macro + this embed, recursive evaluator, deepest call (5 boxes):
    • 1440×900 textbook and presentation: block = 80 % of the visible height, stepper and footer visible, arrow to the footer entry and the sticky variable row visible;
    • top bar hidden: the block grows to 720 px; shown again: back to 618 px;
    • window 600 / 1100 px: the block follows;
    • 768×1024 with touch: 80 %, stepper and footer visible;
    • wheel and touch: the code scrolls first, then the page; on a short program the page scrolls right away.
  • Short programs (eval and visual, Run, Tests): the same heights as before (189/377 px, 201 px).

🤖 Generated with Claude Code

…ight (P53b)

The embed no longer caps its visualizer at 80% of a window height measured
once at load. It fills its iframe, whose height the parent sets (the
LiaScript macro: at most 80% of the course's visible height): a taller step
scrolls the visualizer's code area between the step bar and the footer, a
taller output the console, and only those give way. glpython:resize reports
the content's natural height, also while the iframe is smaller or taller,
and whether the visualizer is open (optional field, for "large").

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant