Collapsible dictionary updates (#2170)

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

* Simplify "any" check

* Update style

* Add help modal for collapsible dictionaries

* Disable wrapping

1 files changed, 19 insertions, 9 deletions

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();
     }