Carousel2.jl

### A Pluto.jl notebook ###
# v0.19.31

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 iv = try Base.loaded_modules[Base.PkgId(Base.UUID("6e696c72-6542-2067-7265-42206c756150"), "AbstractPlutoDingetjes")].Bonds.initial_value catch; b -> missing; end
        local el = $(esc(element))
        global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : iv(el)
        el
    end
end

# ╔═╡ 2e54b8fc-7852-11ec-27d7-df0bfe7f344a
using PlutoUI

# ╔═╡ 257ee9b0-d955-43d2-9c94-245716708a2d
using HypertextLiteral

# ╔═╡ 0b19e53d-eb7a-42b6-a7db-d95bc8c63eae
import MarkdownLiteral: @mdx

# ╔═╡ 0c0bab41-a020-41a0-83ad-0c57b4699ffa
const Layout = PlutoUI.ExperimentalLayout

# ╔═╡ c097b477-e154-47eb-b7d9-a4d2981dcf0e
padded(x) = Layout.Div([x]; style=Dict("padding" => "0em 1em"))

# ╔═╡ ddccf592-0d0f-475c-81ae-067c37ba3f7e
const all_directions = ["North", "East", "South", "West"]

# ╔═╡ a060f034-b540-4b1e-a87f-7e6185e15646
directions_bond = @bind chosen_directions MultiCheckBox(all_directions);

# ╔═╡ d441b495-a00c-4de3-a232-7c75f55fc95b
function Carousel2(
		elementsList;
		wraparound::Bool=false,
		peek::Bool=true,
	)
	
	@assert peek
	
    carouselHTML = map(elementsList) do element
		Layout.Div([element]; class="carousel-slide")
    end

	h = Layout.Div([
		@htl("""
		<style>
	    .carousel-box{
	        width: 100%;
	        overflow: hidden;
	    }
	    .carousel-container{
	        top: 0;
	        left: 0;
	        display: flex;
	        width: 100%;
	        flex-flow: row nowrap;
	        transform: translate(10%, 0px);
	        transition: transform 200ms ease-in-out;
	    }
	    .carousel-controls{
	        display: flex;
	        justify-content: center;
	        align-items: center;
	    }
	    .carousel-controls button{
	        margin: 8px;
	        width: 6em;
	    }
	    .carousel-slide {
	        min-width: 80%;
			overflow-x: auto;
	    }
	    </style>
		"""),
		
		Layout.Div([
			Layout.Div(carouselHTML; class="carousel-container")
		]; class="carousel-box"),
		@htl("""
		<div class="carousel-controls">
	        <button data-value="-1">Previous</button>
	        <button data-value="1">Next</button>
	    </div>
		"""),
		@htl("""
		<script>
		// Here is a little trick!
		// We include the number of elements inside the code, which will make this script re-run whenever it changes. Pluto only re-renders HTML when it changed.
		const max = $(length(elementsList))

        let div = currentScript.closest(".carousel-wrapper")
		let bound_element = div.parentElement.tagName === "PLUTO-DISPLAY" ? div.parentElement : div
		bound_element.value = 1
		let count = 0

		let buttons = div.querySelectorAll("button")

		const update_ui = () => {
			buttons[0].disabled = !$(wraparound) && count === 0
			buttons[1].disabled = !$(wraparound) && count === max - 1
		
			div.querySelector(".carousel-container").style = `transform: translate(\${10-count*80}%, 0px)`;
		}

		Object.defineProperty(bound_element, "value", {
			get: () => count + 1,
			set: (new_value) => {
				count = new_value - 1
				update_ui()
			}
		})


		const mod = (n, m) => ((n % m) + m) % m
		const clamp = (x, a, b) => Math.max(Math.min(x, b), a)
		
		const onclick = (e) => {
			const new_count = count + parseInt(e.target.dataset.value)
			if($(wraparound)){
				count = mod(new_count, max)
			} else {
				count = clamp(new_count, 0, max - 1)
			}
			
            
			bound_element.dispatchEvent(new CustomEvent("input"))
			update_ui()
            e.preventDefault()
        }

		// This code is in a requestIdleCallback because we need the buttons to be rendered before we can select them.
		requestIdleCallback(() => {
        	buttons = div.querySelectorAll("button")
	        buttons.forEach(button => button.addEventListener("click", onclick))
			update_ui()
		})
		
	    </script>
		"""),
	]; class="carousel-wrapper")
	
	# BondDefault(h,1)
	h
