feat: dim irregular and old readings when looking up by kanji

Addresses the second suggestion in #877 (comment)
birchill · Jan 20, 2022 · 73b5cf5 · 73b5cf5
1 parent 2bccef3
commit 73b5cf5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -381,8 +381,10 @@
   color: var(--primary-highlight);
 }
 
-.w-kanji .w-unmatched,
-.w-kanji .w-separator {
+.w-kanji .dimmed,
+.w-kanji .separator,
+.w-kana .dimmed,
+.w-kana .separator {
   opacity: 0.6;
 }
 

diff --git a/src/content/popup/words.ts b/src/content/popup/words.ts
@@ -83,12 +83,12 @@ export function renderWordEntries({
       const kanjiSpan = html('span', { class: 'w-kanji', lang: 'ja' });
       for (const [i, kanji] of sortedKanji.entries()) {
         if (i) {
-          kanjiSpan.append(html('span', { class: 'w-separator' }, '、'));
+          kanjiSpan.append(html('span', { class: 'separator' }, '、'));
         }
 
         let headwordSpan = kanjiSpan;
         if (!kanji.match) {
-          const dimmedSpan = html('span', { class: 'w-unmatched' });
+          const dimmedSpan = html('span', { class: 'dimmed' });
           kanjiSpan.append(dimmedSpan);
           headwordSpan = dimmedSpan;
         }
@@ -127,12 +127,25 @@ export function renderWordEntries({
       const kanaSpan = html('span', { class: 'w-kana', lang: 'ja' });
       for (const [i, kana] of matchingKana.entries()) {
         if (i) {
-          kanaSpan.append('、 ');
+          kanaSpan.append(html('span', { class: 'separator' }, '、'));
         }
-        kanaSpan.append(renderKana(kana, options));
-        appendHeadwordInfo(kana.i, kanaSpan);
+
+        // If we looked up by kanji, dim any kana headwords that are irregular
+        // or old.
+        let headwordSpan = kanaSpan;
+        if (
+          !matchedOnKana &&
+          (kana.i?.includes('ik') || kana.i?.includes('ok'))
+        ) {
+          const dimmedSpan = html('span', { class: 'dimmed' });
+          kanaSpan.append(dimmedSpan);
+          headwordSpan = dimmedSpan;
+        }
+
+        headwordSpan.append(renderKana(kana, options));
+        appendHeadwordInfo(kana.i, headwordSpan);
         if (options.showPriority) {
-          appendPriorityMark(kana.p, kanaSpan);
+          appendPriorityMark(kana.p, headwordSpan);
         }
       }
       headingDiv.append(kanaSpan);