Make pluto UI feel real!

plutouitips.jl

### A Pluto.jl notebook ###
# v0.11.14

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

# ╔═╡ 92b850e4-f89a-11ea-1a5b-716aaa004bd2
using PlutoUI

# ╔═╡ 5e585cce-d91c-11ea-1401-518475304d80
md"# PlutoUI Tips"

# ╔═╡ fb6451be-f913-11ea-3447-770c7e631e0d
md"#### 1. Show/Hide all codes"

# ╔═╡ e7e61832-f910-11ea-3315-d780fbf0fd33
html"""
<button id="showhide">show hide</button>
<style>
body.hide_all_inputs pluto-input {
	display: none;
}
body.hide_all_inputs pluto-shoulder {
	display: none;
}
body.hide_all_inputs pluto-trafficlight {
	display: none;
}
body.hide_all_inputs pluto-runarea {
	display: none;
}
body.hide_all_inputs .add_cell {
	display: none;
}
body.hide_all_inputs pluto-cell {
	min-height: 0;
	margin-top: 10px;
}
</style>
<script>
const button = this.querySelector("#showhide");
button.onclick = () => {
	document.body.classList.toggle("hide_all_inputs")
}
</script>
"""

# ╔═╡ 626083d4-d87a-11ea-3f69-b19843ae3588
md"#### 2. Execute a piece of code when and only when the run button is pressed.
"

# ╔═╡ 4756941e-d877-11ea-106b-8b5b92128355
md"""tmin = $(@bind tmin NumberField(0:200, default=20))ns"""

# ╔═╡ 4f347b86-d877-11ea-1a83-cd00c804a2fd
md"""tmax = $(@bind tmax NumberField(1:2000, default=400))ns"""

# ╔═╡ 616f92d4-f874-11ea-02f8-ab1c414c03f9
begin
	event_finished = Ref(true)
	@bind run html"""
<button type="button" value=-1 id="runbutton">Run</button>
<script>
var click=-1;
const button = this.querySelector("#runbutton")
button.onclick =counterclick
function counterclick() {
	click += 1;
	button.value = click;
};
</script>
"""
end

# ╔═╡ 1ec426a2-f87b-11ea-2285-93e35128ebdd
let
	run
	event_finished[] = false
end;

# ╔═╡ b8d16c48-d85d-11ea-2735-95a0be9b341b
let
	if parse(Int, run) >= 0 && !event_finished[]
		event_finished[] = true
		"tmin = $tmin, tmax=$tmax, $(randn())"
	else
		"not executed"
	end
end

# ╔═╡ Cell order:
# ╠═92b850e4-f89a-11ea-1a5b-716aaa004bd2
# ╠═5e585cce-d91c-11ea-1401-518475304d80
# ╠═fb6451be-f913-11ea-3447-770c7e631e0d
# ╠═e7e61832-f910-11ea-3315-d780fbf0fd33
# ╟─626083d4-d87a-11ea-3f69-b19843ae3588
# ╠═4756941e-d877-11ea-106b-8b5b92128355
# ╠═4f347b86-d877-11ea-1a83-cd00c804a2fd
# ╠═616f92d4-f874-11ea-02f8-ab1c414c03f9
# ╠═1ec426a2-f87b-11ea-2285-93e35128ebdd
# ╠═b8d16c48-d85d-11ea-2735-95a0be9b341b