baza/form.html at main · vitali2y/baza · 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
116
<!doctype html>
<html>

<head>
  <title>Baza - Form Demo</title>
  <script src="baza.js"></script>
  <style>
    .hidden {
      display: none !important;
    }

    .panel {
      border: 1px solid #ccc;
      padding: 1rem;
      margin-bottom: 1rem;
    }

    pre {
      background: #ecf0f4;
      padding: .5rem;
    }
  </style>
</head>

<body>
  <button onclick="toggleForms()">Toggle forms</button>

  <section id="alice" class="panel">
    <h2>Alice Form</h2>
    <form>
      <label>Name:</label><input type="text" baza-bind="name">
      <label>Email:</label><input type="email" baza-bind="email"><br />
      <label>Rating:</label><input type="range" min="0" max="100" baza-bind="rating">
      <label>Age:</label><input type="number" baza-bind="age" /><br />
      <label>Applied:</label><input type="checkbox" baza-bind="isApplied">
      <label>Applied At:</label><input type="date" baza-bind="appliedAt"><br />
      <label>Experience:</label>
      <select baza-bind="experience">
        <option value="frontend">Frontend</option>
        <option value="backend">Backend</option>
        <option value="db">Database</option>
      </select>
      <label>Gender:</label>
      <label><input type="radio" value="Male" baza-bind="gender">Male</label>
      <label><input type="radio" value="Female" baza-bind="gender">Female</label>
    </form>

    <pre id="dumpAlice"></pre>
  </section>

  <section id="john" class="panel">
    <h2>John Form</h2>
    <form>
      <label>Name:</label><input type="text" baza-bind="name">
      <label>Email:</label><input type="email" baza-bind="email"><br />
      <label>Rating:</label><input type="range" min="0" max="100" baza-bind="rating">
      <label>Age:</label><input type="number" baza-bind="age" /><br />
      <label>Applied:</label><input type="checkbox" baza-bind="isApplied">
      <label>Applied At:</label><input type="date" baza-bind="appliedAt"><br />
      <label>Experience:</label>
      <select baza-bind="experience">
        <option value="frontend">Frontend</option>
        <option value="backend">Backend</option>
        <option value="db">Database</option>
      </select>
      <label>Gender:</label>
      <label><input type="radio" value="Male" baza-bind="gender">Male</label>
      <label><input type="radio" value="Female" baza-bind="gender">Female</label>
    </form>

    <pre id="dumpJohn"></pre>
  </section>

  <script>
    const modelAlice = { name: 'Alice', email: 'alice@alice.com', rating: 70, age: 30, isApplied: false, appliedAt: '2025-08-06', experience: 'backend', gender: 'Female' };
    const alice = new Baza(modelAlice, '#alice');
    alice.model.hidden = false;

    function renderAlice() { dumpAlice.textContent = JSON.stringify(modelAlice, null, 2); }

    alice.on('name', renderAlice);
    alice.on('email', renderAlice);
    alice.on('hidden', renderAlice);
    alice.on('rating', renderAlice);
    alice.on('age', renderAlice);
    alice.on('isApplied', renderAlice);
    alice.on('appliedAt', renderAlice);
    alice.on('experience', renderAlice);
    alice.on('gender', renderAlice);

    renderAlice();

    const modelJohn = { name: 'John', email: 'john@john.com', rating: 30, age: 50, isApplied: false, appliedAt: '2025-09-06', experience: 'frontend', gender: 'Male' };
    const john = new Baza(modelJohn, '#john');

    function renderJohn() { dumpJohn.textContent = JSON.stringify(modelJohn, null, 2); }

    john.on('name', renderJohn);
    john.on('email', renderJohn);
    john.on('hidden', renderJohn);
    john.on('rating', renderJohn);
    john.on('age', renderJohn);
    john.on('isApplied', renderJohn);
    john.on('appliedAt', renderJohn);
    john.on('experience', renderJohn);
    john.on('gender', renderJohn);

    renderJohn();

    function toggleForms() {
      alice.model.hidden = !alice.model.hidden;
      john.model.hidden = !john.model.hidden;
    }
  </script>
</body>
</html>