use search mode instead of inverse result

khaitruong922 · Sep 20, 2024 · 58f79ae · 58f79ae
1 parent 33fe57a
commit 58f79ae
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 37 deletions.
diff --git a/index.html b/index.html
@@ -36,12 +36,12 @@ <h1 id="header">Kanji Search (based on JPDBv2 frequency list)</h1>
         <input type="checkbox" id="kanji-only-checkbox">
       </div>
       <div class="filter-item">
-        <label>Contains all kanji in list</label>
-        <input type="checkbox" id="contains-all-checkbox">
-      </div>
-      <div class="filter-item">
-        <label>Inverse result</label>
-        <input type="checkbox" id="inverse-result-checkbox">
+        <label>Search mode</label>
+        <select id="search-mode-select">
+          <option value="any">Includes any</option>
+          <option value="all">Includes all</option>
+          <option value="none">Includes none</option>
+        </select>
       </div>
     </div>
     <button type="button" id="search">Search</button>

diff --git a/index.js b/index.js
@@ -35,20 +35,12 @@ kanjiOnlyCheckbox.addEventListener('change', (e) => {
 });
 kanjiOnlyCheckbox.checked = localStorage.getItem('kanjiOnly') === 'true' ?? false;
 
-const containsAllCheckbox = document.getElementById('contains-all-checkbox');
-containsAllCheckbox.addEventListener('change', (e) => {
-  localStorage.setItem('containsAll', e.target.checked);
+const searchModeSelect = document.getElementById('search-mode-select');
+searchModeSelect.addEventListener('change', (e) => {
+  localStorage.setItem('searchMode', e.target.value);
   searchBtn.disabled = false;
 });
-containsAllCheckbox.checked = localStorage.getItem('containsAll') === 'true' ?? false;
-
-const inverseResultCheckbox = document.getElementById('inverse-result-checkbox');
-inverseResultCheckbox.addEventListener('change', (e) => {
-  console.log(e.target.value);
-  localStorage.setItem('inverseResult', e.target.checked);
-  searchBtn.disabled = false;
-});
-inverseResultCheckbox.checked = localStorage.getItem('inverseResult') === 'true' ?? false;
+searchModeSelect.value = localStorage.getItem('searchMode') ?? 'any';
 
 const resultList = document.getElementById('list');
 const stats = document.getElementById('stats');
@@ -67,10 +59,6 @@ const loadDict = async () => {
 };
 loadDict();
 
-const computeConditionWithInverse = (condition, inverse) => {
-  return (condition && !inverse) || (!condition && inverse);
-};
-
 const createText = (term, reading, freq) => {
   const div = document.createElement('div');
   const freqSpan = document.createElement('span');
@@ -152,14 +140,12 @@ const search = async () => {
   const otherKanjiCount = Number(otherKanjiCountInput.value);
   const containsReadingSubstr = containsReadingInput.value.trim();
   const exactReading = exactReadingCheckbox.checked;
-  const containsAll = containsAllCheckbox.checked;
+  const searchMode = searchModeSelect.value;
   const kanjiOnly = kanjiOnlyCheckbox.checked;
-  const inverseResult = inverseResultCheckbox.checked;
 
-  readingHighlightRegex =
-    containsReadingSubstr && !inverseResult
-      ? new RegExp(`(${containsReadingSubstr})`, 'g')
-      : undefined;
+  readingHighlightRegex = containsReadingSubstr
+    ? new RegExp(`(${containsReadingSubstr})`, 'g')
+    : undefined;
 
   for (const [term, kanjiList, reading, freq] of dict) {
     let termOtherKanjiCount = 0;
@@ -182,24 +168,25 @@ const search = async () => {
     const hasAllKanji = termKanjiOverlap.size === inputKanjiSet.size;
     const hasAnyKanji = termKanjiOverlap.size > 0;
 
-    const containsAnyCondition = inputKanjiSet.size === 0 || hasAnyKanji;
-    const containsAllCondition = !containsAll || hasAllKanji;
+    const searchModeAnyCondition = searchMode === 'any' && hasAnyKanji;
+    const searchModeAllCondition = searchMode === 'all' && hasAllKanji;
+    const searchModeNoneCondition = searchMode === 'none' && !hasAnyKanji;
+
+    const searchModeCondition =
+      searchModeAnyCondition || searchModeAllCondition || searchModeNoneCondition;
+
     const otherKanjiCountCondition = otherKanjiCountAny || termOtherKanjiCount === otherKanjiCount;
     const kanjiOnlyCondition = !kanjiOnly || termHasOnlyKanji;
 
-    const conditionMatch =
-      containsAnyCondition &&
-      containsAllCondition &&
-      otherKanjiCountCondition &&
-      kanjiOnlyCondition;
+    const conditionMatch = searchModeCondition && otherKanjiCountCondition && kanjiOnlyCondition;
 
-    if (computeConditionWithInverse(conditionMatch, inverseResult)) {
+    if (conditionMatch) {
       if (containsReadingSubstr) {
         // optimize .includes() calls
         const containsReading = exactReading
           ? reading === containsReadingSubstr
           : reading.includes(containsReadingSubstr);
-        if (computeConditionWithInverse(containsReading, inverseResult)) {
+        if (containsReading) {
           items.push([term, kanjiList, reading, freq]);
         }
       } else {