From bf4588d2b04671359fdf870fac958d3ea79509a1 Mon Sep 17 00:00:00 2001 From: John Merkel Date: Wed, 7 Feb 2024 18:37:43 -0800 Subject: [PATCH 01/15] Add details function for constructing a details disclosure element (`
`) --- src/Layout.jl | 144 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 140 insertions(+), 4 deletions(-) diff --git a/src/Layout.jl b/src/Layout.jl index 26bffd70..90f45989 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -1,5 +1,5 @@ ### A Pluto.jl notebook ### -# v0.19.12 +# v0.19.38 using Markdown using InteractiveUtils @@ -571,6 +571,139 @@ end aside(embed_display(p)) ╠═╡ =# +# ╔═╡ 0d6ce65d-dbd0-4016-a052-009911011108 +begin + local style = @htl(""" + + """) + + local embed(detail::AbstractString) = detail + local embed(detail) = embed_display(detail) + + local Iterable = Union{AbstractVector,Tuple,Base.Generator} + + function details(summary::AbstractString, contents::Iterable; open::Bool=false) + @htl(""" + $(style) +
+ $(summary) +
+ $(map(contents) do detail + @htl("$(embed(detail))") + end) +
+
+ """) + end + + # Convenience function for when you just provide a single detail + details(summary::AbstractString, contents; open::Bool=false) = details(summary, (contents,), open=open) + + """ + ```julia + details(summary::AbstractString, contents; [open::Bool=false]) + ``` + Create a collapsable details disclosure element. + + Useful for initially hiding content that may be important yet overly verbose or advanced variables that may not always be worthy of screen space. + + # Examples + + ```julia + details("My summary", "Some contents") + ``` + + ```julia + details("My summary", [ + "My first item", + (@bind my_var Slider(1:10)), + md"How are you feeling? \$(@bind my_var Slider(1:10))", + ]) + ``` + + !!! warning "Beware `@bind` in list" + You may want to `@bind` several variables within the details element by inlining a list of `@bind` expressions, but you have to be careful of how macro expansion operates. Wrapping each `@bind` expression in parenthesis or interpolating them in markdown strings with `md` like the example above will prevent issues where the macro expansion modifies how your inlined list is interpreted. + """ + details +end + +# ╔═╡ 9cd41081-68ac-4b46-bc78-8d4c028faed9 +#=╠═╡ +begin + my_details = details("I'm going to take over the world! Would you like to know more?", [ + "I'm going to start small", + md"#### But don't mark me down just yet!", + md""" + Here are my steps for world domination! 🌍 + - Perfect my **evil laugh** 🦹 + - Create **_Laser (Pointer) of Doom_™** ⚡ + - Train **ninja cats** 🥷🐈 + - Build **volcanic lair** 🌋 + """, + ["Cat", "Laser (Pointer) ", "Volcano"], + Dict( + :cat => "Fluffy", + :laser => "Pointy", + :volcano => "Toasty", + ), + "Maybe I'll need a guard dog too?", + p, + ]) + + md""" + # Details + + $(my_details) + """ +end + ╠═╡ =# + +# ╔═╡ 716a13e2-d615-4032-86e9-a2085c95f252 +export details + # ╔═╡ Cell order: # ╠═9113b5a3-d1a6-4594-bb84-33f9ae56c9e5 # ╠═dd45b118-7a4d-45b3-8961-0c4fb337841b @@ -629,9 +762,12 @@ aside(embed_display(p)) # ╟─916f95ff-f568-48cc-91c3-ef2d2c9e397a # ╠═d24dfd97-5100-45f4-be12-ad30f98cc519 # ╠═18cc9fbe-a37a-11eb-082b-e99673bd677d -# ╠═9a166646-75c2-4711-9fad-665b01731759 +# ╟─9a166646-75c2-4711-9fad-665b01731759 # ╠═d373edd9-5537-4f15-8c36-31aebc2569b5 # ╟─50c3dce4-48c7-46b4-80a4-5af9cd83a0a8 -# ╟─87d374e1-e75f-468f-bc90-59d2013c361f +# ╠═87d374e1-e75f-468f-bc90-59d2013c361f # ╠═773685a4-a6f7-4f59-98d5-83adcd176a8e -# ╟─9d82ca2b-664d-461e-a93f-61c467bd983a +# ╠═9d82ca2b-664d-461e-a93f-61c467bd983a +# ╟─9cd41081-68ac-4b46-bc78-8d4c028faed9 +# ╠═716a13e2-d615-4032-86e9-a2085c95f252 +# ╠═0d6ce65d-dbd0-4016-a052-009911011108 From f2ad6e5b6ac5da028c5f36b00d4aef773e70d75d Mon Sep 17 00:00:00 2001 From: John Merkel Date: Thu, 8 Feb 2024 10:50:25 -0800 Subject: [PATCH 02/15] Updated wording in warning admonition --- src/Layout.jl | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/Layout.jl b/src/Layout.jl index 90f45989..a40b3549 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -646,6 +646,7 @@ begin ```julia details(summary::AbstractString, contents; [open::Bool=false]) ``` + Create a collapsable details disclosure element. Useful for initially hiding content that may be important yet overly verbose or advanced variables that may not always be worthy of screen space. @@ -664,8 +665,15 @@ begin ]) ``` - !!! warning "Beware `@bind` in list" - You may want to `@bind` several variables within the details element by inlining a list of `@bind` expressions, but you have to be careful of how macro expansion operates. Wrapping each `@bind` expression in parenthesis or interpolating them in markdown strings with `md` like the example above will prevent issues where the macro expansion modifies how your inlined list is interpreted. + !!! warning "Beware @bind in collection declaration" + You may want to `@bind` several variables within the details element by inlining a collection of `@bind` expressions, to do so you need to be careful of how macro expansion operates. Wrapping each `@bind` expression in parenthesis or interpolating them in markdown strings with `md` like the example above will prevent issues where the macro expansion modifies how your collection declaration is interpreted. + + ```julia + details("My summary", [ + "My first item", + @bind my_var Slider(1:10), # This will cause an error + ]) + ``` """ details end From 7fd0710a964218ed1cf1a62399f05d8a1418fa88 Mon Sep 17 00:00:00 2001 From: John Merkel Date: Thu, 8 Feb 2024 10:52:41 -0800 Subject: [PATCH 03/15] details convenience function now wraps contents in Vector instead of Tuple --- src/Layout.jl | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Layout.jl b/src/Layout.jl index a40b3549..5a68ada6 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -623,9 +623,7 @@ begin local embed(detail::AbstractString) = detail local embed(detail) = embed_display(detail) - local Iterable = Union{AbstractVector,Tuple,Base.Generator} - - function details(summary::AbstractString, contents::Iterable; open::Bool=false) + function details(summary::AbstractString, contents::Union{AbstractVector,Tuple,Base.Generator}; open::Bool=false) @htl(""" $(style)
@@ -640,7 +638,7 @@ begin end # Convenience function for when you just provide a single detail - details(summary::AbstractString, contents; open::Bool=false) = details(summary, (contents,), open=open) + details(summary::AbstractString, contents; open::Bool=false) = details(summary, [contents], open=open) """ ```julia From 7817e82fd55c5ef6a25b75d1028b0bf618947ce6 Mon Sep 17 00:00:00 2001 From: John Merkel Date: Thu, 8 Feb 2024 11:35:29 -0800 Subject: [PATCH 04/15] Documentation knits --- src/Layout.jl | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/Layout.jl b/src/Layout.jl index 5a68ada6..3dd21d3d 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -642,12 +642,12 @@ begin """ ```julia - details(summary::AbstractString, contents; [open::Bool=false]) + details(summary::AbstractString, contents; open::Bool=false) ``` Create a collapsable details disclosure element. - Useful for initially hiding content that may be important yet overly verbose or advanced variables that may not always be worthy of screen space. + Useful for initially hiding content that may be important yet overly verbose or advanced variables that may not always need displayed. # Examples @@ -659,17 +659,18 @@ begin details("My summary", [ "My first item", (@bind my_var Slider(1:10)), - md"How are you feeling? \$(@bind my_var Slider(1:10))", + md"How are you feeling? \$(@bind feeling Slider(1:10))", ]) ``` !!! warning "Beware @bind in collection declaration" - You may want to `@bind` several variables within the details element by inlining a collection of `@bind` expressions, to do so you need to be careful of how macro expansion operates. Wrapping each `@bind` expression in parenthesis or interpolating them in markdown strings with `md` like the example above will prevent issues where the macro expansion modifies how your collection declaration is interpreted. + You may want to `@bind` several variables with `contents` by inlining a collection of `@bind` expressions. Wrap each `@bind` expression in parenthesis or interpolate them in `md` strings like the example above to prevent macro expansion from modifying how your collection declaration is interpreted. ```julia + # This example will cause an error details("My summary", [ "My first item", - @bind my_var Slider(1:10), # This will cause an error + @bind my_var Slider(1:10), ]) ``` """ From abee9e4c9c51508ed045a430fa5c8303daa13455 Mon Sep 17 00:00:00 2001 From: John Merkel Date: Thu, 8 Feb 2024 11:45:47 -0800 Subject: [PATCH 05/15] Make `details` css a constant --- src/Layout.jl | 100 +++++++++++++++++++++++++------------------------- 1 file changed, 51 insertions(+), 49 deletions(-) diff --git a/src/Layout.jl b/src/Layout.jl index 3dd21d3d..efa6b2e0 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -571,61 +571,62 @@ end aside(embed_display(p)) ╠═╡ =# +# ╔═╡ c11eafa2-ddce-418b-8a3a-6673392511d0 +const details_css = @htl(""" + +""") + # ╔═╡ 0d6ce65d-dbd0-4016-a052-009911011108 begin - local style = @htl(""" - - """) - local embed(detail::AbstractString) = detail local embed(detail) = embed_display(detail) function details(summary::AbstractString, contents::Union{AbstractVector,Tuple,Base.Generator}; open::Bool=false) @htl(""" - $(style) + $(details_css)
$(summary)
@@ -777,4 +778,5 @@ export details # ╠═9d82ca2b-664d-461e-a93f-61c467bd983a # ╟─9cd41081-68ac-4b46-bc78-8d4c028faed9 # ╠═716a13e2-d615-4032-86e9-a2085c95f252 -# ╠═0d6ce65d-dbd0-4016-a052-009911011108 +# ╟─c11eafa2-ddce-418b-8a3a-6673392511d0 +# ╟─0d6ce65d-dbd0-4016-a052-009911011108 From 30773e31a6922805ad29c32dc2bab0de609f1660 Mon Sep 17 00:00:00 2001 From: John Merkel Date: Thu, 8 Feb 2024 11:56:17 -0800 Subject: [PATCH 06/15] Improved format of details examples --- src/Layout.jl | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/src/Layout.jl b/src/Layout.jl index efa6b2e0..69128075 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -657,11 +657,15 @@ begin ``` ```julia - details("My summary", [ - "My first item", - (@bind my_var Slider(1:10)), - md"How are you feeling? \$(@bind feeling Slider(1:10))", - ]) + details( + "My summary", + [ + "My first item", + (@bind my_var Slider(1:10)), + md"How are you feeling? \$(@bind feeling Slider(1:10))", + ], + open=true, + ) ``` !!! warning "Beware @bind in collection declaration" @@ -669,10 +673,13 @@ begin ```julia # This example will cause an error - details("My summary", [ - "My first item", - @bind my_var Slider(1:10), - ]) + details( + "My summary", + [ + "My first item", + @bind my_var Slider(1:10), + ] + ) ``` """ details @@ -779,4 +786,4 @@ export details # ╟─9cd41081-68ac-4b46-bc78-8d4c028faed9 # ╠═716a13e2-d615-4032-86e9-a2085c95f252 # ╟─c11eafa2-ddce-418b-8a3a-6673392511d0 -# ╟─0d6ce65d-dbd0-4016-a052-009911011108 +# ╠═0d6ce65d-dbd0-4016-a052-009911011108 From 8bc5ba314b3445e3288dfc3b91320bef488a60c9 Mon Sep 17 00:00:00 2001 From: John Merkel Date: Thu, 8 Feb 2024 12:50:29 -0800 Subject: [PATCH 07/15] Rename embed => embed_detail --- src/Layout.jl | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Layout.jl b/src/Layout.jl index 69128075..42237c6b 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -621,8 +621,8 @@ plutoui-detail:last-child { # ╔═╡ 0d6ce65d-dbd0-4016-a052-009911011108 begin - local embed(detail::AbstractString) = detail - local embed(detail) = embed_display(detail) + embed_detail(detail::AbstractString) = detail + embed_detail(detail) = embed_display(detail) function details(summary::AbstractString, contents::Union{AbstractVector,Tuple,Base.Generator}; open::Bool=false) @htl(""" @@ -631,7 +631,7 @@ begin $(summary)
$(map(contents) do detail - @htl("$(embed(detail))") + @htl("$(embed_detail(detail))") end)
From 8728add86497d13c202b3b4ce128faa7f402215d Mon Sep 17 00:00:00 2001 From: John Merkel Date: Thu, 8 Feb 2024 16:28:36 -0800 Subject: [PATCH 08/15] map => Iterators.map Update per review Co-authored-by: Fons van der Plas --- src/Layout.jl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Layout.jl b/src/Layout.jl index 42237c6b..43444477 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -630,7 +630,7 @@ begin
$(summary)
- $(map(contents) do detail + $(Iterators.map(contents) do detail @htl("$(embed_detail(detail))") end)
From 8f4b285180adb3caa96d38e7f52d5f0650e5ded2 Mon Sep 17 00:00:00 2001 From: John Merkel Date: Fri, 9 Feb 2024 14:04:25 -0800 Subject: [PATCH 09/15] Revert Layout.jl, move `details` to Details.jl --- src/Details.jl | 191 +++++++++++++++++++++++++++++++++++++++++++++++++ src/Layout.jl | 160 ++--------------------------------------- src/PlutoUI.jl | 4 ++ 3 files changed, 199 insertions(+), 156 deletions(-) create mode 100644 src/Details.jl diff --git a/src/Details.jl b/src/Details.jl new file mode 100644 index 00000000..68479be0 --- /dev/null +++ b/src/Details.jl @@ -0,0 +1,191 @@ +### A Pluto.jl notebook ### +# v0.19.38 + +using Markdown +using InteractiveUtils + +# ╔═╡ 81f5b495-76c4-4c54-93ab-b49c5ecb810a +# ╠═╡ skip_as_script = true +#=╠═╡ +begin + import Pkg + Pkg.activate(Base.current_project(@__DIR__)) + Pkg.instantiate() + md"**Project env active**" +end + ╠═╡ =# + +# ╔═╡ b7b18a54-afd7-4467-83ed-cc4f07c321fb +using HypertextLiteral + +# ╔═╡ 13e81634-3b72-4b1d-a89b-36d184698d21 +const details_css = @htl(""" + +""") + +# ╔═╡ df840588-23bd-4b03-b5ab-ef273052d198 +const Iterable = Union{AbstractVector, Tuple, Base.Generator} + +# ╔═╡ 46521e2b-ea06-491a-9842-13dff7dc8299 +begin + embed_detail(detail::AbstractString) = detail + embed_detail(detail) = if isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :embed_display) + Main.PlutoRunner.embed_display(detail) + else + @htl("$(detail)") + end + + function details(summary::AbstractString, contents::Iterable; open::Bool=false) + @htl(""" + $(details_css) +
+ $(summary) +
+ $(Iterators.map(contents) do detail + @htl("$(embed_detail(detail))") + end) +
+
+ """) + end + + # Convenience function for when you just provide a single detail + details(summary::AbstractString, contents; open::Bool=false) = details(summary, [contents], open=open) + + """ + ```julia + details(summary::AbstractString, contents; open::Bool=false) + ``` + + Create a collapsable details disclosure element (`
`). + + Useful for initially hiding content that may be important yet overly verbose or exposing advanced variables that may not always need displayed. + + # Arguments + + - `summary::AbstractString`: the always visible summary of the details element. + - `contents::Any`: the item(s) to nest within the details element. + + # Keyword arguments + + - `open::Bool=false`: whether the details element is initially open. + + # Examples + + ```julia + details("My summary", "Some contents") + ``` + + ```julia + details( + "My summary", + [ + "My first item", + (@bind my_var Slider(1:10)), + md"How are you feeling? \$(@bind feeling Slider(1:10))", + ], + open=true, + ) + ``` + + !!! warning "Beware @bind in collection declaration" + You may want to `@bind` several variables within the `contents` argument by declaring a collection of `@bind` expressions. Wrap each `@bind` expression in parenthesis or interpolate them in `md` strings like the example above to prevent macro expansion from modifying how your collection declaration is interpreted. + + ```julia + # This example will cause an error + details( + "My summary", + [ + "My first item", + @bind my_var Slider(1:10), + ] + ) + ``` + """ + details +end + +# ╔═╡ da0fb772-9a70-4616-a540-5770a8d48476 +# ╠═╡ skip_as_script = true +#=╠═╡ +begin + my_details = details("I'm going to take over the world! Would you like to know more?", [ + "I'm going to start small", + md"#### But don't mark me down just yet!", + md""" + Here are my steps for world domination! 🌍 + - Perfect my **evil laugh** 🦹 + - Create **_Laser (Pointer) of Doom_™** ⚡ + - Train **ninja cats** 🥷🐈 + - Build **volcanic lair** 🌋 + """, + ["Cat", "Laser (Pointer) ", "Volcano"], + Dict( + :cat => "Fluffy", + :laser => "Pointy", + :volcano => "Toasty", + ), + ]) + + md""" + # Details + + $(my_details) + """ +end + ╠═╡ =# + +# ╔═╡ 5d28fa36-49dc-4d0f-a1c3-3fc2a5efdd0a +export details + +# ╔═╡ Cell order: +# ╟─81f5b495-76c4-4c54-93ab-b49c5ecb810a +# ╠═b7b18a54-afd7-4467-83ed-cc4f07c321fb +# ╟─da0fb772-9a70-4616-a540-5770a8d48476 +# ╠═5d28fa36-49dc-4d0f-a1c3-3fc2a5efdd0a +# ╟─13e81634-3b72-4b1d-a89b-36d184698d21 +# ╟─df840588-23bd-4b03-b5ab-ef273052d198 +# ╠═46521e2b-ea06-491a-9842-13dff7dc8299 diff --git a/src/Layout.jl b/src/Layout.jl index 43444477..26bffd70 100644 --- a/src/Layout.jl +++ b/src/Layout.jl @@ -1,5 +1,5 @@ ### A Pluto.jl notebook ### -# v0.19.38 +# v0.19.12 using Markdown using InteractiveUtils @@ -571,154 +571,6 @@ end aside(embed_display(p)) ╠═╡ =# -# ╔═╡ c11eafa2-ddce-418b-8a3a-6673392511d0 -const details_css = @htl(""" - -""") - -# ╔═╡ 0d6ce65d-dbd0-4016-a052-009911011108 -begin - embed_detail(detail::AbstractString) = detail - embed_detail(detail) = embed_display(detail) - - function details(summary::AbstractString, contents::Union{AbstractVector,Tuple,Base.Generator}; open::Bool=false) - @htl(""" - $(details_css) -
- $(summary) -
- $(Iterators.map(contents) do detail - @htl("$(embed_detail(detail))") - end) -
-
- """) - end - - # Convenience function for when you just provide a single detail - details(summary::AbstractString, contents; open::Bool=false) = details(summary, [contents], open=open) - - """ - ```julia - details(summary::AbstractString, contents; open::Bool=false) - ``` - - Create a collapsable details disclosure element. - - Useful for initially hiding content that may be important yet overly verbose or advanced variables that may not always need displayed. - - # Examples - - ```julia - details("My summary", "Some contents") - ``` - - ```julia - details( - "My summary", - [ - "My first item", - (@bind my_var Slider(1:10)), - md"How are you feeling? \$(@bind feeling Slider(1:10))", - ], - open=true, - ) - ``` - - !!! warning "Beware @bind in collection declaration" - You may want to `@bind` several variables with `contents` by inlining a collection of `@bind` expressions. Wrap each `@bind` expression in parenthesis or interpolate them in `md` strings like the example above to prevent macro expansion from modifying how your collection declaration is interpreted. - - ```julia - # This example will cause an error - details( - "My summary", - [ - "My first item", - @bind my_var Slider(1:10), - ] - ) - ``` - """ - details -end - -# ╔═╡ 9cd41081-68ac-4b46-bc78-8d4c028faed9 -#=╠═╡ -begin - my_details = details("I'm going to take over the world! Would you like to know more?", [ - "I'm going to start small", - md"#### But don't mark me down just yet!", - md""" - Here are my steps for world domination! 🌍 - - Perfect my **evil laugh** 🦹 - - Create **_Laser (Pointer) of Doom_™** ⚡ - - Train **ninja cats** 🥷🐈 - - Build **volcanic lair** 🌋 - """, - ["Cat", "Laser (Pointer) ", "Volcano"], - Dict( - :cat => "Fluffy", - :laser => "Pointy", - :volcano => "Toasty", - ), - "Maybe I'll need a guard dog too?", - p, - ]) - - md""" - # Details - - $(my_details) - """ -end - ╠═╡ =# - -# ╔═╡ 716a13e2-d615-4032-86e9-a2085c95f252 -export details - # ╔═╡ Cell order: # ╠═9113b5a3-d1a6-4594-bb84-33f9ae56c9e5 # ╠═dd45b118-7a4d-45b3-8961-0c4fb337841b @@ -777,13 +629,9 @@ export details # ╟─916f95ff-f568-48cc-91c3-ef2d2c9e397a # ╠═d24dfd97-5100-45f4-be12-ad30f98cc519 # ╠═18cc9fbe-a37a-11eb-082b-e99673bd677d -# ╟─9a166646-75c2-4711-9fad-665b01731759 +# ╠═9a166646-75c2-4711-9fad-665b01731759 # ╠═d373edd9-5537-4f15-8c36-31aebc2569b5 # ╟─50c3dce4-48c7-46b4-80a4-5af9cd83a0a8 -# ╠═87d374e1-e75f-468f-bc90-59d2013c361f +# ╟─87d374e1-e75f-468f-bc90-59d2013c361f # ╠═773685a4-a6f7-4f59-98d5-83adcd176a8e -# ╠═9d82ca2b-664d-461e-a93f-61c467bd983a -# ╟─9cd41081-68ac-4b46-bc78-8d4c028faed9 -# ╠═716a13e2-d615-4032-86e9-a2085c95f252 -# ╟─c11eafa2-ddce-418b-8a3a-6673392511d0 -# ╠═0d6ce65d-dbd0-4016-a052-009911011108 +# ╟─9d82ca2b-664d-461e-a93f-61c467bd983a diff --git a/src/PlutoUI.jl b/src/PlutoUI.jl index 3e3b8d12..466d1178 100644 --- a/src/PlutoUI.jl +++ b/src/PlutoUI.jl @@ -44,6 +44,10 @@ end # 0.06 second # not exporting to avoid clash with DataFrames.combine const combine = CombineNotebook.combine +@reexport module DetailsNotebook + include("./Details.jl") +end # ? second + # this is a submodule using HypertextLiteral using Hyperscript From 87ea9dcf2f53562d10f8338a6457faa818bd6c9d Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Wed, 14 Feb 2024 18:03:40 +0100 Subject: [PATCH 10/15] tweaks --- src/Details.jl | 139 ++++++++++++++++++++++++++++++++++--------------- 1 file changed, 97 insertions(+), 42 deletions(-) diff --git a/src/Details.jl b/src/Details.jl index 68479be0..329189b6 100644 --- a/src/Details.jl +++ b/src/Details.jl @@ -4,6 +4,16 @@ 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 + # ╔═╡ 81f5b495-76c4-4c54-93ab-b49c5ecb810a # ╠═╡ skip_as_script = true #=╠═╡ @@ -18,6 +28,12 @@ end # ╔═╡ b7b18a54-afd7-4467-83ed-cc4f07c321fb using HypertextLiteral +# ╔═╡ b3732e34-d331-4dd2-b4fb-11b2f397d7c1 +# ╠═╡ skip_as_script = true +#=╠═╡ +const testslider = html"" + ╠═╡ =# + # ╔═╡ 13e81634-3b72-4b1d-a89b-36d184698d21 const details_css = @htl(""" """) @@ -71,21 +77,18 @@ const Iterable = Union{AbstractVector, Tuple, Base.Generator} # ╔═╡ 46521e2b-ea06-491a-9842-13dff7dc8299 begin - embed_detail(detail::AbstractString) = detail - embed_detail(detail) = if isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :embed_display) - Main.PlutoRunner.embed_display(detail) - else - @htl("$(detail)") - end + const embed_detail = isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :embed_display) ? Main.PlutoRunner.embed_display : identity function details(summary::AbstractString, contents::Iterable; open::Bool=false) @htl(""" $(details_css)
$(summary) -
+
$(Iterators.map(contents) do detail - @htl("$(embed_detail(detail))") + detail isa AbstractString ? + @htl("

$(detail)

") : + embed_detail(detail) end)
@@ -93,7 +96,7 @@ begin end # Convenience function for when you just provide a single detail - details(summary::AbstractString, contents; open::Bool=false) = details(summary, [contents], open=open) + details(summary::AbstractString, contents; open::Bool=false) = details(summary, (contents,); open) """ ```julia @@ -132,7 +135,7 @@ begin ``` !!! warning "Beware @bind in collection declaration" - You may want to `@bind` several variables within the `contents` argument by declaring a collection of `@bind` expressions. Wrap each `@bind` expression in parenthesis or interpolate them in `md` strings like the example above to prevent macro expansion from modifying how your collection declaration is interpreted. + You may want to `@bind` several variables within the `contents` argument by declaring a collection of `@bind` expressions. **Wrap each `@bind` expression in parenthesis** or interpolate them in `md` strings like the example above to prevent macro expansion from modifying how your collection declaration is interpreted. ```julia # This example will cause an error @@ -152,23 +155,26 @@ end # ╠═╡ skip_as_script = true #=╠═╡ begin - my_details = details("I'm going to take over the world! Would you like to know more?", [ - "I'm going to start small", - md"#### But don't mark me down just yet!", - md""" - Here are my steps for world domination! 🌍 - - Perfect my **evil laugh** 🦹 - - Create **_Laser (Pointer) of Doom_™** ⚡ - - Train **ninja cats** 🥷🐈 - - Build **volcanic lair** 🌋 - """, - ["Cat", "Laser (Pointer) ", "Volcano"], - Dict( - :cat => "Fluffy", - :laser => "Pointy", - :volcano => "Toasty", - ), - ]) + my_details = details( + "I'm going to take over the world! Would you like to know more?", + [ + "I'm going to start small", + md"#### But don't mark me down just yet!", + md""" + Here are my steps for world domination! 🌍 + - Perfect my **evil laugh** 🦹 + - Create **_Laser (Pointer) of Doom_™** ⚡ + - Train **ninja cats** 🥷🐈 + - Build **volcanic lair** 🌋 + """, + ["Cat", "Laser (Pointer) ", "Volcano"], + Dict( + :cat => "Fluffy", + :laser => "Pointy", + :volcano => "Toasty", + ), + ] + ) md""" # Details @@ -178,14 +184,63 @@ begin end ╠═╡ =# +# ╔═╡ b8434c11-2bb5-47ba-8562-e1176cba0af7 +# ╠═╡ skip_as_script = true +#=╠═╡ +details("hello", "asdf") + ╠═╡ =# + +# ╔═╡ f833a0bf-f7f7-417d-8cd9-5f93a90aecf6 +# ╠═╡ skip_as_script = true +#=╠═╡ +details("hello", "asdf"; open=true) + ╠═╡ =# + +# ╔═╡ ef3ebb39-03ce-407b-9796-cae10d88f4a0 +# ╠═╡ skip_as_script = true +#=╠═╡ +details("hello", md"asdf"; open=true) + ╠═╡ =# + +# ╔═╡ b7349133-2590-415c-9a11-15c85e897a5c +# ╠═╡ skip_as_script = true +#=╠═╡ +details( + "My summary", + [ + "My first item", + (@bind my_var testslider), + md"How are you feeling? $(@bind feeling testslider)", + ], + open=true, +) + ╠═╡ =# + +# ╔═╡ a5663932-9a19-4d6d-9b20-d6fefac8cf9d +#=╠═╡ +my_var + ╠═╡ =# + +# ╔═╡ cd2bcfa2-5759-40d6-9358-3e7e605c5bc2 +#=╠═╡ +feeling + ╠═╡ =# + # ╔═╡ 5d28fa36-49dc-4d0f-a1c3-3fc2a5efdd0a export details # ╔═╡ Cell order: -# ╟─81f5b495-76c4-4c54-93ab-b49c5ecb810a +# ╠═81f5b495-76c4-4c54-93ab-b49c5ecb810a # ╠═b7b18a54-afd7-4467-83ed-cc4f07c321fb -# ╟─da0fb772-9a70-4616-a540-5770a8d48476 +# ╠═da0fb772-9a70-4616-a540-5770a8d48476 +# ╠═b8434c11-2bb5-47ba-8562-e1176cba0af7 +# ╠═f833a0bf-f7f7-417d-8cd9-5f93a90aecf6 +# ╠═ef3ebb39-03ce-407b-9796-cae10d88f4a0 +# ╠═b3732e34-d331-4dd2-b4fb-11b2f397d7c1 +# ╠═b7349133-2590-415c-9a11-15c85e897a5c +# ╠═a5663932-9a19-4d6d-9b20-d6fefac8cf9d +# ╠═cd2bcfa2-5759-40d6-9358-3e7e605c5bc2 # ╠═5d28fa36-49dc-4d0f-a1c3-3fc2a5efdd0a -# ╟─13e81634-3b72-4b1d-a89b-36d184698d21 +# ╠═13e81634-3b72-4b1d-a89b-36d184698d21 # ╟─df840588-23bd-4b03-b5ab-ef273052d198 # ╠═46521e2b-ea06-491a-9842-13dff7dc8299 From 303221e98067beaa8c9fd024d94040f96c24b1d2 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Wed, 14 Feb 2024 18:14:36 +0100 Subject: [PATCH 11/15] basic test --- test/runtests.jl | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/test/runtests.jl b/test/runtests.jl index ce5e0132..09fb54d7 100644 --- a/test/runtests.jl +++ b/test/runtests.jl @@ -288,10 +288,11 @@ transform(el, x) = AbstractPlutoDingetjes.Bonds.transform_value(el, x) el = Radio(["sin" => "asdf", "cos" => "cos"]; default = "cos") @test default(el) == "cos" + hrd(x) = occursin(" Date: Wed, 14 Feb 2024 15:22:41 -0800 Subject: [PATCH 12/15] Fix test error Use `htl"` instead of `md"` --- test/runtests.jl | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/runtests.jl b/test/runtests.jl index 09fb54d7..733fe81f 100644 --- a/test/runtests.jl +++ b/test/runtests.jl @@ -292,7 +292,7 @@ transform(el, x) = AbstractPlutoDingetjes.Bonds.transform_value(el, x) @test hrd(details("a", "b")) @test hrd(details("a", ("b","c"); open=true)) - @test hrd(details("a", [md"b", Slider(1:10)]; open=true)) + @test hrd(details("a", [htl"b", Slider(1:10)]; open=true)) el = Slider(0.0:π:20) @test default(el) == 0 @@ -503,4 +503,3 @@ transform(el, x) = AbstractPlutoDingetjes.Bonds.transform_value(el, x) el = Scrubbable(A) @test default(el) == A end - From 0045babcd57785f925686e68af9d470aafc81ecf Mon Sep 17 00:00:00 2001 From: John Merkel Date: Wed, 14 Feb 2024 17:31:54 -0800 Subject: [PATCH 13/15] Fancy `` hover --- src/Details.jl | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/Details.jl b/src/Details.jl index 329189b6..078ce030 100644 --- a/src/Details.jl +++ b/src/Details.jl @@ -59,6 +59,13 @@ pluto-output details summary { margin: -0.5em -0.5em 0; padding: 0.5em; font-family: var(--system-ui-font-stack); + border-radius: 3px; + transition: color .25s ease-in-out, background-color .25s ease-in-out; +} + +pluto-output details summary:hover { + color: var(--blockquote-color); + background-color: var(--blockquote-bg); } pluto-output details[open] { @@ -66,6 +73,7 @@ pluto-output details[open] { } pluto-output details[open] summary { + border-radius: 3px 3px 0 0; border-bottom: 1px solid var(--rule-color); margin-bottom: 0.5em; } From 6b4638c36e910ce077173a9b11e9e108ff03f801 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Thu, 15 Feb 2024 13:53:26 +0100 Subject: [PATCH 14/15] bring back pluto-detail --- src/Details.jl | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/Details.jl b/src/Details.jl index 078ce030..fa6d828b 100644 --- a/src/Details.jl +++ b/src/Details.jl @@ -77,6 +77,14 @@ pluto-output details[open] summary { border-bottom: 1px solid var(--rule-color); margin-bottom: 0.5em; } + +plutoui-detail { + display: block; + margin-block-end: var(--pluto-cell-spacing); +} +plutoui-detail:last-child { + margin-block-end: 0; +} """) @@ -85,7 +93,8 @@ const Iterable = Union{AbstractVector, Tuple, Base.Generator} # ╔═╡ 46521e2b-ea06-491a-9842-13dff7dc8299 begin - const embed_detail = isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :embed_display) ? Main.PlutoRunner.embed_display : identity + embed_detail(x) = isdefined(Main, :PlutoRunner) && isdefined(Main.PlutoRunner, :embed_display) ? Main.PlutoRunner.embed_display(x) : x + embed_detail(x::AbstractString) = x function details(summary::AbstractString, contents::Iterable; open::Bool=false) @htl(""" @@ -94,9 +103,7 @@ begin $(summary)
$(Iterators.map(contents) do detail - detail isa AbstractString ? - @htl("

$(detail)

") : - embed_detail(detail) + @htl("$(embed_detail(detail))") end)
@@ -166,6 +173,8 @@ begin my_details = details( "I'm going to take over the world! Would you like to know more?", [ + "I'm going to start small", + "I'm going to start small", "I'm going to start small", md"#### But don't mark me down just yet!", md""" @@ -175,13 +184,14 @@ begin - Train **ninja cats** 🥷🐈 - Build **volcanic lair** 🌋 """, + @htl("

Fantastic!

"), ["Cat", "Laser (Pointer) ", "Volcano"], Dict( :cat => "Fluffy", :laser => "Pointy", :volcano => "Toasty", ), - ] + ]; open=true ) md""" From 13674c2a925ae03fa9c607d5e5303c09377493c5 Mon Sep 17 00:00:00 2001 From: Fons van der Plas Date: Thu, 15 Feb 2024 13:55:32 +0100 Subject: [PATCH 15/15] Update Details.jl --- src/Details.jl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Details.jl b/src/Details.jl index fa6d828b..6eab0728 100644 --- a/src/Details.jl +++ b/src/Details.jl @@ -98,7 +98,6 @@ begin function details(summary::AbstractString, contents::Iterable; open::Bool=false) @htl(""" - $(details_css)
$(summary)
@@ -107,6 +106,7 @@ begin end)
+ $(details_css) """) end