aboutsummaryrefslogtreecommitdiff
path: root/asset-sources/fietsboek.ts
diff options
context:
space:
mode:
authorDaniel Schadt <kingdread@gmx.de>2024-01-20 22:38:23 +0100
committerDaniel Schadt <kingdread@gmx.de>2024-01-20 22:38:23 +0100
commit5b1317e823f7bd6b6fc2fbf78e2d09ce7982088f (patch)
tree616a9b9051ee8bba193e256538da09360df8b776 /asset-sources/fietsboek.ts
parentdaef786b9061f3032a2755a2df2eeca42d7f62b0 (diff)
downloadfietsboek-5b1317e823f7bd6b6fc2fbf78e2d09ce7982088f.tar.gz
fietsboek-5b1317e823f7bd6b6fc2fbf78e2d09ce7982088f.tar.bz2
fietsboek-5b1317e823f7bd6b6fc2fbf78e2d09ce7982088f.zip
use <template> tag
This is semantically more sound than using a hidden div
Diffstat (limited to 'asset-sources/fietsboek.ts')
-rw-r--r--asset-sources/fietsboek.ts21
1 files changed, 11 insertions, 10 deletions
diff --git a/asset-sources/fietsboek.ts b/asset-sources/fietsboek.ts
index ae9e724..10c1490 100644
--- a/asset-sources/fietsboek.ts
+++ b/asset-sources/fietsboek.ts
@@ -179,7 +179,8 @@ function searchFriends() {
fetch(FRIENDS_URL)
.then((response) => response.json())
.then((response: [JsonFriend]) => {
- const blueprint = document.querySelector("#friendSearchBlueprint") as HTMLLIElement;
+ const blueprint = (document.querySelector("#friendSearchBlueprint") as HTMLTemplateElement).
+ content;
// Only show friends with a matching name
let friends = response.filter(
@@ -192,16 +193,15 @@ function searchFriends() {
);
friends.forEach((friend) => {
- const copy = blueprint.cloneNode(true) as HTMLLIElement;
- copy.removeAttribute("id");
+ const copy = blueprint.cloneNode(true) as DocumentFragment;
(copy.querySelector(".friend-name") as HTMLSpanElement).textContent = friend.name;
copy.querySelector("button")?.addEventListener("click", (event: MouseEvent) => {
const button = (event.target as HTMLElement).closest("button")!;
button.parentNode!.parentNode!.removeChild(button.parentNode!);
- const added = document.querySelector("#friendAddedBlueprint")!.
- cloneNode(true) as HTMLLIElement;
- added.removeAttribute("id");
+ const added = (document.querySelector("#friendAddedBlueprint")! as HTMLTemplateElement).
+ content.
+ cloneNode(true) as DocumentFragment;
(added.querySelector(".friend-name") as HTMLSpanElement).
textContent = friend.name;
added.querySelector("input")!.value = friend.id.toString();
@@ -259,9 +259,9 @@ function imageSelectorChanged(event: Event) {
transfer.items.add(file);
input.files = transfer.files;
- const preview = document.querySelector("#trackImagePreviewBlueprint")!.
- cloneNode(true) as HTMLDivElement;
- preview.removeAttribute("id");
+ const preview = (document.querySelector("#trackImagePreviewBlueprint") as HTMLTemplateElement).
+ content.
+ cloneNode(true) as DocumentFragment;
preview.querySelector("img")!.src = URL.createObjectURL(file);
preview.querySelector("button.delete-image")!.
addEventListener("click", deleteImageButtonClicked as EventListener);
@@ -269,7 +269,7 @@ function imageSelectorChanged(event: Event) {
addEventListener("click", editImageDescriptionClicked as EventListener);
(preview.querySelector("input.image-description-input") as HTMLInputElement).
name = `image-description[${window.fietsboekImageIndex}]`;
- preview.appendChild(input);
+ preview.querySelector("div")!.appendChild(input);
document.querySelector("#trackImageList")!.appendChild(preview);
}
@@ -286,6 +286,7 @@ addHandler("#imageSelector", "change", imageSelectorChanged);
*/
function deleteImageButtonClicked(event: MouseEvent) {
const preview = (event.target as HTMLElement).closest("div.track-image-preview")!;
+ console.log(preview);
/* If this was a image yet to be uploaded, simply remove it */
const input = preview.querySelector("input[type=file]");
if (input) {