From e6eb83bbe9cb8dc75a3b1a5f8c457abf4581ea84 Mon Sep 17 00:00:00 2001 From: JP Barbosa Date: Sun, 17 Dec 2023 15:06:29 -0300 Subject: [PATCH] Additional CSS refactor --- css/fillmode.css | 4 ++-- css/index.css | 6 +++--- css/info.css | 20 ++++++++++--------- css/legend.css | 6 +++--- css/map.css | 50 +++++++++++------------------------------------ css/mobile.css | 14 +++++++++++++ css/shuriken.css | 4 ++-- js/fillMode.js | 6 ++++++ js/init.js | 33 +++++++++++++++++-------------- js/legend.js | 8 ++++++-- js/map/regions.js | 7 +++---- 11 files changed, 79 insertions(+), 79 deletions(-) diff --git a/css/fillmode.css b/css/fillmode.css index 27612e5..8268bd5 100644 --- a/css/fillmode.css +++ b/css/fillmode.css @@ -1,7 +1,7 @@ #fillmode-placeholder { position: fixed; - top: 2em; - right: 2em; + top: var(--external-margin); + right: var(--external-margin); z-index: 10; } diff --git a/css/index.css b/css/index.css index 5db65d0..20e128c 100644 --- a/css/index.css +++ b/css/index.css @@ -10,6 +10,7 @@ :root { --item-bg-color: rgba(79, 117, 130, 0.1); --item-bg-color-active: rgba(79, 117, 130, 0.9); + --external-margin: 2em; } body { @@ -21,9 +22,8 @@ body { #title { position: fixed; - top: 0; - left: 0; - padding: 2em; + top: var(--external-margin); + left: var(--external-margin); z-index: 10; } diff --git a/css/info.css b/css/info.css index e28220e..822cc2e 100644 --- a/css/info.css +++ b/css/info.css @@ -1,8 +1,7 @@ #info-placeholder { position: fixed; - bottom: 0; - left: 0; - padding: 2em 2.2em; + bottom: var(--external-margin); + left: var(--external-margin); z-index: 10; } @@ -23,7 +22,7 @@ font-size: 1.8em; } -#info:not(.active) #info-tooltip { +#info #info-tooltip { color: #666; padding: 0.4em; font-size: 1.2em; @@ -42,17 +41,20 @@ color: #fff; } -#info .flag { - border: 0.05em solid #ccc; - border-radius: 0.1em; +#info .flag, +#info img { width: 3em; height: 2em; } +#info .flag { + border: 0.05em solid #ccc; + border-radius: 0.2em; +} + #info img { + border-radius: 0.15em; display: block; - width: 3em; - height: 2em; } .wikipedia { diff --git a/css/legend.css b/css/legend.css index e942116..fa0a3bb 100644 --- a/css/legend.css +++ b/css/legend.css @@ -1,14 +1,14 @@ #legend-placeholder { position: fixed; top: 50%; - left: 0; - padding: 1.4em 2em 0 2em; + left: var(--external-margin); + padding-top: 1.4em; transform: translateY(-50%); z-index: 10; } #legend .item { - margin: 0 0 0.3em 0.2em; + margin-bottom: 0.3em; font-size: 1.8em; display: flex; align-items: center; diff --git a/css/map.css b/css/map.css index 4e37be9..1fbea7c 100644 --- a/css/map.css +++ b/css/map.css @@ -21,23 +21,29 @@ z-index: 2; } +#prefectures, +#cities { + z-index: 2; +} + #clickableArea { opacity: 0; z-index: 3; } #map #cities svg g[data-city='true'] { - opacity: 0.05; cursor: pointer; } -#map #prefectures { +#map:not(.capitals, .favorites) #cities, +#map:not(.prefectures) #prefectures { opacity: 0.05; z-index: 1; } -#map #cities { - z-index: 2; +#map.capitals #cities svg g[data-capital='false'], +#map.favorites #cities svg g[data-favorite='false'] { + opacity: 0.05; } #map.regionZoom { @@ -53,40 +59,10 @@ cursor: pointer; } -#map.capitals #cities svg g[data-capital='true'] { - opacity: 1; -} - -#map.capitals #cities svg g[data-nationalCapital='false'] { +#map.capitals:not(.regionZoom) #cities svg g[data-nationalCapital='false'] { opacity: 0.05; } -#map.capitals.regionZoom #cities svg g[data-capital='false'] { - opacity: 0.05 !important; -} - -#map.capitals.regionZoom #cities svg g[data-nationalCapital='false'] { - opacity: 1; -} - -#map.favorites #cities { - opacity: 1; - z-index: 2; -} - -#map.favorites #cities svg g[data-favorite='true'] { - opacity: 1 !important; -} - -#map.prefectures #prefectures { - opacity: 1; - z-index: 2; -} - -#map.prefectures #cities { - z-index: 1; -} - #prefectures svg path, #cities svg path { stroke: none; @@ -96,10 +72,6 @@ font-size: 0.4em; } -#prefectures.active svg text { - visibility: visible; -} - #map .circle { display: none; } diff --git a/css/mobile.css b/css/mobile.css index a551cb0..03be2e1 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -49,7 +49,21 @@ font-size: 0.5em !important; } + #map.favorites:not(.regionZoom) #cities svg text { + font-size: 1.5em !important; + } + + #info #info-tooltip { + font-size: 1.6em; + } + #info #info-data { font-size: 3em; } + + #info .flag, + #info img { + width: 4.5em; + height: 3em; + } } diff --git a/css/shuriken.css b/css/shuriken.css index 71e5c5f..17ae1c7 100644 --- a/css/shuriken.css +++ b/css/shuriken.css @@ -1,7 +1,7 @@ #shuriken-placeholder { position: fixed; - bottom: 2em; - right: 2em; + bottom: var(--external-margin); + right: var(--external-margin); } #shuriken { diff --git a/js/fillMode.js b/js/fillMode.js index 2c87466..0837b56 100644 --- a/js/fillMode.js +++ b/js/fillMode.js @@ -38,3 +38,9 @@ function handleFillmode(e, colors) { e.currentTarget.classList.add('active'); } + +export function recoverFillmode() { + /** @type {HTMLElement | null} */ + const fillmode = document.querySelector('#fillmodeSet .item.active'); + fillmode && fillmode.click(); +} diff --git a/js/init.js b/js/init.js index fcb8f22..9485be9 100644 --- a/js/init.js +++ b/js/init.js @@ -9,18 +9,31 @@ import { extractCities, extractPrefectures, loadHTML, parseHash } from './utils. import { initLayers } from './layers.js'; import { createInlineSVG, loadPatterns } from './svg.js'; -let regionsColors = { ...colors }; - -const { region, prefecture, city } = parseHash(); - google.charts.load('current', { 'packages': ['geochart'], 'mapsApiKey': 'AIzaSyDWQEGh9S63LVWJOVzUX9lZqlTDWMe1nvk' }); google.charts.setOnLoadCallback(async () => { loadPatterns(); await loadIncludes(); createInlineSVG(); + setActiveData(); +}); + +async function loadIncludes() { + await loadHTML('legend-placeholder', './includes/legend.html', () => drawLegendItems()); + await loadHTML('fillmode-placeholder', './includes/fillmode.html', () => { + initFillMode(colors); + initLayers() + }); + await loadHTML('shuriken-placeholder', './includes/shuriken.html'); + await loadHTML('info-placeholder', './includes/info.html'); +}; + +function setActiveData() { + const { region, prefecture, city } = parseHash(); + 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); + setActiveRegion(regionData, () => { setTimeout(() => { if (cityData) { @@ -30,14 +43,4 @@ google.charts.setOnLoadCallback(async () => { } }, 100); }); -}); - -async function loadIncludes() { - await loadHTML('legend-placeholder', './includes/legend.html', () => drawLegendItems()); - await loadHTML('fillmode-placeholder', './includes/fillmode.html', () => { - initFillMode(regionsColors); - initLayers() - }); - await loadHTML('shuriken-placeholder', './includes/shuriken.html'); - await loadHTML('info-placeholder', './includes/info.html'); -}; +} diff --git a/js/legend.js b/js/legend.js index 20599df..d3db40d 100644 --- a/js/legend.js +++ b/js/legend.js @@ -3,6 +3,7 @@ import { regions } from "./regions.js"; import { colors } from './colors.js'; import { setActiveRegion } from './map/index.js'; +import { setInfo } from './info.js'; export function drawLegendItems() { const legendItems = document.getElementById('legend'); @@ -15,7 +16,7 @@ export function drawLegendItems() { item.innerHTML = (`
-
+
@@ -37,5 +38,8 @@ export function drawLegendItems() { }); const legendH1 = document.querySelector('#title h1'); - legendH1?.addEventListener('click', () => setActiveRegion()); + legendH1?.addEventListener('click', () => { + setActiveRegion(); + setInfo(); + }); } diff --git a/js/map/regions.js b/js/map/regions.js index f22af8e..72315a6 100644 --- a/js/map/regions.js +++ b/js/map/regions.js @@ -13,6 +13,7 @@ import { drawPrefectures } from './prefectures.js'; import { drawCities } from './cities.js'; import { drawClickableArea } from './clickableArea.js'; import { parseData, parseDataForPrefectures, parseDataForCities, isMobile } from "../utils.js"; +import { recoverFillmode } from '../fillMode.js'; /** * @param {(string|number)[][]} data @@ -67,16 +68,14 @@ export function setActiveRegion(region, callback) { activeRegionDraw(region, () => { setInfo(); - /** @type {HTMLElement | null} */ - const fillmode = document.querySelector('#fillmodeSet .item.active'); - fillmode && fillmode.click(); + recoverFillmode(); callback && callback(); }); } export function clearRegion() { - drawRegions(parseData(regions), colors); + drawRegions(parseData(regions), colors, recoverFillmode); drawPrefectures(parseDataForPrefectures(regions)); drawCities(parseDataForCities(regions)); drawClickableArea(parseData(regions), colors);