-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (87 loc) · 2.97 KB
/
index.html
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
<html>
<head>
<style>
.input-group{margin-top:1em;}
label{display:block;}
select{min-width:100px;}
</style>
</head>
<body>
<p>in the console try: live.set('input1','changed!') to see input value change. Also watch console.log to see changes make in input.</p>
<form>
<div class="input-group">
<label>input1:</label>
<input name="input1">
</div>
<div class="input-group">
<label>input2:</label>
<input name="input2">
</div>
<div class="input-group">
<label>Single Select</label>
<select name="select">
<option value="">---</option>
<option value="val 1">val 1</option>
<option value="val 2">val 2</option>
</select>
</div>
<div class="input-group">
<label>Multiple Select</label>
<select name="selectmultiple" data-group='option' multiple>
<option value="">---</option>
<option value="val 1">val 1</option>
<option value="val 2">val 2</option>
</select>
</div>
<div class="input-group">
<label>Checkbox Boolean</label>
<input name="boolean" type="checkbox" value="set">
</div>
<div class="input-group">
<label>Checkbox Group</label>
<input type="hidden" name="checkboxgroup" data-group='[type="checkbox"]' multiple>
<input type="checkbox" value="1"> Check 1
<input type="checkbox" value="2"> Check 2
<input type="checkbox" value="3"> Check 3
<input type="checkbox" value="4"> Check 4
<input type="checkbox" value="5"> Check 5
<input type="checkbox" value="6"> Check 6
</div>
<div class="input-group">
<label>Radio Group</label>
<input type="hidden" name="radiogroup" data-group='[type="radio"]'>
<input type="radio" name="radio" value="1" checked> radio 1
<input type="radio" name="radio" value="2"> radio 2
<input type="radio" name="radio" value="3"> radio 3
<input type="radio" name="radio" value="4"> radio 4
<input type="radio" name="radio" value="5"> radio 5
<input type="radio" name="radio" value="6"> radio 6
</div>
</form>
<script src='https://cdn.jsdelivr.net/npm/@pelagiccreatures/[email protected]/dist/sargasso.iife.js'></script>
<script src='/copepod.iife.js'></script>
<script src="/socket.io/socket.io.js"></script>
<script defer>
document.cookie = "access-token=mytoken; expires=; path=/;";
document.cookie = "user=test; expires=; path=/;";
window.live = new CopepodModule.CopepodClient('test-uid', undefined, { namespace: '/copepod', table: 'TestTable', row: 1});
window.live.bindForm(document.querySelector('form'));
window.data = window.live.getBoundData()
window.live.on('error',(err)=> {
alert(err.message)
console.log(err)
})
window.live.on('status',(msg)=>{
console.log(msg)
})
window.live.start()
</script>
<section>
bound elements:
<sargasso-copepod-element data-copepod-id="test-uid">
<p><strong>input1</strong>: ${input1}</p>
<p><strong>input2</strong>: ${input2}</p>
</sargasso-copepod-element>
</section>
</body>
</html>