From 782b2881191d1ff01a36e83fd7332194bcc0f218 Mon Sep 17 00:00:00 2001
From: Matt Helm <mthelm85@gmail.com>
Date: Thu, 6 Aug 2020 17:55:14 -0500
Subject: [PATCH 1/7] added Radio UI

---
 src/Builtins.jl | 49 +++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index 578e6cd8..7618f0fa 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -1,4 +1,6 @@
-export Slider, NumberField, Button, CheckBox, TextField, Select, FilePicker
+import Random: randstring
+
+export Slider, NumberField, Button, CheckBox, TextField, Select, FilePicker, Radio
 
 struct Slider
     range::AbstractRange
@@ -127,4 +129,47 @@ function show(io::IO, ::MIME"text/html", filepicker::FilePicker)
     print(io, "'>")
 end
 
-get(select::FilePicker) = Dict("name" => "", "data" => [], "type" => "")
\ No newline at end of file
+get(select::FilePicker) = Dict("name" => "", "data" => [], "type" => "")
+
+struct Radio
+    options::Array{Pair{AbstractString,Any},1}
+    default::AbstractString
+end
+Radio(options::Array{<:AbstractString,1}; default::AbstractString="") = Radio([o => o for o in options], default)
+
+function show(io::IO, ::MIME"text/html", radio::Radio)
+    groupname = randstring(12)
+    println(io, """<form id="$(groupname)">""")
+    for o in radio.options
+        println(io, """<input type="radio" id="$(htmlesc(o.first))" name="$(groupname)" value="$(htmlesc(o.first))" $(htmlesc(radio.default) == htmlesc(o.first) ? "checked" : "")>""")
+        println(io, """<label for=$(htmlesc(o.first))>""")
+        if showable(MIME("text/html"), o.second)
+            show(io, MIME("text/html"), o.second)
+        else
+            print(io, o.second)
+        end
+        println(io, """</label><br>""")
+    end
+    println(io, """</form>""")
+    println(io, """<script>""")
+    println(io, """const form = this.querySelector('#$(groupname)')""")
+    println(io, """const radios = form.querySelectorAll('input[name=$(groupname)]')""")
+    println(io, """
+        for (let i = 0; i < radios.length; i++) {
+            if (radios[i].checked === true) {
+            form.value = radios[i].value
+            }
+        }
+        
+        if (radios) {
+            for (let i = 0; i < radios.length; i++) {
+            radios[i].addEventListener("click", function onchange() {
+                let selected = this.value
+                form.value = selected
+                form.dispatchEvent(new CustomEvent("input"))
+            })
+            }
+        }
+    """)
+    println(io, """</script""")
+end
\ No newline at end of file

From 685daa85106cfac0d90db55f654eec9dabb274c7 Mon Sep 17 00:00:00 2001
From: fonsp <fonsvdplas@gmail.com>
Date: Wed, 12 Aug 2020 14:50:32 +0000
Subject: [PATCH 2/7] Fix double input

---
 src/Builtins.jl | 43 ++++++++++++++++++++-----------------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index 7618f0fa..cdeaac34 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -141,35 +141,32 @@ function show(io::IO, ::MIME"text/html", radio::Radio)
     groupname = randstring(12)
     println(io, """<form id="$(groupname)">""")
     for o in radio.options
-        println(io, """<input type="radio" id="$(htmlesc(o.first))" name="$(groupname)" value="$(htmlesc(o.first))" $(htmlesc(radio.default) == htmlesc(o.first) ? "checked" : "")>""")
-        println(io, """<label for=$(htmlesc(o.first))>""")
-        if showable(MIME("text/html"), o.second)
-            show(io, MIME("text/html"), o.second)
+        print(io, "<div>")
+        print(io, """<input type="radio" id="$(groupname * htmlesc(o.first))" name="$(groupname)" value="$(htmlesc(o.first))" $(radio.default == o.first ? "checked" : "")>""")
+        print(io, """<label for="$(groupname * htmlesc(o.first))">""")
+        if showable(MIME"text/html"(), o.second)
+            show(io, MIME"text/html"(), o.second)
         else
             print(io, o.second)
         end
