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 // TODO
function main() { 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(); main();

View File

@ -49,6 +49,7 @@ func main() {
r.StaticFile("/favicon.ico", "./assets/favicon.ico") r.StaticFile("/favicon.ico", "./assets/favicon.ico")
r.StaticFile("/main.js", "./assets/main.js") r.StaticFile("/main.js", "./assets/main.js")
r.StaticFile("/htmx.js", "./assets/htmx@1.9.10.min.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) randMax := big.NewInt(maxID)

View File

@ -12,11 +12,12 @@
<div id="blueprint"> <div id="blueprint">
<div class="linecontainer"> <div class="linecontainer">
<span class="linecontrols"> <span class="linecontrols">
<button id="pin">pin</button> <button>pin</button>
<button id="edit">edit</button> <button>edit</button>
<button id="move">move</button> <button>move</button>
<button _="on click remove the closest <div/>">remove</button>
</span> </span>
<span class="linetext"></span> <span hx-trigger="load" hx-swap="outerHTML" hx-get="/line" class="linetext"></span>
</div> </div>
</div> </div>
<h1>Trunkless</h1> <h1>Trunkless</h1>
@ -32,34 +33,12 @@
<p id="dna"> <p id="dna">
todo, dna display todo, dna display
</p> </p>
<div id="lines"> <div id="lines"></div>
<!-- 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>
<div class="linecontainer"> <button>add</button>
<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> </div>
<script src="/htmx.js"></script> <script src="/htmx.js"></script>
<script src="/hyperscript.js"></script>
<script src="/main.js"></script> <script src="/main.js"></script>
</body> </body>
</html> </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>