orbital-base-components 0.1.1

Headless base primitives for Orbital — structure, semantics, and accessibility
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

use leptos::{html, prelude::*};
use web_sys::DomRect;

#[derive(Clone, Copy)]
pub struct AnchorInjection {
    anchor_ref: NodeRef<html::Div>,
    bar_ref: NodeRef<html::Div>,
    element_ids: RwSignal<Vec<String>>,
    pub active_id: RwSignal<Option<String>>,
}

impl AnchorInjection {
    pub fn expect_context() -> Self {
        expect_context()
    }

    pub fn new(
        anchor_ref: NodeRef<html::Div>,
        bar_ref: NodeRef<html::Div>,
        element_ids: RwSignal<Vec<String>>,
        active_id: RwSignal<Option<String>>,
    ) -> Self {
        Self {
            anchor_ref,
            bar_ref,
            element_ids,
            active_id,
        }
    }

    pub fn scroll_into_view(&self, id: &str) {
        let Some(link_el) = document().get_element_by_id(id) else {
            return;
        };
        link_el.scroll_into_view();
    }

    pub fn append_id(&self, id: String) {
        self.element_ids.update(|ids| ids.push(id));
    }

    pub fn remove_id(&self, id: &str) {
        self.element_ids.update(|ids| {
            if let Some(index) = ids.iter().position(|item_id| item_id == id) {
                ids.remove(index);
            }
        });
    }

    pub fn update_background_position(&self, title_rect: DomRect) {
        use wasm_bindgen::JsCast;

        let Some(anchor_el) = self.anchor_ref.get_untracked() else {
            return;
        };
        let Some(bar_el) = self.bar_ref.get_untracked() else {
            return;
        };
        let Some(bar_el) = bar_el.dyn_ref::<web_sys::HtmlElement>() else {
            return;
        };
        let anchor_rect = anchor_el.get_bounding_client_rect();
        let offset_top = title_rect.top() - anchor_rect.top();
        let _ = bar_el
            .style()
            .set_property("top", &format!("{offset_top}px"));
        let _ = bar_el
            .style()
            .set_property("height", &format!("{}px", title_rect.height()));
    }
}