Knowls - avoid flash of content when revealing

[ascholerChemeketa]

Knowls currently can briefly flash the content before trying to shrink and then reveal it. This is most noticeable when the knowl contains complex content (e.g. MathJax) and has not been rendered yet.

This removes that flash of content and smooths the reveal process by better calculating the final height and padding of the element being revealed. There is still a brief hiccup as complex content is revealed as the content is loaded and rendered.

For issue identified by @siefkenj here: https://groups.google.com/g/pretext-dev/c/XgiX8KhH2Dw/m/eW9srLM8AQAJ?utm_medium=email&utm_source=footer

---

This pull request enhances the animation logic for revealing and hiding "knowl" content, focusing on smoother transitions and improved style management. The main improvements are the preservation and restoration of inline styles during animations, more accurate and visually consistent expand/collapse animations, and better handling of animation state to prevent conflicts.

Key changes include:

Animation and Style Management Improvements:

• Added methods to SlideRevealer to store and restore the inline styles (overflow, height, paddingTop, paddingBottom) of the animated element before and after animations, ensuring that original styles are not lost or corrupted during transitions. (js/knowl.js [1] [2]
• Refined the expand/collapse animation to use the element's natural padding and height values for more accurate measurements, and to animate both paddingTop and paddingBottom independently. The animation now uses the ease-out easing for a smoother effect. (js/knowl.js [1] [2]

Animation State and Event Handling:

• Introduced an isBusy() method in SlideRevealer to prevent overlapping animations or state conflicts, and updated event handlers in LinkKnowl to check this state before triggering actions. (js/knowl.js [1] [2]

Code Structure and Consistency:

• Updated LinkKnowl to store the SlideRevealer instance as a member variable (slideHandler), ensuring consistent access and preventing duplicate handlers. (js/knowl.js [1] [2]
• Updated all usages of the slide handler in LinkKnowl to use the new member variable, ensuring correct behavior throughout the component. (js/knowl.js js/knowl.jsL294-R366)

These changes collectively result in more robust, visually consistent, and user-friendly knowl reveal/hide animations.

[rbeezer]

Really nice. And done quickly! Merged as-is. Thanks!

[rbeezer]

Just for the record, it was @jjrsylvestre who first posted about this.