diff --git a/sample/Interactivity.jl b/sample/Interactivity.jl index 0eaa8ca5ae..c52b5d0588 100644 --- a/sample/Interactivity.jl +++ b/sample/Interactivity.jl @@ -1,5 +1,5 @@ ### A Pluto.jl notebook ### -# v0.14.0 +# v0.17.0 using Markdown using InteractiveUtils @@ -7,8 +7,9 @@ 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) : missing + global $(esc(def)) = Core.applicable(Base.get, el) ? Base.get(el) : iv(el) el end end @@ -16,7 +17,7 @@ end # ╔═╡ db24490e-7eac-11ea-094e-9d3fc8f22784 md"# Introducing _bound_ variables -With the new `@bind` macro, Pluto.jl can listen to real-time events from HTML objects!" +With the `@bind` macro, Pluto.jl can synchronize a Julia variable with an HTML object!" # ╔═╡ bd24d02c-7eac-11ea-14ab-95021678e71e @bind x html"" @@ -24,7 +25,7 @@ With the new `@bind` macro, Pluto.jl can listen to real-time events from HTML ob # ╔═╡ cf72c8a2-7ead-11ea-32b7-d31d5b2dacc2 md"This syntax displays the HTML object as the cell's output, and uses its latest value as the definition of `x`. Of course, the variable `x` is _reactive_, and all references to `x` come to life ✨ -_Try it out!_ 👆" +_Try moving the slider!_ 👆" # ╔═╡ cb1fd532-7eac-11ea-307c-ab16b1977819 x @@ -39,18 +40,22 @@ The `@bind` macro returns a `Bond` object, which can be used inside Markdown and # ╔═╡ fc99521c-7eae-11ea-269b-0d124b8cbe48 begin - 🐶slider = @bind 🐶 html"" - 🐱slider = @bind 🐱 html"" + dog_slider = @bind 🐶 html"" + cat_slider = @bind 🐱 html"" - md"""**How many pets do you have?** + md""" + **How many pets do you have?** - Dogs: $(🐶slider) - - Cats: $(🐱slider)""" + Dogs: $(dog_slider) + + Cats: $(cat_slider) + """ end # ╔═╡ 1cf27d7c-7eaf-11ea-3ee3-456ed1e930ea -md"You have $(🐶) dogs and $(🐱) cats!" +md""" +You have $(🐶) dogs and $(🐱) cats! +""" # ╔═╡ e3204b38-7eae-11ea-32be-39db6cc9faba md"" @@ -90,11 +95,13 @@ Try drawing a rectangle in the canvas below 👇 and notice that the `area` vari # ╔═╡ 7f4b0e1e-7f16-11ea-02d3-7955921a70bd @bind dims html""" + + """ # ╔═╡ 5876b98e-7f32-11ea-1748-0bb47823cde1 @@ -141,7 +149,7 @@ md"""## Can I use it? The `@bind` macro is **built into Pluto.jl** — it works without having to install a package. -You can use the (tiny) package [`PlutoUI`](/~https://github.com/fonsp/PlutoUI.jl) for some predefined `` HTML codes. For example, you use `PlutoUI` to write +You can use the (tiny) package [PlutoUI.jl](/~https://github.com/JuliaPluto/PlutoUI.jl) for some predefined input elements. For example, you use `PlutoUI` to write ```julia @bind x Slider(5:15) @@ -159,11 +167,11 @@ _The `@bind` syntax in not limited to `html"..."` objects, but **can be used for """ # ╔═╡ d5b3be4a-7f52-11ea-2fc7-a5835808207d -md"""#### More packages - -In fact, **_any package_ can add bindable values to their objects**. For example, a geoplotting package could add a JS `input` event to their plot that contains the cursor coordinates when it is clicked. You can then use those coordinates inside Julia. +md""" +#### More packages -A package _does not need to add `Pluto.jl` as a dependency to do so_: only the `Base.show(io, MIME("text/html"), obj)` function needs to be extended to contain a `