diff options
Diffstat (limited to 'asset-sources')
| -rw-r--r-- | asset-sources/fietsboek.ts | 21 |
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) { |