use template

This commit is contained in:
nate smith 2024-02-11 23:28:30 -08:00
parent 49d3426985
commit d4a741127d
2 changed files with 12 additions and 9 deletions

View File

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

View File

@ -9,17 +9,17 @@
</style> </style>
</head> </head>
<body> <body>
<div id="blueprint"> <template id="linetmpl">
<div class="linecontainer"> <div class="linecontainer unpinned">
<span class="linecontrols"> <span class="linecontrols">
<button>pin</button> <button _="on click toggle .unpinned on the closest <div/>">pin</button>
<button>edit</button> <button>edit</button>
<button>move</button> <button>move</button>
<button _="on click remove the closest <div/>">remove</button> <button _="on click remove the closest <div/>">remove</button>
</span> </span>
<span hx-trigger="load" hx-swap="outerHTML" hx-get="/line" class="linetext"></span> <span hx-trigger="load" hx-swap="outerHTML" hx-get="/line" class="linetext"></span>
</div> </div>
</div> </template>
<h1>Trunkless</h1> <h1>Trunkless</h1>
<div id="pagecontrols"> <div id="pagecontrols">
<a href="/about">about</a> <a href="/about">about</a>