-
Notifications
You must be signed in to change notification settings - Fork 27
/
Copy pathexample.html
185 lines (182 loc) · 6.3 KB
/
example.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html>
<head>
<title>Quick and Dirty Testing for Surreal</title>
<!-- <script src="https://cdn.jsdelivr.net/gh/gnat/surreal@main/surreal.js"></script> -->
<script src="surreal.js"></script>
<link rel="stylesheet" href="tests/reset.css?17" /> <!-- NOTE: You can remove "?17" it is only for cache-busting on github. -->
<meta http-equiv="cache-control" content="no-cache" />
</head>
<body>
<!-- Basic examples -->
<button>👁️ Click me to fade out and remove.
<script>
me().on("click", ev => { me(ev).disable(); me(ev).fadeOut() })
</script>
</button>
<button class="invisible">👻 Click me to fade in.
<script>
me().on("click", ev => {
// Simple way to limit number of actions.
if(me(ev)?.fadeInLimit <= 1) return; else { me(ev).fadeInLimit = 1; me(ev).fadeIn() }
})
</script>
</button>
<div class="yeet noot">I should be red.
<script>
any(".yeet.noot").classAdd('.active')
</script>
</div>
<!-- Basic async examples -->
<div id="random">I should turn grey after 2 seconds.
<script>
// Basic usage with id. Runs immediately.
(async ()=>{
me("#random").classAdd('active')
await sleep(2000)
me("#random").classAdd('inactive')
})()
</script>
</div>
<div>I should be animated using events.
<script>
// Now you're thinking with events!
me().on("ping", async ev => {
let e = me(ev)
e.styles({"background":"hotpink", "color":"purple"})
await sleep(1000)
e.send("pong")
})
me().on("pong", async ev => {
let e = me(ev)
e.styles({"background":"blue", "color":"#002200"})
await sleep(1000)
e.send("ping")
})
me().styles({"transition":"all 2s"}).send("pong")
</script>
</div>
<div>I should be animated using timeline / async until finished!
<script>
// Now you're thinking with async! Runs immediately. No event.
(async (e = me()) => { // Special case where we can save element right away.
e.styles({"transition": "all 2s"})
e.styles({"background":"#0030F7", "color":"#002200"})
await sleep(2000)
e.styles({"background":"#006BFF", "color":"#000033"})
await sleep(2000)
e.styles({"background":"#00A1FF", "color":"#005500"})
await sleep(2000)
e.styles({"background":"#00C08C", "color":"#660033"})
await sleep(2000)
// New element!
var e2 = me(createElement("div"))
e2.styles({"transition":"all 2s", "opacity":"0", "height":"0%"})
e2.innerText = "🔥🔥🔥🔥🔥🔥"
e.appendChild(e2)
await sleep(1000)
e2.styles({"opacity":"1", "height":"fit-content"})
})()
</script>
</div>
<div>I should be surrounded by diamonds after a few seconds.
<script>
// Now you're thinking with async! Runs immediately. No event.
(async (e = me()) => { // Special case where we can save element right away.
e.styles({"transition":"all 2s", "color":"#fff"})
// New element!
var e2 = me(createElement("div"))
e2.innerText = "💎💎💎"
e.prepend(e2)
e2.styles({"transition":"all 2s", "opacity":"0"})
await sleep(1000)
e2.styles({"opacity":"1"})
await sleep(2000)
// New element!
var e2 = me(createElement("div"))
e2.styles({"transition":"all 2s", "opacity":"0"})
e2.innerText = "💎💎💎"
e.appendChild(e2)
await sleep(1000)
e2.styles({"opacity":"1"})
})()
</script>
</div>
<!-- Event examples -->
<div thick>📬 I close from a child button event.
<script>
me().on("close", async event => { me(event).fadeOut() }) // Recieve "close" event.
</script>
<button class="close">✉️ Send "close"
<script>
me().on("click", event => { me(event).disable(); me(event).send("close") })
</script>
</button>
</div>
<div thick>📭 I stay open because of <strong>halt()</strong>
<script>
me().on("close", event => { me(event).fadeOut() }) // I will never recieve "close" event because of halt()
</script>
<div thick>📬 I close dramatically from a child button <strong>async</strong> event
<script>
me().on("close", async event => {
let e = me(event) // Save element because event.currentTarget will be lost after await.
e.halt(event) // Event stops here.
e.disable() // Prevent user from clicking button many times.
e.styles({"transition":"all 0.5s", "background":"red"})
await sleep(500)
e.styles({"background":"white"})
await sleep(500)
e.styles({"background":"red"})
await sleep(500)
e.styles({"background":"white"})
e.fadeOut()
})
</script>
<button class="close">✉️ Send "close"
<script>
me().on("click", event => { me(event).disable(); me(event).send("close") }) // Use disable() to stop clicking more than once.
</script>
</button>
</div>
</div>
<!-- Scoping and 3D -->
<div class="card">
3D Card
<div></div>
<script>
me().on('mouseenter', (ev) => {
let e = me(ev)
e.bounds = e.getBoundingClientRect()
e.on('mousemove', e.rotateToMouse)
})
me().on('mouseleave', (ev) => {
let e = me(ev)
e.off('mousemove', e.rotateToMouse)
e.style.transform = ''
e.style.background = ''
})
me().rotateToMouse = (ev) => {
let e = me(ev)
let mouseX = ev.clientX
let mouseY = ev.clientY
let leftX = mouseX - e.bounds.x
let topY = mouseY - e.bounds.y
let center = { x: leftX - e.bounds.width / 2, y: topY - e.bounds.height / 2 }
let distance = Math.sqrt(center.x**2 + center.y**2)
e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 1}0deg)`
me('div', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
}
</script>
</div>
<!-- Try out window.onload predictable call chain -->
<script>onloadAdd(()=>{ console.log("Hello from Surreal onloadAdd()") })</script>
<script>onloadAdd(()=>{ console.log("I added to onload without clobbering the previous function") })</script>
<!-- Check the code! -->
<button class="blue">😺 Visit the source code for this page.
<script>
me().on("click", ev => { window.location.href ="https://github.com/gnat/surreal/blob/main/example.html" })
</script>
</button>
</body>
</html>