Bind global keys directly to server actions with lvt-on:window:keydown plus an
lvt-key filter — press / to open a command panel and Escape to close it, no
client JavaScript. The bindings are scoped: the / listener is attached only while
the panel is closed and the Escape listener only while it is open, so stray
keypresses never fire a no-op round-trip.
The <article> swaps its lvt-on:window:keydown/lvt-key pair based on
.PanelOpen, so exactly one shortcut is live at a time.
{{define "content"}}
{{/* Bind the "/" listener only when the panel is closed and the "Escape" listener only when it is open — keeps stray keypresses from triggering no-op WebSocket round-trips. */}}
{{if .PanelOpen}}
<article lvt-on:window:keydown="close" lvt-key="Escape">
{{else}}
<article lvt-on:window:keydown="open" lvt-key="/">
{{end}}
<h3>Keyboard Shortcuts</h3>
<p><small>Press <kbd>/</kbd> to open the command panel and <kbd>Escape</kbd> to close it. Bindings use <code>lvt-on:window:keydown</code> with the <code>lvt-key</code> filter; both global and Tier-1 form fallbacks work.</small></p>
{{if .PanelOpen}}
<article aria-label="Command panel">
<header>
<h4>Command Panel</h4>
</header>
{{/* Decorative — wiring to a Change()/Submit() handler is out of scope for the keyboard-shortcut demo. disabled removes the false affordance of a working search box. */}}
<input type="search" placeholder="Type a command…" disabled aria-label="Command search">
<form method="POST" name="close">
<button name="close" class="secondary">Close</button>
</form>
</article>
{{else}}
<p><small>Panel is closed. Press <kbd>/</kbd> or click the button to open.</small></p>
<form method="POST" name="open">
<button name="open">Open panel</button>
</form>
{{end}}
<h4>Activity</h4>
{{if .Log}}
<ul>
{{range .Log}}<li><small>{{.}}</small></li>{{end}}
</ul>
{{else}}
<p><small>No activity yet.</small></p>
{{end}}
</article>
{{end}}Open and Close toggle PanelOpen and append a timestamped line to a capped
activity log.
// Tier-2: lvt-on:window:keydown drives the panel; "/" opens, "Escape" closes
// (bound only while the panel is rendered).
type ShortcutsController struct{}
const shortcutsLogMax = 5
func (c *ShortcutsController) Open(state ShortcutsState, ctx *livetemplate.Context) (ShortcutsState, error) {
if state.PanelOpen {
return state, nil
}
state.PanelOpen = true
state.Log = appendLog(state.Log, fmt.Sprintf("[%s] Opened panel", time.Now().Format("15:04:05")))
return state, nil
}
func (c *ShortcutsController) Close(state ShortcutsState, ctx *livetemplate.Context) (ShortcutsState, error) {
if !state.PanelOpen {
return state, nil
}
state.PanelOpen = false
state.Log = appendLog(state.Log, fmt.Sprintf("[%s] Closed panel", time.Now().Format("15:04:05")))
return state, nil
}
func appendLog(log []string, entry string) []string {
log = append(log, entry)
if len(log) > shortcutsLogMax {
log = log[len(log)-shortcutsLogMax:]
}
return log
}
func keyboardShortcutsHandler() http.Handler {
tmpl := newLayoutTmpl("templates/layout.tmpl", "templates/navigation/keyboard-shortcuts.tmpl")
return tmpl.Handle(&ShortcutsController{}, livetemplate.AsState(&ShortcutsState{
Title: "Keyboard Shortcuts",
Category: "Dialogs, Tabs & Navigation",
}))
}handlers_navigation.go:167-206
type ShortcutsState struct {
Title string
Category string
PanelOpen bool
Log []string
}Pair this with a Modal Dialog when the shortcut should open a richer overlay than a simple panel.