end

# ╔═╡ 596dbead-63ce-432a-8a0b-b3ea361e279e
xoxob = @bind xoxo Carousel2([md"# a",md"# b",3,rand(4)])

# ╔═╡ 8c96934c-3e23-45ed-b945-dce344bfb6eb
xoxob

# ╔═╡ af1ad32b-af53-4865-9807-ba8d0fba2a8c
xoxo

# ╔═╡ fa0b6647-6911-4c27-a1a6-240d215331d1
function Carousel(
		elementsList;
		wraparound::Bool=false,
		peek::Bool=true,
	)
	
	@assert peek
	
    carouselHTML = map(elementsList) do element
        @htl("""<div class="carousel-slide">
            $(element)
        </div>""")
    end
	
    h = @htl("""
<div>
    <style>
    .carousel-box{
        width: 100%;
        overflow: hidden;
    }
    .carousel-container{
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        flex-flow: row nowrap;
        transform: translate(10%, 0px);
        transition: transform 200ms ease-in-out;
    }
    .carousel-controls{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .carousel-controls button{
        margin: 8px;
        width: 6em;
    }
    .carousel-slide {
        min-width: 80%;
    }
    </style>
		
    <script>
        const div = currentScript.parentElement
        const buttons = div.querySelectorAll("button")
		
		const max = $(length(elementsList))

		let count = 0
		
		const mod = (n, m) => ((n % m) + m) % m
		const clamp = (x, a, b) => Math.max(Math.min(x, b), a)
		
		const update_ui = (count) => {
			buttons[0].disabled = !$(wraparound) && count === 0
			buttons[1].disabled = !$(wraparound) && count === max - 1
		
			div.querySelector(".carousel-container").style = `transform: translate(\${10-count*80}%, 0px)`;
		}
		
		const onclick = (e) => {
			const new_count = count + parseInt(e.target.dataset.value)
			if($(wraparound)){
				count = mod(new_count, max)
			} else {
				count = clamp(new_count, 0, max - 1)
			}
			
            
			div.value = count + 1
			div.dispatchEvent(new CustomEvent("input"))
			update_ui(div.value - 1)
            e.preventDefault()
        }
        buttons.forEach(button => button.addEventListener("click", onclick))
        div.value = count + 1
		update_ui(div.value - 1)
    </script>
		
    <div class="carousel-box">
        <div class="carousel-container">
            $(carouselHTML)
        </div>
    </div>
		
    <div class="carousel-controls">
        <button data-value="-1">Previous</button>
        <button data-value="1">Next</button>
    </div>
</div>
    """)
	
	# BondDefault(h,1)
	h
end

# ╔═╡ 6c84a84f-9ead-4091-819e-0de088e2dd4d
function wind_speeds(directions)
	PlutoUI.combine() do Child
		@htl("""
		<h6>Wind speeds</h6>
		<ul>
		$([
			@htl("<li>$(name): $(Child(name, Slider(1:100)))</li>")
			for name in directions
		])
		</ul>
		""")
	end
end


# ╔═╡ 6e26a930-1b49-4ff5-8704-9149d3cab7e9
speeds_bond = @bind speeds wind_speeds(chosen_directions);

# ╔═╡ ede20024-1aea-4d80-a19a-8a5ec88a00ac
data = map(speeds) do s
	rand(50) .+ s
end

