summaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-10-09 17:06:51 -0400
committerGitHub <noreply@github.com>2021-10-09 17:06:51 -0400
commit0a8992d21550dff1176820d434b5dd7e4f233749 (patch)
tree70f06b7add2971a7bd3c41f5a63327a9040fba3f /ext
parent0e4b769390ec88e609e862776dff2601227baaa5 (diff)
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
Diffstat (limited to 'ext')
-rw-r--r--ext/js/display/display-history.js7
-rw-r--r--ext/js/display/display.js4
-rw-r--r--ext/js/display/search-display-controller.js21
-rw-r--r--ext/search.html1
4 files changed, 21 insertions, 12 deletions
diff --git a/ext/js/display/display-history.js b/ext/js/display/display-history.js
index 449bec47..901a2d84 100644
--- a/ext/js/display/display-history.js
+++ b/ext/js/display/display-history.js
@@ -92,11 +92,6 @@ class DisplayHistory extends EventDispatcher {
}
_go(forward) {
- const target = forward ? this._current.next : this._current.previous;
- if (target === null) {
- return false;
- }
-
if (this._useBrowserHistory) {
if (forward) {
history.forward();
@@ -104,6 +99,8 @@ class DisplayHistory extends EventDispatcher {
history.back();
}
} else {
+ const target = forward ? this._current.next : this._current.previous;
+ if (target === null) { return false; }
this._current = target;
this._updateHistoryFromCurrent(true);
}
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index ed1af17e..ed708b3a 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -1538,9 +1538,7 @@ class Display extends EventDispatcher {
}
_triggerContentUpdateStart() {
- let {content} = this._history;
- if (typeof content !== 'object' || content === null) { content = {}; }
- this.trigger('contentUpdateStart', {type: this._contentType, query: this._query, content});
+ this.trigger('contentUpdateStart', {type: this._contentType, query: this._query});
}
_triggerContentUpdateEntry(dictionaryEntry, element, index) {
diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
index 2b97479e..c929ceaa 100644
--- a/ext/js/display/search-display-controller.js
+++ b/ext/js/display/search-display-controller.js
@@ -28,6 +28,7 @@ class SearchDisplayController {
this._displayAudio = displayAudio;
this._searchPersistentStateController = searchPersistentStateController;
this._searchButton = document.querySelector('#search-button');
+ this._searchBackButton = document.querySelector('#search-back-button');
this._queryInput = document.querySelector('#search-textbox');
this._introElement = document.querySelector('#intro');
this._clipboardMonitorEnableCheckbox = document.querySelector('#clipboard-monitor-enable');
@@ -75,6 +76,7 @@ class SearchDisplayController {
this._display.setHistorySettings({useBrowserHistory: true});
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));
window.addEventListener('copy', this._onCopy.bind(this));
this._clipboardMonitor.on('change', this._onExternalSearchUpdate.bind(this));
@@ -146,15 +148,20 @@ class SearchDisplayController {
this._setWanakanaEnabled(enableWanakana);
}
- _onContentUpdateStart({type, query, content}) {
+ _onContentUpdateStart({type, query}) {
let animate = false;
let valid = false;
+ let showBackButton = false;
switch (type) {
case 'terms':
case 'kanji':
- animate = !!content.animate;
- valid = (typeof query === 'string' && query.length > 0);
- this._display.blurElement(this._queryInput);
+ {
+ 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);
+ this._display.blurElement(this._queryInput);
+ }
break;
case 'clear':
valid = false;
@@ -165,6 +172,8 @@ class SearchDisplayController {
if (typeof query !== 'string') { query = ''; }
+ this._searchBackButton.hidden = !showBackButton;
+
if (this._queryInput.value !== query) {
this._queryInput.value = query;
this._updateSearchHeight(true);
@@ -193,6 +202,10 @@ class SearchDisplayController {
this._search(true, 'new', true, null);
}
+ _onSearchBackButtonClick() {
+ this._display.history.back();
+ }
+
_onCopy() {
// ignore copy from search page
this._clipboardMonitor.setPreviousText(window.getSelection().toString().trim());
diff --git a/ext/search.html b/ext/search.html
index 03ee781f..e435e657 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -50,6 +50,7 @@
</div>
<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>
+ <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>
</div>
</div>