aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/bg/js/query-parser.js31
-rw-r--r--ext/bg/search.html2
-rw-r--r--ext/mixed/css/display.css31
-rw-r--r--ext/mixed/css/search.css5
-rw-r--r--ext/mixed/js/display.js37
5 files changed, 61 insertions, 45 deletions
diff --git a/ext/bg/js/query-parser.js b/ext/bg/js/query-parser.js
index 3217316d..16af77b2 100644
--- a/ext/bg/js/query-parser.js
+++ b/ext/bg/js/query-parser.js
@@ -21,12 +21,13 @@
*/
class QueryParser extends EventDispatcher {
- constructor({getOptionsContext, progressIndicatorVisible, documentUtil}) {
+ constructor({getOptionsContext, documentUtil}) {
super();
this._getOptionsContext = getOptionsContext;
- this._progressIndicatorVisible = progressIndicatorVisible;
- this._selectedParser = null;
this._documentUtil = documentUtil;
+ this._text = '';
+ this._setTextToken = null;
+ this._selectedParser = null;
this._parseResults = [];
this._queryParser = document.querySelector('#query-parser-content');
this._queryParserModeContainer = document.querySelector('#query-parser-mode-container');
@@ -43,6 +44,10 @@ class QueryParser extends EventDispatcher {
});
}
+ get text() {
+ return this._text;
+ }
+
prepare() {
this._textScanner.prepare();
this._textScanner.on('searched', this._onSearched.bind(this));
@@ -63,18 +68,18 @@ class QueryParser extends EventDispatcher {
}
async setText(text) {
- const overrideToken = this._progressIndicatorVisible.setOverride(true);
- try {
- this._setPreview(text);
+ this._text = text;
+ this._setPreview(text);
- this._parseResults = await api.textParse(text, this._getOptionsContext());
- this._refreshSelectedParser();
+ const token = {};
+ this._setTextToken = token;
+ this._parseResults = await api.textParse(text, this._getOptionsContext());
+ if (this._setTextToken !== token) { return; }
- this._renderParserSelect();
- this._renderParseResult();
- } finally {
- this._progressIndicatorVisible.clearOverride(overrideToken);
- }
+ this._refreshSelectedParser();
+
+ this._renderParserSelect();
+ this._renderParseResult();
}
// Private
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 7ba479ba..caa9106f 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -47,7 +47,7 @@
</div>
</div>
- <div class="scan-disable" id="query-parser-container">
+ <div class="scan-disable" id="query-parser-container" hidden>
<div id="query-parser-content"></div>
</div>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 24d143fc..67017306 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -36,7 +36,11 @@
--spinner-size-no-units: 32;
--action-button-size-no-units: 16;
- --entry-padding: 0.72em;
+ --list-margin: 0.72em;
+ --main-content-vertical-padding: 0em;
+ --main-content-horizontal-padding: 0em;
+ --entry-horizontal-padding: 0.72em;
+ --entry-vertical-padding: 0.72em;
--sidebar-width-no-units: 40;
--sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units)));
@@ -178,7 +182,7 @@ body {
}
ol, ul {
margin-top: 0;
- margin-bottom: var(--entry-padding);
+ margin-bottom: var(--list-padding);
}
#spinner {
position: fixed;
@@ -245,6 +249,7 @@ a {
}
.content-body-inner {
width: 100%;
+ padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding);
}
@@ -371,22 +376,20 @@ button.sidebar-button.danger:hover .sidebar-button-icon {
/* Search page */
+#query-parser-container {
+ padding-left: var(--entry-horizontal-padding);
+ padding-right: var(--entry-horizontal-padding);
+ padding-bottom: 0.25em;
+ border-bottom: var(--expression-thin-border-size) solid var(--light-border-color);
+}
#query-parser-content {
margin-top: 0.5em;
font-size: var(--query-parser-font-size);
white-space: pre-wrap;
}
-#query-parser-content:not(:empty) {
- padding-bottom: 0.25em;
- border-bottom: var(--expression-thin-border-size) solid var(--light-border-color);
-}
#query-parser-content[data-term-spacing=true] .query-parser-term {
margin-right: 0.2em;
}
-:root[data-yomichan-page=float] #query-parser-container {
- padding-left: var(--entry-padding);
- padding-right: var(--entry-padding);
-}
/* Action buttons */
@@ -516,12 +519,8 @@ button.action-button {
/* Entries */
.entry {
- padding-top: var(--entry-padding);
- padding-bottom: var(--entry-padding);
-}
-:root[data-yomichan-page=float] .entry {
- padding-left: var(--entry-padding);
- padding-right: var(--entry-padding);
+ padding: var(--entry-vertical-padding) var(--entry-horizontal-padding);
+ position: relative;
}
.term-expression .kanji-link {
border-bottom: var(--expression-thin-border-size) dashed var(--dark-border-color);
diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css
index 997c089f..d9024172 100644
--- a/ext/mixed/css/search.css
+++ b/ext/mixed/css/search.css
@@ -17,9 +17,11 @@
/* Variables */
:root {
+ --main-content-horizontal-padding: 0.72em;
+ --entry-horizontal-padding: 0;
+
--padding: 10px;
--main-content-size: 700px;
- --main-content-padding: 10px;
--shadow-color: rgba(0, 0, 0, 0.185);
--shadow-vertical: 0 1px 4px 0 var(--shadow-color), 0 2px 2px 0 var(--shadow-color);
@@ -231,7 +233,6 @@ label.toggle {
/* Content layout */
.content-body-inner {
width: var(--main-content-size);
- padding: 0 var(--main-content-padding);
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 7068d424..715b3f3d 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -76,7 +76,6 @@ class Display extends EventDispatcher {
this._queryParserContainer = document.querySelector('#query-parser-container');
this._queryParser = new QueryParser({
getOptionsContext: this.getOptionsContext.bind(this),
- progressIndicatorVisible: this._progressIndicatorVisible,
documentUtil: this._documentUtil
});
this._mode = null;
@@ -154,7 +153,7 @@ class Display extends EventDispatcher {
set queryParserVisible(value) {
this._queryParserVisible = value;
- this._updateQueryParserVisibility();
+ this._updateQueryParser();
}
get mode() {
@@ -466,7 +465,7 @@ class Display extends EventDispatcher {
const fullVisible = urlSearchParams.get('full-visible');
this._queryParserVisibleOverride = (fullVisible === null ? null : (fullVisible !== 'false'));
- this._updateQueryParserVisibility();
+ this._updateQueryParser();
this._closePopups();
this._setEventListenersActive(false);
@@ -862,7 +861,7 @@ class Display extends EventDispatcher {
async _setContentTermsOrKanji(token, isTerms, urlSearchParams, eventArgs) {
let source = urlSearchParams.get('query');
if (!source) {
- this._setQueryParserText('');
+ this._setFullQuery('');
return false;
}
@@ -890,7 +889,7 @@ class Display extends EventDispatcher {
source = this.postProcessQuery(source);
let full = urlSearchParams.get('full');
full = (full === null ? source : this.postProcessQuery(full));
- this._setQueryParserText(full);
+ this._setFullQuery(full);
this._setTitleText(source);
let {definitions} = content;
@@ -990,11 +989,27 @@ class Display extends EventDispatcher {
}
}
- _setQueryParserText(text) {
- if (this._fullQuery === text) { return; }
+ _setFullQuery(text) {
this._fullQuery = text;
- if (!this._isQueryParserVisible()) { return; }
- this._queryParser.setText(text);
+ this._updateQueryParser();
+ }
+
+ _updateQueryParser() {
+ const text = this._fullQuery;
+ const visible = this._isQueryParserVisible();
+ this._queryParserContainer.hidden = !visible || text.length === 0;
+ if (visible && this._queryParser.text !== text) {
+ this._setQueryParserText(text);
+ }
+ }
+
+ async _setQueryParserText(text) {
+ const overrideToken = this._progressIndicatorVisible.setOverride(true);
+ try {
+ await this._queryParser.setText(text);
+ } finally {
+ this._progressIndicatorVisible.clearOverride(overrideToken);
+ }
}
_setTitleText(text) {
@@ -1366,10 +1381,6 @@ class Display extends EventDispatcher {
);
}
- _updateQueryParserVisibility() {
- this._queryParserContainer.hidden = !this._isQueryParserVisible();
- }
-
_closePopups() {
yomichan.trigger('closePopups');
}