Remove special chars from links

jp7io · Dec 23, 2023 · 1c639de · 1c639de
1 parent a0d889b
commit 1c639de
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 13 deletions.
diff --git a/js/info.js b/js/info.js
@@ -27,6 +27,7 @@ export function setInfo(type, data) {
   if (data) {
     const { name } = data;
 
+    /** @type {any[]} */
     const paths = [data];
 
     let flag = '';
@@ -89,7 +90,7 @@ export function setInfo(type, data) {
     `
 
     document.title = `${paths.map(path => path.name.ja.join('')).join(' / ')} / 日本`;
-    document.location.hash = paths.reverse().map(path => path.name.en).join('/');
+    document.location.hash = paths.reverse().map(path => replaceSpecialCharactersWithAscii(path.name.en)).join('/');
   } else {
     info.classList.remove('active');
     infoSelected.innerHTML = '';

diff --git a/js/init.js b/js/init.js
@@ -5,7 +5,7 @@ import { regions } from '../data/regions.js';
 import { drawLegendItems, setActiveMunicipalityType } from "./legend.js";
 import { initFillMode } from './fillMode.js';
 import { setActiveRegion, setActivePrefecture, setActiveCity } from './map/index.js';
-import { extractCities, extractPrefectures, loadHTML, parseHash } from './utils.js';
+import { extractCities, extractPrefectures, loadHTML, parseHash, replaceSpecialCharactersWithAscii } from './utils.js';
 import { initLayers, setLayer } from './layers.js';
 import { createInlineSVG, loadPatterns } from './svg.js';
 import { initTokyo, setMunicipality } from './tokyo.js';
@@ -33,10 +33,10 @@ async function loadIncludes() {
 function setActiveData() {
   const { region, prefecture, city, municipality } = parseHash();
 
-  if (region === 'Tōkyō') {
+  if (region === 'Tokyo') {
     setLayer('tokyo');
     if (municipality) {
-      const municipalityData = tokyo.find(item => item.name.en === municipality);
+      const municipalityData = tokyo.find(item => replaceSpecialCharactersWithAscii(item.name.en) === municipality);
       if (municipalityData) {
         setActiveMunicipalityType(municipalityData.type);
         setMunicipality(municipalityData);
@@ -47,15 +47,17 @@ function setActiveData() {
     return;
   }
 
-  const regionData = regions.find(record => record.name.en === region);
-  const prefectureData = extractPrefectures(regions, region).find(record => record.name.en === prefecture);
-  const cityData = extractCities(regions, region).find(record => record.name.en === city);
+  const regionData = regions.find(record => replaceSpecialCharactersWithAscii(record.name.en) === region);
+  const prefectureData = extractPrefectures(regions, regionData?.name.en).find(record => replaceSpecialCharactersWithAscii(record.name.en) === prefecture);
+  const cityData = extractCities(regions, regionData?.name.en).find(record => replaceSpecialCharactersWithAscii(record.name.en) === city);
 
   setActiveRegion(regionData, () => {
     setTimeout(() => {
       if (cityData) {
+        setLayer('capitals');
         setActiveCity(cityData);
       } else {
+        setLayer('prefectures');
         setActivePrefecture(prefectureData);
       }
     }, 100);

diff --git a/js/layers.js b/js/layers.js
@@ -43,9 +43,7 @@ export function setLayer(layer) {
     clearRegion();
     const items = document.querySelectorAll('#legend .item');
     items.forEach(item => item.classList.remove('active'));
-    setTimeout(() => {
-      setActiveMunicipalityType(municipalityType.ku);
-    }, 100);
+    setActiveMunicipalityType(municipalityType.ku);
   }
 
   if (previousLayerItem?.dataset.layer === 'tokyo') {

diff --git a/js/legend.js b/js/legend.js
@@ -92,6 +92,13 @@ export function setActiveMunicipalityType(type) {
     item.classList.toggle('active', item.dataset.type === type.name.en);
   });
 
+  setInfo('tokyo', tokyoData);
+  setTimeout(() => {
+    centerTokyo(type); // FIXME
+  }, 100);
+}
+
+function centerTokyo(type) {
   const tokyo = document.getElementById('tokyo');
   tokyo && (tokyo.className = type.name.en);
 
@@ -101,5 +108,4 @@ export function setActiveMunicipalityType(type) {
   /** @type {NodeListOf<SVGTSpanElement>} */
   const municipalities = document.querySelectorAll(`#Municipalities #Text #${type.name.en} tspan`);
   centerPosition(municipalities, factor);
-  setInfo('tokyo', tokyoData);
 }
diff --git a/js/utils.js b/js/utils.js
@@ -209,9 +209,9 @@ export function parseHash() {
   const hash = document.location.hash.replace('#', '');
   const filters = decodeURI(hash).split('/');
 
-  if (filters[0] === 'Tōkyō') {
+  if (filters[0] === 'Tokyo') {
     return {
-      region: 'Tōkyō',
+      region: 'Tokyo',
       municipality: filters[1],
     };
   }