tooltip component

internal/server/ui/router.go

@@ -4,11 +4,11 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
+	"html/template"
 	"net/http"
 	"net/url"
 	"strconv"
 	"strings"
-	"text/template"
 
 	"ruben/inventory2/internal/domains/accounts"
 	etsy_platform "ruben/inventory2/internal/domains/platforms/etsy"
@@ -81,6 +81,11 @@ func Routes(
 						return a * b
 					},
 
+					// html
+					"rawHTML": func(s string) template.HTML {
+						return template.HTML(s)
+					},
+
 					// json
 					"prettyPrintJSON": func(j json.RawMessage) string {
 						b, err := json.MarshalIndent(j, " ", "")
@@ -90,6 +95,18 @@ func Routes(
 						return string(b)
 					},
 					"marshalJSON": json.Marshal,
+
+					// slices
+					"newSlice": func(args ...any) []any {
+						return args
+					},
+					"newHTMLSlice": func(args ...string) []template.HTML {
+						ss := make([]template.HTML, len(args))
+						for i, s := range args {
+							ss[i] = template.HTML(s)
+						}
+						return ss
+					},
 				}
 			},
 		}),

templates/components/accounts/{acctID.int64}/inventory/sync-groups/draft/table/add-listing-button.html.tmpl

@@ -1,7 +1,7 @@
 {{- $acctID := .PathParams.acctID }}
 
 
