Replace HTML literals with document fragments

Author: leonhard-s

index.js

@@ -23,16 +23,29 @@ class BaseInfo extends Tool {
     protected _setUpToolPanel(): void {
         super._setUpToolPanel();
 
-        this._tool_panel.innerHTML = `
-        <span class="ps2map__tool__base-info__name" id="tool-base-name"></span>
-        <img class="ps2map__tool__base-info__type-icon" id="tool-base-icon"/>
-        <span class="ps2map__tool__base-info__type" id="tool-base-type"></span>
-        `;
-        this._tool_panel.innerHTML += `
-        <br/>
-        <img class="ps2map__tool__base-info__resource-icon" id="tool-base-resource-icon"/>
-        <span class="ps2map__tool__base-info__resource-text" id="tool-base-resource-name"></span>
-        `;
+        const frag = document.createDocumentFragment();
+        frag.appendChild(Object.assign(document.createElement("span"), {
+            id: "tool-base-name",
+            classList: "ps2map__tool__base-info__name",
+        }));
+        frag.appendChild(Object.assign(document.createElement("img"), {
+            id: "tool-base-icon",
+            classList: "ps2map__tool__base-info__type-icon",
+        }));
+        frag.appendChild(Object.assign(document.createElement("span"), {
+            id: "tool-base-type",
+            classList: "ps2map__tool__base-info__type",
+        }));
+        frag.appendChild(document.createElement("br"));
+        frag.appendChild(Object.assign(document.createElement("img"), {
+            id: "tool-base-resource-icon",
+            classList: "ps2map__tool__base-info__resource-icon",
+        }));
+        frag.appendChild(Object.assign(document.createElement("span"), {
+            id: "tool-base-resource-name",
+            classList: "ps2map__tool__base-info__resource-text",
+        }));
+        this._tool_panel.appendChild(frag);
     }
 
     private _updateBaseInfo(base: Base | null): void {

index.js.map

@@ -24,15 +24,31 @@ class Cursor extends Tool {
     protected _setUpToolPanel(): void {
         super._setUpToolPanel();
 
-        this._tool_panel.innerHTML += `
-        <div class="tools__cursor">
-            <span>X:</span>
-            <span id="tool-cursor_x">0.00</span>
-            <span>Y:</span>
-            <span id="tool-cursor_y">0.00</span>
-        </div>
-        `;
-        this._tool_panel.style.display = "block";
+        // Dynamic elements        
+        const x = Object.assign(document.createElement("span"), {
+            id: "tool-cursor_x",
+            textContent: "0.00",
+        });
+        const y = Object.assign(document.createElement("span"), {
+            id: "tool-cursor_y",
+            textContent: "0.00",
+        });
+        // Static elements
+        const frag = document.createDocumentFragment();
+        frag.appendChild(document.createTextNode("X:"));
+        frag.appendChild(x);
+        frag.appendChild(document.createTextNode(" Y:"));
+        frag.appendChild(y);
+        this._tool_panel.appendChild(frag);
+        // Set style
+        Object.assign(this._tool_panel.style, {
+            display: "grid",
+            gridTemplateColumns: "1fr 3fr",
+            minWidth: "120px",
+            fontFamily: "Consolas, monospace",
+            fontSize: "18px",
+            justifyItems: "right",
+        });
     }
 
     private _updateToolPanel(target: Readonly<Point>): void {

src/toolbox/base-info.ts

@@ -1,13 +1,3 @@
-.tools__cursor {
-    display: grid;
-    grid-template-columns: 1fr 3fr;
-    grid-gap: 10px;
-    width: 120px;
-    font-family: Consolas, monospace;
-    font-size: 18px;
-    justify-items: right;
-}
-
 .ps2map__tool__base-info__name {
     font-weight: 600;
     font-size: 16pt;