Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update getCurrentOutputInfo() on element resize or visibility change #3682

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

cpsievert
Copy link
Collaborator

@cpsievert cpsievert commented Aug 9, 2022

Currently shiny.js only sends input values tied to output values (e.g., .clientdata_output_{id}_width, etc) to the server (i.e., getCurrentOutputInfo()) when the window resizes (or if certain Bootstrap events happens). This PR leverages ResizeObserver() and IntersectionObserver() to update those relevant input values whenever the element is resized or has its visibility changed (regardless of what has caused that change)

TODO

  • Investigate more why fbe9d24 is needed (it's needed because, if the output container is stretchy, the image won't know to shrink when the container shrinks since it's size is determined by the parent)

@cpsievert cpsievert changed the title Send relevant getCurrentOutputInfo() input values on element resize, mutation, or intersection Update getCurrentOutputInfo() on element resize or visibility change Aug 9, 2022
@cpsievert cpsievert requested a review from jcheng5 August 9, 2022 17:30
@dvg-p4

This comment was marked as outdated.

@dvg-p4
Copy link
Contributor

dvg-p4 commented Sep 14, 2022

(it's needed because, if the output container is stretchy, the image won't know to shrink when the container shrinks since it's size is determined by the parent)

@cpsievert what does a "stretchy output container" look like? e.g. what's an example app that doesn't resize the image properly without that fbe9d24 code? (Want to make sure my PR #3683 isn't overlooking an edge case, and that it's compatible with this fix.)

function doSendOutputHiddenState() {
const visibleOutputs = {};
io.observe(el);
$(el).data("shiny-intersection-observer", io);
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Double-check on the UX with scrolling here

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.

2 participants