();
+/// let UseElementBoundingReturn {
+/// x, y, top,right,bottom,left, width, height, ..
+/// } = use_element_bounding(el);
+///
+/// view! {
}
/// # }
/// ```
-pub fn use_element_bounding() -> UseElementBoundingReturn {
- use_element_bounding_with_options(UseElementBoundingOptions::default())
+pub fn use_element_bounding
(target: El) -> UseElementBoundingReturn
+where
+ El: Into> + Clone,
+ T: Into + Clone + 'static,
+{
+ use_element_bounding_with_options(target, UseElementBoundingOptions::default())
}
/// Version of [`use_element_bounding`] that takes a `UseElementBoundingOptions`. See [`use_element_bounding`] for how to use.
-pub fn use_element_bounding_with_options(options: UseElementBoundingOptions) -> UseElementBoundingReturn {
- UseElementBoundingReturn {}
+pub fn use_element_bounding_with_options(
+ target: El,
+ options: UseElementBoundingOptions,
+) -> UseElementBoundingReturn
+where
+ El: Into> + Clone,
+ T: Into + Clone + 'static,
+{
+ let UseElementBoundingOptions {
+ reset,
+ window_resize,
+ window_scroll,
+ immediate,
+ } = options;
+
+ let (height, set_height) = create_signal(0.0);
+ let (width, set_width) = create_signal(0.0);
+ let (left, set_left) = create_signal(0.0);
+ let (right, set_right) = create_signal(0.0);
+ let (top, set_top) = create_signal(0.0);
+ let (bottom, set_bottom) = create_signal(0.0);
+ let (x, set_x) = create_signal(0.0);
+ let (y, set_y) = create_signal(0.0);
+
+ let target = target.into();
+
+ let update = {
+ let target = target.clone();
+
+ move || {
+ let el = target.get_untracked();
+
+ if let Some(el) = el {
+ let rect = el.into().get_bounding_client_rect();
+
+ set_height.set(rect.height());
+ set_width.set(rect.width());
+ set_left.set(rect.x());
+ set_right.set(rect.x() + rect.width());
+ set_top.set(rect.y());
+ set_bottom.set(rect.y() + rect.height());
+ set_x.set(rect.x());
+ set_y.set(rect.y());
+ } else if reset {
+ set_height.set(0.0);
+ set_width.set(0.0);
+ set_left.set(0.0);
+ set_right.set(0.0);
+ set_top.set(0.0);
+ set_bottom.set(0.0);
+ set_x.set(0.0);
+ set_y.set(0.0);
+ }
+ }
+ };
+
+ use_resize_observer(target.clone(), {
+ let update = update.clone();
+
+ move |_, _| {
+ update();
+ }
+ });
+
+ let _ = watch(
+ move || target.get(),
+ {
+ let update = update.clone();
+ move |_, _, _| {
+ update();
+ }
+ },
+ false,
+ );
+
+ if window_scroll {
+ let _ = use_event_listener_with_options(
+ use_window(),
+ scroll,
+ {
+ let update = update.clone();
+ move |_| update()
+ },
+ UseEventListenerOptions::default()
+ .capture(true)
+ .passive(true),
+ );
+ }
+
+ if window_resize {
+ let _ = use_event_listener_with_options(
+ use_window(),
+ resize,
+ {
+ let update = update.clone();
+ move |_| update()
+ },
+ UseEventListenerOptions::default().passive(true),
+ );
+ }
+
+ if immediate {
+ update();
+ }
+
+ UseElementBoundingReturn {
+ height: height.into(),
+ width: width.into(),
+ left: left.into(),
+ right: right.into(),
+ top: top.into(),
+ bottom: bottom.into(),
+ x: x.into(),
+ y: y.into(),
+ update,
+ }
}
/// Options for [`use_element_bounding_with_options`].
#[derive(DefaultBuilder)]
-pub struct UseElementBoundingOptions {}
+pub struct UseElementBoundingOptions {
+ /// Reset values to 0 on component disposal
+ ///
+ /// Default: `true`
+ pub reset: bool,
+
+ /// Listen to window resize event
+ ///
+ /// Default: `true`
+ pub window_resize: bool,
+
+ /// Listen to window scroll event
+ ///
+ /// Default: `true`
+ pub window_scroll: bool,
+
+ /// Immediately call update
+ ///
+ /// Default: `true`
+ pub immediate: bool,
+}
impl Default for UseElementBoundingOptions {
fn default() -> Self {
- Self {}
+ Self {
+ reset: true,
+ window_resize: true,
+ window_scroll: true,
+ immediate: true,
+ }
}
}
/// Return type of [`use_element_bounding`].
-pub struct UseElementBoundingReturn {}
\ No newline at end of file
+pub struct UseElementBoundingReturn
+where
+ F: Fn() + Clone,
+{
+ /// Reactive version of [`BoudingClientRect.height`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/height)
+ pub height: Signal,
+ /// Reactive version of [`BoudingClientRect.width`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/width)
+ pub width: Signal,
+ /// Reactive version of [`BoudingClientRect.left`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/left)
+ pub left: Signal,
+ /// Reactive version of [`BoudingClientRect.right`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/right)
+ pub right: Signal,
+ /// Reactive version of [`BoudingClientRect.top`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/top)
+ pub top: Signal,
+ /// Reactive version of [`BoudingClientRect.bottom`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/bottom)
+ pub bottom: Signal,
+ /// Reactive version of [`BoudingClientRect.x`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/x)
+ pub x: Signal,
+ /// Reactive version of [`BoudingClientRect.y`](https://developer.mozilla.org/en-US/docs/Web/API/DOMRectReadOnly/y)
+ pub y: Signal,
+ /// Function to re-evaluate `get_bounding_client_rect()` and update the signals.
+ pub update: F,
+}
diff --git a/src/use_element_size.rs b/src/use_element_size.rs
index bc6a226..5d881e1 100644
--- a/src/use_element_size.rs
+++ b/src/use_element_size.rs
@@ -49,8 +49,7 @@ cfg_if! { if #[cfg(not(feature = "ssr"))] {
/// - [`use_resize_observer`]
pub fn use_element_size(target: El) -> UseElementSizeReturn
where
- El: Clone,
- El: Into>,
+ El: Into> + Clone,
T: Into + Clone + 'static,
{
use_element_size_with_options(target, UseElementSizeOptions::default())
@@ -63,8 +62,7 @@ pub fn use_element_size_with_options(
options: UseElementSizeOptions,
) -> UseElementSizeReturn
where
- El: Clone,
- El: Into>,
+ El: Into> + Clone,
T: Into + Clone + 'static,
{
let UseElementSizeOptions { box_, initial_size } = options;