Collapse entry will scroll back to top of entry (#1682)

* Collapse dictionary will scroll back to top of entry * refactor * remove redundant line
yomidevs · Dec 20, 2024 · 7372f27 · 7372f27
1 parent b39bd51
commit 7372f27
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
@@ -174,7 +174,7 @@ export class Display extends EventDispatcher {
         /** @type {OptionToggleHotkeyHandler} */
         this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this);
         /** @type {ElementOverflowController} */
-        this._elementOverflowController = new ElementOverflowController();
+        this._elementOverflowController = new ElementOverflowController(this);
         /** @type {boolean} */
         this._frameVisible = (pageType === 'search');
         /** @type {HTMLElement} */
@@ -381,6 +381,16 @@ export class Display extends EventDispatcher {
         }
     }
 
+    /**
+     * @param {Element} element
+     */
+    scrollUpToElementTop(element) {
+        const top = this._getElementTop(element);
+        if (this._windowScroll.y > top) {
+            this._windowScroll.toY(top);
+        }
+    }
+
     /**
      * @param {{clearable?: boolean, useBrowserHistory?: boolean}} details
      */

diff --git a/ext/js/display/element-overflow-controller.js b/ext/js/display/element-overflow-controller.js
@@ -19,7 +19,12 @@
 import {EventListenerCollection} from '../core/event-listener-collection.js';
 
 export class ElementOverflowController {
-    constructor() {
+    /**
+     * @param {import('./display.js').Display} display
+     */
+    constructor(display) {
+        /** @type {import('./display.js').Display} */
+        this._display = display;
         /** @type {Element[]} */
         this._elements = [];
         /** @type {?(number|import('core').Timeout)} */
@@ -141,7 +146,10 @@ export class ElementOverflowController {
         ];
         for (const collapsedElement of collapsedElements) {
             if (collapsedElement === null) { continue; }
-            collapsedElement.classList.toggle('collapsed');
+            const collapsed = collapsedElement.classList.toggle('collapsed');
+            if (collapsed) {
+                this._display.scrollUpToElementTop(element);
+            }
         }
     }