forked from 2sys/phonograph
112 lines
2.7 KiB
Gleam
112 lines
2.7 KiB
Gleam
import gleam/option.{None, Some}
|
|
import lustre.{type App}
|
|
import lustre/attribute as attr
|
|
import lustre/component
|
|
import lustre/effect.{type Effect}
|
|
import lustre/element.{type Element}
|
|
import lustre/element/html
|
|
|
|
import hoverbar
|
|
|
|
pub const name: String = "viewer-hoverbar"
|
|
|
|
pub fn component() -> App(Nil, Model, Msg) {
|
|
lustre.component(init, update, view, [
|
|
component.on_attribute_change("root-path", fn(value) {
|
|
ParentChangedRootPath(value) |> Ok
|
|
}),
|
|
component.on_attribute_change("field-type", fn(value) {
|
|
ParentChangedFieldType(value) |> Ok
|
|
}),
|
|
component.on_attribute_change("value", fn(value) {
|
|
ParentChangedValue(value) |> Ok
|
|
}),
|
|
])
|
|
}
|
|
|
|
pub type Model {
|
|
Model(
|
|
hoverbar_model: hoverbar.Model,
|
|
root_path: String,
|
|
field_type: String,
|
|
value: String,
|
|
)
|
|
}
|
|
|
|
fn init(_) -> #(Model, Effect(Msg)) {
|
|
let #(hoverbar_model, hoverbar_effect) = hoverbar.init(Nil)
|
|
#(
|
|
Model(
|
|
hoverbar_model: hoverbar.Model(..hoverbar_model, tab_key: "editor"),
|
|
root_path: "",
|
|
field_type: "",
|
|
value: "",
|
|
),
|
|
hoverbar_effect |> effect.map(HoverbarMsg),
|
|
)
|
|
}
|
|
|
|
pub type Msg {
|
|
HoverbarMsg(hoverbar.Msg)
|
|
ParentChangedRootPath(String)
|
|
ParentChangedFieldType(String)
|
|
ParentChangedValue(String)
|
|
}
|
|
|
|
fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
|
|
case msg {
|
|
HoverbarMsg(hoverbar_msg) -> {
|
|
let #(hoverbar_model, hoverbar_effect) =
|
|
hoverbar.update(model.hoverbar_model, hoverbar_msg)
|
|
#(
|
|
Model(..model, hoverbar_model:),
|
|
hoverbar_effect |> effect.map(HoverbarMsg),
|
|
)
|
|
}
|
|
ParentChangedRootPath(root_path) -> #(
|
|
Model(..model, root_path:),
|
|
effect.none(),
|
|
)
|
|
ParentChangedFieldType(field_type) -> #(
|
|
Model(..model, field_type:),
|
|
effect.none(),
|
|
)
|
|
ParentChangedValue(value) -> #(Model(..model, value:), effect.none())
|
|
}
|
|
}
|
|
|
|
fn view(model: Model) -> Element(Msg) {
|
|
element.fragment([
|
|
html.link([
|
|
attr.rel("stylesheet"),
|
|
attr.href(model.root_path <> "/css_dist/viewer_hoverbar.css"),
|
|
]),
|
|
hoverbar.view(
|
|
model: model.hoverbar_model,
|
|
map_msg: HoverbarMsg,
|
|
tabs: [
|
|
hoverbar.TabItem(
|
|
icon: model.root_path <> "/heroicons/16/solid/chart-bar.svg",
|
|
label: "Editor",
|
|
key: "editor",
|
|
),
|
|
],
|
|
control_bar: fn(tab_key) {
|
|
case tab_key {
|
|
"editor" -> editor_control_bar(model)
|
|
_ -> element.none()
|
|
}
|
|
},
|
|
control_panel: fn(tab_key) {
|
|
case tab_key {
|
|
"editor" -> None
|
|
_ -> None
|
|
}
|
|
},
|
|
),
|
|
])
|
|
}
|
|
|
|
fn editor_control_bar(_model: Model) -> Element(Msg) {
|
|
html.input([attr.type_("text"), attr.class("control-bar__input")])
|
|
}
|