fix: ui

makinzm · Dec 21, 2024 · 1bc6f7d · 1bc6f7d
1 parent b5adeaf
commit 1bc6f7d
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 27 deletions.
diff --git a/dist/options/options.html b/dist/options/options.html
@@ -88,28 +88,33 @@ <h2>ドメインフィルターモード</h2>
   <div>
     <label>
       <input type="radio" name="domainFilterMode" value="exclude" id="radioExclude" />
-      Excludeモード (ブラックリスト)
+      Excludeモード (ブラックリスト: すべてのドメインで拡張機能が機能しますが、指定したドメインのみ機能しないようにします)
     </label>
     <label>
       <input type="radio" name="domainFilterMode" value="include" id="radioInclude" checked/>
-      Includeモード (ホワイトリスト)
+      Includeモード (ホワイトリスト: 指定したドメインのみ拡張機能が機能します)
     </label>
   </div>
 
-  <!-- ドメインブロック -->
-  <h2>ドメインブロック設定</h2>
-  <div>
-    <input type="text" id="excludedDomainInput" placeholder="example.com" />
-    <button id="addExcludedDomainButton">ドメインを追加</button>
+  <!-- Excludeモード設定 -->
+  <div id="excludeSettings" style="display: none;">
+    <h2>ドメインブロック設定</h2>
+    <div>
+      <input type="text" id="excludedDomainInput" placeholder="example.com" />
+      <button id="addExcludedDomainButton">ドメインを追加</button>
+    </div>
+    <ul id="excludedDomainList"></ul>
   </div>
-  <ul id="excludedDomainList"></ul>
 
-  <h2>ドメイン限定設定 (Included)</h2>
-  <div>
-    <input type="text" id="includedDomainInput" placeholder="example.org" />
-    <button id="addIncludedDomainButton">ドメインを追加</button>
+  <!-- Includeモード設定 -->
+  <div id="includeSettings" style="display: none;">
+    <h2>ドメイン限定設定 (Included)</h2>
+    <div>
+      <input type="text" id="includedDomainInput" placeholder="example.org" />
+      <button id="addIncludedDomainButton">ドメインを追加</button>
+    </div>
+    <ul id="includedDomainList"></ul>
   </div>
-  <ul id="includedDomainList"></ul>
 
   <!-- フィルタ -->
   <div>

diff --git a/dist/options/options.js b/dist/options/options.js
diff --git a/dist/options/options.ts b/dist/options/options.ts
@@ -299,6 +299,38 @@ function setupDomainFilterModeListeners() {
   });
 }
 
+
+function initializeSettings() {
+  const storedMode = localStorage.getItem("domainFilterMode") || "include";
+  if (storedMode === "exclude") {
+    radioExclude.checked = true;
+    toggleSettings("exclude");
+  } else {
+    radioInclude.checked = true;
+    toggleSettings("include");
+  }
+}
+
+const excludeSettings = document.getElementById("excludeSettings") as HTMLDivElement;
+const includeSettings = document.getElementById("includeSettings") as HTMLDivElement;
+
+function toggleSettings(mode: "exclude" | "include") {
+  if (mode === "exclude") {
+    excludeSettings.style.display = "block";
+    includeSettings.style.display = "none";
+  } else {
+    excludeSettings.style.display = "none";
+    includeSettings.style.display = "block";
+  }
+  // モードを保存
+  localStorage.setItem("domainFilterMode", mode);
+}
+
+// ラジオボタンのイベントリスナー
+radioExclude.addEventListener("change", () => toggleSettings("exclude"));
+radioInclude.addEventListener("change", () => toggleSettings("include"));
+
+initializeSettings();
 renderExcludedDomains();
 loadData();
 loadDomainFilterMode();