clean up togglebuttons code and layout (#134)

Author: piever

src/classes.jl

@@ -40,7 +40,7 @@ function getclass(T::WidgetTheme, arg, typ...)
     elseif arg==:div
         return "field"
     elseif arg==:togglebuttons
-        return "field is-grouped has-addons is-oneline is-centered"
+        return "buttons has-addons is-centered"
     elseif arg==:tabs
         return "tabs"
     elseif arg==:radiobuttons

src/optioninput.jl

@@ -1,3 +1,6 @@
+struct Automatic; end
+const automatic = Automatic()
+
 function _js_array(x::AbstractDict; process=string, placeholder=nothing)
     v = OrderedDict[OrderedDict("key" => key, "val" => i, "id" => "id"*randstring()) for (i, (key, val)) in enumerate(x)]
     placeholder !== nothing && pushfirst!(v, OrderedDict("key" => placeholder, "val" => 0, "id" => "id"*randstring()))
@@ -52,7 +55,7 @@ end
 function initvalueindex(value, index, vals2idxs;
     multiple = false, default = multiple ? eltype(vals2idxs[])[] : first(vals2idxs[]), rev = false)
 
-    if value === Some(nothing)
+    if value === automatic
         value = (index === nothing) ? default : vals2idxs[][Observables._val(index)]
     end
     (value isa AbstractObservable) || (value = Observable{Any}(value))
@@ -117,7 +120,7 @@ function dropdown(::WidgetTheme, options::AbstractObservable;
     placeholder = nothing,
     label = nothing,
     multiple = false,
-    value = Some(nothing),
+    value = automatic,
     index = nothing,
     className = "",
     style = PropDict(),
@@ -159,8 +162,7 @@ multiselect(T::WidgetTheme, options; kwargs...) =
 
 function multiselect(T::WidgetTheme, options::AbstractObservable; container=node(:div, className=:field), wrap=identity,
     label = nothing, typ="radio", wdgtyp=typ, stack=true, skip=1em, hskip=skip, vskip=skip,
-    value = Some(nothing), index = nothing, kwargs...)
-    attributes = merge(get(props(container), :attributes, Dict()), Dict("data-bind" => "foreach : options_js"))
+    value = automatic, index = nothing, kwargs...)
     vals2idxs = map(Vals2Idxs, options)
     p = initvalueindex(value, index, vals2idxs, multiple = (typ != "radio"))
     value, index = p.first, p.second
@@ -169,7 +171,7 @@ function multiselect(T::WidgetTheme, options::AbstractObservable; container=node
     option_array = _js_array(options)
     entry = wrap(InteractBase.entry(s; typ=typ, wdgtyp=wdgtyp, stack=stack, kwargs...))
     (entry isa Tuple )|| (entry = (entry,))
-    template = container(attributes = attributes)(
+    template = container(attributes = Dict("data-bind" => "foreach : options_js"))(
         entry...
     )
     ui = knockout(template, ["index" => index, "options_js" => option_array])
@@ -306,45 +308,8 @@ wdg[:options][] = ["c", "d", "e"]
 toggles(T::WidgetTheme, options; kwargs...) =
     Widget{:toggles}(multiselect(T, options; typ="checkbox", wdgtyp="toggle", kwargs...))
 
-for (wdg, tag, singlewdg, div, process) in zip([:togglebuttons, :tabs], [:button, :li], [:button, :tab], [:div, :ul], [:string, :identity])
-    @eval begin
-        $wdg(T::WidgetTheme, options; kwargs...) = $wdg(T::WidgetTheme, Observable(options); kwargs...)
-
-        function $wdg(T::WidgetTheme, options::AbstractObservable; tag = $(Expr(:quote, tag)),
-            className = getclass($(Expr(:quote, singlewdg)), "fullwidth"),
-            activeclass = getclass($(Expr(:quote, singlewdg)), "active"),
-            index = nothing, value = Some(nothing),
-            label = nothing, readout = false, vskip = 1em, kwargs...)
-
-            vals2idxs = map(Vals2Idxs, options)
-            p = initvalueindex(value, index, vals2idxs; default = first(vals2idxs[]))
-            value, index = p.first, p.second
-
-            className = mergeclasses(getclass($(Expr(:quote, singlewdg))), className)
-            updateSelected = js_lambda("\$root.index(val)")
-            btn = node(tag,
-                node(:label, attributes = Dict("data-bind" => "text : key")),
-                attributes=Dict("data-bind"=>
-                "click: $updateSelected, css: {'$activeclass' : \$root.index() == val, '$className' : true}"),
-            )
-            option_array = _js_array(options; process = $process)
-            template = node($(Expr(:quote, div)), className = getclass($(Expr(:quote, wdg))), attributes = "data-bind" => "foreach : options_js")(
-                btn
-            )
-
-            label != nothing && (template = flex_row(wdglabel(label), template))
-            ui = knockout(template, ["index" => index, "options_js" => option_array])
-            slap_design!(ui)
-
-            w = Widget{$(Expr(:quote, wdg))}(["options"=>options, "index" => ui["index"], "vals2idxs" => vals2idxs];
-                scope = ui, output = value, layout = node(:div, className = "field interact-widget")∘Widgets.scope)
-            if readout
-                w[:display] = mask(map(parent, vals2idxs); index = index)
-                w.layout = t -> div(dom"div.field"(Widgets.scope(t)), CSSUtil.vskip(vskip), t[:display], className = "interact-widget")
-            end
-            w
-        end
-    end
+for wdg in [:togglebuttons, :tabs]
+    @eval $wdg(T::WidgetTheme, options; kwargs...) = $wdg(T::WidgetTheme, Observable(options); kwargs...)
 end
 
 """
@@ -378,7 +343,39 @@ Note that the `options` can be modified from the widget directly:
 wdg[:options][] = ["c", "d", "e"]
 ```
 """
-function togglebuttons end
+function togglebuttons(T::WidgetTheme, options::AbstractObservable;
+    className = "",
+    activeclass = getclass(:button, "active"),
+    index = nothing, value = automatic,
+    container = node(:div, className = getclass(:togglebuttons)), wrap=identity,
+    label = nothing, readout = false, vskip = 1em, kwargs...)
+
+    vals2idxs = map(Vals2Idxs, options)
+    p = initvalueindex(value, index, vals2idxs; default = first(vals2idxs[]))
+    value, index = p.first, p.second
+
+    className = mergeclasses("interact-widget", getclass(:button), className)
+    updateSelected = js_lambda("\$root.index(val)")
+    btn = node(:span,
+        node(:label, attributes = Dict("data-bind" => "text : key")),
+        attributes=Dict("data-bind"=>
+        "click: $updateSelected, css: {'$activeclass' : \$root.index() == val, '$className' : true}"),
+    )
+    option_array = _js_array(options)
+    template = container(attributes = "data-bind" => "foreach : options_js")(wrap(btn))
+
+    label != nothing && (template = flex_row(wdglabel(label), template))
+    ui = knockout(template, ["index" => index, "options_js" => option_array])
+    slap_design!(ui)
+
+    w = Widget{:togglebuttons}(["options"=>options, "index" => ui["index"], "vals2idxs" => vals2idxs];
+        scope = ui, output = value, layout = Widgets.scope)
+    if readout
+        w[:display] = mask(map(parent, vals2idxs); index = index)
+        w.layout = t -> div(Widgets.scope(t), CSSUtil.vskip(vskip), t[:display], className = "interact-widget")
+    end
+    w
+end
 
 """
 `tabs(options::AbstractDict; value::Union{T, Observable})`
@@ -411,4 +408,38 @@ Note that the `options` can be modified from the widget directly:
 wdg[:options][] = ["c", "d", "e"]
 ```
 """
-function tabs end
+function tabs(T::WidgetTheme, options::AbstractObservable;
+    className = "",
+    activeclass = getclass(:tab, "active"),
+    index = nothing, value = automatic,
+    container=node(:div, className = getclass(:tabs)), wrap=identity,
+    label = nothing, readout = false, vskip = 1em, kwargs...)
+
+    vals2idxs = map(Vals2Idxs, options)
+    p = initvalueindex(value, index, vals2idxs; default = first(vals2idxs[]))
+    value, index = p.first, p.second
+
+    className = mergeclasses("interact-widget", getclass(:tab), className)
+    updateSelected = js_lambda("\$root.index(val)")
+    tab = node(:li,
+        wrap(node(:a, attributes = Dict("data-bind" => "text: key"))),
+        attributes=Dict("data-bind"=>
+        "click: $updateSelected, css: {'$activeclass' : \$root.index() == val, '$className' : true}"),
+    )
+    option_array = _js_array(options)
+    template = container(
+        node(:ul, attributes = "data-bind" => "foreach : options_js")(tab)
+    )
+
+    label != nothing && (template = flex_row(wdglabel(label), template))
+    ui = knockout(template, ["index" => index, "options_js" => option_array])
+    slap_design!(ui)
+
+    w = Widget{:tabs}(["options"=>options, "index" => ui["index"], "vals2idxs" => vals2idxs];
+        scope = ui, output = value, layout = Widgets.scope)
+    if readout
+        w[:display] = mask(map(parent, vals2idxs); index = index)
+        w.layout = t -> div(Widgets.scope(t), CSSUtil.vskip(vskip), t[:display], className = "interact-widget")
+    end
+    w
+end

src/output.jl

@@ -208,7 +208,7 @@ keys represent the labels and whose values represent what is shown in each entry
 `options` changes.
 """
 function accordion(::WidgetTheme, options::Observable;
-    multiple = true, value = nothing, index = value, key = Some(nothing))
+    multiple = true, value = nothing, index = value, key = automatic)
 
     vals2idxs = map(Vals2Idxs∘collect∘_keys, options)
     p = initvalueindex(key, index, vals2idxs, rev = true, multiple = multiple)
@@ -274,7 +274,7 @@ Note that the `options` can be modified from the widget directly:
 wdg[:options][] = ["c", "d", "e"]
 ```
 """
-function mask(::WidgetTheme, options; value = nothing, index = value, key = Some(nothing), multiple = false)
+function mask(::WidgetTheme, options; value = nothing, index = value, key = automatic, multiple = false)
 
     options isa AbstractObservable || (options = Observable{Any}(options))
     vals2idxs = map(Vals2Idxs∘collect∘_keys, options)
@@ -311,11 +311,12 @@ tabulator(OrderedDict("plot" => plot(rand(10)), "scatter" => scatter(rand(10))),
 see `tabulator(options::AbstractDict; ...)` for more details
 
 ```
-tabulator(options::Observable; kwargs...)
+tabulator(options::Observable; navbar=tabs, kwargs...)
 ```
 
 Tabulator whose `options` are a given `Observable`. Set the `Observable` to some other
-value to update the options in real time.
+value to update the options in real time. Defaults to `navbar=tabs`: use `navbar=togglebuttons`
+to have buttons instead of tabs.
 
 ## Examples
 
@@ -331,7 +332,7 @@ Note that the `options` can be modified from the widget directly:
 wdg[:options][] = ["c", "d", "e"]
 ```
 """
-function tabulator(T::WidgetTheme, options; navbar = togglebuttons, skip = 1em, vskip = skip, value = nothing, index = value, key = Some(nothing),  kwargs...)
+function tabulator(T::WidgetTheme, options; navbar = tabs, skip = 1em, vskip = skip, value = nothing, index = value, key = automatic,  kwargs...)
     options isa AbstractObservable || (options = Observable{Any}(options))
     vals2idxs = map(Vals2Idxs∘collect∘_keys, options)
     p = initvalueindex(key, index, vals2idxs, rev = true)
@@ -341,7 +342,7 @@ function tabulator(T::WidgetTheme, options; navbar = togglebuttons, skip = 1em,
     buttons = navbar(T, d; index = index, readout = false, kwargs...)
     content = mask(options; index = index)
 
-    layout = t -> div(t[:buttons], CSSUtil.vskip(vskip), t[:content], className = "interact-widget")
-    Widget{:tabulator}(["index" => index, "key" => key, "buttons" => buttons, "content" => content, "options" => options];
+    layout = t -> div(t[:navbar], CSSUtil.vskip(vskip), t[:content], className = "interact-widget")
+    Widget{:tabulator}(["index" => index, "key" => key, "navbar" => buttons, "content" => content, "options" => options];
         output = index, layout = layout)
 end

test/test_observables.jl

@@ -296,17 +296,17 @@ end
     @test observe(wdg)[] == 2
 
     a = tabulator(OrderedDict("a" => 1.1, "b" => 1.2, "c" => 1.3))
-    @test a[:buttons] isa InteractBase.Widget{:togglebuttons}
-    @test a[:buttons][:index][] == 1
-    @test observe(a, :buttons)[] == 1
+    @test a[:navbar] isa InteractBase.Widget{:tabs}
+    @test a[:navbar][:index][] == 1
+    @test observe(a, :navbar)[] == 1
     observe(a)[] = 2
     sleep(0.1)
-    @test a[:buttons][:index][] == 2
-    @test observe(a, :buttons)[] == 2
+    @test a[:navbar][:index][] == 2
+    @test observe(a, :navbar)[] == 2
     @test observe(a, "key")[] == "b"
 
     a = tabulator(OrderedDict("a" => 1.1, "b" => 1.2, "c" => 1.3), value = 0)
-    @test a[:buttons][:index][] == 0
+    @test a[:navbar][:index][] == 0
     @test observe(a, :key)[] == nothing
 
     v = OrderedDict("a" => checkbox(), "b" => 12)