@lark-apaas/coding-registry-buildless 0.1.21 → 0.1.23

package/scripts/deck-stage.js

@@ -35,9 +35,10 @@
  *      a `deckchange`
  *      CustomEvent on the element: detail = {action, from, to, slide}.
  *  (g) mobile — on mobile devices the same deck automatically renders as
- *      a scrollable vertical card list (browse) and a rotated fullscreen
- *      presenting mode. This needs NO authoring changes: never hand-roll
- *      mobile/responsive slide layouts. Desktop behaviour is unchanged.
+ *      a scrollable vertical card list (browse) and a fullscreen presenting
+ *      mode, pseudo-landscape or upright as the host asks. This needs NO
+ *      authoring changes: never hand-roll mobile/responsive slide layouts.
+ *      Desktop behaviour is unchanged.
  *      Browse mode renders each slide's static base state and never fires
  *      entrance animations — exactly like the thumbnail rail and print
  *      (presenting keeps animations). One more surface that requires the
@@ -224,7 +225,15 @@
    * reuses. It costs one thing — render() also resets that img's `sizes`,
    * discarding the rail-width hint _materialize sets; the URL still matches the
    * slide's, so the thumb reuses the slide's decoded bitmap. */
-  const KEEP_LIVE_PREFIXES = ['cd-'];
+  /* The device frames (ios-/android-/macos-/browser-) get in on the *other* half
+   * of the rule. Their content lives in a shadow root, so cloneNode captures none
+   * of it — for them re-mounting is not "adds nothing", it is the only way to get
+   * the content at all. They do satisfy clause 2: purely presentational, read
+   * attributes and paint the shadow, no storage and no messages.
+   * design-canvas is deliberately NOT on this list — it reads localStorage,
+   * fetches its sidecar and posts to the host on mount, so running it once per
+   * thumbnail would corrupt the real state. */
+  const KEEP_LIVE_PREFIXES = ['cd-', 'ios-', 'android-', 'macos-', 'browser-'];
   const keepsCloneLive = (el) => KEEP_LIVE_PREFIXES.some((p) => el.localName.startsWith(p));
 
   /* Why a clone needs a substrate rule of its own: _collectAuthorCss samples
@@ -607,11 +616,13 @@
        Rotate only while the device is physically portrait. Once the user
        turns the phone (system auto-rotate) the viewport itself is landscape,
        and stacking another 90° would render slides sideways — so landscape
-       falls back to a plain full-bleed fit. _fitMobilePresent and
-       _mobPresentZone branch on the same orientation test. */
+       falls back to a plain full-bleed fit. data-present-portrait is the
+       host asking for an upright presentation, which suppresses the rotation
+       on a portrait device too. This selector is the third copy of the
+       predicate in _presentRotated — keep all three in phase. */
     :host([data-mobile-present]) .stage { background: #000; }
     @media (orientation: portrait) {
-      :host([data-mobile-present]) .stage {
+      :host([data-mobile-present]:not([data-present-portrait])) .stage {
         inset: auto;
         left: 50%;
         top: 50%;
@@ -882,6 +893,10 @@
       this._snthumb = /[?&](_snthumb|thumbnail)=/.test(location.search);
       this._preflight = /[?&]preflight=/.test(location.search);
       this._mobile = isMobileUA();
+      // Orientation the host asked presenting to enter in. Sticky: only a
+      // message that actually carries `orientation` moves it, so replays and
+      // any other bare {on} message leave the current orientation alone.
+      this._presentPortrait = false;
       // Layout-driven size signal. window.resize is unreliable inside
       // prerendered/reframed iOS WebViews and host-managed iframes — the
       // frame can change size without any resize event, leaving a layout
@@ -1896,7 +1911,17 @@
     _syncMobileMode() {
       const eligible = (this._mobile || this._preflight) && !this.hasAttribute('noscale') && !this._snthumb;
       this.toggleAttribute('data-mobile-list', eligible && !this._presenting);
-      this.toggleAttribute('data-mobile-present', eligible && !!this._presenting && !this._preflight);
+      const present = eligible && !!this._presenting && !this._preflight;
+      this.toggleAttribute('data-mobile-present', present);
+      this.toggleAttribute('data-present-portrait', present && this._presentPortrait);
+    }
+
+    // Single source of truth for "is the presenting stage CSS-rotated?".
+    // Read by the fit and the tap zones; the @media (orientation: portrait)
+    // rule above is the same predicate spelled in CSS, reached through the
+    // data-present-portrait attribute _syncMobileMode derives from this state.
+    _presentRotated() {
+      return !this._presentPortrait && window.innerHeight >= window.innerWidth;
     }
 
     _fitMobileList() {
@@ -2037,12 +2062,12 @@
       this.removeAttribute('data-windowed');
       this._canvas.style.width = this.designWidth + 'px';
       this._canvas.style.height = this.designHeight + 'px';
-      // Portrait: the stage is CSS-rotated, so its logical size is the
-      // swapped viewport. Landscape (user physically rotated): no rotation,
-      // plain fit. The CSS branches on the same orientation query.
-      const portrait = window.innerHeight >= window.innerWidth;
-      const lw = portrait ? window.innerHeight : window.innerWidth;
-      const lh = portrait ? window.innerWidth : window.innerHeight;
+      // Rotated: the stage is CSS-rotated, so its logical size is the swapped
+      // viewport. Otherwise (device already landscape, or the host asked for
+      // an upright presentation) it is a plain fit into the viewport.
+      const rotated = this._presentRotated();
+      const lw = rotated ? window.innerHeight : window.innerWidth;
+      const lh = rotated ? window.innerWidth : window.innerHeight;
       const s = Math.min(lw / this.designWidth, lh / this.designHeight);
       this._canvas.style.transform = 'scale(' + s + ')';
     }
@@ -2121,13 +2146,25 @@
     _onMessage(e) {
       const d = e.data;
       if (d && d.type === 'miaoda:deck:presenting' && typeof d.on === 'boolean') {
+        // orientation is optional and sticky — the host owns it end to end, and
+        // a message that omits it (a mirror replay, or a host that predates the
+        // field) means "unchanged", never "back to landscape". Absent field on
+        // a fresh deck therefore keeps the historical rotate-on-portrait
+        // behaviour, which is what the default has to be.
+        const portrait = d.orientation === 'portrait';
+        const flipped = d.orientation != null && portrait !== this._presentPortrait;
+        if (d.orientation != null) this._presentPortrait = portrait;
         // Same-value messages (incl. mirror replays routed back through here)
         // must not re-run the layout work or re-emit. _presenting starts
-        // undefined, so the first message always lands.
-        if (d.on === this._presenting) return;
+        // undefined, so the first message always lands. The one same-value
+        // case that still has to land is an orientation flip while presenting:
+        // it carries the same `on` but needs the relayout.
+        if (d.on === this._presenting && !(flipped && d.on)) return;
         this._presenting = d.on;
         this._syncMobileMode();
-        if (!d.on) this._toggleMobUi(false);
+        // Leaving presenting, or flipping to upright (which has no control
+        // layer at all), both have to take an open one down with them.
+        if (!d.on || this._presentPortrait) this._toggleMobUi(false);
         this._syncRailHidden();
         this._syncNotesHidden();
         this._closeMenu();
@@ -2221,8 +2258,12 @@
       e.preventDefault();
       if (this.hasAttribute('data-mobile-present')) {
         const zone = this._mobPresentZone(e);
-        if (zone === 'menu') this._toggleMobUi();
-        else {
+        if (zone === 'menu') {
+          // Upright presenting ships no control layer: the host owns the exit
+          // chrome and the page navigation there, so the middle third stays
+          // inert rather than offering a second, conflicting way in.
+          if (!this._presentPortrait) this._toggleMobUi();
+        } else {
           this._advance(zone === 'prev' ? -1 : 1, 'tap');
           if (this.hasAttribute('data-mob-ui')) this._toggleMobUi(true);
         }
@@ -2238,10 +2279,9 @@
     // these comparisons — single point of change).
     _mobPresentZone(e) {
       const rect = this._stage.getBoundingClientRect();
-      // Portrait = stage is rotated, visual x comes from viewport y;
-      // landscape = no rotation, viewport x directly. Same branch as the fit.
-      const portrait = window.innerHeight >= window.innerWidth;
-      const x = portrait
+      // Rotated stage = the visual x axis comes from viewport y; unrotated =
+      // viewport x directly. Same predicate as the fit.
+      const x = this._presentRotated()
         ? (e.clientY - rect.top) / Math.max(1, rect.height)
         : (e.clientX - rect.left) / Math.max(1, rect.width);
       return x < 1 / 3 ? 'prev' : x > 2 / 3 ? 'next' : 'menu';