add clipboard monitor to search page

Related to issue #262 about APIs
This commit is contained in:
siikamiika 2019-10-26 18:15:28 +03:00
parent bebd70b4e2
commit 704864b7b2
3 changed files with 52 additions and 2 deletions

View File

@ -29,8 +29,13 @@ class DisplaySearch extends Display {
this.search = document.querySelector('#search'); this.search = document.querySelector('#search');
this.query = document.querySelector('#query'); this.query = document.querySelector('#query');
this.intro = document.querySelector('#intro'); this.intro = document.querySelector('#intro');
this.clipboardMonitorCheck = document.querySelector('#clipboard-monitor');
this.introVisible = true; this.introVisible = true;
this.introAnimationTimer = null; this.introAnimationTimer = null;
this.clipboardMonitorIntervalId = null;
this.clipboardPrevText = null;
} }
static create() { static create() {
@ -57,10 +62,20 @@ class DisplaySearch extends Display {
window.wanakana.bind(this.query); 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)); window.addEventListener('popstate', (e) => this.onPopState(e));
this.updateSearchButton(); this.updateSearchButton();
this.initClipboardMonitor();
} catch (e) { } catch (e) {
this.onError(e); this.onError(e);
} }
@ -93,7 +108,9 @@ class DisplaySearch extends Display {
return; return;
} }
if (e) {
e.preventDefault(); e.preventDefault();
}
const query = this.query.value; const query = this.query.value;
const queryString = query.length > 0 ? `?query=${encodeURIComponent(query)}` : ''; 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() { getOptionsContext() {
return this.optionsContext; return this.optionsContext;
} }

View File

@ -19,7 +19,14 @@
<p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p> <p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
</div> </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> <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus>
<span class="input-group-btn"> <span class="input-group-btn">
<input type="submit" class="btn btn-default form-control" id="search" value="Search"> <input type="submit" class="btn btn-default form-control" id="search" value="Search">

View File

@ -41,6 +41,7 @@
"permissions": [ "permissions": [
"<all_urls>", "<all_urls>",
"storage", "storage",
"clipboardRead",
"clipboardWrite", "clipboardWrite",
"unlimitedStorage" "unlimitedStorage"
], ],