From 01f53609445b93847018145d3119565c2985d83f Mon Sep 17 00:00:00 2001 From: Michael Pusterhofer Date: Wed, 18 Nov 2020 21:41:27 +0100 Subject: [PATCH 01/12] Fix reference in DownloadButton docstring --- src/Resource.jl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Resource.jl b/src/Resource.jl index 9178ba8c..76f2d930 100644 --- a/src/Resource.jl +++ b/src/Resource.jl @@ -99,7 +99,7 @@ end """ Button to download a Julia object as a file from the browser. -See [`DownloadButton`](@ref) to do the opposite. +See [`FilePicker`](@ref) to do the opposite. # Examples From 6d0a7e05aff5d8891745e42825f2c698e613469b Mon Sep 17 00:00:00 2001 From: Michael Pusterhofer Date: Sat, 1 May 2021 17:43:21 +0200 Subject: [PATCH 02/12] add CSS wrapper widget --- src/CSSWidgetWrapper.jl | 55 +++++++++++++++++++++++++++++++++++++++++ src/PlutoUI.jl | 1 + 2 files changed, 56 insertions(+) create mode 100644 src/CSSWidgetWrapper.jl diff --git a/src/CSSWidgetWrapper.jl b/src/CSSWidgetWrapper.jl new file mode 100644 index 00000000..39fac7a7 --- /dev/null +++ b/src/CSSWidgetWrapper.jl @@ -0,0 +1,55 @@ +export CSSWidgetWrapper + +""" +CSS widget Wrapper + +Generates a div element and delegates the input event to the it. +In addition the widget style properties can be set via javascript. + +Arguments: +widget: PlutoUI widget +style: Dict of javascript style properties + +Example: +Generate a text field with a red background and white text +CSSWidgetWrapper(Textfield(),Dict("backgroundColor"=>"red","color"=>"white")) +""" +struct CSSWidgetWrapper + widget + style +end + +""" +Output the html needed to wrap a widget and apply changes via javascript. +""" +function show(io::IO, m::MIME"text/html", w::CSSWidgetWrapper) + style = "" + for (k,v) in w.style + style *= "widget.style.$k = '$v';\n" + end + + result = """ + + + """ + print(io,"
") + show(io,m,w.widget) + print(io,result) +end + +""" +Use the default value of the widget +""" +Base.get(w::CSSWidgetWrapper) = get(w.widget) \ No newline at end of file diff --git a/src/PlutoUI.jl b/src/PlutoUI.jl index d1669181..b69adab1 100644 --- a/src/PlutoUI.jl +++ b/src/PlutoUI.jl @@ -11,5 +11,6 @@ include("./Resource.jl") include("./Terminal.jl") include("./RangeSlider.jl") include("./DisplayTricks.jl") +include("./CSSWidgetWrapper.jl") end From 0de88c9e5c69f4928279feefd02ef429d0044ebb Mon Sep 17 00:00:00 2001 From: Michael Pusterhofer Date: Sat, 1 May 2021 17:58:14 +0200 Subject: [PATCH 03/12] add css widget wrapper --- src/CSSWidgetWrapper.jl | 55 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/CSSWidgetWrapper.jl diff --git a/src/CSSWidgetWrapper.jl b/src/CSSWidgetWrapper.jl new file mode 100644 index 00000000..39fac7a7 --- /dev/null +++ b/src/CSSWidgetWrapper.jl @@ -0,0 +1,55 @@ +export CSSWidgetWrapper + +""" +CSS widget Wrapper + +Generates a div element and delegates the input event to the it. +In addition the widget style properties can be set via javascript. + +Arguments: +widget: PlutoUI widget +style: Dict of javascript style properties + +Example: +Generate a text field with a red background and white text +CSSWidgetWrapper(Textfield(),Dict("backgroundColor"=>"red","color"=>"white")) +""" +struct CSSWidgetWrapper + widget + style +end + +""" +Output the html needed to wrap a widget and apply changes via javascript. +""" +function show(io::IO, m::MIME"text/html", w::CSSWidgetWrapper) + style = "" + for (k,v) in w.style + style *= "widget.style.$k = '$v';\n" + end + + result = """ + +
+ """ + print(io,"
") + show(io,m,w.widget) + print(io,result) +end + +""" +Use the default value of the widget +""" +Base.get(w::CSSWidgetWrapper) = get(w.widget) \ No newline at end of file From 1438f3924ef4ca5e74627b53ae5268655e1149ab Mon Sep 17 00:00:00 2001 From: Michael Pusterhofer Date: Tue, 4 May 2021 13:10:24 +0200 Subject: [PATCH 04/12] remove unneeded event dispatch --- src/CSSWidgetWrapper.jl | 1 - 1 file changed, 1 deletion(-) diff --git a/src/CSSWidgetWrapper.jl b/src/CSSWidgetWrapper.jl index 39fac7a7..1eb0b3f3 100644 --- a/src/CSSWidgetWrapper.jl +++ b/src/CSSWidgetWrapper.jl @@ -36,7 +36,6 @@ function show(io::IO, m::MIME"text/html", w::CSSWidgetWrapper) function setValue() { container.value = widget.value - container.dispatchEvent(new CustomEvent('input')) } setValue() From 41a8daeca7ed2c877e15e0adeca4301ca2c70fc4 Mon Sep 17 00:00:00 2001 From: Michael Pusterhofer Date: Tue, 4 May 2021 13:26:54 +0200 Subject: [PATCH 05/12] avoid wrapper element; only do js injection --- src/CSSWidgetWrapper.jl | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/src/CSSWidgetWrapper.jl b/src/CSSWidgetWrapper.jl index 1eb0b3f3..9bfe82d1 100644 --- a/src/CSSWidgetWrapper.jl +++ b/src/CSSWidgetWrapper.jl @@ -23,27 +23,14 @@ end Output the html needed to wrap a widget and apply changes via javascript. """ function show(io::IO, m::MIME"text/html", w::CSSWidgetWrapper) - style = "" - for (k,v) in w.style - style *= "widget.style.$k = '$v';\n" - end + style = join(["widget.style.$k = '$v';" for (k,v) in w.style],"\n") result = """ -
""" - print(io,"
") show(io,m,w.widget) print(io,result) end From 517667b907bb29dc309b4059be69283bdbd5b479 Mon Sep 17 00:00:00 2001 From: Michael Pusterhofer Date: Tue, 4 May 2021 13:40:04 +0200 Subject: [PATCH 06/12] change documentation --- src/CSSWidgetWrapper.jl | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/src/CSSWidgetWrapper.jl b/src/CSSWidgetWrapper.jl index 9bfe82d1..56c2ee32 100644 --- a/src/CSSWidgetWrapper.jl +++ b/src/CSSWidgetWrapper.jl @@ -1,41 +1,32 @@ export CSSWidgetWrapper """ -CSS widget Wrapper + CSSWidgetWrapper(widget, style::Dict{String,String}) -Generates a div element and delegates the input event to the it. -In addition the widget style properties can be set via javascript. +Modify the style properties of the first HTML node for the given widget. -Arguments: -widget: PlutoUI widget -style: Dict of javascript style properties - -Example: -Generate a text field with a red background and white text +# Example: +Generate a text field with a red background and white text. +```` CSSWidgetWrapper(Textfield(),Dict("backgroundColor"=>"red","color"=>"white")) +```` """ struct CSSWidgetWrapper widget - style + style::Dict{String,String} end -""" -Output the html needed to wrap a widget and apply changes via javascript. -""" function show(io::IO, m::MIME"text/html", w::CSSWidgetWrapper) style = join(["widget.style.$k = '$v';" for (k,v) in w.style],"\n") - result = """ + script = """ """ show(io,m,w.widget) - print(io,result) + print(io,script) end -""" -Use the default value of the widget -""" Base.get(w::CSSWidgetWrapper) = get(w.widget) \ No newline at end of file From 5f9674b6bb874e1775901f5fb245a69caca7f5dc Mon Sep 17 00:00:00 2001 From: Michael Pusterhofer Date: Tue, 4 May 2021 13:54:41 +0200 Subject: [PATCH 07/12] add example for red border --- src/CSSWidgetWrapper.jl | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/CSSWidgetWrapper.jl b/src/CSSWidgetWrapper.jl index 56c2ee32..4a48f85d 100644 --- a/src/CSSWidgetWrapper.jl +++ b/src/CSSWidgetWrapper.jl @@ -7,9 +7,13 @@ Modify the style properties of the first HTML node for the given widget. # Example: Generate a text field with a red background and white text. -```` +``` CSSWidgetWrapper(Textfield(),Dict("backgroundColor"=>"red","color"=>"white")) -```` +``` +Generate a text field with 1px wide solid red border. +``` +CSSWidgetWrapper(Textfield(),Dict("border"=>"1px solid red")) +``` """ struct CSSWidgetWrapper widget From c6470c248b07d1901ee1fc44ab736fcf6dfff819 Mon Sep 17 00:00:00 2001 From: Michael Pusterhofer Date: Tue, 4 May 2021 14:02:49 +0200 Subject: [PATCH 08/12] remove empty line --- src/CSSWidgetWrapper.jl | 1 - 1 file changed, 1 deletion(-) diff --git a/src/CSSWidgetWrapper.jl b/src/CSSWidgetWrapper.jl index 4a48f85d..b1c65962 100644 --- a/src/CSSWidgetWrapper.jl +++ b/src/CSSWidgetWrapper.jl @@ -22,7 +22,6 @@ end function show(io::IO, m::MIME"text/html", w::CSSWidgetWrapper) style = join(["widget.style.$k = '$v';" for (k,v) in w.style],"\n") - script = """