Refactor country name highlighting logic in CountryMap component for improved readability and maintainability

This commit is contained in:
sHa
2025-08-14 01:15:44 +03:00
parent 6c2aa6acef
commit 6c7ac29f62

View File

@@ -22,19 +22,22 @@
} }
}); });
// Highlight by country name (name attribute) // Highlight by country name (name attribute)
const names = Array.isArray(countryNames) ? countryNames : countryNames ? [countryNames] : []; const names = Array.isArray(countryNames)
names.forEach((name) => { ? countryNames
// Find all elements with matching name attribute or class name : countryNames
console.log(`Highlighting country: ${name}`); ? [countryNames]
const pathsByName = svgEl.querySelectorAll(`[name='${name}']`); : [];
const pathsByClass = svgEl.querySelectorAll(`.${name.replace(/ /g, '.')}`); names.forEach((name) => {
const allPaths = [...pathsByName, ...pathsByClass]; const pathsByName = svgEl.querySelectorAll(`[name='${name}']`);
console.log(`Found paths for ${name}:`, allPaths, `(${allPaths.length})`); const pathsByClass = svgEl.querySelectorAll(
allPaths.forEach((countryPath) => { `.${name.replace(/ /g, ".")}`,
countryPath.setAttribute("fill", "#4f8cff"); );
countryPath.setAttribute("stroke", "#222"); const allPaths = [...pathsByName, ...pathsByClass];
countryPath.style.filter = "drop-shadow(0 0 4px #4f8cff44)"; allPaths.forEach((countryPath) => {
}); countryPath.setAttribute("fill", "#4f8cff");
countryPath.setAttribute("stroke", "#222");
countryPath.style.filter = "drop-shadow(0 0 4px #4f8cff44)";
});
}); });
} }