Additional CSS refactor

jp7io · Dec 17, 2023 · e6eb83b · e6eb83b
1 parent d5bf8c5
commit e6eb83b
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 79 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = (`
       <div class="color" style="background: ${colors[index].color}"></div>
-      <div class="pattern">
+      <div class="pattern" style="border-color: ${colors[index].color}">
         <svg xmlns="http://www.w3.org/2000/svg">
           <rect fill="${colors[index].pattern}" />
         </svg>
@@ -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
@@ -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);