vilmibm/trunkless
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use a template

Browse Source
This commit is contained in:
nate smith 2024-02-17 01:55:23 -08:00
parent b7470d8dfc
commit 42d136e8a6
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/main.js
View File

@ -61,27 +61,19 @@ class LineUpper extends Button {
class LineEditor extends Button { class LineEditor extends Button {
connectedCallback() { connectedCallback() {
this.span = this.closest(".line").querySelector("span.linetext"); this.span = this.closest(".line").querySelector("span.linetext");
this.f = document.createElement("form"); this.f = $("#line-editor-tmpl").content.firstElementChild.cloneNode(true);
this.i = document.createElement("input"); this.i = this.f.querySelector("input[type=text]");
const b = document.createElement("input");
this.f.setAttribute("style", "display: inline");
this.i.setAttribute("name", "editedLine");
this.i.setAttribute("style", "min-width: 50em");
b.setAttribute("type", "submit");
b.setAttribute("style", "display: none");
this.f.appendChild(this.i);
this.f.appendChild(b);
this.f.addEventListener("submit", (e) => { this.f.addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
this.done() this.done();
}) })
} }
done() { done() {
this.editing = false; this.editing = false;
this.innerText = "edit"; this.innerText = "edit";
this.span.innerText = this.i.value; this.span.innerText = this.i.value;
this.f.remove(); this.f.remove();
this.span.setAttribute("style", "display:inline"); this.span.setAttribute("style", "display:inline");
} }
click() { click() {
if (this.editing) { if (this.editing) {

6
templates/index.tmpl
View File

@ -9,6 +9,12 @@
</style> </style>
</head> </head>
<body> <body>
<template id="line-editor-tmpl">
<form style="display:inline">
<input type="text" name="editedLine" style="min-width: 50em">
<input type="submit" style="display: none">
</form>
</template>
<template id="linetmpl"> <template id="linetmpl">
<span class="linecontrols"> <span class="linecontrols">
<button is="line-pinner">pin</button> <button is="line-pinner">pin</button>