Collapsible dictionary updates (#2170)

* Add "force collapsed" and "force expanded" options

* Simplify "any" check

* Update style

* Add help modal for collapsible dictionaries

* Disable wrapping

ext/css/material.css

@@ -807,6 +807,10 @@ input[type=number].code,
 input[type=password].code {
     font-family: 'Courier New', Courier, monospace;
 }
+textarea.no-wrap {
+    white-space: pre;
+    overflow-wrap: normal;
+}
 
 /* Input groups */
 .input-group {

ext/css/settings.css

@@ -1628,8 +1628,8 @@ code.anki-field-marker {
     resize: none;
     min-height: calc(var(--textarea-line-height) * 5 + var(--textarea-padding) * 2);
 }
-#anki-card-templates-render-result,
+
-#anki-card-templates-compile-result {
+.code {
     flex: 0 0 auto;
     width: 100%;
     max-width: 100%;

ext/data/schemas/options-schema.json

@@ -791,7 +791,7 @@
                                         },
                                         "definitionsCollapsible": {
                                             "type": "string",
-                                            "enum": ["not-collapsible", "expanded", "collapsed"],
+                                            "enum": ["not-collapsible", "expanded", "collapsed", "force-collapsed", "force-expanded"],
                                             "default": "not-collapsible"
                                         }
                                     }

ext/js/display/element-overflow-controller.js

@@ -32,6 +32,7 @@ class ElementOverflowController {
         for (const {name, definitionsCollapsible} of options.dictionaries) {
             let collapsible = false;
             let collapsed = false;
+            let force = false;
             switch (definitionsCollapsible) {
                 case 'expanded':
                     collapsible = true;
@@ -40,9 +41,18 @@ class ElementOverflowController {
                     collapsible = true;
                     collapsed = true;
                     break;
+                case 'force-expanded':
+                    collapsible = true;
+                    force = true;
+                    break;
+                case 'force-collapsed':
+                    collapsible = true;
+                    collapsed = true;
+                    force = true;
+                    break;
             }
             if (!collapsible) { continue; }
-            this._dictionaries.set(name, {collapsed});
+            this._dictionaries.set(name, {collapsed, force});
         }
     }
 
@@ -50,14 +60,17 @@ class ElementOverflowController {
         if (this._dictionaries.size === 0) { return; }
 
         const elements = entry.querySelectorAll('.definition-item-inner');
-        let any = false;
         for (const element of elements) {
             const {dictionary} = element.parentNode.dataset;
             const dictionaryInfo = this._dictionaries.get(dictionary);
             if (typeof dictionaryInfo === 'undefined') { continue; }
 
-            this._updateElement(element);
+            if (dictionaryInfo.force) {
-            this._elements.push(element);
+                element.classList.add('collapsible', 'collapsible-forced');
+            } else {
+                this._updateElement(element);
+                this._elements.push(element);
+            }
 
             if (dictionaryInfo.collapsed) {
                 element.classList.add('collapsed');
@@ -67,18 +80,15 @@ class ElementOverflowController {
             if (button !== null) {
                 this._eventListeners.addEventListener(button, 'click', this._onToggleButtonClickBind, false);
             }
-
-            any = true;
         }
 
-        if (any && this._windowEventListeners.size === 0) {
+        if (this._elements.length > 0 && this._windowEventListeners.size === 0) {
             this._windowEventListeners.addEventListener(window, 'resize', this._onWindowResizeBind, false);
         }
     }
 
     clearElements() {
-        if (this._elements.length === 0) { return; }
+        this._elements.length = 0;
-        this._elements = [];
         this._windowEventListeners.removeAllEventListeners();
     }
 

ext/settings.html

@@ -2440,6 +2440,14 @@
             </div>
         </div>
     </div>
+    <div class="modal-body-addon">
+        <p>
+            Dictionary definitions can be collapsed if they exceed a certain line count,
+            which may be useful for dictionaries with long definitions.
+            The appearance can be customized using custom CSS.
+            <a tabindex="0" data-modal-action="show,collapsible-dictionaries-info">More&hellip;</a>
+        </p>
+    </div>
     <div class="modal-body">
         <div id="collapsible-dictionary-list" class="collapsible-dictionary-list"></div>
     </div>
@@ -2448,6 +2456,75 @@
     </div>
 </div></div>
 
+<div id="collapsible-dictionaries-info-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
+    <div class="modal-header">
+        <div class="modal-title">Collapsible Dictionary Info</div>
+        <div class="modal-header-button-container">
+            <div class="modal-header-button-group">
+                <button class="icon-button modal-header-button" data-modal-action="expand"><span class="icon-button-inner"><span class="icon" data-icon="expand"></span></span></button>
+                <button class="icon-button modal-header-button" data-modal-action="collapse"><span class="icon-button-inner"><span class="icon" data-icon="collapse"></span></span></button>
+            </div>
+        </div>
+    </div>
+    <div class="modal-body">
+        <p>
+            Dictionary definitions can be collapsed if they exceed a certain line count,
+            which may be useful for dictionaries with long definitions.
+            There are five different modes:
+        </p>
+        <ul>
+            <li>
+                <strong>Not collapsible</strong> -
+                Definitions will not be collapsed.
+            </li>
+            <li>
+                <strong>Collapsed</strong> -
+                Definitions will show a collapse button if their size exceeds the max height,
+                and they will be collapsed by default.
+            </li>
+            <li>
+                <strong>Expanded</strong> -
+                Definitions will show a collapse button if their size exceeds the max height,
+                and they will be expanded by default.
+            </li>
+            <li>
+                <strong>Force collapsed</strong> -
+                Definitions will always show a collapse button,
+                and they will be collapsed by default.
+            </li>
+            <li>
+                <strong>Force expanded</strong> -
+                Definitions will always show a collapse button,
+                and they will be expanded by default.
+            </li>
+        </ul>
+        <p>
+            By default, the number of lines shown for a definition is 3.
+            This can be configured by adjusting the <a tabindex="0" data-modal-action="show,custom-css">custom CSS</a>;
+            the value can be a unitless integer or decimal number.
+        </p>
+        <div class="code margin-above">/* Globally set the line count */
+:root {
+    --collapsible-definition-line-count: 2;
+}
+
+/* Set the line count for a specific dictionary */
+.definition-item[data-dictionary='JMdict'] {
+    --collapsible-definition-line-count: 2;
+}
+
+/* Spoiler-like functionality, use with <em>Force collapsed</em> mode */
+.definition-item[data-dictionary='JMdict'] .definition-item-inner.collapsible.collapsed {
+    color: #000000;
+    background-color: #000000;
+}
+</div>
+    </div>
+    <div class="modal-footer">
+        <button data-modal-action="hide">Close</button>
+    </div>
+</div></div>
+
 <div id="dictionary-details-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
     <div class="modal-header">
         <div class="modal-title"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></div>
@@ -2580,6 +2657,8 @@
             <option value="not-collapsible">Not collapsible</option>
             <option value="collapsed">Collapsed</option>
             <option value="expanded">Expanded</option>
+            <option value="force-collapsed">Force collapsed</option>
+            <option value="force-expanded">Force expanded</option>
         </select>
     </div>
 </div></template>
@@ -2599,9 +2678,9 @@
         </div>
         <div class="modal-body custom-popup-css-container">
             <div class="custom-popup-css-header">Popup CSS</div>
-            <textarea autocomplete="off" spellcheck="false" id="custom-popup-css" data-setting="general.customPopupCss" data-tab-action="indent,4"></textarea>
+            <textarea class="no-wrap" autocomplete="off" spellcheck="false" id="custom-popup-css" data-setting="general.customPopupCss" data-tab-action="indent,4"></textarea>
             <div class="custom-popup-css-header margin-above">Popup outer CSS</div>
-            <textarea autocomplete="off" spellcheck="false" id="custom-popup-outer-css" data-setting="general.customPopupOuterCss" data-tab-action="indent,4"></textarea>
+            <textarea class="no-wrap" autocomplete="off" spellcheck="false" id="custom-popup-outer-css" data-setting="general.customPopupOuterCss" data-tab-action="indent,4"></textarea>
         </div>
         <div class="modal-footer">
             <button data-modal-action="hide">Close</button>
@@ -3201,8 +3280,8 @@
                 Consider copy-pasting the source into a code editor that supports syntax highlighting for easier editing.
             </p>
         </div>
-        <textarea autocomplete="off" spellcheck="false" id="anki-card-templates-textarea" class="margin-above" data-tab-action="indent,4"></textarea>
+        <textarea autocomplete="off" spellcheck="false" id="anki-card-templates-textarea" class="no-wrap margin-above" data-tab-action="indent,4"></textarea>
-        <div id="anki-card-templates-compile-result" class="danger-text margin-above" hidden></div>
+        <div id="anki-card-templates-compile-result" class="code danger-text margin-above" hidden></div>
         <div class="anki-card-templates-test-container margin-above">
             <p>
                 Card templates can be tested using the inputs below.
@@ -3219,7 +3298,7 @@
                 <button id="anki-card-templates-test-render-button">Test</button>
             </div>
         </div>
-        <div class="margin-above" id="anki-card-templates-render-result"><em>Card render result</em></div>
+        <div class="code margin-above" id="anki-card-templates-render-result"><em>Card render result</em></div>
     </div>
     <div class="modal-footer">
         <button class="danger" id="anki-card-templates-reset-button">Reset Templates</button>