[Bugfix] Zoomable content within a collapsed parent not showing when expanded (Mobile only)

[mark-fitzgerald]

Summary:

Content that is intended to be zoomable needs to have a context for its available space. It does this by using the offsetWidth of its container node to calculate a scale value. However, if the container is within a collapsible widget (such as the Explanation widget), then the container node has a zero width, which results in a scale of zero making it unavailable to the learner.

This bugfix adds a check for the offsetWidth value and loops up the DOM tree for an ancestor with the perseus-renderer class. This ancestor should have a valid width. If no ancestors can be found with a valid width (aka we run out of perseus-renderer nodes), then we break out of the loop and allow for the scale to be zero (instead of causing an infinite loop or error message).

Issue: LEMS-2805

Test plan:

1. Go to the Test Everything Course (Settings > Debug Settings).
2. Go to Unit 2: > Radio > “Radio, definition, explanation exercise”.
3. Answer a question correctly.
4. Click the link in the popup (e.g. “See how we answered this”) to view the hint/rationale.
   • (If needed) Scroll up to the Explanation widget.
5. Toggle open the Explanation widget.
6. Observe that the open widget renders the content in a scaled-down mode (so that there is no scrolling).
   • Observe that the content can be scaled up by tapping once on the content.

[github-actions]

npm Snapshot: Published

Good news!! We've packaged up the latest commit from this PR (cefeed6) and published it to npm. You
can install it using the tag PR2185.

Example:

yarn add @khanacademy/perseus@PR2185

If you are working in Khan Academy's webapp, you can run:

./dev/tools/bump_perseus_version.sh -t PR2185

[github-actions]

Size Change: +392 B (+0.03%)

Total Size: 1.48 MB

Filename	Size	Change
packages/perseus/dist/es/index.js	379 kB	+392 B (+0.1%)

ℹ️ View Unchanged

Filename	Size
packages/kas/dist/es/index.js	39 kB
packages/keypad-context/dist/es/index.js	760 B
packages/kmath/dist/es/index.js	86.9 kB
packages/math-input/dist/es/index.js	77.6 kB
packages/math-input/dist/es/strings.js	1.79 kB
packages/perseus-core/dist/es/index.js	46.3 kB
packages/perseus-editor/dist/es/index.js	688 kB
packages/perseus-linter/dist/es/index.js	22.2 kB
packages/perseus-score/dist/es/index.js	115 kB
packages/perseus/dist/es/strings.js	6.06 kB
packages/pure-markdown/dist/es/index.js	3.66 kB
packages/simple-markdown/dist/es/index.js	12.5 kB

_{compressed-size-action}

[jeremywiebe]

The fix makes sense... and thanks for documenting why we're doing it right there with the fix.

[jeremywiebe]

Why do we need to access parentElement here before calling .closest()? If we don't need to, then closest() would return and would alleviate us from having to use the bullish coalescing operator on the end also.

[mark-fitzgerald]

closest() also checks the element on which it is called. So, when we find an ancestor with .perseus-renderer, if we need to do another call for closest(), we would end up with the same element, resulting in an infinite loop (speaking from personal experience, unfortunately). Referencing the parent element ensures that we continue traversing up the DOM tree.

[jeremywiebe]

Ouch! Can you note that in a comment? That was the first thing I wondered and would probably think, "I'll just simplify this code some by refactoring this... " 😂

[mark-fitzgerald]

Comment added.

[jeremywiebe]

Thanks!