Add example of disable element extension

godsarmy · Aug 2, 2024 · 62c5ce7 · 62c5ce7
1 parent e46a6da
commit 62c5ce7
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 0 deletions.
diff --git a/disable-element/main.go b/disable-element/main.go
@@ -0,0 +1,47 @@
+package main
+
+import (
+	"embed"
+	"html/template"
+	"net/http"
+    "time"
+
+	"github.com/gin-gonic/gin"
+)
+
+var htmx_version = "latest"
+var htmx_ext_version = "latest"
+var nunjucks_version = "3.2.4"
+var bootstrap_version = "latest"
+
+//go:embed templates/*
+var embed_fs embed.FS
+
+func main() {
+
+	router := gin.Default()
+	templ := template.Must(
+		template.New("").Delims("{[{", "}]}").ParseFS(embed_fs, "templates/*.tmpl"),
+	)
+	router.SetHTMLTemplate(templ)
+	router.GET("/", func(c *gin.Context) {
+		c.HTML(
+			http.StatusOK,
+			"index.html.tmpl",
+			gin.H{
+				"htmx_version":      htmx_version,
+				"htmx_ext_version":  htmx_ext_version,
+				"nunjucks_version":  nunjucks_version,
+				"bootstrap_version": bootstrap_version,
+			},
+		)
+	})
+
+	router.GET("/whatever", func(c *gin.Context) {
+		// sleep one second before sending data to simulate slow server
+		time.Sleep(time.Second)
+		c.JSON(http.StatusOK, gin.H{"message": "disable element example"})
+	})
+
+	router.Run(":8080")
+}
diff --git a/disable-element/templates/index.html.tmpl b/disable-element/templates/index.html.tmpl
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang='en' class=''>
+
+  <head>
+
+    <meta charset='UTF-8'>
+    <title>disable-element</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="https://unpkg.com/htmx-ext-disable-element@latest/disable-element.js"></script>
+    <script src="https://unpkg.com/nunjucks@{[{ .nunjucks_version }]}/browser/nunjucks.js"></script>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@{[{ .bootstrap_version }]}/dist/js/bootstrap.bundle.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@{[{ .bootstrap_version }]}/dist/css/bootstrap.min.css" rel="stylesheet">
+
+  </head>
+
+  <body hx-ext="debug">
+    <div class="container" hx-ext="client-side-templates">
+      <a href="https://github.com/bigskysoftware/htmx-extensions/blob/main/src/disable-element/README.md" class="link-primary">htmx disable element extension example</a>
+      <p>
+      <button class="btn btn-primary"
+              hx-get="/whatever"
+              hx-ext="disable-element"
+              hx-disable-element="self"
+              hx-target="#show"
+              nunjucks-template="show-template">
+      Click Me to disable
+      </button>
+
+      <button class="btn btn-primary"
+              hx-get="/whatever"
+              hx-ext="disable-element"
+              hx-disable-element="#to-disable"
+              hx-target="#show"
+              nunjucks-template="show-template">
+      Click Me to disable sibling
+      </button>
+      <button class="btn btn-primary" id="to-disable">Watch me being disabled</button>
+
+      <p>
+      <div id="show"></div>
+
+      <script id="show-template" type="x-tmpl-nunjucks">
+        <div class="text-success">{{ message }}</div>
+      </script>
+
+    </div>
+  </body>
+
+</html>