diff --git a/components/Legend/Tokyo.js b/components/Legend/Tokyo.js index 97f1d04..b297805 100644 --- a/components/Legend/Tokyo.js +++ b/components/Legend/Tokyo.js @@ -12,7 +12,7 @@ const { div } = van.tags; export const TokyoElm = div({ id: 'legend-tokyo' }, Object.values(municipalityType).map((type, index) => ( LegendItem(type, colorsTokyo[index], state.municipalityType, { onclick: () => { - setMunicipality(null); + setMunicipality(null, false); setMunicipalityType(type); }, })))); diff --git a/components/Title.js b/components/Title.js index 093e53f..e9b1a31 100644 --- a/components/Title.js +++ b/components/Title.js @@ -10,7 +10,7 @@ import { getTitle } from '../js/title.js'; import { replaceSpecialChars } from '../js/utils.js'; import { state } from '../js/state.js'; -const { div, h1, h2, h3, h4 } = van.tags; +const { div, h1, h2, h3, h4, h5 } = van.tags; const getPageTitle = () => { const title = getTitle().filter(title => title); @@ -19,12 +19,15 @@ const getPageTitle = () => { const getHash = () => { const isTokyo = state.layer.val === layers.tokyo; - const title = getTitle().slice(isTokyo ? 2 : 1).filter(title => title); - return title.map(title => replaceSpecialChars(title.en)).join('/'); + const title = getTitle().slice(isTokyo ? 2 : 1); + if (isTokyo && state.municipality.val) { + delete title[1]; + } + return title.filter(title => title).map(title => replaceSpecialChars(title.en)).join('/'); } export const TitleElm = () => { - const [title1, title2, title3, title4] = getTitle(); + const [title1, title2, title3, title4, title5] = getTitle(); document.title = getPageTitle(); if (state.init.val) { @@ -63,5 +66,10 @@ export const TitleElm = () => { {}, furigana(title4), ), + title5 && div({ class: 'h5 title-separator' }, '/'), + title5 && h5( + {}, + furigana(title5), + ), ) }; diff --git a/css/mobile.css b/css/mobile.css index 6a89232..ac5bf0f 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -16,7 +16,8 @@ #title h1, #title h2, #title h3, - #title h4 { + #title h4, + #title h5 { margin: 0 0 0.5em; font-size: 4em !important; } diff --git a/css/title.css b/css/title.css index 21dfbfb..9fa7caf 100644 --- a/css/title.css +++ b/css/title.css @@ -15,7 +15,8 @@ #title h1, #title h2, #title h3, -#title h4 { +#title h4, +#title h5 { margin: 0 0 0.4em; font-size: 5vh; } @@ -29,6 +30,11 @@ body:has(h3) #title .h2.title-separator { display: none; } +body:has(h5) #title h4, +body:has(h5) #title .h4.title-separator { + display: none; +} + .title-separator { font-size: 5vh; margin: 0.4em 0.5em 0; diff --git a/data/dict.js b/data/dict.js index c5fd7aa..66b3e44 100644 --- a/data/dict.js +++ b/data/dict.js @@ -27,7 +27,7 @@ export const dict = { }, reportAnIssue: { ja: '問題を報告する', - furigana: ['もん', 'だい', '', 'ほう', 'こく', '', '', ''], + furigana: ['もん', 'だい', '', 'ほう', 'こく', '', ''], en: 'Report an Issue', }, } diff --git a/js/init.js b/js/init.js index 8213910..ace9f3f 100644 --- a/js/init.js +++ b/js/init.js @@ -5,46 +5,61 @@ import { setRegion, setPrefecture, setCity, centerPosition } from './map/index.j import { debounce, parseHash } from './utils.js'; import { setLayer } from './layers.js'; import { createInlineSVG } from './svg.js'; -import { centerTokyo, findMunicipality, setMunicipality } from './tokyo.js'; +import { centerTokyo, findMunicipality, setMunicipality, setMunicipalityType } from './tokyo.js'; import { Root } from '../components/index.js'; import { layers } from '../data/dict.js'; import van from '../lib/van.js'; import { findRegion, findPrefecture, findCity } from './regions.js'; +import { municipalityType } from '../data/tokyo.js'; google.charts.load('current', { 'packages': ['geochart'], 'mapsApiKey': 'AIzaSyDWQEGh9S63LVWJOVzUX9lZqlTDWMe1nvk' }); google.charts.setOnLoadCallback(async () => { van.add(document.body, Root); createInlineSVG(); - setActiveData(); + setData(); initPosition(); }); -function setActiveData() { - const { region, prefecture, city, municipality } = parseHash(); +function setData() { + const hash = parseHash(); + if (hash.region === 'Tokyo') { + setTokyo(hash); + return; + } + setJapan(hash); +} - if (region === 'Tokyo') { - setLayer(layers.tokyo); - if (municipality) { - const municipalityData = findMunicipality(municipality); - if (municipalityData) { - setMunicipality(municipalityData); - } +function setTokyo(hash) { + setLayer(layers.tokyo); + if (hash.municipality) { + const municipalityData = findMunicipality(hash.municipality); + if (municipalityData) { + setMunicipality(municipalityData); + return; } - return; } + if (hash.municipalityType) { + const municipalityTypeData = Object.values(municipalityType).find(type => type.name.en === hash.municipalityType); + if (municipalityTypeData) { + setMunicipalityType(municipalityTypeData); + return; + } + } +} - const regionData = findRegion(region); - const prefectureData = prefecture && findPrefecture(prefecture); - const cityData = city && findCity(city); +function setJapan(hash) { + const region = findRegion(hash.region); + const prefecture = hash.prefecture && findPrefecture(hash.prefecture); + const city = hash.city && findCity(hash.city); - setRegion(regionData, () => { + setRegion(region, () => { setTimeout(() => { - if (cityData) { + if (city) { setLayer(layers.capital); - setCity(cityData); - } else if (prefectureData) { + setCity(city); + } else if (prefecture) { setLayer(layers.prefecture); - setPrefecture(prefectureData); + setPrefecture(prefecture); } }, 1); }); diff --git a/js/title.js b/js/title.js index 2901c4a..c0c1f2a 100644 --- a/js/title.js +++ b/js/title.js @@ -5,7 +5,7 @@ import { findCity, findRegion } from './regions.js'; import { state } from './state.js'; export const getTitle = () => { - const { layer, region, prefecture, city, municipality } = state; + const { layer, region, prefecture, city, municipality, municipalityType } = state; if (layer.val === layers.tokyo || municipality.val) { const tokyo = findCity('Tokyo'); @@ -14,6 +14,7 @@ export const getTitle = () => { dict.japan, kanto?.name, tokyo?.name, + municipalityType.val?.name, municipality.val?.name, ] } diff --git a/js/tokyo.js b/js/tokyo.js index 5b796bd..5c5f2bb 100644 --- a/js/tokyo.js +++ b/js/tokyo.js @@ -49,7 +49,7 @@ export function initTokyo() { /** * @param {Municipality | null} municipality */ -export function setMunicipality(municipality) { +export function setMunicipality(municipality, resetType = true) { const id = municipality && replaceSpecialChars(municipality.name.en); tokyo.forEach(item => { @@ -61,7 +61,7 @@ export function setMunicipality(municipality) { }); state.municipality.val = municipality; - state.municipalityType.val = municipality?.type; + resetType && (state.municipalityType.val = municipality?.type); } export function setMunicipalityType(type, force = false) { diff --git a/js/utils.js b/js/utils.js index b3a54f9..80486d8 100644 --- a/js/utils.js +++ b/js/utils.js @@ -1,6 +1,6 @@ // @ts-check -import van from '../lib/van.js'; +import { municipalityType } from '../data/tokyo.js'; /** * @typedef {import('../data/regions.js').Region} Region @@ -183,6 +183,14 @@ export function parseHash() { const filters = decodeURI(hash).split('/'); if (filters[0] === 'Tokyo') { + const municipalityTypeData = Object.values(municipalityType).find((type) => type.name.en === filters[1]); + if (municipalityTypeData) { + return { + region: 'Tokyo', + municipalityType: filters[1], + }; + } + return { region: 'Tokyo', municipality: filters[1],