Last active
November 29, 2020 13:48
-
-
Save jin-park/b7174f7d3eea090b11bb8176c208b023 to your computer and use it in GitHub Desktop.
Custom element example in Pluto
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ### A Pluto.jl notebook ### | |
| # v0.12.10 | |
| 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 | |
| # ╔═╡ 6275c0e0-323a-11eb-2ac9-a78204ce31a4 | |
| begin | |
| using Pkg | |
| Pkg.add("Colors") | |
| using Colors | |
| end | |
| # ╔═╡ 78af0fdc-3231-11eb-33be-91349c51c15b | |
| RGBSlider = html""" | |
| <div class="rgb-values"></div> | |
| <div class="rgb-sliders"></div> | |
| <script> | |
| const container = currentScript.parentElement; | |
| const colors = ["Red", "Green", "Blue"]; | |
| const rgbSliders = container.querySelector(".rgb-sliders"); | |
| const rgbValues = container.querySelector(".rgb-values"); | |
| function colorRange(color) { | |
| var slider = document.createElement("input"); | |
| slider.type = "range"; | |
| slider.id = color; | |
| slider.min = 0; | |
| slider.max = 1; | |
| slider.step = 0.01; | |
| slider.value = 0.5; | |
| return slider; | |
| } | |
| function colorLabel(color) { | |
| var label = document.createElement("after"); | |
| return label; | |
| } | |
| for (var i = 0; i < 3; i++) { | |
| rgbSliders.appendChild(colorRange(colors[i])); | |
| rgbSliders.children[i].addEventListener("input", updateValues); | |
| } | |
| function updateValues() { | |
| rgbValues.value = [0,1,2].map((x)=>parseFloat(rgbSliders.children[x].value)); | |
| rgbValues.dispatchEvent(new CustomEvent("input")); | |
| } | |
| updateValues(); | |
| </script> | |
| """ | |
| # ╔═╡ d929b340-323a-11eb-1c99-b7ef61ac3b97 | |
| @bind rgb RGBSlider | |
| # ╔═╡ 2c243c32-3245-11eb-3b51-eb1593eab037 | |
| rgb | |
| # ╔═╡ 319aa138-3245-11eb-31f2-45316136a9b3 | |
| RGB(rgb...) | |
| # ╔═╡ Cell order: | |
| # ╠═6275c0e0-323a-11eb-2ac9-a78204ce31a4 | |
| # ╠═d929b340-323a-11eb-1c99-b7ef61ac3b97 | |
| # ╠═2c243c32-3245-11eb-3b51-eb1593eab037 | |
| # ╠═319aa138-3245-11eb-31f2-45316136a9b3 | |
| # ╠═78af0fdc-3231-11eb-33be-91349c51c15b |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment