silex_css 0.1.0-beta.3

Next Generation High-Performance Rust Web Framework based on fine-grained reactivity and no-virtual-DOM architecture.
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
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

use silex_core::prelude::*;
use std::fmt::Display;

/// A trait that every Silex Theme must implement.
/// This allows the `styled!` macro to perform compile-time type checks.
/// Usually implemented via the `define_theme!` macro.
pub trait ThemeType {}

/// A dummy theme type to satisfy the default macro requirements.
/// Users should alias this to their actual theme or use #[theme(MyTheme)].
pub type Theme = ();

pub trait ThemeToCss: Display {
    fn to_css_variables(&self) -> String;
    fn get_variable_values(&self) -> Vec<String>;
    fn get_variable_names() -> &'static [&'static str];
}

/// Helper that applies theme variables to any element without an extra wrapper.
/// Usage: `div(children).apply(theme_variables(theme))`
pub fn theme_variables<T>(theme: ReadSignal<T>) -> ThemeVariables<T>
where
    T: ThemeType + ThemeToCss + Clone + 'static,
{
    // Provide the theme signal in the current reactive scope
    ::silex_core::prelude::provide_context(theme);
    ThemeVariables(theme)
}

/// A structure that can be applied to a DOM element to inject theme variables.
pub struct ThemeVariables<T>(pub ReadSignal<T>);

impl<T> ::silex_dom::attribute::ApplyToDom for ThemeVariables<T>
where
    T: ThemeType + ThemeToCss + Clone + 'static,
{
    fn apply(&self, el: &::web_sys::Element, _target: ::silex_dom::attribute::ApplyTarget) {
        let theme = self.0;
        let el = el.clone();
        ::silex_core::prelude::Effect::new(move |prev_values: Option<Vec<String>>| {
            use ::wasm_bindgen::JsCast;
            if let Some(style) = el
                .dyn_ref::<::web_sys::HtmlElement>()
                .map(|e| e.style())
                .or_else(|| el.dyn_ref::<::web_sys::SvgElement>().map(|e| e.style()))
            {
                let theme_val = theme.get();
                let names = T::get_variable_names();
                let values = theme_val.get_variable_values();

                if let Some(old_vals) = &prev_values {
                    for (i, (name, value)) in names.iter().zip(values.iter()).enumerate() {
                        if Some(value) != old_vals.get(i) {
                            let _ = style.set_property(name, value);
                        }
                    }
                } else {
                    for (name, value) in names.iter().zip(values.iter()) {
                        let _ = style.set_property(name, value);
                    }
                }
                return values;
            }
            Vec::new()
        });
    }
}

impl<T> silex_dom::attribute::IntoStorable for ThemeVariables<T>
where
    T: ThemeType + ThemeToCss + Clone + 'static,
{
    type Stored = Self;
    fn into_storable(self) -> Self::Stored {
        self
    }
}

/// Hook to get the current theme signal from context.
pub fn use_theme<T: 'static>() -> ReadSignal<T> {
    ::silex_core::prelude::use_context::<ReadSignal<T>>()
        .expect("No ThemeProvider found in hierarchy")
}

/// Sets a global theme that applies to the entire document (:root).
pub fn set_global_theme<T>(theme: ReadSignal<T>)
where
    T: ThemeType + ThemeToCss + Clone + 'static,
{
    // Register the theme in the global context as well
    ::silex_core::prelude::provide_context(theme);

    // Apply reactive updates to :root
    ::silex_core::prelude::Effect::new(move |prev_values: Option<Vec<String>>| {
        use ::wasm_bindgen::JsCast;
        let doc = ::silex_dom::document();
        if let Some(root) = doc.document_element()
            && let Some(style) = root.dyn_ref::<::web_sys::HtmlElement>().map(|e| e.style())
        {
            let theme_val = theme.get();
            let names = T::get_variable_names();
            let values = theme_val.get_variable_values();

            if let Some(old_vals) = &prev_values {
                for (i, (name, value)) in names.iter().zip(values.iter()).enumerate() {
                    if Some(value) != old_vals.get(i) {
                        let _ = style.set_property(name, value);
                    }
                }
            } else {
                for (name, value) in names.iter().zip(values.iter()) {
                    let _ = style.set_property(name, value);
                }
            }
            return values;
        }
        Vec::new()
    });
}