diff options
| -rw-r--r-- | ext/css/material.css | 4 | ||||
| -rw-r--r-- | ext/css/settings.css | 4 | ||||
| -rw-r--r-- | ext/data/schemas/options-schema.json | 2 | ||||
| -rw-r--r-- | ext/js/display/element-overflow-controller.js | 28 | ||||
| -rw-r--r-- | ext/settings.html | 89 |
5 files changed, 110 insertions, 17 deletions
diff --git a/ext/css/material.css b/ext/css/material.css index 4d319349..6621df96 100644 --- a/ext/css/material.css +++ b/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 { diff --git a/ext/css/settings.css b/ext/css/settings.css index 62e979e0..dc8132be 100644 --- a/ext/css/settings.css +++ b/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%; diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json index 215ca32c..279be153 100644 --- a/ext/data/schemas/options-schema.json +++ b/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" } } diff --git a/ext/js/display/element-overflow-controller.js b/ext/js/display/element-overflow-controller.js index 0c6b3a71..04f26438 100644 --- a/ext/js/display/element-overflow-controller.js +++ b/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); - this._elements.push(element); + if (dictionaryInfo.force) { + 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 = []; + this._elements.length = 0; this._windowEventListeners.removeAllEventListeners(); } diff --git a/ext/settings.html b/ext/settings.html index 3284117f..64246fd6 100644 --- a/ext/settings.html +++ b/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…</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> - <div id="anki-card-templates-compile-result" class="danger-text margin-above" hidden></div> + <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="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> |