add scannable tags for expression and reading

This commit is contained in:
siikamiika 2020-01-26 21:00:19 +02:00
parent 24690ceb7c
commit b8326138a3
10 changed files with 41 additions and 6 deletions

View File

@ -290,7 +290,8 @@
"popupNestingMaxDepth",
"enablePopupSearch",
"enableOnPopupExpressions",
"enableOnSearchPage"
"enableOnSearchPage",
"enableSearchTags"
],
"properties": {
"middleMouse": {
@ -348,6 +349,10 @@
"enableOnSearchPage": {
"type": "boolean",
"default": true
},
"enableSearchTags": {
"type": "boolean",
"default": false
}
}
},

View File

@ -316,7 +316,8 @@ function profileOptionsCreateDefaults() {
popupNestingMaxDepth: 0,
enablePopupSearch: false,
enableOnPopupExpressions: false,
enableOnSearchPage: true
enableOnSearchPage: true,
enableSearchTags: false
},
translation: {

View File

@ -67,6 +67,7 @@ async function formRead(options) {
options.scanning.enablePopupSearch = $('#enable-search-within-first-popup').prop('checked');
options.scanning.enableOnPopupExpressions = $('#enable-scanning-of-popup-expressions').prop('checked');
options.scanning.enableOnSearchPage = $('#enable-scanning-on-search-page').prop('checked');
options.scanning.enableSearchTags = $('#enable-search-tags').prop('checked');
options.scanning.delay = parseInt($('#scan-delay').val(), 10);
options.scanning.length = parseInt($('#scan-length').val(), 10);
options.scanning.modifier = $('#scan-modifier-key').val();
@ -142,6 +143,7 @@ async function formWrite(options) {
$('#enable-search-within-first-popup').prop('checked', options.scanning.enablePopupSearch);
$('#enable-scanning-of-popup-expressions').prop('checked', options.scanning.enableOnPopupExpressions);
$('#enable-scanning-on-search-page').prop('checked', options.scanning.enableOnSearchPage);
$('#enable-search-tags').prop('checked', options.scanning.enableSearchTags);
$('#scan-delay').val(options.scanning.delay);
$('#scan-length').val(options.scanning.length);
$('#scan-modifier-key').val(options.scanning.modifier);

View File

@ -481,7 +481,7 @@
</p>
<div class="checkbox">
<label><input type="checkbox" id="enable-search-within-first-popup"> Enable search when clicking glossary entries</label>
<label><input type="checkbox" id="enable-search-within-first-popup"> Enable search when clicking glossary entries and tags</label>
</div>
<div class="checkbox">
@ -492,6 +492,10 @@
<label><input type="checkbox" id="enable-scanning-of-popup-expressions"> Enable scanning of expressions in search results</label>
</div>
<div class="checkbox">
<label><input type="checkbox" id="enable-search-tags"> Enable clickable and scannable tags for searching expressions and their readings</label>
</div>
<div class="form-group">
<label for="popup-nesting-max-depth">Maximum number of additional popups</label>
<input type="number" min="0" step="1" id="popup-nesting-max-depth" class="form-control">

View File

@ -38,6 +38,7 @@ body { background-color: #1e1e1e; color: #d4d4d4; }
.tag[data-category=dictionary] { background-color: #9057ad; }
.tag[data-category=frequency] { background-color: #489148; }
.tag[data-category=partOfSpeech] { background-color: #565656; }
.tag[data-category=search] { background-color: #69696e; }
.term-reasons { color: #888888; }

View File

@ -38,6 +38,7 @@ body { background-color: #ffffff; color: #333333; }
.tag[data-category=dictionary] { background-color: #aa66cc; }
.tag[data-category=frequency] { background-color: #5cb85c; }
.tag[data-category=partOfSpeech] { background-color: #565656; }
.tag[data-category=search] { background-color: #8a8a91; }
.term-reasons { color: #777777; }

View File

@ -227,6 +227,10 @@ button.action-button {
margin-left: 0.375em;
}
html:root:not([data-enable-search-tags=true]) .tag[data-category=search] {
display: none;
}
.entry-header2,
.entry-header3 {
display: inline;

View File

@ -77,5 +77,6 @@
<template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></template>
<template id="tag-search-template"><span class="tag" data-category="search"></span></template>
</body></html>

View File

@ -111,7 +111,11 @@ class DisplayGenerator {
// Fallback
termTags = details.termTags;
}
const searchQueries = [details.expression, details.reading]
.filter((x) => !!x)
.map((x) => ({query: x}));
DisplayGenerator._appendMultiple(tagContainer, this.createTag.bind(this), termTags);
DisplayGenerator._appendMultiple(tagContainer, this.createSearchTag.bind(this), searchQueries);
DisplayGenerator._appendMultiple(frequencyContainer, this.createFrequencyTag.bind(this), details.frequencies);
return node;
@ -270,6 +274,16 @@ class DisplayGenerator {
return node;
}
createSearchTag(details) {
const node = DisplayGenerator._instantiateTemplate(this._tagSearchTemplate);
node.textContent = details.query;
node.dataset.query = details.query;
return node;
}
createFrequencyTag(details) {
const node = DisplayGenerator._instantiateTemplate(this._tagFrequencyTemplate);
@ -311,6 +325,7 @@ class DisplayGenerator {
this._kanjiReadingTemplate = doc.querySelector('#kanji-reading-template');
this._tagTemplate = doc.querySelector('#tag-template');
this._tagSearchTemplate = doc.querySelector('#tag-search-template');
this._tagFrequencyTemplate = doc.querySelector('#tag-frequency-template');
}

View File

@ -257,6 +257,7 @@ class Display {
data.ankiEnabled = `${options.anki.enable}`;
data.audioEnabled = `${options.audio.enable}`;
data.compactGlossaries = `${options.general.compactGlossaries}`;
data.enableSearchTags = `${options.scanning.enableSearchTags}`;
data.debug = `${options.general.debugInfo}`;
}
@ -312,9 +313,9 @@ class Display {
this.addEventListeners('.action-play-audio', 'click', this.onAudioPlay.bind(this));
this.addEventListeners('.kanji-link', 'click', this.onKanjiLookup.bind(this));
if (this.options.scanning.enablePopupSearch) {
this.addEventListeners('.term-glossary-item', 'mouseup', this.onGlossaryMouseUp.bind(this));
this.addEventListeners('.term-glossary-item', 'mousedown', this.onGlossaryMouseDown.bind(this));
this.addEventListeners('.term-glossary-item', 'mousemove', this.onGlossaryMouseMove.bind(this));
this.addEventListeners('.term-glossary-item, .tag', 'mouseup', this.onGlossaryMouseUp.bind(this));
this.addEventListeners('.term-glossary-item, .tag', 'mousedown', this.onGlossaryMouseDown.bind(this));
this.addEventListeners('.term-glossary-item, .tag', 'mousemove', this.onGlossaryMouseMove.bind(this));
}
} else {
Display.clearEventListeners(this.eventListeners);