Search query back button (#1981)

* Always allow history to go back/forward when using browser history

* Add a back button which is visible when using the query parser
This commit is contained in:
toasted-nutbread 2021-10-09 17:06:51 -04:00 committed by GitHub
parent 0e4b769390
commit 0a8992d215
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 12 deletions

View File

@ -92,11 +92,6 @@ class DisplayHistory extends EventDispatcher {
} }
_go(forward) { _go(forward) {
const target = forward ? this._current.next : this._current.previous;
if (target === null) {
return false;
}
if (this._useBrowserHistory) { if (this._useBrowserHistory) {
if (forward) { if (forward) {
history.forward(); history.forward();
@ -104,6 +99,8 @@ class DisplayHistory extends EventDispatcher {
history.back(); history.back();
} }
} else { } else {
const target = forward ? this._current.next : this._current.previous;
if (target === null) { return false; }
this._current = target; this._current = target;
this._updateHistoryFromCurrent(true); this._updateHistoryFromCurrent(true);
} }

View File

@ -1538,9 +1538,7 @@ class Display extends EventDispatcher {
} }
_triggerContentUpdateStart() { _triggerContentUpdateStart() {
let {content} = this._history; this.trigger('contentUpdateStart', {type: this._contentType, query: this._query});
if (typeof content !== 'object' || content === null) { content = {}; }
this.trigger('contentUpdateStart', {type: this._contentType, query: this._query, content});
} }
_triggerContentUpdateEntry(dictionaryEntry, element, index) { _triggerContentUpdateEntry(dictionaryEntry, element, index) {

View File

@ -28,6 +28,7 @@ class SearchDisplayController {
this._displayAudio = displayAudio; this._displayAudio = displayAudio;
this._searchPersistentStateController = searchPersistentStateController; this._searchPersistentStateController = searchPersistentStateController;
this._searchButton = document.querySelector('#search-button'); this._searchButton = document.querySelector('#search-button');
this._searchBackButton = document.querySelector('#search-back-button');
this._queryInput = document.querySelector('#search-textbox'); this._queryInput = document.querySelector('#search-textbox');
this._introElement = document.querySelector('#intro'); this._introElement = document.querySelector('#intro');
this._clipboardMonitorEnableCheckbox = document.querySelector('#clipboard-monitor-enable'); this._clipboardMonitorEnableCheckbox = document.querySelector('#clipboard-monitor-enable');
@ -75,6 +76,7 @@ class SearchDisplayController {
this._display.setHistorySettings({useBrowserHistory: true}); this._display.setHistorySettings({useBrowserHistory: true});
this._searchButton.addEventListener('click', this._onSearch.bind(this), false); this._searchButton.addEventListener('click', this._onSearch.bind(this), false);
this._searchBackButton.addEventListener('click', this._onSearchBackButtonClick.bind(this), false);
this._wanakanaEnableCheckbox.addEventListener('change', this._onWanakanaEnableChange.bind(this)); this._wanakanaEnableCheckbox.addEventListener('change', this._onWanakanaEnableChange.bind(this));
window.addEventListener('copy', this._onCopy.bind(this)); window.addEventListener('copy', this._onCopy.bind(this));
this._clipboardMonitor.on('change', this._onExternalSearchUpdate.bind(this)); this._clipboardMonitor.on('change', this._onExternalSearchUpdate.bind(this));
@ -146,15 +148,20 @@ class SearchDisplayController {
this._setWanakanaEnabled(enableWanakana); this._setWanakanaEnabled(enableWanakana);
} }
_onContentUpdateStart({type, query, content}) { _onContentUpdateStart({type, query}) {
let animate = false; let animate = false;
let valid = false; let valid = false;
let showBackButton = false;
switch (type) { switch (type) {
case 'terms': case 'terms':
case 'kanji': case 'kanji':
animate = !!content.animate; {
const {content, state} = this._display.history;
animate = (typeof content === 'object' && content !== null && content.animate === true);
showBackButton = (typeof state === 'object' && state !== null && state.cause === 'queryParser');
valid = (typeof query === 'string' && query.length > 0); valid = (typeof query === 'string' && query.length > 0);
this._display.blurElement(this._queryInput); this._display.blurElement(this._queryInput);
}
break; break;
case 'clear': case 'clear':
valid = false; valid = false;
@ -165,6 +172,8 @@ class SearchDisplayController {
if (typeof query !== 'string') { query = ''; } if (typeof query !== 'string') { query = ''; }
this._searchBackButton.hidden = !showBackButton;
if (this._queryInput.value !== query) { if (this._queryInput.value !== query) {
this._queryInput.value = query; this._queryInput.value = query;
this._updateSearchHeight(true); this._updateSearchHeight(true);
@ -193,6 +202,10 @@ class SearchDisplayController {
this._search(true, 'new', true, null); this._search(true, 'new', true, null);
} }
_onSearchBackButtonClick() {
this._display.history.back();
}
_onCopy() { _onCopy() {
// ignore copy from search page // ignore copy from search page
this._clipboardMonitor.setPreviousText(window.getSelection().toString().trim()); this._clipboardMonitor.setPreviousText(window.getSelection().toString().trim());

View File

@ -50,6 +50,7 @@
</div> </div>
<div class="search-textbox-container"> <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> <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>
<button id="search-back-button" class="search-button" hidden><span class="icon" data-icon="left-chevron"></span></button>
<button id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button> <button id="search-button" class="search-button"><span class="icon" data-icon="magnifying-glass"></span></button>
</div> </div>
</div> </div>