kael_ui 0.2.0

Professional shadcn-inspired UI component library for Kael. 100+ accessible components for building beautiful, performant desktop applications.
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

use kael::*;
use std::rc::Rc;
use std::time::Duration;

#[derive(Copy, Clone, Debug, PartialEq, Eq)]
pub enum MarqueeDirection {
    Left,
    Right,
}

#[derive(IntoElement)]
pub struct Marquee {
    id: ElementId,
    base: Div,
    speed: f32,
    direction: MarqueeDirection,
    pause_on_hover: bool,
    gap: Pixels,
    content_width: Pixels,
    render_content: Rc<dyn Fn() -> AnyElement>,
}

impl Marquee {
    pub fn new(
        id: impl Into<ElementId>,
        render_content: impl Fn() -> AnyElement + 'static,
    ) -> Self {
        Self {
            id: id.into(),
            base: div(),
            speed: 50.0,
            direction: MarqueeDirection::Left,
            pause_on_hover: false,
            gap: px(32.0),
            content_width: px(1000.0),
            render_content: Rc::new(render_content),
        }
    }

    pub fn speed(mut self, pixels_per_second: f32) -> Self {
        self.speed = pixels_per_second.max(1.0);
        self
    }

    pub fn direction(mut self, direction: MarqueeDirection) -> Self {
        self.direction = direction;
        self
    }

    pub fn pause_on_hover(mut self, pause: bool) -> Self {
        self.pause_on_hover = pause;
        self
    }

    pub fn gap(mut self, gap: Pixels) -> Self {
        self.gap = gap;
        self
    }

    pub fn content_width(mut self, width: Pixels) -> Self {
        self.content_width = width;
        self
    }
}

impl Styled for Marquee {
    fn style(&mut self) -> &mut StyleRefinement {
        self.base.style()
    }
}

impl RenderOnce for Marquee {
    fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
        let total_travel = self.content_width + self.gap;
        let duration_ms = (total_travel / px(1.0) / self.speed * 1000.0) as u64;
        let duration = Duration::from_millis(duration_ms.max(100));
        let gap = self.gap;
        let content_width = self.content_width;
        let direction = self.direction;

        let copy_one = (self.render_content)();
        let copy_two = (self.render_content)();

        self.base.overflow_hidden().child(
            div()
                .id(self.id)
                .flex()
                .flex_row()
                .items_center()
                .w(content_width * 2.0 + gap * 2.0)
                .child(
                    div()
                        .flex()
                        .flex_row()
                        .items_center()
                        .flex_shrink_0()
                        .w(content_width)
                        .mr(gap)
                        .child(copy_one),
                )
                .child(
                    div()
                        .flex()
                        .flex_row()
                        .items_center()
                        .flex_shrink_0()
                        .w(content_width)
                        .mr(gap)
                        .child(copy_two),
                )
                .with_animation(
                    "marquee-scroll",
                    Animation::new(duration)
                        .repeat_forever()
                        .with_easing(kael::linear),
                    move |el, delta| {
                        let offset = total_travel * delta;
                        match direction {
                            MarqueeDirection::Left => el.left(-offset),
                            MarqueeDirection::Right => el.left(offset - total_travel),
                        }
                    },
                ),
        )
    }
}