add a toggle for sticky header

Ajatt-Tools · Jul 5, 2024 · 7f643b8 · 7f643b8
1 parent 6610ad7
commit 7f643b8
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 4 deletions.
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -577,6 +577,7 @@ button.sidebar-button.sidebar-button-highlight {
 
 /* Search page */
 .search-header-wrapper {
+    background-color: var(--background-color);
     width: 100%;
     display: flex;
     justify-content: center;
@@ -595,7 +596,6 @@ button.sidebar-button.sidebar-button-highlight {
     padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
 }
 #query-parser-container {
-    overflow-y: auto;
     padding-left: var(--entry-horizontal-padding);
     padding-right: var(--entry-horizontal-padding);
     padding-bottom: 0.25em;
@@ -605,12 +605,19 @@ button.sidebar-button.sidebar-button-highlight {
     margin-top: 0.5em;
     font-size: var(--query-parser-font-size);
     white-space: pre-wrap;
-    max-height: calc(var(--query-parser-font-size) * 2);
 }
 #query-parser-content[data-term-spacing=true] .query-parser-term {
     margin-right: 0.2em;
 }
 
+.sticky-header {
+    #query-parser-container  {
+        overflow-y: auto;
+    }
+    #query-parser-content {
+        max-height: calc(var(--query-parser-font-size) * 2);
+    }
+}
 
 /* Action buttons */
 .actions {

diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json
@@ -319,7 +319,8 @@
                                     "useLeft",
                                     "useTop",
                                     "windowType",
-                                    "windowState"
+                                    "windowState",
+                                    "searchStickyHeader"
                                 ],
                                 "properties": {
                                     "width": {
@@ -357,6 +358,10 @@
                                         "type": "string",
                                         "enum": ["normal", "maximized", "fullscreen"],
                                         "default": "normal"
+                                    },
+                                    "searchStickyHeader": {
+                                        "type": "boolean",
+                                        "default": true
                                     }
                                 }
                             },

diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
@@ -835,6 +835,7 @@ export class OptionsUtil {
                 useTop: false,
                 windowType: 'popup',
                 windowState: 'normal',
+                searchStickyHeader: true,
             };
             profile.options.audio.customSourceType = 'audio';
             profile.options.clipboard = {

diff --git a/ext/js/display/display.js b/ext/js/display/display.js
@@ -426,6 +426,18 @@ export class Display extends EventDispatcher {
         await this.updateOptions();
     }
 
+    /**
+     * @throws {Error}
+     * @returns {boolean}
+     */
+    searchStickyHeader() {
+        if (this._options) {
+            return Boolean(this._options.popupWindow.searchStickyHeader);
+        } else {
+            throw new Error('options should be initialized.');
+        }
+    }
+
     /** */
     async updateOptions() {
         const options = await this._application.api.optionsGet(this.getOptionsContext());

diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
@@ -20,6 +20,7 @@ import * as wanakana from '../../lib/wanakana.js';
 import {ClipboardMonitor} from '../comm/clipboard-monitor.js';
 import {createApiMap, invokeApiMapHandler} from '../core/api-map.js';
 import {EventListenerCollection} from '../core/event-listener-collection.js';
+import {log} from '../core/log.js';
 import {querySelectorNotNull} from '../dom/query-selector.js';
 
 export class SearchDisplayController {
@@ -113,6 +114,14 @@ export class SearchDisplayController {
         if (displayOptions !== null) {
             await this._onDisplayOptionsUpdated({options: displayOptions});
         }
+
+        try {
+            if (this._display.searchStickyHeader()) {
+                querySelectorNotNull(document, '#sticky_header').classList.add('sticky-header');
+            }
+        } catch (e) {
+            log.error(e);
+        }
     }
 
     /**

diff --git a/ext/search.html b/ext/search.html
@@ -55,7 +55,7 @@ <h1>Rikaitan Search</h1>
                     </div>
                 </div>
             </div>
-            <div class="search-header-wrapper sticky-header">
+            <div class="search-header-wrapper" id="sticky_header">
                 <div class="search-header">
                     <div class="search-textbox-container">
                         <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>

diff --git a/ext/settings.html b/ext/settings.html
@@ -1349,6 +1349,15 @@ <h1>Rikaitan Settings</h1>
                 </div>
             </div>
         </div></div>
+        <div class="settings-item"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Sticky search header</div>
+                <div class="settings-item-description">Search header sticks to the top of the window.</div>
+            </div>
+            <div class="settings-item-right">
+                <label class="toggle"><input type="checkbox" data-setting="popupWindow.searchStickyHeader"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+            </div>
+        </div></div>
     </div>
 
     <!-- Audio -->

diff --git a/types/ext/settings.d.ts b/types/ext/settings.d.ts
@@ -153,6 +153,7 @@ export type PopupWindowOptions = {
     useTop: boolean;
     windowType: PopupWindowType;
     windowState: PopupWindowState;
+    searchStickyHeader: boolean;
 };
 
 export type AudioOptions = {