add button to enable/disable wanakana IME

This commit is contained in:
siikamiika 2019-10-26 19:12:13 +03:00
parent 303205dc12
commit bbbd23c842
2 changed files with 37 additions and 11 deletions

View File

@ -29,7 +29,8 @@ 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.clipboardMonitorEnable = document.querySelector('#clipboard-monitor-enable');
this.wanakanaEnable = document.querySelector('#wanakana-enable');
this.introVisible = true; this.introVisible = true;
this.introAnimationTimer = null; this.introAnimationTimer = null;
@ -54,17 +55,31 @@ class DisplaySearch extends Display {
if (this.query !== null) { if (this.query !== null) {
this.query.addEventListener('input', () => this.onSearchInput(), false); this.query.addEventListener('input', () => this.onSearchInput(), false);
const query = DisplaySearch.getSearchQueryFromLocation(window.location.href); if (this.wanakanaEnable !== null) {
if (this.wanakanaEnable.checked) {
window.wanakana.bind(this.query);
}
this.wanakanaEnable.addEventListener('change', (e) => {
if (e.target.checked) {
window.wanakana.bind(this.query);
} else {
window.wanakana.unbind(this.query);
}
});
}
let query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
if (query !== null) { if (query !== null) {
this.query.value = window.wanakana.toKana(query); if (this.wanakanaEnable !== null && this.wanakanaEnable.checked) {
query = window.wanakana.toKana(query);
}
this.query.value = query;
window.history.replaceState({query}, ''); window.history.replaceState({query}, '');
this.onSearchQueryUpdated(query, false); this.onSearchQueryUpdated(query, false);
} }
window.wanakana.bind(this.query);
} }
if (this.clipboardMonitorCheck !== null) { if (this.clipboardMonitorEnable !== null) {
this.clipboardMonitorCheck.addEventListener('change', (e) => { this.clipboardMonitorEnable.addEventListener('change', (e) => {
if (e.target.checked) { if (e.target.checked) {
this.startClipboardMonitor(); this.startClipboardMonitor();
} else { } else {
@ -203,13 +218,20 @@ class DisplaySearch extends Display {
initClipboardMonitor() { initClipboardMonitor() {
// ignore copy from search page // ignore copy from search page
window.addEventListener('copy', (e) => { window.addEventListener('copy', (e) => {
this.clipboardPrevText = document.getSelection().toString().trim(); let prevText = document.getSelection().toString().trim();
if (this.wanakanaEnable !== null && this.wanakanaEnable.checked) {
prevText = window.wanakana.toKana(prevText);
}
this.clipboardPrevText = prevText;
}); });
} }
startClipboardMonitor() { startClipboardMonitor() {
this.clipboardMonitorIntervalId = setInterval(async () => { this.clipboardMonitorIntervalId = setInterval(async () => {
const curText = (await navigator.clipboard.readText()).trim(); let curText = (await navigator.clipboard.readText()).trim();
if (this.wanakanaEnable !== null && this.wanakanaEnable.checked) {
curText = window.wanakana.toKana(curText);
}
if (curText && (curText !== this.clipboardPrevText)) { if (curText && (curText !== this.clipboardPrevText)) {
this.query.value = curText; this.query.value = curText;
this.onSearch(); this.onSearch();

View File

@ -20,9 +20,13 @@
</div> </div>
<div class="input-group" style="padding-top: 10px; font-size: 20px;"> <div class="input-group" style="padding-top: 10px; font-size: 20px;">
<span title="Enable kana input method" class="input-group-text">
<label for="wanakana-enable"></label>
<input type="checkbox" id="wanakana-enable" checked />
</span>
<span title="Enable clipboard monitor" class="input-group-text"> <span title="Enable clipboard monitor" class="input-group-text">
<label for="clipboard-monitor"><span class="glyphicon glyphicon-paste"></span></label> <label for="clipboard-monitor-enable"><span class="glyphicon glyphicon-paste"></span></label>
<input type="checkbox" id="clipboard-monitor" /> <input type="checkbox" id="clipboard-monitor-enable" />
</span> </span>
</div> </div>