Fixed universe loading and removing unsafe innerHTML usage

This commit is contained in:
EpicKiwi
2023-10-12 19:50:20 +02:00
parent 4fdfdbe89f
commit bd1533a17e
2 changed files with 35 additions and 13 deletions

View File

@ -444,6 +444,14 @@
</div>
</div>
<script type="module" src="/src/main.ts"></script>
<template id="ui-known-universe-item-template">
<!-- A known universe button in "opening" interface -->
<li class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
<button class="universe-name load-universe" title="Load this universe">Universe Name</button>
<button class="delete-universe" title="Delete this universe">🗑</button>
</li>
</template>
</body>
<p id="timeviewer" class="rounded-lg px-2 py-2 font-bold bg-white cursor-textpointer-events-none select-none text-black text-sm absolute bottom-2 right-2"></p>
</html>

View File

@ -1007,19 +1007,33 @@ export class Editor {
};
updateKnownUniversesView = () => {
let existing_universes = document.getElementById("existing-universes");
let known_universes = Object.keys(this.universes);
let final_html =
"<ul class='lg:h-80 lg:w-80 lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800'>";
known_universes.forEach((name) => {
final_html += `
<li onclick="_loadUniverseFromInterface('${name}')" class="hover:fill-black hover:bg-white py-2 hover:text-black flex justify-between px-4">
<p >${name}</p>
<button onclick=_deleteUniverseFromInterface('${name}')>🗑</button>
</li>`;
});
final_html = final_html + "</ul>";
existing_universes!.innerHTML = final_html;
let itemTemplate = document.getElementById("ui-known-universe-item-template") as HTMLTemplateElement;
if(!itemTemplate){
console.warn("Missing template #ui-known-universe-item-template")
return
}
let existing_universes = document.getElementById("existing-universes")
if(!existing_universes){
console.warn("Missing element #existing-universes")
return
}
let list = document.createElement("ul")
list.className = "lg:h-80 lg:w-80 lg:pb-2 lg:pt-2 overflow-y-scroll text-white lg:mb-4 border rounded-lg bg-neutral-800"
list.append(...Object.keys(this.universes)
.map(it => {
let item = itemTemplate.content.cloneNode(true) as DocumentFragment
let api = (window as unknown as UserAPI) // It's dirty but okey
item.querySelector(".universe-name")!.textContent = it
item.querySelector(".load-universe")?.addEventListener("click", () => api._loadUniverseFromInterface(it))
item.querySelector(".delete-universe")?.addEventListener("click", () => api._deleteUniverseFromInterface(it))
return item
}))
existing_universes.innerHTML = ""
existing_universes.append(list)
};
async share() {