# ╔═╡ acb08d1f-30f9-4e01-8216-3440c82714c7
pairs(speeds) |> collect

# ╔═╡ fffd6402-d508-48a6-abc6-3de333497787
Carousel2([
	md"""
	## Step 1: *directions*
	$(directions_bond)
	""" |> padded,
	
	md"""
	## Step 2: *speeds*
	$(speeds_bond)
	""" |> padded,

	md"""
	## Step 3: 🎉
	$(embed_display(
		data
	))
	""" |> padded,
	
	# md"""
	# ## Step 4: 📉
	# $(embed_display(
	# 	let
	# 		p = plot()
			
	# 		for (n,v) in pairs(data)
	# 			plot!(p, v; label=string(n))
	# 		end
	# 		p
	# 	end
	# ))
	# """ |> padded,
])

# ╔═╡ ab108b97-4dd5-49e4-845c-2f0fab131f8a
Layout.vbox([
	directions_bond,
	speeds_bond,
	speeds
])

# ╔═╡ e866282e-7c63-4364-b344-46f4c6ad165c
dogscats() = PlutoUI.combine() do Child
	md"""
	# Hi there!

	I have $(
		Child(Slider(1:10))
	) dogs and $(
		Child(Slider(5:100))
	) cats.

	Would you like to see them? $(Child(CheckBox(true)))
	"""
end

# ╔═╡ 00000000-0000-0000-0000-000000000001
PLUTO_PROJECT_TOML_CONTENTS = """
[deps]
HypertextLiteral = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
MarkdownLiteral = "736d6165-7244-6769-4267-6b50796e6954"
PlutoUI = "7f904dfe-b85e-4ff6-b463-dae2292396a8"

[compat]
HypertextLiteral = "~0.9.4"
MarkdownLiteral = "~0.1.1"
PlutoUI = "~0.7.52"
"""

