change 'filter' to 'when' for better readability

examples/Taskfile.yml

@@ -25,7 +25,6 @@ tasks:
   fmt:
     desc: Run goimports
     cmds:
-      - go mod tidy
       - go run golang.org/x/tools/cmd/[email protected] -w -local github.com/will-wow/typed-htmx-go/examples .
 
   test:
@@ -57,6 +56,7 @@ tasks:
       - task: fmt
       - task: lint
       - task: test
+      - go mod tidy
 
   tools:
     desc: Install tools

examples/web/examples/registry/registry.go

@@ -7,6 +7,7 @@ import (
 	"github.com/will-wow/typed-htmx-go/examples/web/bulkupdate"
 	"github.com/will-wow/typed-htmx-go/examples/web/classtools_ex"
 	"github.com/will-wow/typed-htmx-go/examples/web/clicktoedit"
+	"github.com/will-wow/typed-htmx-go/examples/web/keyboard"
 	"github.com/will-wow/typed-htmx-go/examples/web/progressbar"
 	"github.com/will-wow/typed-htmx-go/examples/web/sse_ex"
 )
@@ -55,4 +56,10 @@ var Examples = []Example{
 		Slug:    "sse",
 		Handler: sse_ex.NewHandler,
 	},
+	{
+		Title:   "Keyboard Shortcuts",
+		Desc:    "Demonstrates how to create keyboard shortcuts for htmx enabled elements",
+		Slug:    "keyboard",
+		Handler: keyboard.NewHandler,
+	},
 }

examples/web/keyboard/exgom/keyboard.gom.go

@@ -0,0 +1,73 @@
+package exgom
+
+import (
+	"embed"
+
+	g "github.com/maragudk/gomponents"
+	. "github.com/maragudk/gomponents/html"
+
+	"github.com/will-wow/typed-htmx-go/htmx/trigger"
+
+	"github.com/will-wow/typed-htmx-go/examples/web/exprint"
+	"github.com/will-wow/typed-htmx-go/examples/web/layout/gom/layout"
+
+	"github.com/will-wow/typed-htmx-go/htmx"
+)
+
+var hx = htmx.NewGomponents()
+
+//go:embed keyboard.gom.go
+var fs embed.FS
+var ex = exprint.New(fs, "//", "")
+
+func Page() g.Node {
+	return layout.Wrapper(
+		"Keyboard Shortcuts",
+		H1(g.Text("Keyboard Shortcuts")),
+		Class("keyboard-shortcuts"),
+		P(
+			g.Text("In this example we show how to create a keyboard shortcut for an action."),
+		),
+		P(
+			g.Text("We start with a simple button that loads some content from the server:"),
+		),
+		Pre(
+			Code(
+				Class("language-go"),
+				g.Text(ex.PrintOrErr("keyboard.gom", "demo")),
+			),
+		),
+		P(
+			g.Text("Note that the button responds to both the click event (as usual) and also the keyup event when alt-shift-D is pressed. The from: modifier is used to listen for the keyup event on the body element, thus making it a “global” keyboard shortcut."),
+		),
+		P(
+			g.Text("You can trigger the demo below by either clicking on the button, or by hitting alt-shift-D."),
+		),
+		P(
+			g.Text("You can find out the conditions needed for a given keyboard shortcut here:"),
+		),
+		P(
+			A(
+				Href("https://javascript.info/keyboard-events"),
+				Target("_blank"),
+				g.Text("https://javascript.info/keyboard-events"),
+			),
+		),
+		H2(g.Text("Demo")),
+		demo(),
+	)
+}
+
+func demo() g.Node {
+	//ex:start:demo
+	return Button(
+		hx.TriggerExtended(
+			trigger.On("click"),
+			trigger.
+				On("keyup").
+				From("body").
+				When("altKey&&shiftKey&&key=='D'"),
+		),
+	)
+	//ex:end:demo
+}

examples/web/keyboard/extempl/keyboard.templ

@@ -0,0 +1,65 @@
+package extempl
+
+import (
+	"embed"
+
+	"github.com/will-wow/typed-htmx-go/examples/web/layout/templ/layout"
+	"github.com/will-wow/typed-htmx-go/examples/web/exprint"
+	"github.com/will-wow/typed-htmx-go/htmx"
+	"github.com/will-wow/typed-htmx-go/htmx/trigger"
+)
+
+var hx = htmx.NewTempl()
+
+//go:embed keyboard.templ
+var fs embed.FS
+var ex = exprint.New(fs, "//", "")
+
+templ Page() {
+	@layout.Wrapper("Keyboard Shortcuts", "keyboard-shortcuts") {
+		<h1>Keyboard Shortcuts</h1>
+		<p>
+			In this example we show how to create a keyboard shortcut for an action.
+		</p>
+		<p>
+			We start with a simple button that loads some content from the server:
+		</p>
+		<pre>
+			<code class="language-go">
+				{ ex.PrintOrErr("keyboard.templ", "demo") }
+			</code>
+		</pre>
+		<p>
+			Note that the button responds to both the click event (as usual) and also the keyup event when alt-shift-D is pressed. The from: modifier is used to listen for the keyup event on the body element, thus making it a “global” keyboard shortcut.
+		</p>
+		<p>
+			You can trigger the demo below by either clicking on the button, or by hitting alt-shift-D.
+		</p>
+		<p>
+			You can find out the conditions needed for a given keyboard shortcut here:
+		</p>
+		<p>
+			<a href="https://javascript.info/keyboard-events" target="_blank">
+				https://javascript.info/keyboard-events
+			</a>
+		</p>
+		<h2>Demo</h2>
+		@demo()
+	}
+}
+
+templ demo() {
+	//ex:start:demo
+	<button
+		{ hx.TriggerExtended(
+			trigger.On("click"), 
+			trigger.
+				On("keyup").
+				When("altKey&&shiftKey&&key=='D'").
+				From("body"))... }
+		{ hx.Post("/examples/templ/keyboard/doit/")... }
+	>
+		Do It! (alt-shift-D)
+	</button>
+	//ex:end:demo
+}

examples/web/keyboard/keyboard.go

@@ -0,0 +1,31 @@
+package keyboard
+
+import (
+	"net/http"
+
+	"github.com/will-wow/typed-htmx-go/examples/web/keyboard/extempl"
+)
+
+type example struct {
+	gom bool
+}
+
+func NewHandler(gom bool) http.Handler {
+	mux := http.NewServeMux()
+
+	ex := example{gom: gom}
+
+	mux.HandleFunc("GET /{$}", ex.demo)
+	mux.HandleFunc("POST /doit/{$}", ex.doIt)
+
+	return mux
+}
+
+func (ex *example) demo(w http.ResponseWriter, r *http.Request) {
+	component := extempl.Page()
+	_ = component.Render(r.Context(), w)
+}
+
+func (ex *example) doIt(w http.ResponseWriter, r *http.Request) {
+	_, _ = w.Write([]byte("Dit it!"))
+}

examples/web/sse_ex/sse_ex.go

@@ -53,7 +53,7 @@ func (ex *example) feed(w http.ResponseWriter, r *http.Request) {
 	if !ok {
 		slog.Error("flush not supported")
 		w.WriteHeader(http.StatusInternalServerError)
-		w.Write([]byte("flush not supported"))
+		_, _ = w.Write([]byte("flush not supported"))
 		return
 	}