Refactor title component

jp7io · Dec 31, 2023 · 4314aec · 4314aec
1 parent 5410619
commit 4314aec
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 36 deletions.
diff --git a/components/Title.js b/components/Title.js
@@ -12,6 +12,8 @@ import { state } from '../js/state.js';
 
 const { div, h1, h2, h3, h4, h5 } = van.tags;
 
+const hTags = [h1, h2, h3, h4, h5];
+
 const getPageTitle = () => {
   const title = getTitle().filter(title => title);
   return title.reverse().map(title => title.ja).join(' / ');
@@ -27,7 +29,7 @@ const getHash = () => {
 }
 
 export const TitleElm = () => {
-  const [title1, title2, title3, title4, title5] = getTitle();
+  const titles = getTitle();
 
   document.title = getPageTitle();
   if (state.init.val) {
@@ -40,36 +42,21 @@ export const TitleElm = () => {
     {
       id: 'title',
     },
-    h1(
-      {
-        onclick: () => {
-          setLayer(layers.capital);
-          setRegion(null);
-          setCity(null);
-          setMunicipality(null);
+    titles.map((title, index) => title ? [
+      hTags[index](
+        {
+          onclick: () => {
+            if (index === 0) {
+              setLayer(layers.capital);
+              setRegion(null);
+              setCity(null);
+              setMunicipality(null);
+            }
+          },
         },
-      },
-      furigana(title1),
-    ),
-    title2 && div({ class: 'h2 title-separator' }, '/'),
-    title2 && h2(
-      {},
-      furigana(title2),
-    ),
-    title3 && div({ class: 'h3 title-separator' }, '/'),
-    title3 && h3(
-      {},
-      furigana(title3),
-    ),
-    title4 && div({ class: 'h4 title-separator' }, '/'),
-    title4 && h4(
-      {},
-      furigana(title4),
-    ),
-    title5 && div({ class: 'h5 title-separator' }, '/'),
-    title5 && h5(
-      {},
-      furigana(title5),
-    ),
+        furigana(title),
+      ),
+      div({ class: `h${index + 1} title-separator` }, '/'),
+    ] : null),
   )
 };
diff --git a/css/title.css b/css/title.css
@@ -25,6 +25,15 @@
   cursor: pointer;
 }
 
+.title-separator {
+  font-size: 5vh;
+  margin: 0.4em 0.5em 0;
+}
+
+.title-separator:last-child {
+  display: none;
+}
+
 body:has(h3) #title h2,
 body:has(h3) #title .h2.title-separator {
   display: none;
@@ -34,8 +43,3 @@ 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;
-}