-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (108 loc) · 3.89 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>winkblue playground</title>
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
<style>
ul.flex-list {
display: flex;
flex-wrap: wrap;
padding: 20px;
margin: 0 auto;
}
ul.flex-list > li {
width: 100px;
height: 100px;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid white;
margin: 4px;
}
</style>
</head>
<body>
<h1>Observe the same <code>li</code> DOM instance & with <code>forgetHiddenElement</code> option</h1>
<p><a href="https://github.com/FlandreDaisuki/winkblue/blob/master/docs/play/blink/index.html">view source code</a></p>
<div>
<button type="button" id="btn">Toggle a list item on document</button>
</div>
<main>
<h2>winkblue list</h2>
<ul id="winkblue-list" class="flex-list"></ul>
<h2>forgetful winkblue list</h2>
<ul id="forgetful-winkblue-list" class="flex-list"></ul>
<h2>sentinel-js list</h2>
<ul id="sentinel-list" class="flex-list"></ul>
</main>
<script>
(() => {
const btnEl = document.getElementById('btn');
const winkblueListEl = document.getElementById('winkblue-list');
const forgetfulWinkblueListEl = document.getElementById('forgetful-winkblue-list');
const sentinelListEl = document.getElementById('sentinel-list');
if(!btnEl || !winkblueListEl || !sentinelListEl || !forgetfulWinkblueListEl) { return; }
winkblueListEl.insertAdjacentHTML('beforeend', `<li class="counter">0</li>`)
forgetfulWinkblueListEl.insertAdjacentHTML('beforeend', `<li class="counter">0</li>`)
sentinelListEl.insertAdjacentHTML('beforeend', `<li class="counter">0</li>`)
const winkblueListItemEl = document.createElement('li');
winkblueListItemEl.textContent = 'Hello winkblue!';
const forgetfulWinkblueListItemEl = document.createElement('li');
forgetfulWinkblueListItemEl.textContent = 'Hello forgetful winkblue!';
const sentinelListItemEl = document.createElement('li');
sentinelListItemEl.textContent = 'Hello sentinel!';
btnEl.onclick = () => {
if(winkblueListEl.lastElementChild === winkblueListItemEl) {
winkblueListItemEl.remove();
} else {
winkblueListEl.appendChild(winkblueListItemEl);
}
if(forgetfulWinkblueListEl.lastElementChild === forgetfulWinkblueListItemEl) {
forgetfulWinkblueListItemEl.remove();
} else {
forgetfulWinkblueListEl.appendChild(forgetfulWinkblueListItemEl);
}
if(sentinelListEl.lastElementChild === sentinelListItemEl) {
sentinelListItemEl.remove();
} else {
sentinelListEl.appendChild(sentinelListItemEl);
}
}
})();
</script>
<script type="importmap">
{
"imports": {
"winkblue": "https://esm.sh/winkblue",
"sentinel": "https://esm.sh/sentinel-js"
}
}
</script>
<script type="module">
import sentinel from 'sentinel';
sentinel.on('ul#sentinel-list > li:nth-child(2)', (el) => {
const t = Number(el.previousElementSibling.textContent);
el.previousElementSibling.textContent = t + 1
});
</script>
<script type="module">
import { winkblue } from 'winkblue';
winkblue.on('ul#winkblue-list > li:nth-child(2)', (el) => {
const t = Number(el.previousElementSibling.textContent);
el.previousElementSibling.textContent = t + 1
});
</script>
<script type="module">
import { Winkblue } from 'winkblue';
const forgetfulWinkblue = Winkblue.new();
forgetfulWinkblue.option.forgetHiddenElement = true;
forgetfulWinkblue.on('ul#forgetful-winkblue-list > li:nth-child(2)', (el) => {
const t = Number(el.previousElementSibling.textContent);
el.previousElementSibling.textContent = t + 1
});
</script>
</body>
</html>