-        println(io, """</label><br>""")
+        print(io, """</label>""")
+        println(io, """</div>""")
     end
     println(io, """</form>""")
     println(io, """<script>""")
-    println(io, """const form = this.querySelector('#$(groupname)')""")
-    println(io, """const radios = form.querySelectorAll('input[name=$(groupname)]')""")
     println(io, """
-        for (let i = 0; i < radios.length; i++) {
-            if (radios[i].checked === true) {
-            form.value = radios[i].value
-            }
-        }
-        
-        if (radios) {
-            for (let i = 0; i < radios.length; i++) {
-            radios[i].addEventListener("click", function onchange() {
-                let selected = this.value
-                form.value = selected
-                form.dispatchEvent(new CustomEvent("input"))
-            })
-            }
-        }
+    const form = this.querySelector('#w7qQcdzzKNuF')
+
+    form.oninput = (e) => {
+        form.value = e.target.value
+        // and bubble upwards
+    }
+
+    // set initial value:
+    const selected_radio = form.querySelector('input[checked]')
+    if(selected_radio != null){
+        form.value = selected_radio.value
+    }
     """)
-    println(io, """</script""")
+    println(io, """</script>""")
 end
\ No newline at end of file

From 2827377f2395862ec353141e304d8a434c99d8b7 Mon Sep 17 00:00:00 2001
From: fonsp <fonsvdplas@gmail.com>
Date: Wed, 12 Aug 2020 14:59:23 +0000
Subject: [PATCH 3/7] withtag

---
 src/Builtins.jl | 75 +++++++++++++++++++++++++------------------------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index cdeaac34..1c3bd8f5 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -102,17 +102,17 @@ end
 Select(options::Array{<:AbstractString,1}) = Select([o => o for o in options])
 
 function show(io::IO, ::MIME"text/html", select::Select)
-    println(io, """<select>""")
-    for o in select.options
-        print(io, """<option value="$(htmlesc(o.first))">""")
-        if showable(MIME("text/html"), o.second)
-            show(io, MIME("text/html"), o.second)
-        else
-            print(io, o.second)
+    withtag(io, :select) do
+        for o in select.options
+            withtag(io, :option, value=>o.first) do
+                if showable(MIME"text/html"(), o.second)
+                    show(io, MIME"text/html"(), o.second)
+                else
+                    print(io, o.second)
+                end
+            end
         end
-        print(io, """</option>""")
     end
-    println(io, """</select>""")
 end
 
 get(select::Select) = first(select.options).first
