407 lines
19 KiB
Go
407 lines
19 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 docPage("Components", "Overlays",
|
|
"Tooltips, popovers, menus, modals and toasts — every one of them measured against the real "+
|
|
"viewport. A floating panel is portaled to document.body, positioned from its trigger's "+
|
|
"bounding box, and flipped or shifted when it would otherwise run off the screen.",
|
|
|
|
docSection("engine", "How a panel is placed",
|
|
prose("Positioning is a pure function: given the trigger's rectangle, the panel's size and the "+
|
|
"viewport, it returns coordinates. It is unit-tested natively, with no browser in sight, "+
|
|
"because none of it is about the browser — the browser only supplies the three rectangles."),
|
|
prose("The result is written to the element with SetStyle, NOT through a signal. A signal write "+
|
|
"re-renders the whole tree, and this runs on every scroll and resize frame; going through "+
|
|
"the vdom would rebuild the page sixty times a second to move one panel four pixels."),
|
|
code("webui/floating.go", floatingSnippet),
|
|
note("Controllers are built once",
|
|
"A floating component owns refs, timers and its open state. Build it alongside your signals, "+
|
|
"never inside the render closure — one built per frame can never stay open, because the "+
|
|
"thing holding \"open\" is thrown away and replaced before you can see it."),
|
|
row("mt-4 flex gap-2", tour.StartButton(0, "", Text("Take the tour"))),
|
|
),
|
|
|
|
// ---- tooltips ----
|
|
docSection("demo-tooltips", "Tooltips",
|
|
prose("Hover, or focus — a tooltip that only answers to a mouse is a tooltip a keyboard user "+
|
|
"cannot read. Narrow the window and hover the Right one: it flips to the left, and its "+
|
|
"arrow follows it. Near an edge the panel shifts back on screen and the arrow slides to "+
|
|
"keep pointing at the trigger; in the original kit the arrow detached and pointed at "+
|
|
"nothing."),
|
|
demo("Placement, delay, and focus triggers",
|
|
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"})),
|
|
),
|
|
),
|
|
),
|
|
|
|
// ---- popovers ----
|
|
docSection("demo-popovers", "Popovers",
|
|
prose("A popover closes on an outside click or on Escape — and only the TOPMOST one closes per "+
|
|
"press, so a dropdown inside a popover does not take the popover down with it. The hover "+
|
|
"variant keeps a bridge across the gap between trigger and panel, so the cursor can "+
|
|
"actually reach the thing it opened."),
|
|
demo("Click, alignment, and hover-with-a-bridge",
|
|
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-ink-soft"),
|
|
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-ink-soft"), 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-ink-soft"),
|
|
Text("Move the cursor across the gap and onto this panel — it stays open. "+
|
|
"Select this text to prove it.")),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// ---- menus ----
|
|
docSection("demo-menus", "Menus & submenus",
|
|
prose("Opening one menu closes the other: a single-open manager keeps the page from filling up "+
|
|
"with panels nobody asked for. Submenus are exempt from it — they are Standalone — or a "+
|
|
"submenu would close the very menu it belongs to as it opened."),
|
|
prose("A submenu is portaled too, which is not a detail: the parent menu scrolls its own "+
|
|
"contents, and a submenu rendered inside it was clipped by that overflow the moment it "+
|
|
"was taller than its parent."),
|
|
demo("Items, icons, a submenu, and KeepOpen",
|
|
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")),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// ---- date pickers ----
|
|
docSection("demo-dates", "Date picker",
|
|
prose("The field is typeable, not merely clickable. It parses loosely — 7/4/26, Jul 4 2026 and "+
|
|
"2026-07-04 all work — and commits what it understood on blur, so the calendar is an "+
|
|
"affordance rather than the only way in."),
|
|
demo("Picked: \""+picked.Get()+"\"",
|
|
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(),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
// ---- modals ----
|
|
docSection("demo-modals", "Modals",
|
|
prose("Portaled to document.body, so no ancestor's overflow:hidden or transform can clip them. "+
|
|
"Open the modal, then the nested one inside it, and press Escape twice: modals unwind one "+
|
|
"layer per press rather than all at once."),
|
|
prose("The last button opens a modal that no component in the tree owns — webui.OpenModal hands "+
|
|
"content to a shared host rendered once in the layout. That is what code far from the view "+
|
|
"needs: a confirmation raised from inside a save handler, say."),
|
|
demo("Deleted: "+strconv.FormatBool(deleted.Get()),
|
|
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-ink-soft"),
|
|
Text("This content was not rendered by any component — it was handed to "+
|
|
"ModalHost (see AppLayout) by webui.OpenModal.")),
|
|
)
|
|
}, ui.ModalOptions{Size: ui.ModalSmall})
|
|
}}),
|
|
),
|
|
),
|
|
|
|
// The modals themselves. They portal to document.body, so where they sit in
|
|
// the tree makes no difference to where they appear.
|
|
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-ink-soft"),
|
|
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-ink-soft"), 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-ink-soft"),
|
|
Text("All set for "+wizardName.Get()+". Finish to close."))
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
),
|
|
|
|
// ---- toasts ----
|
|
docSection("demo-toasts", "Toasts",
|
|
prose("They dismiss themselves after five seconds. Watch the bar count down: it is one CSS "+
|
|
"transition, written straight at the element — not a re-render per frame, which is what a "+
|
|
"progress bar driven through a signal would cost you."),
|
|
prose("A sticky toast (Duration: ToastSticky) waits for the user instead. The menu items above "+
|
|
"raise toasts too, which is how you can see that an item really does close its own menu."),
|
|
demo("Push, dismiss, and a sticky one",
|
|
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}),
|
|
),
|
|
),
|
|
),
|
|
|
|
docSection("overlay-api", "Reference",
|
|
apiTable(
|
|
apiRow{"NewFloating", "The positioning engine behind every panel: placement, offset, flip, shift, arrow."},
|
|
apiRow{"NewTooltip / NewPopover / NewMenu", "Controllers. Build once, outside the render."},
|
|
apiRow{"Standalone", "Exempts a panel from the single-open manager. A submenu needs it, or it closes its own parent."},
|
|
apiRow{"vdom.Portal", "Mounts children at document.body — the escape hatch from an ancestor's overflow:hidden."},
|
|
apiRow{"webui.OpenModal / ModalHost", "Open a modal from code that owns no component. Render the host once, in your layout."},
|
|
),
|
|
),
|
|
|
|
// 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(),
|
|
)
|
|
}
|
|
}
|
|
|
|
const floatingSnippet = `// Built ONCE — it owns refs, timers, and whether it is open.
|
|
pop := ui.NewPopover(ui.PopoverOptions{
|
|
Placement: ui.PlacementBottomStart,
|
|
Offset: 8,
|
|
})
|
|
|
|
// ...and in the render:
|
|
pop.Trigger(ui.PopoverTriggerProps{},
|
|
ui.Button(ui.ButtonProps{Text: "Click me"}),
|
|
)
|
|
pop.Content(ui.PopoverContentProps{Class: "w-64"},
|
|
P(Text("Outside click and Escape close me.")),
|
|
)
|
|
|
|
// The panel is portaled to document.body and positioned imperatively:
|
|
// render invisible -> AfterRender -> measure -> ComputePosition -> SetStyle -> reveal
|
|
// Never through a signal: this runs on every scroll frame.`
|