use crate::core::ElementMaybeSignal; use cfg_if::cfg_if; use default_struct_builder::DefaultBuilder; use leptos::*; use std::marker::PhantomData; #[cfg(not(feature = "ssr"))] use crate::{use_intersection_observer_with_options, UseIntersectionObserverOptions}; /// Tracks the visibility of an element within the viewport. /// /// ## Demo /// /// [Link to Demo](https://github.com/Synphonyte/leptos-use/tree/main/examples/use_element_visibility) /// /// ## Usage /// /// ``` /// # use leptos::*; /// # use leptos::html::Div; /// # use leptos_use::use_element_visibility; /// # /// # #[component] /// # fn Demo() -> impl IntoView { /// let el = create_node_ref::
(); /// /// let is_visible = use_element_visibility(el); /// /// view! { ///
///

{is_visible}

///
/// } /// # } /// ``` /// /// ## Server-Side Rendering /// /// On the server this returns a `Signal` that always contains the value `false`. /// /// ## See also /// /// * [`fn@crate::use_intersection_observer`] pub fn use_element_visibility(target: El) -> Signal where El: Into>, T: Into + Clone + 'static, { use_element_visibility_with_options::( target, UseElementVisibilityOptions::default(), ) } /// Version of [`use_element_visibility`] with that takes a `UseElementVisibilityOptions`. See [`use_element_visibility`] for how to use. #[cfg_attr(feature = "ssr", allow(unused_variables))] pub fn use_element_visibility_with_options( target: El, options: UseElementVisibilityOptions, ) -> Signal where El: Into>, T: Into + Clone + 'static, ContainerEl: Into>, ContainerT: Into + Clone + 'static, { let (is_visible, set_visible) = create_signal(false); cfg_if! { if #[cfg(not(feature = "ssr"))] { use_intersection_observer_with_options( target.into(), move |entries, _| { // In some circumstances Chrome passes a first (or only) entry which has a zero bounding client rect // and returns `is_intersecting` erroneously as `false`. if let Some(entry) = entries.into_iter().find(|entry| { let rect = entry.bounding_client_rect(); rect.width() > 0.0 || rect.height() > 0.0 }) { set_visible.set(entry.is_intersecting()); } }, UseIntersectionObserverOptions::default().root(options.viewport), ); }} is_visible.into() } /// Options for [`use_element_visibility_with_options`]. #[derive(DefaultBuilder)] pub struct UseElementVisibilityOptions where El: Into>, T: Into + Clone + 'static, { /// A `web_sys::Element` or `web_sys::Document` object which is an ancestor of the intended `target`, /// whose bounding rectangle will be considered the viewport. /// Any part of the target not visible in the visible area of the `root` is not considered visible. /// Defaults to `None` (which means the root `document` will be used). /// Please note that setting this to a `Some(document)` may not be supported by all browsers. /// See [Browser Compatibility](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#browser_compatibility) #[cfg_attr(feature = "ssr", allow(dead_code))] viewport: Option, #[builder(skip)] _marker: PhantomData, } impl Default for UseElementVisibilityOptions { fn default() -> Self { Self { viewport: None, _marker: PhantomData, } } }