-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathobserver.html
128 lines (121 loc) · 4.97 KB
/
observer.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
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mini Demo Observer</title>
<script src="/dist/minijs.umd.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-40">
<button class="px-2 py-1 bg-gray-200 rounded-md text-base">Add Item</button>
<ol class="mt-8 list-decimal ml-4">
<li>
<button
:load="el.isHovered = true"
:click="this.parentNode.parentNode.removeChild(this.parentNode)"
:mouseenter="el.isHovered = true"
:mouseleave="el.isHovered = false"
:class="el.isHovered ? 'bg-red-200' : ''"
>
list item (click to delete)
</button>
<button
class="px-2 py-1 bg-gray-200 rounded-md text-base"
:click="this.previousElementSibling.setAttribute(':class', 'el.isHovered ? \'bg-red-200\' : \'bg-gray-200\'')"
:mouseenter="el.isHovered = true"
:mouseleave="el.isHovered = false"
:class="el.isHovered ? 'bg-red-200' : ''"
>
Change :class Attribute
</button>
</li>
<li>
<button
:click="this.parentNode.parentNode.removeChild(this.parentNode)"
:text="`look at my id list item (click to delete)`"
:mouseenter="el.isHovered = true"
:mouseleave="el.isHovered = false"
:class="el.isHovered ? 'bg-red-200' : ''"
></button>
<button
class="px-2 py-1 bg-gray-200 rounded-md text-base"
:click="this.previousElementSibling.setAttribute(':id', '`list2${Math.random()}`')"
:mouseenter="el.isHovered = true"
:mouseleave="el.isHovered = false"
:class="el.isHovered ? 'bg-red-200' : ''"
>
Change :id Attribute
</button>
</li>
<li>
<button
:mouseenter="el.isHovered = true"
:mouseleave="el.isHovered = false"
:class="el.isHovered ? 'bg-red-200' : ''"
>
list item
</button>
<button
class="px-2 py-1 bg-gray-200 rounded-md text-base"
:click="const btnEl = this.previousElementSibling
btnEl.setAttribute(':click', 'this.parentNode.parentNode.removeChild(this.parentNode)')
btnEl.setAttribute(':text', '\'list item (click to delete)\'')"
:mouseenter="el.isHovered = true"
:mouseleave="el.isHovered = false"
:class="el.isHovered ? 'bg-red-200' : ''"
>
Change :text and :click Attributes
</button>
</li>
<li>
<button
:click="this.parentNode.parentNode.removeChild(this.parentNode)"
:mouseenter="el.isHovered = true"
:mouseleave="el.isHovered = false"
:class="el.isHovered ? 'bg-red-200' : ''"
>
list item (click to delete)
</button>
<button
class="px-2 py-1 bg-gray-200 rounded-md text-base"
:click="const btnEl = this.previousElementSibling
btnEl.setAttribute(':click', '')
btnEl.setAttribute(':text', '\'list item\'')"
:mouseenter="el.isHovered = true"
:mouseleave="el.isHovered = false"
:class="el.isHovered ? 'bg-red-200' : ''"
>
Remove :click Attribute
</button>
</li>
<li><em>…More will be added after 3 seconds…</em></li>
</ol>
<script>
const listEl = document.querySelector('ol')
const listItemsEl = [
'<li><button :click="this.parentNode.parentNode.removeChild(this.parentNode)">list item (click to delete)</button></li>',
'<li><button :mouseover="this.parentNode.parentNode.removeChild(this.parentNode)">Hover over me and I\'ll disappear</button></li>',
'<li><p :click="alert(\'See your console logs\')" :mouseenter="console.log(\'mouseenter on p\')" :mouseleave="console.log(\'mouseleave on p\'); this.parentNode.parentNode.removeChild(this.parentNode)">Just a text. Click on me to alert! Hover then leave me to disappear</p></li>',
]
document.querySelector('body > button').onclick = function () {
const listItemEl =
listItemsEl[Math.floor(Math.random() * listItemsEl.length)]
listEl.insertAdjacentHTML('beforeend', listItemEl)
}
// Insert 3 DOM nodes at once after 3 seconds
setTimeout(function () {
listEl.removeChild(listEl.lastElementChild)
const listItemEl =
listItemsEl[Math.floor(Math.random() * listItemsEl.length)]
listEl.insertAdjacentHTML('beforeend', listItemEl)
const listItemEl2 =
listItemsEl[Math.floor(Math.random() * listItemsEl.length)]
listEl.insertAdjacentHTML('beforeend', listItemEl2)
const listItemEl3 =
listItemsEl[Math.floor(Math.random() * listItemsEl.length)]
listEl.insertAdjacentHTML('beforeend', listItemEl3)
}, 3000)
</script>
</body>
</html>