summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorsiikamiika <siikamiika@users.noreply.github.com>2020-02-02 16:08:19 +0200
committersiikamiika <siikamiika@users.noreply.github.com>2020-02-09 21:51:33 +0200
commitc16c38638b4ce39f64add0d6e430a21e44d8ec01 (patch)
tree38bced13ba7e6fba514b8a63228e4f74cb25db30
parent8d56d6ffcb0f02e1edaf4193e182e95bfe7d22c5 (diff)
hide search input in native popups
-rw-r--r--ext/bg/js/backend.js6
-rw-r--r--ext/bg/js/search.js37
-rw-r--r--ext/bg/search.html34
-rw-r--r--ext/mixed/css/display.css4
4 files changed, 44 insertions, 37 deletions
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index a9f2385b..bdb8a76a 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -603,8 +603,10 @@ class Backend {
const {popupWidth, popupHeight} = options.general;
const baseUrl = chrome.runtime.getURL('/bg/search.html');
- const queryString = (query && query.length > 0) ? `?query=${encodeURIComponent(query)}` : '';
- const url = baseUrl + queryString;
+ const queryParams = {mode};
+ if (query && query.length > 0) { queryParams.query = query; }
+ const queryString = new URLSearchParams(queryParams).toString();
+ const url = `${baseUrl}?${queryString}`;
switch (mode) {
case 'sameTab':
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index e32ba46e..ea4ab235 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -53,6 +53,8 @@ class DisplaySearch extends Display {
this.search.addEventListener('click', (e) => this.onSearch(e), false);
}
if (this.query !== null) {
+ const {query='', mode=''} = DisplaySearch.parseQueryStringFromLocation(window.location.href);
+ document.documentElement.dataset.searchMode = mode;
this.query.addEventListener('input', () => this.onSearchInput(), false);
if (this.wanakanaEnable !== null) {
@@ -63,7 +65,6 @@ class DisplaySearch extends Display {
this.wanakanaEnable.checked = false;
}
this.wanakanaEnable.addEventListener('change', (e) => {
- const query = DisplaySearch.getSearchQueryFromLocation(window.location.href) || '';
if (e.target.checked) {
window.wanakana.bind(this.query);
this.setQuery(window.wanakana.toKana(query));
@@ -77,15 +78,12 @@ class DisplaySearch extends Display {
});
}
- const query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
- if (query !== null) {
- if (this.isWanakanaEnabled()) {
- this.setQuery(window.wanakana.toKana(query));
- } else {
- this.setQuery(query);
- }
- this.onSearchQueryUpdated(this.query.value, false);
+ if (this.isWanakanaEnabled()) {
+ this.setQuery(window.wanakana.toKana(query));
+ } else {
+ this.setQuery(query);
}
+ this.onSearchQueryUpdated(this.query.value, false);
}
if (this.clipboardMonitorEnable !== null) {
if (this.options.general.enableClipboardMonitor === true) {
@@ -162,13 +160,12 @@ class DisplaySearch extends Display {
}
onPopState() {
- const query = DisplaySearch.getSearchQueryFromLocation(window.location.href) || '';
- if (this.query !== null) {
- if (this.isWanakanaEnabled()) {
- this.setQuery(window.wanakana.toKana(query));
- } else {
- this.setQuery(query);
- }
+ const {query='', mode=''} = DisplaySearch.parseQueryStringFromLocation(window.location.href);
+ document.documentElement.dataset.searchMode = mode;
+ if (this.isWanakanaEnabled()) {
+ this.setQuery(window.wanakana.toKana(query));
+ } else {
+ this.setQuery(query);
}
this.onSearchQueryUpdated(this.query.value, false);
@@ -334,9 +331,11 @@ class DisplaySearch extends Display {
}
}
- static getSearchQueryFromLocation(url) {
- const match = /^[^?#]*\?(?:[^&#]*&)?query=([^&#]*)/.exec(url);
- return match !== null ? decodeURIComponent(match[1]) : null;
+ static parseQueryStringFromLocation(url) {
+ const parsedUrl = new URL(url);
+ const parsedSearch = new URLSearchParams(parsedUrl.search);
+ return Array.from(parsedSearch.entries())
+ .reduce((a, [k, v]) => Object.assign({}, a, {[k]: v}), {});
}
}
diff --git a/ext/bg/search.html b/ext/bg/search.html
index bb555e92..10e5aa8e 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -25,23 +25,25 @@
<p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
</div>
- <div class="input-group" style="padding-top: 20px;">
- <span title="Enable kana input method" class="input-group-text">
- <input type="checkbox" id="wanakana-enable" class="icon-checkbox" />
- <label for="wanakana-enable" class="scan-disable">あ</label>
- </span>
- <span title="Enable clipboard monitor" class="input-group-text">
- <input type="checkbox" id="clipboard-monitor-enable" class="icon-checkbox" />
- <label for="clipboard-monitor-enable"><span class="glyphicon glyphicon-paste"></span></label>
- </span>
- </div>
+ <div class="search-input">
+ <div class="input-group" style="padding-top: 20px;">
+ <span title="Enable kana input method" class="input-group-text">
+ <input type="checkbox" id="wanakana-enable" class="icon-checkbox" />
+ <label for="wanakana-enable" class="scan-disable">あ</label>
+ </span>
+ <span title="Enable clipboard monitor" class="input-group-text">
+ <input type="checkbox" id="clipboard-monitor-enable" class="icon-checkbox" />
+ <label for="clipboard-monitor-enable"><span class="glyphicon glyphicon-paste"></span></label>
+ </span>
+ </div>
- <form class="input-group">
- <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus>
- <span class="input-group-btn">
- <input type="submit" class="btn btn-default form-control" id="search" value="Search">
- </span>
- </form>
+ <form class="input-group">
+ <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus>
+ <span class="input-group-btn">
+ <input type="submit" class="btn btn-default form-control" id="search" value="Search">
+ </span>
+ </form>
+ </div>
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 3a66cec3..62e62243 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -136,6 +136,10 @@ html:root[data-yomichan-page=float] .navigation-header:not([hidden])~.navigation
margin-right: 0.2em;
}
+html:root[data-yomichan-page=search][data-search-mode=popup] .search-input {
+ display: none;
+}
+
/*
* Entries