Collapsible dictionary updates (#2170)
* Add "force collapsed" and "force expanded" options * Simplify "any" check * Update style * Add help modal for collapsible dictionaries * Disable wrapping
This commit is contained in:
parent
19bba07a8b
commit
aa5e13b441
@ -807,6 +807,10 @@ input[type=number].code,
|
|||||||
input[type=password].code {
|
input[type=password].code {
|
||||||
font-family: 'Courier New', Courier, monospace;
|
font-family: 'Courier New', Courier, monospace;
|
||||||
}
|
}
|
||||||
|
textarea.no-wrap {
|
||||||
|
white-space: pre;
|
||||||
|
overflow-wrap: normal;
|
||||||
|
}
|
||||||
|
|
||||||
/* Input groups */
|
/* Input groups */
|
||||||
.input-group {
|
.input-group {
|
||||||
|
@ -1628,8 +1628,8 @@ code.anki-field-marker {
|
|||||||
resize: none;
|
resize: none;
|
||||||
min-height: calc(var(--textarea-line-height) * 5 + var(--textarea-padding) * 2);
|
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;
|
flex: 0 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
@ -791,7 +791,7 @@
|
|||||||
},
|
},
|
||||||
"definitionsCollapsible": {
|
"definitionsCollapsible": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"enum": ["not-collapsible", "expanded", "collapsed"],
|
"enum": ["not-collapsible", "expanded", "collapsed", "force-collapsed", "force-expanded"],
|
||||||
"default": "not-collapsible"
|
"default": "not-collapsible"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -32,6 +32,7 @@ class ElementOverflowController {
|
|||||||
for (const {name, definitionsCollapsible} of options.dictionaries) {
|
for (const {name, definitionsCollapsible} of options.dictionaries) {
|
||||||
let collapsible = false;
|
let collapsible = false;
|
||||||
let collapsed = false;
|
let collapsed = false;
|
||||||
|
let force = false;
|
||||||
switch (definitionsCollapsible) {
|
switch (definitionsCollapsible) {
|
||||||
case 'expanded':
|
case 'expanded':
|
||||||
collapsible = true;
|
collapsible = true;
|
||||||
@ -40,9 +41,18 @@ class ElementOverflowController {
|
|||||||
collapsible = true;
|
collapsible = true;
|
||||||
collapsed = true;
|
collapsed = true;
|
||||||
break;
|
break;
|
||||||
|
case 'force-expanded':
|
||||||
|
collapsible = true;
|
||||||
|
force = true;
|
||||||
|
break;
|
||||||
|
case 'force-collapsed':
|
||||||
|
collapsible = true;
|
||||||
|
collapsed = true;
|
||||||
|
force = true;
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
if (!collapsible) { continue; }
|
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; }
|
if (this._dictionaries.size === 0) { return; }
|
||||||
|
|
||||||
const elements = entry.querySelectorAll('.definition-item-inner');
|
const elements = entry.querySelectorAll('.definition-item-inner');
|
||||||
let any = false;
|
|
||||||
for (const element of elements) {
|
for (const element of elements) {
|
||||||
const {dictionary} = element.parentNode.dataset;
|
const {dictionary} = element.parentNode.dataset;
|
||||||
const dictionaryInfo = this._dictionaries.get(dictionary);
|
const dictionaryInfo = this._dictionaries.get(dictionary);
|
||||||
if (typeof dictionaryInfo === 'undefined') { continue; }
|
if (typeof dictionaryInfo === 'undefined') { continue; }
|
||||||
|
|
||||||
|
if (dictionaryInfo.force) {
|
||||||
|
element.classList.add('collapsible', 'collapsible-forced');
|
||||||
|
} else {
|
||||||
this._updateElement(element);
|
this._updateElement(element);
|
||||||
this._elements.push(element);
|
this._elements.push(element);
|
||||||
|
}
|
||||||
|
|
||||||
if (dictionaryInfo.collapsed) {
|
if (dictionaryInfo.collapsed) {
|
||||||
element.classList.add('collapsed');
|
element.classList.add('collapsed');
|
||||||
@ -67,18 +80,15 @@ class ElementOverflowController {
|
|||||||
if (button !== null) {
|
if (button !== null) {
|
||||||
this._eventListeners.addEventListener(button, 'click', this._onToggleButtonClickBind, false);
|
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);
|
this._windowEventListeners.addEventListener(window, 'resize', this._onWindowResizeBind, false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
clearElements() {
|
clearElements() {
|
||||||
if (this._elements.length === 0) { return; }
|
this._elements.length = 0;
|
||||||
this._elements = [];
|
|
||||||
this._windowEventListeners.removeAllEventListeners();
|
this._windowEventListeners.removeAllEventListeners();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2440,6 +2440,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 class="modal-body">
|
||||||
<div id="collapsible-dictionary-list" class="collapsible-dictionary-list"></div>
|
<div id="collapsible-dictionary-list" class="collapsible-dictionary-list"></div>
|
||||||
</div>
|
</div>
|
||||||
@ -2448,6 +2456,75 @@
|
|||||||
</div>
|
</div>
|
||||||
</div></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 id="dictionary-details-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<div class="modal-title"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></div>
|
<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="not-collapsible">Not collapsible</option>
|
||||||
<option value="collapsed">Collapsed</option>
|
<option value="collapsed">Collapsed</option>
|
||||||
<option value="expanded">Expanded</option>
|
<option value="expanded">Expanded</option>
|
||||||
|
<option value="force-collapsed">Force collapsed</option>
|
||||||
|
<option value="force-expanded">Force expanded</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div></template>
|
</div></template>
|
||||||
@ -2599,9 +2678,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="modal-body custom-popup-css-container">
|
<div class="modal-body custom-popup-css-container">
|
||||||
<div class="custom-popup-css-header">Popup CSS</div>
|
<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>
|
<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>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button data-modal-action="hide">Close</button>
|
<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.
|
Consider copy-pasting the source into a code editor that supports syntax highlighting for easier editing.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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">
|
<div class="anki-card-templates-test-container margin-above">
|
||||||
<p>
|
<p>
|
||||||
Card templates can be tested using the inputs below.
|
Card templates can be tested using the inputs below.
|
||||||
@ -3219,7 +3298,7 @@
|
|||||||
<button id="anki-card-templates-test-render-button">Test</button>
|
<button id="anki-card-templates-test-render-button">Test</button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button class="danger" id="anki-card-templates-reset-button">Reset Templates</button>
|
<button class="danger" id="anki-card-templates-reset-button">Reset Templates</button>
|
||||||
|
Loading…
Reference in New Issue
Block a user