forked from gnat/surreal
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshowcase.html
105 lines (101 loc) · 3.2 KB
/
showcase.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Quick and Dirty Testing for Surreal</title>
<meta charset="utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<!-- NOTE: You can remove "?1" it is only for cache-busting on github. -->
<link rel="stylesheet" href="tests/reset.css?11" />
<script src="surreal.js?11"></script>
</head>
<body>
<button>👁️ Click me to fade out and remove.
<script>
me().on("click", ev => { me(ev).fadeOut() })
</script>
</button>
<button class="invisible">👻 Click me to fade in.
<script>
me().on("click", ev => { me(ev).fadeIn() })
</script>
</button>
<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/showcase.html" })
</script>
</button>
<div class="yeet noot">I should be red.
<script>
any(".yeet.noot").classAdd('.active')
</script>
</div>
<div id="random">I should turn grey after 2 seconds.
<script>
(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 => {
me(ev).styles({"background":"hotpink", "color":"purple"})
await sleep(2000)
me(ev).trigger("pong")
})
me().on("pong", async ev => {
me(ev).styles({"background":"blue", "color":"#002200"})
await sleep(2000)
me(ev).trigger("ping")
})
me().styles({"transition":"all 2s"}).trigger("pong")
</script>
</div>
<div>I should be animated using timeline / async until finished!
<script>
// Now you're thinking with async!
(async (el = me()) => {
me(el).styles({"transition": "all 2s"})
me(el).styles({"background":"#0030F7", "color":"#002200"})
await sleep(2000)
me(el).styles({"background":"#006BFF", "color":"#000033"})
await sleep(2000)
me(el).styles({"background":"#00A1FF", "color":"#005500"})
await sleep(2000)
me(el).styles({"background":"#00C08C", "color":"#660033"})
await sleep(2000)
var el_new = createElement("div")
me(el_new).styles({"transition":"all 2s", "opacity":"0", "height":"0%"})
el_new.innerText = "🔥🔥🔥🔥🔥🔥"
me(el).appendChild(el_new)
await sleep(1000)
me(el_new).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!
(async (el = me()) => {
me(el).styles({"transition":"all 2s", "color":"#ccc"})
var el_new = createElement("div")
el_new.innerText = "💎💎💎"
me(el).prepend(el_new)
me(el_new).styles({"transition":"all 2s", "opacity":"0"})
await sleep(1000)
me(el_new).styles({"opacity":"1"})
await sleep(2000)
var el_new = createElement("div")
me(el_new).styles({"transition":"all 2s", "opacity":"0"})
el_new.innerText = "💎💎💎"
me(el).appendChild(el_new)
await sleep(1000)
me(el_new).styles({"opacity":"1"})
})()
</script>
</div>
</body>
</html>