351 lines
15 KiB
Go
351 lines
15 KiB
Go
package app
|
|
|
|
import (
|
|
"strconv"
|
|
|
|
. "kjol/vdom"
|
|
ui "kjol/webui"
|
|
)
|
|
|
|
// Every floating component in the kit, on one page: tooltips, popovers, menus and
|
|
// submenus, the date picker, modals (plain, confirm, wizard, imperative), toasts,
|
|
// and the tutorial's spotlight coachmarks.
|
|
//
|
|
// All of them are CONTROLLERS. They own refs, timers and open state, so they are
|
|
// created once here — never inside the render closure, which runs on every signal
|
|
// write and would rebuild them (and their refs) from scratch every frame. That is
|
|
// the single rule to remember about the floating layer.
|
|
//
|
|
// The page is NOT `static`: nothing is open during SSR anyway, so pre-rendering it
|
|
// buys nothing, and it keeps the example honest about which routes need it.
|
|
//
|
|
//gowasm:page /overlays layout=app
|
|
func OverlaysPage(d Deps) func() *VNode {
|
|
// --- tooltips -----------------------------------------------------------
|
|
tipTop := ui.NewHoverTooltip(ui.PlacementTop, "")
|
|
tipRight := ui.NewHoverTooltip(ui.PlacementRight, "")
|
|
tipFocus := ui.NewFocusTooltip(ui.PlacementBottom, "")
|
|
tipFast := ui.NewTooltip(ui.TooltipProps{Placement: ui.PlacementTop, Delay: -1})
|
|
|
|
// --- popovers -----------------------------------------------------------
|
|
pop := ui.NewPopover(ui.PopoverProps{Placement: ui.PlacementBottomStart})
|
|
popEnd := ui.NewPopover(ui.PopoverProps{Placement: ui.PlacementBottomEnd})
|
|
hoverPop := ui.NewHoverPopover(ui.HoverPopoverProps{
|
|
Placement: ui.PlacementTop,
|
|
// The bridge: the cursor gets 300ms of grace to cross the gap from the
|
|
// trigger onto the panel. Without it, the panel closes in the dead space
|
|
// between them — which is exactly what happens once a panel is portaled and
|
|
// CSS :hover no longer reaches it.
|
|
HoverCloseDelay: 300,
|
|
})
|
|
|
|
// --- menus --------------------------------------------------------------
|
|
menu := ui.NewMenu(ui.MenuOptions{Placement: ui.PlacementBottomStart})
|
|
sub := ui.NewSubmenu(menu)
|
|
hoverMenu := ui.NewMenu(ui.MenuOptions{Placement: ui.PlacementBottomStart, OpenOnHover: true})
|
|
|
|
// --- date pickers -------------------------------------------------------
|
|
picked := NewSignal("")
|
|
dp := ui.NewDatePicker(ui.DatePickerProps{
|
|
Placeholder: "Pick a date",
|
|
Clearable: true,
|
|
OnChange: func(v string) { picked.Set(v) },
|
|
})
|
|
dob := ui.NewDateOfBirthPicker(ui.DatePickerProps{Placeholder: "Date of birth"})
|
|
|
|
// --- modals -------------------------------------------------------------
|
|
modal := ui.NewModal(ui.ModalOptions{Size: ui.ModalMedium})
|
|
nested := ui.NewModal(ui.ModalOptions{Size: ui.ModalSmall})
|
|
deleted := NewSignal(false)
|
|
confirm := ui.NewModal(ui.ModalOptions{})
|
|
|
|
// --- wizard -------------------------------------------------------------
|
|
wizardName := NewSignal("")
|
|
wizardDone := NewSignal(false)
|
|
wizard := ui.NewWizard(ui.ModalOptions{})
|
|
|
|
// --- toasts -------------------------------------------------------------
|
|
// The Toaster owns the queue AND the clocks: it generates IDs, runs the
|
|
// auto-dismiss timer, and animates the countdown bar down to zero. (ToastProvider,
|
|
// the dumb half, renders a list you hand it and removes nothing — a toast pushed
|
|
// through it stays until you take it away yourself.)
|
|
toaster := ui.NewToaster(ui.ToasterOptions{Position: ui.ToastBottomRight})
|
|
pushToast := func(kind ui.ToastType, msg string) {
|
|
toaster.Push(ui.Toast{Message: msg, Type: kind})
|
|
}
|
|
|
|
// --- tutorial -----------------------------------------------------------
|
|
// Steps target elements by CSS SELECTOR. The tour resolves each one with
|
|
// document.querySelector, measures it, scrolls it into view, and cuts a hole in
|
|
// the dimmed overlay around it — the spotlight animates from target to target.
|
|
tour := ui.NewTutorial(ui.TutorialOptions{
|
|
Steps: []ui.TutorialStep{
|
|
{
|
|
Title: "Tooltips",
|
|
Target: "#demo-tooltips",
|
|
Content: func() *VNode { return Text("Measured, portaled, and they flip near a viewport edge.") },
|
|
},
|
|
{
|
|
Title: "Popovers",
|
|
Target: "#demo-popovers",
|
|
Placement: ui.PlacementBottom,
|
|
Content: func() *VNode { return Text("Click or hover. The hover bridge lets you reach the panel.") },
|
|
},
|
|
{
|
|
Title: "Menus",
|
|
Target: "#demo-menus",
|
|
Content: func() *VNode { return Text("Items close the menu themselves; submenus are portaled.") },
|
|
},
|
|
{
|
|
// No Target: the page dims flat and the card centres in the viewport.
|
|
Title: "That's the tour",
|
|
Content: func() *VNode { return Text("Escape ends it. Arrow keys and Enter move between steps.") },
|
|
},
|
|
},
|
|
})
|
|
|
|
return func() *VNode {
|
|
return Div(Attr("class", "space-y-8"),
|
|
Div(
|
|
H2(Attr("class", "text-2xl font-semibold tracking-tight text-text-heading"), Text("Overlays")),
|
|
P(Attr("class", "mt-1 text-neutral-500"),
|
|
Text("Every floating component, really measured: portaled to document.body, positioned from "+
|
|
"getBoundingClientRect against the viewport, flipping and shifting to stay on screen. "+
|
|
"Scroll or resize the window with one open.")),
|
|
row("mt-3 flex gap-2", tour.StartButton(0, "", Text("Take the tour"))),
|
|
),
|
|
|
|
// ---- tooltips ----
|
|
El("div", Attr("id", "demo-tooltips"),
|
|
kitSection("Tooltips",
|
|
row("flex flex-wrap items-center gap-3",
|
|
tipTop.Render(Span(Text("Above — the default")),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Text: "Top"})),
|
|
tipRight.Render(Span(Text("To the right, unless it would run off the edge")),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Text: "Right"})),
|
|
tipFast.Render(Span(Text("No open delay")),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Text: "Instant"})),
|
|
tipFocus.Render(Span(Text("Shown on focus, not hover — tab to the field")),
|
|
ui.FormInput(ui.FormInputProps{Placeholder: "Focus me"})),
|
|
),
|
|
P(Attr("class", "text-xs text-neutral-500"),
|
|
Text("Drag the window narrow and hover the Right one: it flips to the left, and its arrow "+
|
|
"follows. Near an edge the panel shifts back on screen and the arrow slides to keep "+
|
|
"pointing at the trigger — the original kit's arrow detached here.")),
|
|
),
|
|
),
|
|
|
|
// ---- popovers ----
|
|
El("div", Attr("id", "demo-popovers"),
|
|
kitSection("Popovers",
|
|
row("flex flex-wrap items-center gap-3",
|
|
pop.Trigger(ui.PopoverTriggerProps{},
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Text: "Click me"})),
|
|
pop.Content(ui.PopoverContentProps{Class: "w-64"},
|
|
P(Attr("class", "text-sm text-neutral-600"),
|
|
Text("Click outside, or press Escape, to close. Only the topmost floating closes per press.")),
|
|
),
|
|
|
|
popEnd.Trigger(ui.PopoverTriggerProps{},
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Text: "Aligned to my right edge"})),
|
|
popEnd.Content(ui.PopoverContentProps{Class: "w-56"},
|
|
P(Attr("class", "text-sm text-neutral-600"), Text("Placement bottom-end.")),
|
|
),
|
|
|
|
hoverPop.Trigger(ui.PopoverTriggerProps{},
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonBlue, Outline: true, Text: "Hover me, then reach the panel"})),
|
|
hoverPop.Content(ui.PopoverContentProps{Class: "w-64"},
|
|
P(Attr("class", "text-sm text-neutral-600"),
|
|
Text("Move the cursor across the gap and onto this panel — it stays open. "+
|
|
"Select this text to prove it.")),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// ---- menus ----
|
|
El("div", Attr("id", "demo-menus"),
|
|
kitSection("Menus & submenus",
|
|
row("flex flex-wrap items-center gap-3",
|
|
menu.TriggerFunc(ui.MenuTriggerProps{Tag: "div"}, func(open bool) *VNode {
|
|
caret := " ▾"
|
|
if open {
|
|
caret = " ▴"
|
|
}
|
|
return ui.Button(ui.ButtonProps{Color: ui.ButtonWhite, Text: "Actions" + caret})
|
|
}),
|
|
menu.Content("",
|
|
menu.Item(ui.MenuItemProps{Icon: "check", OnClick: func() { pushToast(ui.ToastSuccess, "Profile opened") }},
|
|
Text("Profile")),
|
|
menu.Item(ui.MenuItemProps{OnClick: func() { pushToast(ui.ToastInfo, "Settings opened") }},
|
|
Text("Settings")),
|
|
|
|
// The submenu is portaled — it used to be clipped by the parent
|
|
// menu's own overflow-y-auto.
|
|
sub.Submenu(ui.SubmenuProps{Trigger: "More", Icon: "ellipsis"},
|
|
sub.Item(ui.MenuItemProps{OnClick: func() { pushToast(ui.ToastInfo, "Archived") }}, Text("Archive")),
|
|
sub.Item(ui.MenuItemProps{OnClick: func() { pushToast(ui.ToastWarning, "Duplicated") }}, Text("Duplicate")),
|
|
),
|
|
|
|
ui.MenuDivider(""),
|
|
// KeepOpen is the TSX's closeOnClick inverted: by default an item
|
|
// closes the menu, which the first Go port dropped entirely.
|
|
menu.Item(ui.MenuItemProps{KeepOpen: true, OnClick: func() { pushToast(ui.ToastGeneric, "Menu stayed open") }},
|
|
Text("Stay open (KeepOpen)")),
|
|
menu.Item(ui.MenuItemProps{Icon: "arrow-right-from-bracket",
|
|
OnClick: func() { pushToast(ui.ToastError, "Signed out") }}, Text("Sign out")),
|
|
),
|
|
|
|
hoverMenu.TriggerFunc(ui.MenuTriggerProps{Tag: "div"}, func(bool) *VNode {
|
|
return ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Text: "Opens on hover"})
|
|
}),
|
|
hoverMenu.Content("",
|
|
hoverMenu.Item(ui.MenuItemProps{}, Text("One")),
|
|
hoverMenu.Item(ui.MenuItemProps{}, Text("Two")),
|
|
),
|
|
),
|
|
P(Attr("class", "text-xs text-neutral-500"),
|
|
Text("Opening one menu closes the other: a single-open manager, with submenus exempt "+
|
|
"(Standalone), or a submenu would close its own parent.")),
|
|
),
|
|
),
|
|
|
|
// ---- date pickers ----
|
|
kitSection("Date picker",
|
|
row("grid gap-4 sm:grid-cols-2",
|
|
row("flex flex-col gap-1",
|
|
ui.FormLabel(ui.FormLabelProps{}, Text("Date (portaled, flips near the bottom)")),
|
|
dp.Render(),
|
|
),
|
|
row("flex flex-col gap-1",
|
|
ui.FormLabel(ui.FormLabelProps{}, Text("Date of birth (inline, three selects)")),
|
|
dob.Render(),
|
|
),
|
|
),
|
|
P(Attr("class", "text-xs text-neutral-500"),
|
|
Text("Picked: \""+picked.Get()+"\". Type into the field too — it parses loosely "+
|
|
"(7/4/26, Jul 4 2026, 2026-07-04) and commits on blur.")),
|
|
),
|
|
|
|
// ---- modals ----
|
|
kitSection("Modals",
|
|
row("flex flex-wrap items-center gap-3",
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonPrimary, Text: "Open modal", OnClick: modal.Open}),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonRed, Outline: true, Text: "Delete something…", OnClick: confirm.Open}),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonBlue, Outline: true, Text: "Open wizard", OnClick: wizard.Open}),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Text: "Open imperatively",
|
|
OnClick: func() {
|
|
// No component in the tree owns this one: OpenModal hands content
|
|
// to the shared host rendered in the layout.
|
|
ui.OpenModal(func() *VNode {
|
|
return ui.ModalContent(ui.ModalContentProps{
|
|
Header: H3(Attr("class", "text-lg font-semibold text-text-heading"), Text("Opened from anywhere")),
|
|
},
|
|
P(Attr("class", "text-neutral-600"),
|
|
Text("This content was not rendered by any component — it was handed to "+
|
|
"ModalHost (see AppLayout) by webui.OpenModal.")),
|
|
)
|
|
}, ui.ModalOptions{Size: ui.ModalSmall})
|
|
}}),
|
|
),
|
|
P(Attr("class", "text-xs text-neutral-500"),
|
|
Text("Deleted: "+strconv.FormatBool(deleted.Get())+
|
|
". Open the modal, then the nested one inside it, and press Escape twice — "+
|
|
"modals unwind one layer per press.")),
|
|
|
|
modal.Render(ui.ModalProps{
|
|
Header: H3(Attr("class", "text-lg font-semibold text-text-heading"), Text("A modal")),
|
|
Footer: ui.Button(ui.ButtonProps{Color: ui.ButtonNeutral, Text: "Close", OnClick: modal.Close}),
|
|
},
|
|
P(Attr("class", "text-neutral-600"),
|
|
Text("Portaled to document.body, so no ancestor's overflow:hidden can clip it. It fades "+
|
|
"and scales in — a double requestAnimationFrame, because a single frame does not "+
|
|
"give the browser time to commit the initial style.")),
|
|
row("mt-4",
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonBlue, Outline: true, Text: "Open a nested modal", OnClick: nested.Open}),
|
|
),
|
|
),
|
|
nested.Render(ui.ModalProps{
|
|
Header: H3(Attr("class", "text-lg font-semibold text-text-heading"), Text("Nested")),
|
|
},
|
|
P(Attr("class", "text-neutral-600"), Text("Escape closes THIS one first, not the one behind it.")),
|
|
),
|
|
confirm.Confirm(ui.ConfirmModalProps{
|
|
Title: "Delete row",
|
|
Message: "This cannot be undone.",
|
|
OnConfirm: func() {
|
|
deleted.Set(true)
|
|
pushToast(ui.ToastError, "Row deleted")
|
|
},
|
|
}),
|
|
wizard.Render(ui.WizardProps{
|
|
Title: "Set up your account",
|
|
FinishText: "Finish",
|
|
OnComplete: func() {
|
|
wizardDone.Set(true)
|
|
pushToast(ui.ToastSuccess, "Wizard complete: "+wizardName.Get())
|
|
},
|
|
Steps: []ui.WizardStep{
|
|
{
|
|
Title: "Your name",
|
|
// Each step gets its own context: SetCanContinue gates THIS step's
|
|
// Next button, which a single shared bool could not express.
|
|
Content: func(ctx ui.WizardStepContext) *VNode {
|
|
ctx.SetCanContinue(wizardName.Get() != "")
|
|
return row("flex flex-col gap-1",
|
|
ui.FormLabel(ui.FormLabelProps{}, Text("Name (required to continue)")),
|
|
ui.FormInput(ui.FormInputProps{
|
|
Value: wizardName.Get(),
|
|
Placeholder: "Ada Lovelace",
|
|
OnInput: func(v string) { wizardName.Set(v) },
|
|
}),
|
|
)
|
|
},
|
|
},
|
|
{
|
|
Title: "Confirm",
|
|
Content: func(ctx ui.WizardStepContext) *VNode {
|
|
ctx.SetCanContinue(true)
|
|
return P(Attr("class", "text-neutral-600"),
|
|
Text("All set for "+wizardName.Get()+". Finish to close."))
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
),
|
|
|
|
// ---- toasts ----
|
|
kitSection("Toasts",
|
|
row("flex flex-wrap items-center gap-2",
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonGreen, Small: true, Text: "Success",
|
|
OnClick: func() { toaster.Success("Saved.") }}),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonRed, Small: true, Text: "Error",
|
|
OnClick: func() { toaster.Error("Something went wrong.") }}),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonBlue, Small: true, Text: "Info",
|
|
OnClick: func() { toaster.Info("Just so you know.") }}),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Small: true, Text: "Sticky (no timer)",
|
|
OnClick: func() {
|
|
toaster.Push(ui.Toast{
|
|
Message: "This one waits for you to dismiss it.",
|
|
Type: ui.ToastWarning,
|
|
Duration: ui.ToastSticky,
|
|
})
|
|
}}),
|
|
ui.Button(ui.ButtonProps{Color: ui.ButtonLightNeutral, Small: true, Text: "Clear all",
|
|
OnClick: toaster.Clear}),
|
|
),
|
|
P(Attr("class", "text-xs text-neutral-500"),
|
|
Text("These auto-dismiss after 5 seconds — watch the bar count down; it is a CSS transition "+
|
|
"driven straight at the DOM, not a re-render per frame. A sticky one (Duration: "+
|
|
"ToastSticky) never leaves on its own. The menu items above raise toasts too, which is "+
|
|
"how you can see that an item really does close its own menu.")),
|
|
),
|
|
|
|
// The toast container and the tutorial's overlay both render here; both are
|
|
// fixed-position, so where they sit in the tree does not matter.
|
|
toaster.Render(),
|
|
tour.Render(),
|
|
)
|
|
}
|
|
}
|