Add the onvisible event handler to Element (#2911)

* Add the `onvisible` event using the IntersectionObserver

* Add a visible example

This example is based on https://codepen.io/ryanfinni/pen/VwZeGxN

* Remove web-sys CustomEvent feature for html package

* update js bindings and hash

* Use dioxus doc instead of lorem ipsum

* Fix clippy warning

* Add get_target method to the event data

* Make `get_time` return an Instant instead of a f64

* fix merge conflicts, compilinga

* remove target

* small nits

* serialzie as time_ms

* fix timing, works on desktop

* remove latent nits, fix hash

* box size clippy

* fix browserlist cargo.lock

---------

Co-authored-by: Evan Almloff <[email protected]>
Co-authored-by: Jonathan Kelley <[email protected]>

Author: 3 people

Cargo.lock

@@ -436,6 +436,10 @@ doc-scrape-examples = true
 name = "streams"
 doc-scrape-examples = true
 
+[[example]]
+name = "visible"
+doc-scrape-examples = true
+
 [[example]]
 name = "window_event"
 required-features = ["desktop"]

Cargo.toml

@@ -0,0 +1,27 @@
+* {
+  box-sizing: border-box;
+}
+
+.container {
+  height: 500px;
+  width: 500px;
+  margin: 100px auto;
+}
+
+p {
+  line-height: 30px;
+
+}
+
+.animated-text {
+  font-size: 30px;
+  text-align: center;
+  opacity: 0;
+  transform: translateY(100px);
+  transition: opacity 1s ease, transform 1s ease;
+}
+
+.animated-text.visible {
+  opacity: 1;
+  transform: translateX(0);
+}

examples/assets/visible.css

@@ -1,5 +1,4 @@
 //! A simple little clock that updates the time every few milliseconds.
-//!
 
 use async_std::task::sleep;
 use dioxus::prelude::*;

examples/clock.rs

@@ -0,0 +1,86 @@
+//! Port of the https://codepen.io/ryanfinni/pen/VwZeGxN example
+
+use dioxus::prelude::*;
+
+fn main() {
+    dioxus::launch(app);
+}
+
+fn app() -> Element {
+    let mut animated_classes = use_signal(|| ["animated-text", ""]);
+
+    rsx! {
+        document::Link { rel: "stylesheet", href: asset!("./examples/assets/visible.css") }
+
+        div {
+            class: "container",
+
+            p {
+                "Scroll to the bottom of the page. The text will transition in when it becomes visible in the viewport."
+            }
+
+            p {
+                "First, let's create a new project for our hacker news app. We can use the CLI to create a new
+                project. You can select a platform of your choice or view the getting started guide for more information
+                on each option. If you aren't sure what platform to try out, we recommend getting started with web or
+                desktop:"
+            }
+
+            p {
+                "The template contains some boilerplate to help you get started. For this guide, we will be rebuilding some of the code
+                from scratch for learning purposes. You can clear the src/main.rs file. We will be adding new code in the next
+                sections."
+            }
+
+            p {
+                "Next, let's setup our dependencies. We need to set up a few dependencies to work with the hacker news API: "
+            }
+
+            p {
+                "First, let's create a new project for our hacker news app. We can use the CLI to create a new
+                project. You can select a platform of your choice or view the getting started guide for more information
+                on each option. If you aren't sure what platform to try out, we recommend getting started with web or
+                desktop:"
+            }
+
+            p {
+                "The template contains some boilerplate to help you get started. For this guide, we will be rebuilding some of the code
+                from scratch for learning purposes. You can clear the src/main.rs file. We will be adding new code in the next
+                sections."
+            }
+
+            p {
+                "Next, let's setup our dependencies. We need to set up a few dependencies to work with the hacker news API: "
+            }
+
+            p {
+                "First, let's create a new project for our hacker news app. We can use the CLI to create a new
+                project. You can select a platform of your choice or view the getting started guide for more information
+                on each option. If you aren't sure what platform to try out, we recommend getting started with web or
+                desktop:"
+            }
+
+            p {
+                "The template contains some boilerplate to help you get started. For this guide, we will be rebuilding some of the code
+                from scratch for learning purposes. You can clear the src/main.rs file. We will be adding new code in the next
+                sections."
+            }
+
+            p {
+                "Next, let's setup our dependencies. We need to set up a few dependencies to work with the hacker news API: "
+            }
+
+            h2 {
+                class: animated_classes().join(" "),
+                onvisible: move |evt| {
+                    let data = evt.data();
+                    if let Ok(is_intersecting) = data.is_intersecting() {
+                        animated_classes.write()[1] = if is_intersecting { "visible" } else { "" };
+                    }
+                },
+
+                "Animated Text"
+            }
+        }
+    }
+}

examples/visible.rs

@@ -95,6 +95,7 @@ pub fn event_bubbles(evt: &str) -> bool {
         "transitionend" => true,
         "toggle" => true,
         "mounted" => false,
+        "visible" => false,
         _ => true,
     }
 }

packages/core-types/src/bubbles.rs

@@ -161,6 +161,14 @@ impl HtmlEventConverter for SerializedHtmlEventConverter {
             .into()
     }
 
+    fn convert_visible_data(&self, event: &PlatformEventData) -> VisibleData {
+        event
+            .downcast::<SerializedVisibleData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
     fn convert_wheel_data(&self, event: &PlatformEventData) -> WheelData {
         event
             .downcast::<SerializedWheelData>()

packages/desktop/src/events.rs

@@ -146,6 +146,8 @@ pub trait HtmlEventConverter: Send + Sync {
     fn convert_touch_data(&self, event: &PlatformEventData) -> TouchData;
     /// Convert a general event to a transition data event
     fn convert_transition_data(&self, event: &PlatformEventData) -> TransitionData;
+    /// Convert a general event to a visible data event
+    fn convert_visible_data(&self, event: &PlatformEventData) -> VisibleData;
     /// Convert a general event to a wheel data event
     fn convert_wheel_data(&self, event: &PlatformEventData) -> WheelData;
 }
@@ -258,6 +260,12 @@ impl From<&PlatformEventData> for TransitionData {
     }
 }
 
+impl From<&PlatformEventData> for VisibleData {
+    fn from(val: &PlatformEventData) -> Self {
+        with_event_converter(|c| c.convert_visible_data(val))
+    }
+}
+
 impl From<&PlatformEventData> for WheelData {
     fn from(val: &PlatformEventData) -> Self {
         with_event_converter(|c| c.convert_wheel_data(val))
@@ -282,6 +290,7 @@ mod selection;
 mod toggle;
 mod touch;
 mod transition;
+mod visible;
 mod wheel;
 
 pub use animation::*;
@@ -302,4 +311,5 @@ pub use selection::*;
 pub use toggle::*;
 pub use touch::*;
 pub use transition::*;
+pub use visible::*;
 pub use wheel::*;