collapsible kanji dict

yomidevs · Nov 8, 2024 · 2bc9858 · 2bc9858
1 parent 48e545d
commit 2bc9858
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 50 deletions.
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -102,6 +102,7 @@
 
     --collapsible-definition-line-count: 3;
     --collapsible-definition-test-offset: 0.2em;
+    --collpasible-kanji-glyph-data-test-offset: 0.2em;
 
     /* Colors */
     --background-color: #ffffff;
@@ -127,6 +128,8 @@
     --headword-kanji-border-color-popular: var(--headword-kanji-border-color);
     --headword-kanji-border-color-rare: var(--headword-kanji-border-color);
 
+    --kanji-glyph-data-table-cell-padding: 0.36em;
+
     --light-border-color: #eeeeee;
     --medium-border-color: #dddddd;
     --dark-border-color: #777777;
@@ -1184,14 +1187,6 @@ button.action-button:active {
     display: list-item;
     position: relative;
 }
-.definition-item-inner.collapsible.collapsed {
-    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
-    overflow: hidden;
-}
-.definition-item-inner.collapse-test {
-    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
-    overflow: hidden;
-}
 .definition-item-inner {
     display: flex;
     flex-flow: row nowrap;
@@ -1202,7 +1197,9 @@ button.action-button:active {
     background-color: transparent;
     transition: background-color var(--animation-duration) ease-in-out;
 }
-button.definition-item-expansion-button {
+
+/* Expansion buttons */
+button.expansion-button {
     --button-content-color: var(--text-color-light4);
     --button-border-color: transparent;
     --button-background-color: transparent;
@@ -1223,34 +1220,57 @@ button.definition-item-expansion-button {
     border-radius: 0;
     border: 0;
 }
-.definition-item-inner:not(.collapsible)>button.definition-item-expansion-button {
-    display: none;
-}
-button.definition-item-expansion-button:hover+.definition-item-content,
-button.definition-item-expansion-button:active+.definition-item-content,
-button.definition-item-expansion-button:focus+.definition-item-content {
+
+button.expansion-button:hover+.definition-item-content,
+button.expansion-button:active+.definition-item-content,
+button.expansion-button:focus+.definition-item-content,
+button.expansion-button:hover+.kanji-glyph-data-table,
+button.expansion-button:active+.kanji-glyph-data-table,
+button.expansion-button:focus+.kanji-glyph-data-table {
     background-color: var(--accent-color-transparent25);
 }
-button.definition-item-expansion-button:focus:not(:focus-visible)+.definition-item-content {
+button.expansion-button:focus:not(:focus-visible)+.definition-item-content,
+button.expansion-button:focus:not(:focus-visible)+.kanji-glyph-data-table {
     background-color: transparent;
 }
-button.definition-item-expansion-button:focus:hover+.definition-item-content,
-button.definition-item-expansion-button:focus:active+.definition-item-content,
-button.definition-item-expansion-button:focus:focus-visible+.definition-item-content {
+button.expansion-button:focus:hover+.definition-item-content,
+button.expansion-button:focus:active+.definition-item-content,
+button.expansion-button:focus:focus-visible+.definition-item-content,
+button.expansion-button:focus:hover+.kanji-glyph-data-table,
+button.expansion-button:focus:active+.kanji-glyph-data-table,
+button.expansion-button:focus:focus-visible+.kanji-glyph-data-table {
     background-color: var(--accent-color-transparent25);
 }
-.definition-item-expansion-button-icon {
+.definition-item-inner.collapsible.collapsed {
+    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height));
+    overflow: hidden;
+}
+.definition-item-inner.collapse-test {
+    max-height: calc(1em * var(--collapsible-definition-line-count) * var(--line-height) + var(--collapsible-definition-test-offset));
+    overflow: hidden;
+}
+.kanji-glyph-data.collapsible.collapsed {
+    max-height: calc((20em / var(--font-size-no-units)) + var(--kanji-glyph-data-table-cell-padding) * 2);
+    overflow: hidden;
+}
+.kanji-glyph-data.collapsible.collapsed-test {
+    max-height: calc((20em / var(--font-size-no-units)) + var(--kanji-glyph-data-table-cell-padding) * 2 + var(--collpasible-kanji-glyph-data-test-offset));
+    overflow: hidden;
+}
+:not(.collapsible)>button.expansion-button {
+    display: none;
+}
+.expansion-button-icon {
     transform: rotate(0deg);
     width: calc(16em / var(--font-size-no-units));
     height: calc(16em / var(--font-size-no-units));
     background-color: var(--button-current-content-color);
     transition: background-color var(--animation-duration) ease-in-out;
 }
-.definition-item-inner.collapsible:not(.collapsed)>button.definition-item-expansion-button>.definition-item-expansion-button-icon {
+.collapsible:not(.collapsed)>button.expansion-button>.expansion-button-icon {
     transform: rotate(180deg);
 }
 
-
 /* Frequencies */
 .frequency-group-item {
     display: inline;
@@ -1515,14 +1535,18 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
 }
 .kanji-glyph-data {
     margin-top: 0.75em;
+    display: flex;
+    flex-flow: row nowrap;
+}
+.kanji-glyph-data-table {
     border-spacing: 0;
     border-collapse: collapse;
 }
-.kanji-glyph-data>tbody>tr>* {
+.kanji-glyph-data-table>tbody>tr>* {
     border-top: var(--thin-border-size) solid var(--medium-border-color);
     text-align: left;
     vertical-align: top;
-    padding: 0.36em;
+    padding: var(--kanji-glyph-data-table-cell-padding);
     margin: 0;
 }
 .kanji-info-table {
@@ -1538,11 +1562,11 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
 .kanji-info-table>tbody>tr>td {
     text-align: right;
 }
-.kanji-glyph-data dl {
+.kanji-glyph-data-table dl {
     margin-top: 0;
     margin-bottom: 1.4em;
 }
-.kanji-glyph-data dd {
+.kanji-glyph-data-table dd {
     margin-left: 0;
 }
 .kanji-gloss-list {

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
@@ -160,6 +160,7 @@ export class DisplayGenerator {
      */
     createKanjiEntry(dictionaryEntry) {
         const node = this._instantiate('kanji-entry');
+        node.dataset.dictionary = dictionaryEntry.dictionary;
 
         const glyphContainer = this._querySelector(node, '.kanji-glyph');
         const frequencyGroupListContainer = this._querySelector(node, '.frequency-group-list');

diff --git a/ext/js/display/element-overflow-controller.js b/ext/js/display/element-overflow-controller.js
@@ -76,7 +76,12 @@ export class ElementOverflowController {
     addElements(entry) {
         if (this._dictionaries.size === 0) { return; }
 
-        const elements = entry.querySelectorAll('.definition-item-inner');
+
+        /** @type {Element[]} */
+        const elements = [
+            ...entry.querySelectorAll('.definition-item-inner'),
+            ...entry.querySelectorAll('.kanji-glyph-data'),
+        ];
         for (const element of elements) {
             const {parentNode} = element;
             if (parentNode === null) { continue; }
@@ -96,7 +101,7 @@ export class ElementOverflowController {
                 element.classList.add('collapsed');
             }
 
-            const button = element.querySelector('.definition-item-expansion-button');
+            const button = element.querySelector('.expansion-button');
             if (button !== null) {
                 this._eventListeners.addEventListener(button, 'click', this._onToggleButtonClickBind, false);
             }
@@ -128,9 +133,15 @@ export class ElementOverflowController {
      */
     _onToggleButtonClick(e) {
         const element = /** @type {Element} */ (e.currentTarget);
-        const container = element.closest('.definition-item-inner');
-        if (container === null) { return; }
-        container.classList.toggle('collapsed');
+        /** @type {(Element | null)[]} */
+        const collapsedElements = [
+            element.closest('.definition-item-inner'),
+            element.closest('.kanji-glyph-data'),
+        ];
+        for (const collapsedElement of collapsedElements) {
+            if (collapsedElement === null) { continue; }
+            collapsedElement.classList.toggle('collapsed');
+        }
     }
 
     /** */

diff --git a/ext/templates-display.html b/ext/templates-display.html
@@ -69,7 +69,7 @@
 </div></template>
 <template id="definition-item-template" data-remove-whitespace-text="true"><li class="definition-item">
     <div class="definition-item-inner">
-        <button type="button" class="definition-item-expansion-button"><div class="definition-item-expansion-button-icon icon" data-icon="double-down-chevron"></div></button>
+        <button type="button" class="expansion-button"><div class="expansion-button-icon icon" data-icon="double-down-chevron"></div></button>
         <div class="definition-item-content">
             <div class="definition-tag-list tag-list"></div>
             <div class="definition-disambiguation-list"></div>
@@ -138,24 +138,29 @@
             <div class="entry-body-section-content frequency-group-list"></div>
         </div>
     </div>
-    <table class="kanji-glyph-data"><tbody>
-        <tr>
-            <th scope="col">Meaning</th>
-            <th scope="col">Readings</th>
-            <th scope="col">Statistics</th>
-        </tr>
-        <tr>
-            <td class="kanji-gloss-container"><ol class="kanji-gloss-list"></ol></td>
-            <td class="kanji-readings"><dl class="kanji-readings-chinese"></dl><dl class="kanji-readings-japanese"></dl></td>
-            <td class="kanji-statistics"></td>
-        </tr>
-        <tr><th scope="col" colspan="3">Classifications</th></tr>
-        <tr><td colspan="3" class="kanji-classifications"></td></tr>
-        <tr><th scope="col" colspan="3">Codepoints</th></tr>
-        <tr><td colspan="3" class="kanji-codepoints"></td></tr>
-        <tr><th scope="col" colspan="3">Dictionary Indices</th></tr>
-        <tr><td colspan="3" class="kanji-dictionary-indices"></td></tr>
-    </tbody></table>
+    <div class="kanji-glyph-data">
+        <button type="button" class="expansion-button"><div class="expansion-button-icon icon" data-icon="double-down-chevron"></div></button>
+        <table class="kanji-glyph-data-table">
+            <tbody>
+                <tr>
+                    <th scope="col">Meaning</th>
+                    <th scope="col">Readings</th>
+                    <th scope="col">Statistics</th>
+                </tr>
+                <tr>
+                    <td class="kanji-gloss-container"><ol class="kanji-gloss-list"></ol></td>
+                    <td class="kanji-readings"><dl class="kanji-readings-chinese"></dl><dl class="kanji-readings-japanese"></dl></td>
+                    <td class="kanji-statistics"></td>
+                </tr>
+                <tr><th scope="col" colspan="3">Classifications</th></tr>
+                <tr><td colspan="3" class="kanji-classifications"></td></tr>
+                <tr><th scope="col" colspan="3">Codepoints</th></tr>
+                <tr><td colspan="3" class="kanji-codepoints"></td></tr>
+                <tr><th scope="col" colspan="3">Dictionary Indices</th></tr>
+                <tr><td colspan="3" class="kanji-dictionary-indices"></td></tr>
+            </tbody>
+        </table>
+    </div>
 </div></template>
 <template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template>
 <template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th scope="col" class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template>