Skip to content

Commit

Permalink
Add option for sticky search header (#1188)
Browse files Browse the repository at this point in the history 
* Rename Window to Search Window

* Add stickySearchHeader option

* Fix tests
  • Loading branch information
@Kuuuube
Kuuuube authored Jul 9, 2024
1 parent d5336f1 commit 156ceba
Show file tree
Hide file tree
Showing 8 changed files with 57 additions and 9 deletions.
4 changes: 3 additions & 1 deletion ext/css/display.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
7 changes: 6 additions & 1 deletion ext/data/schemas/options-schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,8 @@
"frequencyDisplayMode",
"termDisplayMode",
"sortFrequencyDictionary",
"sortFrequencyDictionaryOrder"
"sortFrequencyDictionaryOrder",
"stickySearchHeader"
],
"properties": {
"enable": {
Expand Down Expand Up @@ -306,6 +307,10 @@
"type": "string",
"enum": ["ascending", "descending"],
"default": "descending"
},
"stickySearchHeader": {
"type": "boolean",
"default": false
}
}
},
Expand Down
11 changes: 11 additions & 0 deletions ext/js/data/options-util.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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<chrome.tabs.Tab>}
Expand Down
21 changes: 19 additions & 2 deletions ext/js/display/display.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} */
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
}
}
}
2 changes: 1 addition & 1 deletion ext/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ <h1>Yomitan Search</h1>
</div>
</div>
</div>
<div class="search-header-wrapper sticky-header">
<div class="search-header-wrapper" id="sticky-search-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>
Expand Down
17 changes: 14 additions & 3 deletions ext/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<a href="#!appearance" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="palette"></span></span><span class="outline-item-label">Appearance</span></a>
<a href="#!result-display" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="monitor"></span></span><span class="outline-item-label">Result Display</span></a>
<a href="#!popup-size" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="popup-size"></span></span><span class="outline-item-label">Position &amp; Size</span></a>
<a href="#!window" class="button outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="window"></span></span><span class="outline-item-label">Window</span></a>
<a href="#!window" class="button outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="window"></span></span><span class="outline-item-label">Search Window</span></a>
<a href="#!audio" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="speaker"></span></span><span class="outline-item-label">Audio</span></a>
<a href="#!text-parsing" class="button outline-item"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="text-parsing"></span></span><span class="outline-item-label">Text Parsing</span></a>
<a href="#!translation" class="button outline-item advanced-only"><span class="outline-item-left"><span class="outline-item-icon icon" data-icon="translation"></span></span><span class="outline-item-label">Translation</span></a>
Expand Down Expand Up @@ -1202,13 +1202,24 @@ <h1>Yomitan Settings</h1>
</div></div>
</div>

<!-- Window -->
<!-- Search Window -->
<div class="heading-container advanced-only">
<div class="heading-container-icon"><span class="icon" data-icon="window"></span></div>
<div class="heading-container-left"><h2 id="window"><a href="#!window">Window</a></h2></div>
<div class="heading-container-left"><h2 id="window"><a href="#!window">Search Window</a></h2></div>
<div class="heading-container-right"><a tabindex="0" class="heading-link-light" id="test-window-open-link">Open&hellip;</a></div>
</div>
<div class="settings-group advanced-only">
<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 stays on the page when scrolling down.</div>
</div>
<div class="settings-item-right">
<label class="toggle"><input type="checkbox" data-setting="general.stickySearchHeader"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div>
</div>
</div>
<div class="settings-item">
<div class="settings-item-inner">
<div class="settings-item-left">
Expand Down
3 changes: 2 additions & 1 deletion test/options-util.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@ function createProfileOptionsUpdatedTestData1() {
termDisplayMode: 'ruby',
sortFrequencyDictionary: null,
sortFrequencyDictionaryOrder: 'descending',
stickySearchHeader: false,
},
audio: {
enabled: true,
Expand Down Expand Up @@ -608,7 +609,7 @@ function createOptionsUpdatedTestData1() {
},
],
profileCurrent: 0,
version: 42,
version: 43,
global: {
database: {
prefixWildcardsSupported: false,
Expand Down
1 change: 1 addition & 0 deletions types/ext/settings.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@ export type GeneralOptions = {
termDisplayMode: TermDisplayMode;
sortFrequencyDictionary: string | null;
sortFrequencyDictionaryOrder: SortFrequencyDictionaryOrder;
stickySearchHeader: boolean;
};

export type PopupWindowOptions = {
Expand Down

0 comments on commit 156ceba

Please sign in to comment.