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

Add the onvisible event handler to Element #2911

Merged
merged 19 commits into from
Dec 2, 2024

Conversation

ASR-ASU
Copy link
Contributor

@ASR-ASU ASR-ASU commented Sep 1, 2024

This PR add the capability to handle the visible events for a given Element:

#[component]
fn MyComponent() {
    rsx! {
        div {
            onvisible: move |evt| {
	        let data = evt.data();

                println!("bounding_client_rect={:?}", data.get_bounding_client_rect());
                println!("intersection_ratio={:?}", data.get_intersection_ratio());
                println!("intersection_rect={:?}", data.get_intersection_rect());
                println!("is_intersecting={:?}", data.is_intersecting());
                println!("root_bounds={:?}", data.get_root_bounds());
                println!("target={:?}", data.get_target());
                println!("time={:?}", data.get_time());
            }
        }
    }
}

For now, the IntersectionObserverEntry.target is not used/serialized. If it make sense to use it, how can we serialize it? Could we use the data-dioxus-id?

@ASR-ASU
Copy link
Contributor Author

ASR-ASU commented Sep 2, 2024

ElementRef could do the trick.

@ealmloff ealmloff self-requested a review September 5, 2024 13:30
Copy link
Member

@ealmloff ealmloff left a comment

Choose a reason for hiding this comment

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

Thanks for working on this! I had a few questions about some APIs, otherwise the implementation looks good

packages/desktop/src/webview.rs Outdated Show resolved Hide resolved
packages/html/src/events/visible.rs Outdated Show resolved Hide resolved
packages/html/src/events/visible.rs Outdated Show resolved Hide resolved
@ealmloff ealmloff added enhancement New feature or request html Related to the html crate labels Sep 5, 2024
@jkelleyrtp
Copy link
Member

In the next version of Dioxus we're going to clean up our NodeRef implementation, so for now, I simply removed it from this PR. Once we add it in, all events should benefit from .target() working as expected. Otherwise, this looks good, and once checks pass, I'll merge it!

@jkelleyrtp jkelleyrtp merged commit 79a2f02 into DioxusLabs:main Dec 2, 2024
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request html Related to the html crate
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants