aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorsiikamiika <siikamiika@users.noreply.github.com>2019-10-26 18:15:28 +0300
committersiikamiika <siikamiika@users.noreply.github.com>2019-10-26 18:15:28 +0300
commit704864b7b2365de488150c947d50e27c97d3bc4c (patch)
treed1459df06a358937658af7a9ab131d3597742b75
parentbebd70b4e2d8da54b556b488d68a5111f3ff20c1 (diff)
add clipboard monitor to search page
Related to issue #262 about APIs
-rw-r--r--ext/bg/js/search.js44
-rw-r--r--ext/bg/search.html9
-rw-r--r--ext/manifest.json1
3 files changed, 52 insertions, 2 deletions
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index d66e68b8..2d130522 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -29,8 +29,13 @@ class DisplaySearch extends Display {
this.search = document.querySelector('#search');
this.query = document.querySelector('#query');
this.intro = document.querySelector('#intro');
+ this.clipboardMonitorCheck = document.querySelector('#clipboard-monitor');
+
this.introVisible = true;
this.introAnimationTimer = null;
+
+ this.clipboardMonitorIntervalId = null;
+ this.clipboardPrevText = null;
}
static create() {
@@ -57,10 +62,20 @@ class DisplaySearch extends Display {
window.wanakana.bind(this.query);
}
+ if (this.clipboardMonitorCheck !== null) {
+ this.clipboardMonitorCheck.addEventListener('change', (e) => {
+ if (e.target.checked) {
+ this.startClipboardMonitor();
+ } else {
+ this.stopClipboardMonitor();
+ }
+ });
+ }
window.addEventListener('popstate', (e) => this.onPopState(e));
this.updateSearchButton();
+ this.initClipboardMonitor();
} catch (e) {
this.onError(e);
}
@@ -93,7 +108,9 @@ class DisplaySearch extends Display {
return;
}
- e.preventDefault();
+ if (e) {
+ e.preventDefault();
+ }
const query = this.query.value;
const queryString = query.length > 0 ? `?query=${encodeURIComponent(query)}` : '';
@@ -182,6 +199,31 @@ class DisplaySearch extends Display {
}
}
+ initClipboardMonitor() {
+ // ignore copy from search page
+ window.addEventListener('copy', (e) => {
+ this.clipboardPrevText = document.getSelection().toString().trim();
+ });
+ }
+
+ startClipboardMonitor() {
+ this.clipboardMonitorIntervalId = setInterval(async () => {
+ const curText = (await navigator.clipboard.readText()).trim();
+ if (curText && (curText !== this.clipboardPrevText)) {
+ this.query.value = curText;
+ this.onSearch();
+ this.clipboardPrevText = curText;
+ }
+ }, 100);
+ }
+
+ stopClipboardMonitor() {
+ if (this.clipboardMonitorIntervalId) {
+ clearInterval(this.clipboardMonitorIntervalId);
+ this.clipboardMonitorIntervalId = null;
+ }
+ }
+
getOptionsContext() {
return this.optionsContext;
}
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 9d28b358..1e650be0 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -19,7 +19,14 @@
<p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
</div>
- <form class="input-group" style="padding-top: 10px;">
+ <div class="input-group" style="padding-top: 10px; font-size: 20px;">
+ <span title="Enable clipboard monitor" class="input-group-text">
+ <label for="clipboard-monitor"><span class="glyphicon glyphicon-paste"></span></label>
+ <input type="checkbox" id="clipboard-monitor" />
+ </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">
diff --git a/ext/manifest.json b/ext/manifest.json
index e913c2b0..2b7fc105 100644
--- a/ext/manifest.json
+++ b/ext/manifest.json
@@ -41,6 +41,7 @@
"permissions": [
"<all_urls>",
"storage",
+ "clipboardRead",
"clipboardWrite",
"unlimitedStorage"
],