-
Notifications
You must be signed in to change notification settings - Fork 6
/
click counter.jl
66 lines (50 loc) · 1.63 KB
/
click counter.jl
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
### A Pluto.jl notebook ###
# v0.14.0
using Markdown
using InteractiveUtils
# This Pluto notebook uses @bind for interactivity. When running this notebook outside of Pluto, the following 'mock version' of @bind gives bound variables a default value (instead of an error).
macro bind(def, element)
quote
local el = $(esc(element))
global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : missing
el
end
end
# ╔═╡ a5572edc-3946-4690-888d-cbbb83b33012
ClickCounterWithReset(text="Click", reset_text="Reset") = HTML("""
<div>
<button>$(text)</button>
<a id="reset" href="#">$(reset_text)</a>
</div>
<script id="blabla">
// Select elements relative to `currentScript`
const div = currentScript.previousElementSibling
const button = div.querySelector("button")
const reset = div.querySelector("#reset")
// we wrapped the button in a `div` to hide its default behaviour from Pluto
let count = 0
button.addEventListener("click", (e) => {
count += 1
div.value = count
div.dispatchEvent(new CustomEvent("input"))
e.stopPropagation()
})
reset.addEventListener("click", (e) => {
count = 0
div.value = count
div.dispatchEvent(new CustomEvent("input"))
e.stopPropagation()
e.preventDefault()
})
// Set the initial value
div.value = count
</script>
""")
# ╔═╡ cc6e3ee2-3914-4fc8-99e7-755615c95c5e
@bind zz ClickCounterWithReset("Take one step!", "Start over!")
# ╔═╡ 493d8938-8a87-4e03-a976-6ce35dcf87b3
zz
# ╔═╡ Cell order:
# ╠═cc6e3ee2-3914-4fc8-99e7-755615c95c5e
# ╠═493d8938-8a87-4e03-a976-6ce35dcf87b3
# ╠═a5572edc-3946-4690-888d-cbbb83b33012