-{{- component "button"
+{{- $button := component "button"
 	"HXPost" (printf "/api/accounts/%d/inventory/sync-groups/draft/listings" $acctID)
 	"HXTarget" "#accounts-acct-id-inventory-sync-groups-draft-table"
 	"HXSwap" "none"
@@ -14,3 +14,24 @@
 			send rowUpdated to the first <tbody/> in #accounts-acct-id-inventory-sync-groups-draft-table
 	`
 }}
+{{/* $button */}}
+
+{{-
+	component "tutorial-tooltip"
+		"AnchorTag" 				"div"
+		"AnchorID" 					"sync-groups-draft-table-add-listing-button"
+		"AnchorClickedEventName" 	"anchorClicked"
+		"AnchorContent" 			$button
+
+		"AnchorClass" 				""
+		"AnchorStyle"				"display: inline;"
+
+		"PopoverID" 				"add-listing-popover"
+		"PopoverContentIDPrefix" 	"add-listing-popover-content"
+		"PopoverContents" 			(
+			newHTMLSlice
+				"Click to add a listing"
+				"You need at least two to create a sync group!"
+				"Keep adding listing until done!"
+		)
+}}

templates/components/tutorial-tooltip.html.tmpl

@@ -0,0 +1,103 @@
+{{/* anchor props */}}
+{{/* required: .AnchorTag, .AnchorID, .AnchorClickedEventName, .AnchorContent */}}
+{{/* optional: .AnchorClass, .AnchorStyle */}}
+{{/* popover props */}}
+{{/* required: .PopoverID, PopoverContentIDPrefix, .PopoverContents: [](string|HTML) */}}
+{{/* optional: .PopoverStyle */}}
+
+{{- $dot := . }}
+{{- $anchorTag := or .AnchorTag "div" }}
+{{printf "<%s" $anchorTag | rawHTML}}
+	{{if .AnchorID}}id="{{.AnchorID}}"{{end}}
+	{{if .AnchorClass}}class="{{.AnchorClass}}"{{end}}
+	style="anchor-name: --{{.AnchorID}}; {{.AnchorStyle}}"
+	_="
+		on click
+			set popover to the #{{.PopoverID}}
+			send {{.AnchorClickedEventName}} to #{{.PopoverID}}
+	"
+{{ rawHTML ">" }}
+	{{ .AnchorContent }}
+{{printf "</%s>" $anchorTag | rawHTML}}
+<div
+	popover="manual"
+	id={{.PopoverID}}
+	class="
+		max-w-[80vw]
+		p-[1em]
+		mt-[1.5em]
+
+		bg-card
+		animate-pulse
+		border-[1px] border-sidebar-border rounded-lg
+		cursor-default
+
+		open:grid
+
+		{{.AnchorClass}}
+	"
+	{{/* TODO: move this style into the class, if possible */}}
+	style="
+		position: fixed;
+		position-anchor: --{{.AnchorID}};
+		position-area: bottom;
+
+		grid-template-columns: 1fr max-content;
+		grid-template-rows: max-content;
+		gap: 1em;
+
+		box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
+
+		{{.PopoverStyle}}
+	"
+	hx-preserve
+	_="
+		init
+			call me.showPopover()
+			set :anchorClicks to 0
+
+		on click
+			event.preventDefault()
+
+		on {{.AnchorClickedEventName}}
+			set :anchorClicks to :anchorClicks + 1
+		{{- range $i, $content := .PopoverContents }}
+			{{- $numClicks := addInt $i 1 }}
+			{{- $idToHide := printf "%s-%d" $dot.PopoverContentIDPrefix $i }}
+			{{- $idToShow := printf "%s-%d" $dot.PopoverContentIDPrefix (addInt $i 1) }}
+			{{- $maxIndex := subInt (len $dot.PopoverContents) 1 }}
+
+			{{- if lt $i $maxIndex }}
+			if :anchorClicks is {{$numClicks}} then
+				hide #{{$idToHide}}
+				show #{{$idToShow}}
+			else
+			{{- else if eq $i $maxIndex }}
+			if :anchorClicks is {{$numClicks}} then
+				call me.hidePopover()
+			end
+			{{- end }}
+		{{- end }}
+	"
+>
+{{- range $i, $content := .PopoverContents }}
+	<span id="{{$dot.PopoverContentIDPrefix}}-{{$i}}" style="grid-column: 1; {{if gt $i 0}}display: none;{{end}}">
+		{{$content}}
+	</span>
+{{- end }}
+	<button
+		class="cursor-pointer"
+		style="
+			grid-column: 2;
+			font-size: 2em;
+			line-height: 0.5em;
+		"
+		_="
+			on click
+				set parent to the closest #{{.PopoverID}}
+				call parent.hidePopover()
+		"
+	>
+		&#x00d7;
+	</button>
+</div>

templates/pages/accounts/{acctID.int64}/index.html.tmpl

@@ -60,19 +60,38 @@
 >
 	<details class="flex flex-col items-stretch">
 		<summary class="list-none cursor-pointer self-center">
-			<h2
+			{{-
+				component "tutorial-tooltip"
+					"AnchorTag" 				"h2"
+					"AnchorID" 					"shops-button"
+					"AnchorClickedEventName" 	"anchorClicked"
+					"AnchorContent" 			"Shops"
+
+					"AnchorClass" 				"bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
+
+					"PopoverID" 				"shops-popover"
+					"PopoverContentIDPrefix" 	"shops-popover-content"
+					"PopoverContents" 			(
+						newHTMLSlice
+							"Click <span class=\"font-bold italic\">Shops</span> to display all shops and platforms available"
+							"Click <span class=\"font-bold italic\">Shops</span> to hide them again"
+							"There you go!"
+					)
+			}}
+
+
+			<!--h2
 				class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
 				style="anchor-name: --shops-button;"
 				_="
 					on click
 						set popover to the #shops-popover
-						-- popover.hidePopover()
 						send shopsButtonClicked to #shops-popover
 				"
 			>
 				Shops
-			</h2>
+			</h2-->
-			<div
+			<!--div
 				popover="manual"
 				id="shops-popover"
 				class="
@@ -100,7 +119,6 @@
 				"
 				_="
 					init
-						-- wait 1s
 						call me.showPopover()
 						set :shopButtonClicks to 0
 
@@ -144,7 +162,7 @@
 				>
 					&#x00d7;
 				</button>
-			</div>
+			</div-->
 		</summary>
 
 		<ul class="list-none" hx-swap="morph">