searchbutton can be deactive to not react to clicks

JonasHiltl · Nov 23, 2024 · f91dfbd · f91dfbd
1 parent d733cc7
commit f91dfbd
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 19 deletions.
diff --git a/components/search.templ b/components/search.templ
@@ -73,24 +73,29 @@ templ emptySearchResults(query string) {
 }
 
 type SearchButtonArgs struct {
-	Show       bool
 	HasMetaKey bool
+	Active     bool // whether the click should open the search modal
 }
 
 templ SearchButton(args SearchButtonArgs) {
-	@searchDialog(args)
+	if args.Active {
+		@searchDialog(args)
+	}
 	<button
 		class="o-flex o-items-center o-gap-2 o-py-1 o-px-1 sm:o-px-2 o-rounded 
 		sm:o-text-black/40 sm:hover:o-text-black/60 hover:o-bg-black/5 
 		dark:o-text-white/50 dark:hover:o-text-white/70 dark:o-bg-white/5 hover:dark:o-bg-white/5"
-		hx-on::trigger="toggleSearchDialog()"
-		hx-trigger="click, keyup[ctrlKey&&key=='k'] from:body, keydown[metaKey&&key=='k'] from:body"
+		if args.Active {
+			hx-on::trigger="toggleSearchDialog()"
+			hx-trigger="click, keyup[ctrlKey&&key=='k'] from:body, keydown[metaKey&&key=='k'] from:body"
+		}
 	>
 		@icons.Search(16, 16)
 		<p class="o-text-sm o-leading-none o-hidden sm:o-block">Search...</p>
 		@searchKbd(args.HasMetaKey)
 	</button>
-	<script>
+	if args.Active {
+		<script>
 		function toggleSearchDialog() {
 			const dialog = document.getElementById('search-dialog')
 			if (!dialog) return
@@ -101,6 +106,7 @@ templ SearchButton(args SearchButtonArgs) {
 			}
 		}
 	</script>
+	}
 }
 
 templ searchDialog(args SearchButtonArgs) {

diff --git a/components/search_templ.go b/components/search_templ.go
diff --git a/internal/handler/web/renderer.go b/internal/handler/web/renderer.go
@@ -73,8 +73,9 @@ func (r *renderer) RenderChangelog(ctx context.Context, w io.Writer, args Render
 		RSSArgs: components.RSSArgs{
 			FeedURL: args.FeedURL,
 		},
+		ShowSearchButton: args.CL.Searchable,
 		SearchButtonArgs: components.SearchButtonArgs{
-			Show:       args.CL.Searchable,
+			Active:     true,
 			HasMetaKey: args.HasMetaKey,
 		},
 		ChangelogContainerArgs: components.ChangelogContainerArgs{
@@ -138,8 +139,9 @@ func (r *renderer) RenderDetails(ctx context.Context, w io.Writer, args RenderDe
 		RSSArgs: components.RSSArgs{
 			FeedURL: args.FeedURL,
 		},
+		ShowSearchButton: args.CL.Searchable,
 		SearchButtonArgs: components.SearchButtonArgs{
-			Show:       args.CL.Searchable,
+			Active:     true,
 			HasMetaKey: args.HasMetaKey,
 		},
 		MainArgs: layout.MainArgs{

diff --git a/internal/handler/web/views/details.templ b/internal/handler/web/views/details.templ
@@ -16,6 +16,7 @@ type DetailsArgs struct {
 	Prev components.ArticleArgs
 	Next components.ArticleArgs
 	components.FooterArgs
+	ShowSearchButton bool
 	components.SearchButtonArgs
 }
 
@@ -30,7 +31,7 @@ templ Details(arg DetailsArgs) {
 			@components.Navbar() {
 				@components.LogoImg(arg.Logo)
 				@components.NavbarActions() {
-					if arg.SearchButtonArgs.Show {
+					if arg.ShowSearchButton {
 						@components.SearchButton(arg.SearchButtonArgs)
 					}
 					@components.RSS(arg.RSSArgs)

diff --git a/internal/handler/web/views/details_templ.go b/internal/handler/web/views/details_templ.go
diff --git a/internal/handler/web/views/index.templ b/internal/handler/web/views/index.templ
@@ -14,6 +14,7 @@ type IndexArgs struct {
 	components.HeaderArgs
 	components.ArticleListArgs
 	components.FooterArgs
+	ShowSearchButton bool
 	components.SearchButtonArgs
 }
 
@@ -28,7 +29,7 @@ templ Index(arg IndexArgs) {
 			@components.Navbar() {
 				@components.LogoImg(arg.Logo)
 				@components.NavbarActions() {
-					if arg.SearchButtonArgs.Show {
+					if arg.ShowSearchButton {
 						@components.SearchButton(arg.SearchButtonArgs)
 					}
 					@components.RSS(arg.RSSArgs)

diff --git a/internal/handler/web/views/index_templ.go b/internal/handler/web/views/index_templ.go