# ╔═╡ 00000000-0000-0000-0000-000000000002
PLUTO_MANIFEST_TOML_CONTENTS = """
# This file is machine-generated - editing it directly is not advised

julia_version = "1.8.3"
manifest_format = "2.0"
project_hash = "01c803e4ce3f0c29b95f2b0a98678a5842ba94fd"

[[deps.AbstractPlutoDingetjes]]
deps = ["Pkg"]
git-tree-sha1 = "91bd53c39b9cbfb5ef4b015e8b582d344532bd0a"
uuid = "6e696c72-6542-2067-7265-42206c756150"
version = "1.2.0"

[[deps.ArgTools]]
uuid = "0dad84c5-d112-42e6-8d28-ef12dabb789f"
version = "1.1.1"

[[deps.Artifacts]]
uuid = "56f22d72-fd6d-98f1-02f0-08ddc0907c33"

[[deps.Base64]]
uuid = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"

[[deps.ColorTypes]]
deps = ["FixedPointNumbers", "Random"]
git-tree-sha1 = "eb7f0f8307f71fac7c606984ea5fb2817275d6e4"
uuid = "3da002f7-5984-5a60-b8a6-cbb66c0b333f"
version = "0.11.4"

[[deps.CommonMark]]
deps = ["Crayons", "JSON", "PrecompileTools", "URIs"]
git-tree-sha1 = "532c4185d3c9037c0237546d817858b23cf9e071"
uuid = "a80b9123-70ca-4bc0-993e-6e3bcb318db6"
version = "0.8.12"

[[deps.CompilerSupportLibraries_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "e66e0078-7015-5450-92f7-15fbd957f2ae"
version = "0.5.2+0"

[[deps.Crayons]]
git-tree-sha1 = "249fe38abf76d48563e2f4556bebd215aa317e15"
uuid = "a8cc5b0e-0ffa-5ad4-8c14-923d3ee1735f"
version = "4.1.1"

[[deps.Dates]]
deps = ["Printf"]
uuid = "ade2ca70-3891-5945-98fb-dc099432e06a"

[[deps.Downloads]]
deps = ["ArgTools", "FileWatching", "LibCURL", "NetworkOptions"]
uuid = "f43a241f-c20a-4ad4-852c-f6b1247861c6"
version = "1.6.0"

[[deps.FileWatching]]
uuid = "7b1f6079-737a-58dc-b8bc-7a2ca5c1b5ee"

[[deps.FixedPointNumbers]]
deps = ["Statistics"]
git-tree-sha1 = "335bfdceacc84c5cdf16aadc768aa5ddfc5383cc"
uuid = "53c48c17-4a7d-5ca2-90c5-79b7896eea93"
version = "0.8.4"

[[deps.Hyperscript]]
deps = ["Test"]
git-tree-sha1 = "8d511d5b81240fc8e6802386302675bdf47737b9"
uuid = "47d2ed2b-36de-50cf-bf87-49c2cf4b8b91"
version = "0.0.4"

[[deps.HypertextLiteral]]
deps = ["Tricks"]
git-tree-sha1 = "c47c5fa4c5308f27ccaac35504858d8914e102f9"
uuid = "ac1192a8-f4b3-4bfe-ba22-af5b92cd3ab2"
version = "0.9.4"

[[deps.IOCapture]]
deps = ["Logging", "Random"]
git-tree-sha1 = "d75853a0bdbfb1ac815478bacd89cd27b550ace6"
uuid = "b5f81e59-6552-4d32-b1f0-c071b021bf89"
version = "0.2.3"

[[deps.InteractiveUtils]]
deps = ["Markdown"]
uuid = "b77e0a4c-d291-57a0-90e8-8db25a27a240"

[[deps.JSON]]
deps = ["Dates", "Mmap", "Parsers", "Unicode"]
git-tree-sha1 = "31e996f0a15c7b280ba9f76636b3ff9e2ae58c9a"
uuid = "682c06a0-de6a-54ab-a142-c8b1cf79cde6"
version = "0.21.4"

[[deps.LibCURL]]
deps = ["LibCURL_jll", "MozillaCACerts_jll"]
uuid = "b27032c2-a3e7-50c8-80cd-2d36dbcbfd21"
version = "0.6.3"

[[deps.LibCURL_jll]]
deps = ["Artifacts", "LibSSH2_jll", "Libdl", "MbedTLS_jll", "Zlib_jll", "nghttp2_jll"]
uuid = "deac9b47-8bc7-5906-a0fe-35ac56dc84c0"
version = "7.84.0+0"

[[deps.LibGit2]]
deps = ["Base64", "NetworkOptions", "Printf", "SHA"]
uuid = "76f85450-5226-5b5a-8eaa-529ad045b433"

[[deps.LibSSH2_jll]]
deps = ["Artifacts", "Libdl", "MbedTLS_jll"]
uuid = "29816b5a-b9ab-546f-933c-edad1886dfa8"
version = "1.10.2+0"

[[deps.Libdl]]
uuid = "8f399da3-3557-5675-b5ff-fb832c97cbdb"

[[deps.LinearAlgebra]]
deps = ["Libdl", "libblastrampoline_jll"]
uuid = "37e2e46d-f89d-539d-b4ee-838fcccc9c8e"

[[deps.Logging]]
uuid = "56ddb016-857b-54e1-b83d-db4d58db5568"

[[deps.MIMEs]]
git-tree-sha1 = "65f28ad4b594aebe22157d6fac869786a255b7eb"
uuid = "6c6e2e6c-3030-632d-7369-2d6c69616d65"
version = "0.1.4"

[[deps.Markdown]]
deps = ["Base64"]
uuid = "d6f4376e-aef5-505a-96c1-9c027394607a"

[[deps.MarkdownLiteral]]
deps = ["CommonMark", "HypertextLiteral"]
git-tree-sha1 = "0d3fa2dd374934b62ee16a4721fe68c418b92899"
uuid = "736d6165-7244-6769-4267-6b50796e6954"
version = "0.1.1"

[[deps.MbedTLS_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "c8ffd9c3-330d-5841-b78e-0817d7145fa1"
version = "2.28.0+0"

[[deps.Mmap]]
uuid = "a63ad114-7e13-5084-954f-fe012c677804"

[[deps.MozillaCACerts_jll]]
uuid = "14a3606d-f60d-562e-9121-12d972cd8159"
version = "2022.2.1"

[[deps.NetworkOptions]]
uuid = "ca575930-c2e3-43a9-ace4-1e988b2c1908"
version = "1.2.0"

[[deps.OpenBLAS_jll]]
deps = ["Artifacts", "CompilerSupportLibraries_jll", "Libdl"]
uuid = "4536629a-c528-5b80-bd46-f80d51c5b363"
version = "0.3.20+0"

[[deps.Parsers]]
deps = ["Dates", "PrecompileTools", "UUIDs"]
git-tree-sha1 = "716e24b21538abc91f6205fd1d8363f39b442851"
uuid = "69de0a69-1ddd-5017-9359-2bf0b02dc9f0"
version = "2.7.2"

[[deps.Pkg]]
deps = ["Artifacts", "Dates", "Downloads", "LibGit2", "Libdl", "Logging", "Markdown", "Printf", "REPL", "Random", "SHA", "Serialization", "TOML", "Tar", "UUIDs", "p7zip_jll"]
uuid = "44cfe95a-1eb2-52ea-b672-e2afdf69b78f"
version = "1.8.0"

[[deps.PlutoUI]]
deps = ["AbstractPlutoDingetjes", "Base64", "ColorTypes", "Dates", "FixedPointNumbers", "Hyperscript", "HypertextLiteral", "IOCapture", "InteractiveUtils", "JSON", "Logging", "MIMEs", "Markdown", "Random", "Reexport", "URIs", "UUIDs"]
git-tree-sha1 = "e47cd150dbe0443c3a3651bc5b9cbd5576ab75b7"
uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
version = "0.7.52"

[[deps.PrecompileTools]]
deps = ["Preferences"]
git-tree-sha1 = "03b4c25b43cb84cee5c90aa9b5ea0a78fd848d2f"
uuid = "aea7be01-6a6a-4083-8856-8a6e6704d82a"
version = "1.2.0"

[[deps.Preferences]]
deps = ["TOML"]
git-tree-sha1 = "00805cd429dcb4870060ff49ef443486c262e38e"
uuid = "21216c6a-2e73-6563-6e65-726566657250"
version = "1.4.1"

[[deps.Printf]]
deps = ["Unicode"]
uuid = "de0858da-6303-5e67-8744-51eddeeeb8d7"

[[deps.REPL]]
deps = ["InteractiveUtils", "Markdown", "Sockets", "Unicode"]
uuid = "3fa0cd96-eef1-5676-8a61-b3b8758bbffb"

[[deps.Random]]
deps = ["SHA", "Serialization"]
uuid = "9a3f8284-a2c9-5f02-9a11-845980a1fd5c"

[[deps.Reexport]]
git-tree-sha1 = "45e428421666073eab6f2da5c9d310d99bb12f9b"
uuid = "189a3867-3050-52da-a836-e630ba90ab69"
version = "1.2.2"

[[deps.SHA]]
uuid = "ea8e919c-243c-51af-8825-aaa63cd721ce"
version = "0.7.0"

[[deps.Serialization]]
uuid = "9e88b42a-f829-5b0c-bbe9-9e923198166b"

[[deps.Sockets]]
uuid = "6462fe0b-24de-5631-8697-dd941f90decc"

[[deps.SparseArrays]]
deps = ["LinearAlgebra", "Random"]
uuid = "2f01184e-e22b-5df5-ae63-d93ebab69eaf"

[[deps.Statistics]]
deps = ["LinearAlgebra", "SparseArrays"]
uuid = "10745b16-79ce-11e8-11f9-7d13ad32a3b2"

[[deps.TOML]]
deps = ["Dates"]
uuid = "fa267f1f-6049-4f14-aa54-33bafae1ed76"
version = "1.0.0"

[[deps.Tar]]
deps = ["ArgTools", "SHA"]
uuid = "a4e569a6-e804-4fa4-b0f3-eef7a1d5b13e"
version = "1.10.1"

[[deps.Test]]
deps = ["InteractiveUtils", "Logging", "Random", "Serialization"]
uuid = "8dfed614-e22c-5e08-85e1-65c5234f0b40"

[[deps.Tricks]]
git-tree-sha1 = "eae1bb484cd63b36999ee58be2de6c178105112f"
uuid = "410a4b4d-49e4-4fbc-ab6d-cb71b17b3775"
version = "0.1.8"

[[deps.URIs]]
git-tree-sha1 = "67db6cc7b3821e19ebe75791a9dd19c9b1188f2b"
uuid = "5c2747f8-b7ea-4ff2-ba2e-563bfd36b1d4"
version = "1.5.1"

[[deps.UUIDs]]
deps = ["Random", "SHA"]
uuid = "cf7118a7-6976-5b1a-9a39-7adc72f591a4"

[[deps.Unicode]]
uuid = "4ec0a83e-493e-50e2-b9ac-8f72acf5a8f5"

[[deps.Zlib_jll]]
deps = ["Libdl"]
uuid = "83775a58-1f1d-513f-b197-d71354ab007a"
version = "1.2.12+3"

[[deps.libblastrampoline_jll]]
deps = ["Artifacts", "Libdl", "OpenBLAS_jll"]
uuid = "8e850b90-86db-534c-a0d3-1478176c7d93"
version = "5.1.1+0"

[[deps.nghttp2_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "8e850ede-7688-5339-a07c-302acd2aaf8d"
version = "1.48.0+0"

[[deps.p7zip_jll]]
deps = ["Artifacts", "Libdl"]
uuid = "3f19e933-33d8-53b3-aaab-bd5110c3b7a0"
version = "17.4.0+0"
"""

