htmx

main.go

@@ -45,7 +45,7 @@ func main() {
 	r.SetFuncMap(template.FuncMap{
 		"upper": strings.ToUpper,
 	})
-	r.LoadHTMLFiles("templates/index.tmpl")
+	r.LoadHTMLFiles("templates/index.tmpl", "templates/phrase.tmpl")
 	r.StaticFile("/favicon.ico", "./assets/favicon.ico")
 	r.StaticFile("/main.js", "./assets/main.js")
 	r.StaticFile("/htmx.js", "./assets/htmx@1.9.10.min.js")
@@ -96,7 +96,7 @@ func main() {
 		}
 		p.Source = s
 		p.ID = id.Int64()
-		c.JSON(http.StatusOK, p)
+		c.HTML(http.StatusOK, "phrase.tmpl", p)
 	})
 
 	r.Run() // 8080

templates/index.tmpl

@@ -40,7 +40,23 @@
           <button id="edit">edit</button>
           <button id="move">move</button>
         </span>
-        <span class="linetext"></span>
+        <span hx-swap="outerHTML" hx-get="/line" hx-trigger="load" class="linetext"></span>
+      </div>
+      <div class="linecontainer">
+        <span class="linecontrols">
+          <button id="pin">pin</button>
+          <button id="edit">edit</button>
+          <button id="move">move</button>
+        </span>
+        <span hx-swap="outerHTML" hx-get="/line" hx-trigger="load" class="linetext"></span>
+      </div>
+      <div class="linecontainer">
+        <span class="linecontrols">
+          <button id="pin">pin</button>
+          <button id="edit">edit</button>
+          <button id="move">move</button>
+        </span>
+        <span hx-swap="outerHTML" hx-get="/line" hx-trigger="load" class="linetext"></span>
       </div>
     </div>
     <script src="/htmx.js"></script>

templates/phrase.tmpl

@@ -0,0 +1 @@
+<span hx-get="/line" data-source="{{.Source.Name}}">{{.Text}}</span>