@@ -139,34 +139,35 @@ Radio(options::Array{<:AbstractString,1}; default::AbstractString="") = Radio([o
 
 function show(io::IO, ::MIME"text/html", radio::Radio)
     groupname = randstring(12)
-    println(io, """<form id="$(groupname)">""")
-    for o in radio.options
-        print(io, "<div>")
-        print(io, """<input type="radio" id="$(groupname * htmlesc(o.first))" name="$(groupname)" value="$(htmlesc(o.first))" $(radio.default == o.first ? "checked" : "")>""")
-        print(io, """<label for="$(groupname * htmlesc(o.first))">""")
-        if showable(MIME"text/html"(), o.second)
-            show(io, MIME"text/html"(), o.second)
-        else
-            print(io, o.second)
+    withtag(io, :form, id=>groupname) do
+        for o in radio.options
+            withtag(io, :div) do
+                print(io, """<input type="radio" id="$(htmlesc(groupname * o.first))" name="$(groupname)" value="$(htmlesc(o.first))"$(radio.default == o.first ? " checked" : "")>""")
+
+                withtag(io, :label, :for=>(groupname * o.first)) do
+                    if showable(MIME"text/html"(), o.second)
+                        show(io, MIME"text/html"(), o.second)
+                    else
+                        print(io, o.second)
+                    end
+                end
+            end
         end
-        print(io, """</label>""")
-        println(io, """</div>""")
     end
-    println(io, """</form>""")
-    println(io, """<script>""")
-    println(io, """
-    const form = this.querySelector('#w7qQcdzzKNuF')
-
-    form.oninput = (e) => {
-        form.value = e.target.value
-        // and bubble upwards
-    }
-
-    // set initial value:
-    const selected_radio = form.querySelector('input[checked]')
-    if(selected_radio != null){
-        form.value = selected_radio.value
-    }
-    """)
-    println(io, """</script>""")
+    withtag(io, :script) do
+        print(io, """
+        const form = this.querySelector('#$(groupname)')
+
+        form.oninput = (e) => {
+            form.value = e.target.value
+            // and bubble upwards
+        }
+
+        // set initial value:
+        const selected_radio = form.querySelector('input[checked]')
+        if(selected_radio != null){
+            form.value = selected_radio.value
+        }
+        """)
+    end
 end
\ No newline at end of file

From 35de4438b9b7f6742fe3503f5e94ef732e89c7c8 Mon Sep 17 00:00:00 2001
From: fonsp <fonsvdplas@gmail.com>
Date: Wed, 12 Aug 2020 15:33:42 +0000
Subject: [PATCH 4/7] docstring and refactor

---
 src/Builtins.jl | 52 +++++++++++++++++++++++++++++++++++--------------
 src/PlutoUI.jl  |  2 +-
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index 1c3bd8f5..ad5556df 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -66,9 +66,9 @@ Use `default` to set the initial value.
 See the [Mozilla docs about `<input type="text">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text) and [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
 
 # Examples
-`TextField()`
+`@bind poem TextField()`
 
-`TextField((30,5); default="Hello\nJuliaCon!")`"""
+`@bind poem TextField((30,5); default="Hello\nJuliaCon!")`"""
 struct TextField
     dims::Union{Tuple{Integer,Integer},Nothing}
     default::AbstractString
@@ -93,29 +93,35 @@ get(textfield::TextField) = textfield.default
 See the [Mozilla docs about `select`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
 
 # Examples
-`Select(["potato", "carrot"])`
+`@bind veg Select(["potato", "carrot"])`
 
-`Select(["potato" => "🥔", "carrot" => "🥕"])`"""
+`@bind veg Select(["potato" => "🥔", "carrot" => "🥕"])`
+
+`@bind veg Select(["potato" => "🥔", "carrot" => "🥕"], default="carrot")`"""
 struct Select
-    options::Array{Pair{AbstractString,Any},1}
+    options::Array{Pair{<:AbstractString,<:Any},1}
+    default::Union{Missing, AbstractString}
 end
-Select(options::Array{<:AbstractString,1}) = Select([o => o for o in options])
+Select(options::Array{<:AbstractString,1}; default=missing) = Select([o => o for o in options], default)
+Select(options::Array{<:Pair{<:AbstractString,<:Any},1}; default=missing) = Select(options, default)
 
 function show(io::IO, ::MIME"text/html", select::Select)
     withtag(io, :select) do
         for o in select.options
-            withtag(io, :option, value=>o.first) do
+            print(io, """<option value="$(htmlesc(o.first))"$(radio.default === o.first ? " selected" : "")>""")
+            withtag(io, :option, :value=>o.first) do
                 if showable(MIME"text/html"(), o.second)
                     show(io, MIME"text/html"(), o.second)
                 else
                     print(io, o.second)
                 end
             end
+            print(io, "</option>")
         end
     end
 end
 
-get(select::Select) = first(select.options).first
+get(select::Select) = ismissing(select.default) ? first(select.options).first : select.default
 
 
 struct FilePicker
@@ -131,18 +137,32 @@ end
 
 get(select::FilePicker) = Dict("name" => "", "data" => [], "type" => "")
 
+"""A group of radio buttons - the user can choose one of the `options`, an array of `String`s. 
+
+`options` can also be an array of pairs `key::String => value::Any`. The `key` is returned via `@bind`; the `value` is shown.
+
+
+# Examples
+`@bind veg Radio(["potato", "carrot"])`
+
+`@bind veg Radio(["potato" => "🥔", "carrot" => "🥕"])`
+
+`@bind veg Radio(["potato" => "🥔", "carrot" => "🥕"], default="carrot")`
+
+"""
 struct Radio
-    options::Array{Pair{AbstractString,Any},1}
-    default::AbstractString
+    options::Array{Pair{<:AbstractString,<:Any},1}
+    default::Union{Missing, AbstractString}
 end
-Radio(options::Array{<:AbstractString,1}; default::AbstractString="") = Radio([o => o for o in options], default)
+Radio(options::Array{<:AbstractString,1}; default=missing) = Radio([o => o for o in options], default)
+Radio(options::Array{<:Pair{<:AbstractString,<:Any},1}; default=missing) = Radio(options, default)
 
 function show(io::IO, ::MIME"text/html", radio::Radio)
-    groupname = randstring(12)
-    withtag(io, :form, id=>groupname) do
+    groupname = randstring('a':'z')
+    withtag(io, :form, :id=>groupname) do
         for o in radio.options
             withtag(io, :div) do
-                print(io, """<input type="radio" id="$(htmlesc(groupname * o.first))" name="$(groupname)" value="$(htmlesc(o.first))"$(radio.default == o.first ? " checked" : "")>""")
+                print(io, """<input type="radio" id="$(htmlesc(groupname * o.first))" name="$(groupname)" value="$(htmlesc(o.first))"$(radio.default === o.first ? " checked" : "")>""")
 
                 withtag(io, :label, :for=>(groupname * o.first)) do
                     if showable(MIME"text/html"(), o.second)
@@ -170,4 +190,6 @@ function show(io::IO, ::MIME"text/html", radio::Radio)
         }
         """)
     end
-end
\ No newline at end of file
+end
+
+get(radio::Radio) = radio.default
diff --git a/src/PlutoUI.jl b/src/PlutoUI.jl
index a878f322..9aca715a 100644
--- a/src/PlutoUI.jl
+++ b/src/PlutoUI.jl
@@ -1,7 +1,7 @@
 module PlutoUI
 
 import Base: show, get
-import Markdown: htmlesc
+import Markdown: htmlesc, withtag
 
 const PKG_ROOT_DIR = normpath(joinpath(@__DIR__, ".."))
 

From 2d81f305833626285cae05da405355c7d623a2f9 Mon Sep 17 00:00:00 2001
From: Matt Helm <mthelm85@gmail.com>
Date: Mon, 12 Oct 2020 10:04:52 -0500
Subject: [PATCH 5/7] added microphone input

---
 src/Builtins.jl | 70 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 69 insertions(+), 1 deletion(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index e663d591..a54b7fcc 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -1,7 +1,7 @@
 import Random: randstring
 import Dates
 
-export Slider, NumberField, Button, CheckBox, TextField, PasswordField, Select, MultiSelect, Radio, FilePicker, DateField, TimeField, ColorStringPicker
+export Slider, NumberField, Button, CheckBox, TextField, PasswordField, Select, MultiSelect, Radio, FilePicker, DateField, TimeField, ColorStringPicker, Microphone
 
 struct Slider
     range::AbstractRange
@@ -336,6 +336,74 @@ end
 
 get(radio::Radio) = radio.default
 
+struct Microphone end
+
+function show(io::IO, ::MIME"text/html", microphone::Microphone)
+    mic_id = randstring('a':'z')
+    mic_btn_id = randstring('a':'z')
+    microphone
+    withtag(() -> (), io, :audio, :id => mic_id)
+    print(io, """<input type="button" id="$mic_btn_id" class="mic-button" value="Stop">""")
+    withtag(io, :script) do 
+        print(io, """
+            const player = document.getElementById('$mic_id');
+            const stop = document.getElementById('$mic_btn_id');
+        
+            const handleSuccess = function(stream) {
+            const context = new AudioContext({ sampleRate: 44100 });
+            const analyser = context.createAnalyser();
+            const source = context.createMediaStreamSource(stream);
+        
+            source.connect(analyser);
+            
+            const bufferLength = analyser.frequencyBinCount;
+            
+            let dataArray = new Float32Array(bufferLength);
+            let animFrame;
+            
+            const streamAudio = () => {
+                animFrame = requestAnimationFrame(streamAudio);
+                analyser.getFloatTimeDomainData(dataArray);
+                player.value = dataArray;
+                player.dispatchEvent(new CustomEvent("input"));
+            }
+        
+            streamAudio();
+        
+            stop.onclick = e => {
+                source.disconnect(analyser);
+                cancelAnimationFrame(animFrame);
+            }
+            }
+        
+            navigator.mediaDevices.getUserMedia({ audio: true, video: false })
+            .then(handleSuccess)
+        """
+        )
+    end
+    withtag(io, :style) do 
+        print(io, """
+            .mic-button {
+                background-color: darkred;
+                border: none;
+                border-radius: 6px;
+                color: white;
+                padding: 15px 32px;
+                text-align: center;
+                text-decoration: none;
+                display: inline-block;
+                font-size: 16px;
+                font-family: "Alegreya Sans", sans-serif;
+                margin: 4px 2px;
+                cursor: pointer;
+            }
+        """
+        )
+    end
+end
+
+get(microphone::Microphone) = microphone
+
 """A date input (`<input type="date">`) - the user can pick a date, the date is returned as `Dates.DateTime` via `@bind`.
 
 Use `default` to set the initial value.

From a79fb1edbb8f2d5c2927f4fb48be8dc80f4e1528 Mon Sep 17 00:00:00 2001
From: Matt Helm <30706758+mthelm85@users.noreply.github.com>
Date: Mon, 9 Nov 2020 14:00:54 -0600
Subject: [PATCH 6/7] Update Builtins.jl

---
 src/Builtins.jl | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index f54c72cf..3661d2e6 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -1,12 +1,10 @@
 import Random: randstring
-<<<<<<< HEAD
 import Dates
 
 export Slider, NumberField, Button, CheckBox, TextField, PasswordField, Select, MultiSelect, Radio, FilePicker, DateField, TimeField, ColorStringPicker, Microphone
 =======
 
 export Slider, NumberField, Button, CheckBox, TextField, Select, FilePicker, Radio
->>>>>>> cd91008dfe913d18cecf9cf850743a8597b1224e
 
 struct Slider
     range::AbstractRange
@@ -154,7 +152,6 @@ end
 get(textfield::TextField) = textfield.default
 
 
-
 """A password input (`<input type="password">`) - the user can type text, the text is returned as `String` via `@bind`.
 
 This does not provide any special security measures, it just renders black dots (•••) instead of the typed characters.
@@ -202,7 +199,6 @@ Select(options::Array{<:Pair{<:AbstractString,<:Any},1}; default=missing) = Sele
 function show(io::IO, ::MIME"text/html", select::Select)
     withtag(io, :select) do
         for o in select.options
-<<<<<<< HEAD
             print(io, """<option value="$(htmlesc(o.first))"$(select.default === o.first ? " selected" : "")>""")
             if showable(MIME"text/html"(), o.second)
                 show(io, MIME"text/html"(), o.second)
@@ -246,7 +242,6 @@ function show(io::IO, ::MIME"text/html", select::MultiSelect)
                 show(io, MIME"text/html"(), o.second)
             else
                 print(io, o.second)
-=======
             print(io, """<option value="$(htmlesc(o.first))"$(radio.default === o.first ? " selected" : "")>""")
             withtag(io, :option, :value=>o.first) do
                 if showable(MIME"text/html"(), o.second)
@@ -254,14 +249,12 @@ function show(io::IO, ::MIME"text/html", select::MultiSelect)
                 else
                     print(io, o.second)
                 end
->>>>>>> cd91008dfe913d18cecf9cf850743a8597b1224e
             end
             print(io, "</option>")
         end
     end
 end
 
-<<<<<<< HEAD
 get(select::MultiSelect) = ismissing(select.default) ? Any[] : select.default
 
 """A file upload box. The chosen file will be read by the browser, and the bytes are sent back to Julia.
@@ -271,7 +264,6 @@ The optional `accept` argument can be an array of `MIME`s. The user can only sel
 ## Examples
 =======
 get(select::Select) = ismissing(select.default) ? first(select.options).first : select.default
->>>>>>> cd91008dfe913d18cecf9cf850743a8597b1224e
 
 `@bind file_data FilePicker()`
 
@@ -296,11 +288,9 @@ function show(io::IO, ::MIME"text/html", filepicker::FilePicker)
     print(io, "'>")
 end
 
-<<<<<<< HEAD
 get(select::FilePicker) = Dict("name" => "", "data" => UInt8[], "type" => "")
 =======
 get(select::FilePicker) = Dict("name" => "", "data" => [], "type" => "")
->>>>>>> cd91008dfe913d18cecf9cf850743a8597b1224e
 
 """A group of radio buttons - the user can choose one of the `options`, an array of `String`s. 
 
@@ -358,7 +348,6 @@ function show(io::IO, ::MIME"text/html", radio::Radio)
 end
 
 get(radio::Radio) = radio.default
-<<<<<<< HEAD
 
 struct Microphone end
 
@@ -487,5 +476,3 @@ function show(io::IO, ::MIME"text/html", colorStringPicker::ColorStringPicker)
     withtag(() -> (), io, :input, :type=>"color", :value=>colorStringPicker.default)
 end
 get(colorStringPicker::ColorStringPicker) = colorStringPicker.default
-=======
->>>>>>> cd91008dfe913d18cecf9cf850743a8597b1224e

From 6138d80ab2f0d4ae92345b1d64d2775d18730a99 Mon Sep 17 00:00:00 2001
From: Matt Helm <30706758+mthelm85@users.noreply.github.com>
Date: Mon, 9 Nov 2020 14:03:34 -0600
Subject: [PATCH 7/7] Update Builtins.jl

---
 src/Builtins.jl | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/Builtins.jl b/src/Builtins.jl
index 3661d2e6..4204614f 100644
--- a/src/Builtins.jl
+++ b/src/Builtins.jl
@@ -2,9 +2,6 @@ import Random: randstring
 import Dates
 
 export Slider, NumberField, Button, CheckBox, TextField, PasswordField, Select, MultiSelect, Radio, FilePicker, DateField, TimeField, ColorStringPicker, Microphone
-=======
-
-export Slider, NumberField, Button, CheckBox, TextField, Select, FilePicker, Radio
 
 struct Slider
     range::AbstractRange
@@ -262,7 +259,6 @@ get(select::MultiSelect) = ismissing(select.default) ? Any[] : select.default
 The optional `accept` argument can be an array of `MIME`s. The user can only select files with these MIME. If only `image/*` MIMEs are allowed, then smartphone browsers will open the camera instead of a file browser.
 
 ## Examples
-=======
 get(select::Select) = ismissing(select.default) ? first(select.options).first : select.default
 
 `@bind file_data FilePicker()`
@@ -289,8 +285,6 @@ function show(io::IO, ::MIME"text/html", filepicker::FilePicker)
 end
 
 get(select::FilePicker) = Dict("name" => "", "data" => UInt8[], "type" => "")
-=======
-get(select::FilePicker) = Dict("name" => "", "data" => [], "type" => "")
 
 """A group of radio buttons - the user can choose one of the `options`, an array of `String`s.