ZermosModal/index.html at master · MattterSteege/ZermosModal · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="Zermos-modal.js"></script>
    <link rel="stylesheet" href="styles.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        html {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: center;">
    <h1>Zermos Modal</h1>
    <p>A simple, lightweight, and customizable modal library.</p>


<button onclick="simpleExample()">Simple Example</button>
<button onclick="mediumExample()">Medium Example</button>
<button onclick="hardExample()">Hard Example</button>

<span>
    Check the console for output of the examples (not for the simple example).
</span>
</div>

</body>

<script>
    // Simple Example: Basic Modal with Text and Button
    function simpleExample() {
        const modal = new ZermosModal()
            .addHeading({ text: "Welcome!" })
            .addText({ text: "This is a simple modal example." })
            .addButton({ text: "Close", onClick: () => modal.close() });

        modal.open();
    }

    // Medium Example: Form with Various Input Types
    function mediumExample() {
        const modal = new ZermosModal()
            .addHeading({ text: "User Information Form" })
            .addTextInput({ required: true, id: "name", initialValue: "", onChange: (ctx, value) => console.log("Name:", value) })
            .addLabel({ text: "Enter your name" })
            .addDropdown({
                options: [
                    { label: "Red", value: "red" },
                    { label: "Green", value: "green" },
                    { label: "Blue", value: "blue" }
                ],
                required: true,
                id: "color",
                onChange: (ctx, value) => console.log("Favorite color:", value)
            })
            .addLabel({ text: "Choose your favorite color" })
            .addDatePicker({ required: true, id: "birthdate", onChange: (ctx, value) => console.log("Birthdate:", value), initialDate: new Date() })
            .addTimePicker({ required: true, id: "time", onChange: (ctx, value) => console.log("Time:", value), initialTime: "12:00" })
            .addLabel({ text: "Select your birthdate" })
            .addButton({ text: "Submit", onClick: (ctx) => {
                    const values = ctx.getComponentsValue();
                    if (values.correct) {
                        console.log("Form submitted:", values);
                        ctx.close();
                    } else {
                        alert("Please fill in all required fields.");
                    }
                }});

        modal.open();
    }

    // Hard Example: Complex Modal with Conditional Rendering and Submenus
    function hardExample() {
        const subModal = new ZermosSubModal()
            .addHeading({ text: "Additional Options" })
            .addToggle({ label: "Enable notifications", id: "notifications", onChange: (ctx, value) => ctx.setCondition("notificationsEnabled", value) })
            .addTextArea({ required: true, id: "notificationMessage", initialValue: "", maxLength: 100, onChange: (ctx, value) => console.log("Notification message:", value) })
            .addLabel({ text: "Enter notification message" });

        const mainModal = new ZermosModal()
            .addHeading({ text: "Advanced Settings" })
            .addToggle({ label: "Dark Mode", id: "darkMode", onChange: (ctx, value) => console.log("Dark mode:", value) })
            .addSlider({ min: 0, max: 100, step: 10, initialValue: 50, id: "volume", onChange: (ctx, value) => console.log("Volume:", value) })
            .addLabel({ text: "Adjust volume" })
            .addMultiCheckbox(
                ["Option 1", "Option 2", "Option 3"],
                [false, true, false],
                (ctx, values) => console.log("Selected options:", values),
                "multiOptions"
            )
            .addSubmenu({ showCondition: "notificationsEnabled == true", subModal: subModal })
            .addColorPicker({ required: true, id: "themeColor", onChange: (ctx, value) => console.log("Theme color:", value) })
            .addLabel({ text: "Choose theme color" })
            .addButton({ text: "Save Settings", onClick: (ctx) => {
                    const values = ctx.getComponentsValue();
                    console.log("Settings saved:", values);
                    ctx.close();
                }})
            .addButton({ text: "Cancel", onClick: (ctx) => ctx.close() });

        mainModal.open();
    }
</script>
</html>