Fix showlace example

godsarmy · godsarmy · commit e53c81045389 · 2024-08-28T22:38:19.000-04:00
diff --git a/shoelace/main.go b/shoelace/main.go
@@ -17,6 +17,10 @@ var bootstrap_version = "latest"
 //go:embed templates/* script/*
 var embed_fs embed.FS
 
+type Rating struct {
+	Value string `json:"value" binding:"required"`
+}
+
 func main() {
 
 	router := gin.Default()
@@ -44,5 +48,18 @@ func main() {
 		c.JSON(http.StatusOK, gin.H{"message": "shoelace example"})
 	})
 
+	var my_rating Rating = Rating{Value: "3"}
+	router.GET("/rating", func(c *gin.Context) {
+		c.JSON(http.StatusOK, my_rating)
+	})
+	router.POST("/rating", func(c *gin.Context) {
+		var rating Rating
+		if err := c.Bind(&rating); err != nil {
+			c.AbortWithError(http.StatusBadRequest, err)
+		}
+		my_rating.Value = rating.Value
+		c.JSON(http.StatusOK, my_rating)
+	})
+
 	router.Run(":8080")
 }
diff --git a/shoelace/script/htmx.ext.shoelace.js b/shoelace/script/htmx.ext.shoelace.js
@@ -24,22 +24,8 @@ function shouldInclude(elt) {
 
 htmx.defineExtension('shoelace', {
 	onEvent : function(name, evt) {
-		if ((name === "htmx:configRequest") && (evt.detail.elt.tagName === 'FORM')) {
-			evt.detail.elt.querySelectorAll(slTypes).forEach((elt) => {
-				if (shouldInclude(elt)) {
-					if (elt.tagName == 'SL-RATING') {
-						evt.detail.parameters[elt.getAttribute('name')] = elt.value
-
-					} else {
-						evt.detail.parameters[elt.name] = elt.value
-					}
-				}
-			})
-			// Prevent form submission if one or more fields are invalid. 
-			// evt.detail.elt is always a form as per the main if statement
-			if (!evt.detail.elt.checkValidity()) {
-				return false
-			}
+		if ((name === "htmx:configRequest") && (evt.detail.elt.tagName === 'SL-RATING')) {
+		    evt.detail.parameters[evt.detail.elt.getAttribute('name')] = evt.detail.elt.value
 		}
 	}
-})
+})
diff --git a/shoelace/templates/index.html.tmpl b/shoelace/templates/index.html.tmpl
@@ -4,15 +4,16 @@
   <head>
 
     <meta charset='UTF-8'>
-    <title>debug</title>
+    <title>shoelace</title>
 
     <script src="https://unpkg.com/htmx.org@{[{ .htmx_version }]}"></script>
     <script src="https://unpkg.com/htmx-ext-client-side-templates@{[{ .htmx_ext_version }]}/client-side-templates.js"></script>
-    <script src="script/htmx.ext.shoelace.js"></script>
+    <script src="https://unpkg.com/htmx-ext-json-enc@latest/json-enc.js"></script>
     <script src="https://unpkg.com/nunjucks@{[{ .nunjucks_version }]}/browser/nunjucks.js"></script>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/themes/light.css" />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.16.0/cdn/shoelace-autoloader.js"></script>
+    <script src="script/htmx.ext.shoelace.js"></script>
   </head>
 
   <body hx-ext="shoelace">
@@ -21,20 +22,36 @@
       <p>
       <h3>Shoelace web component integration with HTMX</h3>
       <sl-button class="btn btn-primary"
-              hx-target="#show"
-              hx-get="/get_example"
-              hx-trigger="click"
-              nunjucks-template="show-template">
+                 hx-target="#show"
+                 hx-get="/get_example"
+                 hx-trigger="click"
+                 nunjucks-template="show-template">
       Click me
       </sl-button>
 
       <p>
       <sl-alert id="show" variant="primary" open></sl-alert>
+      <p>
+
+      <form hx-get="/rating"
+           hx-trigger="load"
+           nunjucks-template="rate-template">
+      </form>
+
 
       <script id="show-template" type="x-tmpl-nunjucks">
         <sl-icon slot="icon" name="info-circle"></sl-icon>{{ message }}</sl-icon>
       </script>
 
+      <script id="rate-template" type="x-tmpl-nunjucks">
+        <sl-rating name="value"
+                   hx-post="/rating"
+                   hx-trigger="click"
+                   hx-swap="outerHTML"
+                   hx-ext="json-enc"
+                   value="{{value}}">
+        ></sl-rating>
+      </script>
     </div>
   </body>
 
