windjammer-ui 0.3.6

Cross-platform UI framework for Windjammer (Web, Desktop, Mobile)
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

// Drawer - Slide-in panel component

pub struct Drawer {
    children: Vec<string>,
    position: DrawerPosition,
    width: string,
    open: bool,
    class: string,
}

pub enum DrawerPosition {
    Left,
    Right,
    Top,
    Bottom,
}

impl Drawer {
    pub fn new() -> Drawer {
        Drawer {
            children: Vec::new(),
            position: DrawerPosition::Right,
            width: "320px".to_string(),
            open: false,
            class: String::new(),
        }
    }
    
    pub fn child(child: string) -> Drawer {
        self.children.push(child)
        self
    }
    
    pub fn position(position: DrawerPosition) -> Drawer {
        self.position = position
        self
    }
    
    pub fn width(width: string) -> Drawer {
        self.width = width
        self
    }
    
    pub fn open(open: bool) -> Drawer {
        self.open = open
        self
    }
    
    pub fn class(class: string) -> Drawer {
        self.class = class
        self
    }
    
    pub fn render() -> string {
        let (position_style, size_prop) = match self.position {
            DrawerPosition::Left => ("left: 0; top: 0; bottom: 0;", format!("width: {};", self.width)),
            DrawerPosition::Right => ("right: 0; top: 0; bottom: 0;", format!("width: {};", self.width)),
            DrawerPosition::Top => ("top: 0; left: 0; right: 0;", format!("height: {};", self.width)),
            DrawerPosition::Bottom => ("bottom: 0; left: 0; right: 0;", format!("height: {};", self.width)),
        }
        
        let transform = if self.open {
            "transform: translateX(0);"
        } else {
            match self.position {
                DrawerPosition::Left => "transform: translateX(-100%);",
                DrawerPosition::Right => "transform: translateX(100%);",
                DrawerPosition::Top => "transform: translateY(-100%);",
                DrawerPosition::Bottom => "transform: translateY(100%);",
            }
        }
        
        let display = if self.open { "display: block;" } else { "display: none;" }
        
        let mut html = String::new()
        
        // Backdrop
        html.push_str("<div class=\"wj-drawer-backdrop\" style=\"")
        html.push_str(display)
        html.push_str(" position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999;\"></div>")
        
        // Drawer panel
        html.push_str("<div class=\"wj-drawer ")
        html.push_str(self.class.as_str())
        html.push_str("\" style=\"position: fixed; ")
        html.push_str(position_style)
        html.push(' ')
        html.push_str(size_prop.as_str())
        html.push(' ')
        html.push_str(transform)
        html.push_str(" background: white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); z-index: 1000; transition: transform 0.3s ease; overflow-y: auto; padding: 24px;\">")
        
        for child in self.children {
            html.push_str(child.as_str())
        }
        
        html.push_str("</div>")
        html
    }
}