# ╔═╡ Cell order:
# ╠═ede20024-1aea-4d80-a19a-8a5ec88a00ac
# ╠═acb08d1f-30f9-4e01-8216-3440c82714c7
# ╠═c097b477-e154-47eb-b7d9-a4d2981dcf0e
# ╠═0b19e53d-eb7a-42b6-a7db-d95bc8c63eae
# ╠═2e54b8fc-7852-11ec-27d7-df0bfe7f344a
# ╠═0c0bab41-a020-41a0-83ad-0c57b4699ffa
# ╠═257ee9b0-d955-43d2-9c94-245716708a2d
# ╟─ddccf592-0d0f-475c-81ae-067c37ba3f7e
# ╠═fffd6402-d508-48a6-abc6-3de333497787
# ╠═a060f034-b540-4b1e-a87f-7e6185e15646
# ╠═6e26a930-1b49-4ff5-8704-9149d3cab7e9
# ╠═ab108b97-4dd5-49e4-845c-2f0fab131f8a
# ╠═596dbead-63ce-432a-8a0b-b3ea361e279e
# ╠═8c96934c-3e23-45ed-b945-dce344bfb6eb
# ╠═af1ad32b-af53-4865-9807-ba8d0fba2a8c
# ╠═d441b495-a00c-4de3-a232-7c75f55fc95b
# ╟─fa0b6647-6911-4c27-a1a6-240d215331d1
# ╟─6c84a84f-9ead-4091-819e-0de088e2dd4d
# ╟─e866282e-7c63-4364-b344-46f4c6ad165c
# ╟─00000000-0000-0000-0000-000000000001
# ╟─00000000-0000-0000-0000-000000000002