add hyperscript. dynamically create initial lines.

This commit is contained in:
nate smith 2024-02-11 00:10:23 -08:00
parent ce9c34e2df
commit 51a9cb25ec
5 changed files with 17 additions and 33 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,10 @@
// TODO
function main() {
const lines = document.querySelector("#lines");
const bp = document.querySelector("#blueprint .linecontainer");
for (var i = 0; i < 10; i++) {
lines.appendChild(bp.cloneNode(true));
}
}
main();

View File

@ -49,6 +49,7 @@ func main() {
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")
r.StaticFile("/hyperscript.js", "./assets/hyperscript.org@0.9.12")
randMax := big.NewInt(maxID)

View File

@ -12,11 +12,12 @@
<div id="blueprint">
<div class="linecontainer">
<span class="linecontrols">
<button id="pin">pin</button>
<button id="edit">edit</button>
<button id="move">move</button>
<button>pin</button>
<button>edit</button>
<button>move</button>
<button _="on click remove the closest <div/>">remove</button>
</span>
<span class="linetext"></span>
<span hx-trigger="load" hx-swap="outerHTML" hx-get="/line" class="linetext"></span>
</div>
</div>
<h1>Trunkless</h1>
@ -32,34 +33,12 @@
<p id="dna">
todo, dna display
</p>
<div id="lines">
<!-- TODO try and hardcode putting 10 of these here and then finding an onload hx-trigger or something to get them all to call /line -->
<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 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 id="lines"></div>
<div>
<button>add</button>
</div>
<script src="/htmx.js"></script>
<script src="/hyperscript.js"></script>
<script src="/main.js"></script>
</body>
</html>

View File

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