From 1385354adca1a11b395c193a1ca49f7ad181d6e0 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Mon, 4 Mar 2024 21:40:32 +0100 Subject: [PATCH] fix: icons - use textContent insteod of innerHTML to avoid Google translate issues --- index.html | 10 +++-- modules/ui/editors.js | 4 +- modules/ui/military-overview.js | 72 ++++++++++++++++++++++----------- versioning.js | 2 +- 4 files changed, 58 insertions(+), 30 deletions(-) diff --git a/index.html b/index.html index 89c77396..4a36f3d4 100644 --- a/index.html +++ b/index.html @@ -5597,7 +5597,9 @@ Crew Power Type - Sep. + + Separate + @@ -5763,7 +5765,7 @@
Select from the list or paste a Unicode character here: - + . See Emojipedia for reference
@@ -8063,7 +8065,7 @@ - + @@ -8087,7 +8089,7 @@ - + diff --git a/modules/ui/editors.js b/modules/ui/editors.js index 890fb58f..7ebed41d 100644 --- a/modules/ui/editors.js +++ b/modules/ui/editors.js @@ -1093,12 +1093,12 @@ function selectIcon(initial, callback) { input.oninput = e => callback(input.value); table.onclick = e => { if (e.target.tagName === "TD") { - input.value = e.target.innerHTML; + input.value = e.target.textContent; callback(input.value); } }; table.onmouseover = e => { - if (e.target.tagName === "TD") tip(`Click to select ${e.target.innerHTML} icon`); + if (e.target.tagName === "TD") tip(`Click to select ${e.target.textContent} icon`); }; $("#iconSelector").dialog({ diff --git a/modules/ui/military-overview.js b/modules/ui/military-overview.js index 35a23ed4..7c83c757 100644 --- a/modules/ui/military-overview.js +++ b/modules/ui/military-overview.js @@ -54,7 +54,9 @@ function overviewMilitary() { const insert = html => document.getElementById("militaryTotal").insertAdjacentHTML("beforebegin", html); for (const u of options.military) { const label = capitalize(u.name.replace(/_/g, " ")); - insert(`
${label} 
`); + insert( + `
${label} 
` + ); } header.querySelectorAll(".removable").forEach(function (e) { e.addEventListener("click", function () { @@ -76,7 +78,9 @@ function overviewMilitary() { const rate = (total / population) * 100; const sortData = options.military.map(u => `data-${u.name}="${getForces(u)}"`).join(" "); - const lineData = options.military.map(u => `
${getForces(u)}
`).join(" "); + const lineData = options.military + .map(u => `
${getForces(u)}
`) + .join(" "); lines += /* html */ `
${lineData} -
${si(total)}
+
${si( + total + )}
${si(population)}
-
${rn(rate, 2)}%
+
${rn( + rate, + 2 + )}%
s.military.reduce((s, r) => s + (r.u[u.name] || 0), 0); - options.military.forEach(u => (line.dataset[u.name] = line.querySelector(`div[data-type='${u.name}']`).innerHTML = getForces(u))); + options.military.forEach( + u => (line.dataset[u.name] = line.querySelector(`div[data-type='${u.name}']`).innerHTML = getForces(u)) + ); const population = rn((s.rural + s.urban * urbanization) * populationRate); const total = (line.dataset.total = options.military.reduce((s, u) => s + getForces(u) * u.crew, 0)); @@ -237,7 +248,16 @@ function overviewMilitary() { position: {my: "center", at: "center", of: "svg"}, buttons: { Apply: applyMilitaryOptions, - Add: () => addUnitLine({icon: "🛡️", name: "custom" + militaryOptionsTable.rows.length, rural: 0.2, urban: 0.5, crew: 1, power: 1, type: "melee"}), + Add: () => + addUnitLine({ + icon: "🛡️", + name: "custom" + militaryOptionsTable.rows.length, + rural: 0.2, + urban: 0.5, + crew: 1, + power: 1, + type: "melee" + }), Restore: restoreDefaultUnits, Cancel: function () { $(this).dialog("close"); @@ -262,7 +282,7 @@ function overviewMilitary() { if (el.tagName !== "BUTTON") return; const type = el.dataset.type; - if (type === "icon") return selectIcon(el.innerHTML, v => (el.innerHTML = v)); + if (type === "icon") return selectIcon(el.textContent, v => (el.textContent = v)); if (type === "biomes") { const {i, name, color} = biomesData; const biomesArray = Array(i.length).fill(null); @@ -294,7 +314,9 @@ function overviewMilitary() { function addUnitLine(unit) { const {type, icon, name, rural, urban, power, crew, separate} = unit; const row = document.createElement("tr"); - const typeOptions = types.map(t => ``).join(" "); + const typeOptions = types + .map(t => ``) + .join(" "); const getLimitButton = attr => ` + row.innerHTML = /* html */ ` ${getLimitButton("biomes")} ${getLimitButton("states")} @@ -344,7 +368,9 @@ function overviewMilitary() { const lines = filtered.map( ({i, name, fullName, color}) => `⬤ - + ` ); @@ -387,22 +413,21 @@ function overviewMilitary() { function applyMilitaryOptions() { const unitLines = Array.from(tableBody.querySelectorAll("tr")); const names = unitLines.map(r => r.querySelector("input").value.replace(/[&\/\\#, +()$~%.'":*?<>{}]/g, "_")); - if (new Set(names).size !== names.length) { - tip("All units should have unique names", false, "error"); - return; - } + if (new Set(names).size !== names.length) return tip("All units should have unique names", false, "error"); $("#militaryOptions").dialog("close"); + options.military = unitLines.map((r, i) => { const elements = Array.from(r.querySelectorAll("input, button, select")); - const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] = elements.map(el => { - const {type, value} = el.dataset || {}; - if (type === "icon") return el.innerHTML || "⠀"; - if (type) return value ? value.split(",").map(v => parseInt(v)) : null; - if (el.type === "number") return +el.value || 0; - if (el.type === "checkbox") return +el.checked || 0; - return el.value; - }); + const [icon, name, biomes, states, cultures, religions, rural, urban, crew, power, type, separate] = + elements.map(el => { + const {type, value} = el.dataset || {}; + if (type === "icon") return el.textContent || "⠀"; + if (type) return value ? value.split(",").map(v => parseInt(v)) : null; + if (el.type === "number") return +el.value || 0; + if (el.type === "checkbox") return +el.checked || 0; + return el.value; + }); const unit = {icon, name: names[i], rural, urban, crew, power, type, separate}; if (biomes) unit.biomes = biomes; @@ -419,7 +444,8 @@ function overviewMilitary() { } function militaryRecalculate() { - alertMessage.innerHTML = "Are you sure you want to recalculate military forces for all states?
Regiments for all states will be regenerated"; + alertMessage.innerHTML = + "Are you sure you want to recalculate military forces for all states?
Regiments for all states will be regenerated"; $("#alert").dialog({ resizable: false, title: "Remove regiment", diff --git a/versioning.js b/versioning.js index 67182953..bf163fcc 100644 --- a/versioning.js +++ b/versioning.js @@ -1,7 +1,7 @@ "use strict"; // version and caching control -const version = "1.96.06"; // generator version, update each time +const version = "1.96.07"; // generator version, update each time { document.title += " v" + version;