fhtmx 0.29.0

Create html with rust with support for htmx.
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

use super::{dc_swap, icons};
use crate::{element::Element, html_element::*};

/// Script to setup theme
pub fn script_setup_theme(light_theme: &str, dark_theme: &str) -> HtmlElement {
    let js = format!(
        r#"document.addEventListener("DOMContentLoaded", function (event) {{
            if (localStorage._x_lightMode !== undefined) {{
                lightMode = localStorage._x_lightMode === "true";
                themeChange(lightMode);
            }}
        }});

        function themeChange(lightMode) {{
        document.documentElement.dataset.theme = lightMode
            ? "{light_theme}"
            : "{dark_theme}";
        }}"#
    );
    script().add_raw(js)
}

/// Requires to add `script_setup_theme()`, `source_alpinejs()` and `source_alpinejs_persist()` in
/// headers.
pub fn theme_toogle_with_size(size: u8) -> HtmlElement {
    dc_swap()
        .add_class("mx-2 swap-rotate")
        .set_attr("x-data", "{ lightMode: $persist(false) }")
        .add(
            input()
                .typ("checkbox")
                .set_attr(":checked", "lightMode")
                .set_attr(
                    "@change",
                    "lightMode = $event.target.checked; themeChange(lightMode);",
                ),
        )
        .add(icons::moon().class(format!("swap-off h-{size} w-{size} fill-current")))
        .add(icons::sun().class(format!("swap-on h-{size} w-{size} fill-current")))
}

/// Requires to add `script_setup_theme()`, `source_alpinejs()` and `source_alpinejs_persist()` in
/// headers.
#[inline]
pub fn theme_toogle() -> HtmlElement {
    theme_toogle_with_size(6)
}