From 4c6187e18d535d6c7cb6b002d31a47d8935bd537 Mon Sep 17 00:00:00 2001
From: maddalax <jm@madev.me>
Date: Fri, 1 Nov 2024 05:08:36 -0500
Subject: [PATCH] add docs for eval commands

---
 .../pages/docs/interactivity/eval-commands.go | 83 +++++++++++++++++++
 htmgo-site/pages/docs/interactivity/events.go |  2 +-
 .../docs/performance/caching-globally.go      |  2 +-
 htmgo-site/pages/docs/sidebar.go              |  1 +
 4 files changed, 86 insertions(+), 2 deletions(-)
 create mode 100644 htmgo-site/pages/docs/interactivity/eval-commands.go

diff --git a/htmgo-site/pages/docs/interactivity/eval-commands.go b/htmgo-site/pages/docs/interactivity/eval-commands.go
new file mode 100644
index 0000000..12fecd2
--- /dev/null
+++ b/htmgo-site/pages/docs/interactivity/eval-commands.go
@@ -0,0 +1,83 @@
+package interactivity
+
+import (
+	"github.com/maddalax/htmgo/framework/h"
+	"htmgo-site/ui"
+)
+
+import . "htmgo-site/pages/docs"
+
+func EvalCommands(ctx *h.RequestContext) *h.Page {
+	return DocPage(
+		ctx,
+		h.Div(
+			h.Class("flex flex-col gap-3"),
+			Title("Eval Commands"),
+			Text(`
+				Now that we've learned how about events/commands, I want to highlight a few useful commands.
+		    One in particular is EvalCommands, which allows you to evaluate any command against any element just by referencing it in Go.
+			`),
+			SubTitle("Referencing an element directly"),
+			Text("Example: Setting the text of an element on click of another element"),
+			ui.GoCodeSnippet(EvalCommandsSnippet),
+			Text(
+				`We are calling <b>js.EvalCommands</b> with the text variable and the command to toggle the text of the element.
+				This always you to run any commands against any element, without having to query for it via a selector.
+			`,
+			),
+			h.P(
+				h.A(
+					h.Class("underline text-blue-500"),
+					h.Href("/examples/js-hide-children-on-click"),
+					h.Text("View the demo"),
+				),
+				h.Text(" for more details on what this could be used for."),
+			),
+			h.Div(
+				h.Class("mt-4"),
+			),
+			SubTitle("Using a selector"),
+			Text("If needed, you can query by selector"),
+			ui.GoCodeSnippet(EvalCommandsSnippetWithSelector),
+			NextStep(
+				"mt-4",
+				PrevBlock("Events / Commands", DocPath("/interactivity/events")),
+				NextBlock("Caching Components", DocPath("/performance/caching-globally")),
+			),
+		),
+	)
+}
+
+const EvalCommandsSnippetWithSelector = `	
+func MyComponent(ctx *h.RequestContext) *h.Element {
+	text := h.Pf("Text Before", h.Id("my-element"))
+	return h.Div(
+		h.Button(
+			h.Text("Toggle Text"),
+			h.OnClick(
+				js.EvalCommandsOnSelector(
+					"#my-element",
+					js.ToggleText("Text Before", "Text After"),
+				),
+			),
+		),
+		text,
+	)
+}	
+`
+
+var EvalCommandsSnippet = `func MyComponent(ctx *h.RequestContext) *h.Element {
+	text := h.Pf("Text Before")
+	return h.Div(
+		h.Button(
+			h.Text("Toggle Text"),
+			h.OnClick(
+				js.EvalCommands(
+					text,
+					js.ToggleText("Text Before", "Text After"),
+				),
+			),
+		),
+		text,
+	)
+}`
diff --git a/htmgo-site/pages/docs/interactivity/events.go b/htmgo-site/pages/docs/interactivity/events.go
index c014a9c..2fc5906 100644
--- a/htmgo-site/pages/docs/interactivity/events.go
+++ b/htmgo-site/pages/docs/interactivity/events.go
@@ -61,7 +61,7 @@ func EventsAndCommands(ctx *h.RequestContext) *h.Page {
 			NextStep(
 				"mt-4",
 				PrevBlock("Swapping", DocPath("/interactivity/swapping")),
-				NextBlock("Caching Components", DocPath("/performance/caching-globally")),
+				NextBlock("Eval Commands", DocPath("/interactivity/eval-commands")),
 			),
 		),
 	)
diff --git a/htmgo-site/pages/docs/performance/caching-globally.go b/htmgo-site/pages/docs/performance/caching-globally.go
index 6c3aa35..c136d2f 100644
--- a/htmgo-site/pages/docs/performance/caching-globally.go
+++ b/htmgo-site/pages/docs/performance/caching-globally.go
@@ -42,7 +42,7 @@ func CachingGlobally(ctx *h.RequestContext) *h.Page {
 			`),
 			NextStep(
 				"mt-4",
-				PrevBlock("Events", DocPath("/interactivity/events")),
+				PrevBlock("Eval Commands", DocPath("/interactivity/eval-commands")),
 				NextBlock("Caching Per Key", DocPath("/performance/caching-per-key")),
 			),
 		),
diff --git a/htmgo-site/pages/docs/sidebar.go b/htmgo-site/pages/docs/sidebar.go
index c9cde3f..8a524ab 100644
--- a/htmgo-site/pages/docs/sidebar.go
+++ b/htmgo-site/pages/docs/sidebar.go
@@ -50,6 +50,7 @@ var sections = []Section{
 			{Title: "Swapping", Path: DocPath("/interactivity/swapping")},
 			{Title: "Events", Path: DocPath("/interactivity/events")},
 			{Title: "Evaluating Javascript", Path: DocPath("/interactivity/events")},
+			{Title: "Eval Commands", Path: DocPath("/interactivity/eval-commands")},
 		},
 	},
 	{