From 156ceba9c5b83e41df448e46875b859ef228d4c5 Mon Sep 17 00:00:00 2001 From: Kuuuube <61125188+Kuuuube@users.noreply.github.com> Date: Tue, 9 Jul 2024 10:36:08 -0400 Subject: [PATCH] Add option for sticky search header (#1188) * Rename Window to Search Window * Add stickySearchHeader option * Fix tests --- ext/css/display.css | 4 +++- ext/data/schemas/options-schema.json | 7 ++++++- ext/js/data/options-util.js | 11 +++++++++++ ext/js/display/display.js | 21 +++++++++++++++++++-- ext/search.html | 2 +- ext/settings.html | 17 ++++++++++++++--- test/options-util.test.js | 3 ++- types/ext/settings.d.ts | 1 + 8 files changed, 57 insertions(+), 9 deletions(-) diff --git a/ext/css/display.css b/ext/css/display.css index febcb62b5f..2446275095 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -588,6 +588,9 @@ button.sidebar-button.sidebar-button-highlight { z-index: 1000; padding-top: 10px; } +.sticky-header #query-parser-content { + max-height: calc(var(--query-parser-font-size) * 2); +} .search-header { width: var(--content-width); display: flex; @@ -606,7 +609,6 @@ 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; diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json index 85e02c021d..11565bbe0b 100644 --- a/ext/data/schemas/options-schema.json +++ b/ext/data/schemas/options-schema.json @@ -121,7 +121,8 @@ "frequencyDisplayMode", "termDisplayMode", "sortFrequencyDictionary", - "sortFrequencyDictionaryOrder" + "sortFrequencyDictionaryOrder", + "stickySearchHeader" ], "properties": { "enable": { @@ -306,6 +307,10 @@ "type": "string", "enum": ["ascending", "descending"], "default": "descending" + }, + "stickySearchHeader": { + "type": "boolean", + "default": false } } }, diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js index 850ac81d75..86b3f17cc8 100644 --- a/ext/js/data/options-util.js +++ b/ext/js/data/options-util.js @@ -551,6 +551,7 @@ export class OptionsUtil { this._updateVersion40, this._updateVersion41, this._updateVersion42, + this._updateVersion43, ]; /* eslint-enable @typescript-eslint/unbound-method */ if (typeof targetVersion === 'number' && targetVersion < result.length) { @@ -1360,6 +1361,16 @@ export class OptionsUtil { } } + /** + * - Added option for sticky search header. + * @type {import('options-util').UpdateFunction} + */ + _updateVersion43(options) { + for (const profile of options.profiles) { + profile.options.general.stickySearchHeader = false; + } + } + /** * @param {string} url * @returns {Promise} diff --git a/ext/js/display/display.js b/ext/js/display/display.js index 014063826c..6ab2c1f88a 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -98,6 +98,8 @@ export class Display extends EventDispatcher { this._historyHasChanged = false; /** @type {?Element} */ this._aboveStickyHeader = document.querySelector('#above-sticky-header'); + /** @type {?Element} */ + this._searchHeader = document.querySelector('#sticky-search-header'); /** @type {import('display').PageType} */ this._contentType = 'clear'; /** @type {string} */ @@ -435,6 +437,7 @@ export class Display extends EventDispatcher { this._updateHotkeys(options); this._updateDocumentOptions(options); this._setTheme(options); + this._setStickyHeader(options); this._hotkeyHelpController.setOptions(options); this._displayGenerator.updateHotkeys(); this._displayGenerator.updateLanguage(options.general.language); @@ -1548,8 +1551,13 @@ export class Display extends EventDispatcher { } let target = (index === 0 && definitionIndex <= 0) || node === null ? 0 : this._getElementTop(node); - if (this._aboveStickyHeader !== null && target !== 0) { - target += this._aboveStickyHeader.getBoundingClientRect().height; + if (target !== 0) { + if (this._aboveStickyHeader !== null) { + target += this._aboveStickyHeader.getBoundingClientRect().height; + } + if (!this._options?.general.stickySearchHeader && this._searchHeader) { + target += this._searchHeader.getBoundingClientRect().height; + } } this._windowScroll.stop(); @@ -2177,4 +2185,13 @@ export class Display extends EventDispatcher { _triggerContentUpdateComplete() { this.trigger('contentUpdateComplete', {type: this._contentType}); } + + /** + * @param {import('settings').ProfileOptions} options + */ + _setStickyHeader(options) { + if (this._searchHeader && options) { + this._searchHeader.classList.toggle('sticky-header', options.general.stickySearchHeader); + } + } } diff --git a/ext/search.html b/ext/search.html index 4324dad5fe..035d487032 100644 --- a/ext/search.html +++ b/ext/search.html @@ -55,7 +55,7 @@

Yomitan Search

-
+
diff --git a/ext/settings.html b/ext/settings.html index 0286a360b9..24754c19d8 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -31,7 +31,7 @@ Appearance Result Display Position & Size - Window + Search Window Audio Text Parsing Translation @@ -1202,13 +1202,24 @@

Yomitan Settings

- +
-

Window

+

Search Window

Open…
+
+
+
+
Sticky search header
+
Search header stays on the page when scrolling down.
+
+
+ +
+
+
diff --git a/test/options-util.test.js b/test/options-util.test.js index 60d44470f9..30674301f8 100644 --- a/test/options-util.test.js +++ b/test/options-util.test.js @@ -283,6 +283,7 @@ function createProfileOptionsUpdatedTestData1() { termDisplayMode: 'ruby', sortFrequencyDictionary: null, sortFrequencyDictionaryOrder: 'descending', + stickySearchHeader: false, }, audio: { enabled: true, @@ -608,7 +609,7 @@ function createOptionsUpdatedTestData1() { }, ], profileCurrent: 0, - version: 42, + version: 43, global: { database: { prefixWildcardsSupported: false, diff --git a/types/ext/settings.d.ts b/types/ext/settings.d.ts index b84942b174..cfc278eec5 100644 --- a/types/ext/settings.d.ts +++ b/types/ext/settings.d.ts @@ -142,6 +142,7 @@ export type GeneralOptions = { termDisplayMode: TermDisplayMode; sortFrequencyDictionary: string | null; sortFrequencyDictionaryOrder: SortFrequencyDictionaryOrder; + stickySearchHeader: boolean; }; export type PopupWindowOptions = {