parks: キーワード削除と地図クリック時の行強調

キーワード欄に削除ボタンを追加。地図で公園をクリックしたときはキーワードを変えず、一覧の該当行を強調して表示するようにした。

2 files changed, 76 insertions, 1 deletions

diff --git a/src/components/ParksFilters.astro b/src/components/ParksFilters.astro
index 6ef52b5..f31503b 100644
--- a/src/components/ParksFilters.astro
+++ b/src/components/ParksFilters.astro
@@ -38,7 +38,16 @@ const facilityTypes = [
   </label>
   <label>
     <span>キーワード</span>
-    <input type="search" data-parks-search placeholder="名称・住所・設備など" />
+    <span class="parks-search-wrap">
+      <input type="search" data-parks-search placeholder="名称・住所・設備など" />
+      <button
+        type="button"
+        class="parks-search-clear"
+        data-parks-search-clear
+        aria-label="キーワードを削除"
+        title="キーワードを削除"
+        hidden>×</button>
+    </span>
   </label>
   <label class="parks-unconfirmed-filter" title="名称・住所などが未確認の公園だけを表示">
     <input type="checkbox" data-parks-unconfirmed />
@@ -182,6 +191,37 @@ const facilityTypes = [
     font-size: 0.9rem;
     opacity: 0.75;
   }
+  .parks-search-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+  .parks-search-wrap input[type="search"] {
+    padding-right: 1.9rem;
+  }
+  .parks-search-clear {
+    position: absolute;
+    right: 0.3rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.4rem;
+    height: 1.4rem;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: inherit;
+    font-size: 1rem;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .parks-search-clear:hover {
+    background: var(--sl-color-gray-5, #e2e8f0);
+  }
+  .parks-search-clear[hidden] {
+    display: none;
+  }
   .parks-disclaimer {
     margin: 0 0 0.55rem;
     color: var(--sl-color-gray-2);
diff --git a/src/components/ParksTable.astro b/src/components/ParksTable.astro
index f2f9748..665a176 100644
--- a/src/components/ParksTable.astro
+++ b/src/components/ParksTable.astro
@@ -562,6 +562,12 @@ function isUnconfirmed(p: Park): boolean {
   .parks tbody tr.is-highlighted td {
     background: #fff59d !important;
   }
+  .parks tbody tr.is-selected td {
+    background: #ffe0b2 !important;
+  }
+  .parks tbody tr.is-selected td:first-child {
+    box-shadow: inset 4px 0 0 #e65100;
+  }
   .parks .is-address {
     font-size: 0.8em;
     white-space: normal;
@@ -703,6 +709,9 @@ function isUnconfirmed(p: Park): boolean {
     const select = document.querySelector<HTMLSelectElement>("[data-parks-town]");
     const kindSelect = document.querySelector<HTMLSelectElement>("[data-parks-kind]");
     const search = document.querySelector<HTMLInputElement>("[data-parks-search]");
+    const searchClear = document.querySelector<HTMLButtonElement>(
+      "[data-parks-search-clear]",
+    );
     const count = document.querySelector("[data-parks-count]");
     const none = root.querySelector<HTMLElement>("[data-parks-none]");
     const tbody = root.querySelector("tbody");
@@ -798,6 +807,7 @@ function isUnconfirmed(p: Park): boolean {
 
     const clearSelected = () => {
       selectedName = "";
+      allRows().forEach((row) => row.classList.remove("is-selected"));
     };
     select?.addEventListener("change", () => {
       clearSelected();
@@ -810,6 +820,17 @@ function isUnconfirmed(p: Park): boolean {
     search?.addEventListener("input", () => {
       clearSelected();
       applyFilter();
+      updateSearchClear();
+    });
+    const updateSearchClear = () => {
+      if (searchClear && search) searchClear.hidden = !search.value;
+    };
+    searchClear?.addEventListener("click", () => {
+      if (!search) return;
+      search.value = "";
+      updateSearchClear();
+      search.dispatchEvent(new Event("input", { bubbles: true }));
+      search.focus();
     });
     checks.forEach((c) =>
       c.addEventListener("change", () => {
@@ -822,6 +843,19 @@ function isUnconfirmed(p: Park): boolean {
       applyFilter();
     });
 
+    // 地図のポリゴンクリック時は、キーワードを変えずに一覧の行を強調する。
+    document.addEventListener("park:select-row", (e: Event) => {
+      const name = (e as CustomEvent).detail?.name;
+      if (!name) return;
+      allRows().forEach((row) => {
+        row.classList.toggle("is-selected", row.dataset.name === name);
+      });
+      const row = allRows().find((r) => r.dataset.name === name);
+      if (row && !row.classList.contains("is-hidden")) {
+        row.scrollIntoView({ behavior: "smooth", block: "center" });
+      }
+    });
+
     // 地図のポリゴンクリックなどから、公園名で1件だけ絞り込む。
     document.addEventListener("park:filter-name", (e: Event) => {
       const detail = (e as CustomEvent).detail || {};
@@ -857,5 +891,6 @@ function isUnconfirmed(p: Park): boolean {
       });
     });
     applyFilter();
+    updateSearchClear();
   });
 </script>