diff --git a/js/info.js b/js/info.js index ce9dd80..f8022a4 100644 --- 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 index 2cea992..a01a2b2 100644 --- 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 index 592ef86..136b078 100644 --- 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 index 12b9544..0029cc1 100644 --- 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} */ 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 index 55a0b7a..42a0f71 100644 --- 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], }; }