dmvs_html: scripts - click handlers worked out at conversion, CSS tra…

[JohnAmadis]

dmvs_html: scripts - screens that switch, as the page's JavaScript does

The page's JavaScript is not run on the device. What its click handlers do is worked out at conversion and becomes the view's variables, bound boxes and handlers.

Understood:

• document.getElementById() / querySelector('#id');
• top-level const / let (a global that the handlers assign becomes a view variable holding an element, with the set of elements it may hold);
• functions called from onclick, inlined with their constant arguments, and this (the clicked element);
• classList.add / remove / toggle / contains, and style.<property> = …;
• if on such variables (x, !x, a === b, contains) and return.

How changes become motion:

• Every change is laid out: the whole page is laid out again with that class or style.
• How the element moved and faded becomes its group's x / y / opacity variables.
• These are animated with the element's CSS transition: duration and timing function, in the state after the change, as browsers do. Transition parsing covers the longhands, the shorthand and Tailwind's transition-* / duration-* / ease-*.

Reported and left out: what the page does when it loads (timers, Date, written text), loops, events other than clicks, and changes that show or hide an element or lay its inside out anew.

Hit areas: the clickable element's group is its border box, with its outer shadow painted outside it, so the hit area is the element and not its shadow.

Result on the dmodOS design (tests/fixtures/dmodos, the unmodified page):

• One view: converted from the page as it is.
• Clicking through all six applications and back: every screen matches Chrome as closely as the static variants did. Mean error vs Chrome: 0.9–3.0, the same as before.
• Speed: opening and closing animate, and cost the same as the hand-written view's animations.

Tests: a small page with a window that slides in (transition: top 0.3s ease-out), a screen that dims (style.opacity) and a toggle (this.classList.toggle); the dmodOS page's six windows bound to their positions.

Based on feature/html. Requires dmvsi@>=0.2.

🤖 Generated with Claude Code