alex/yomichan
1
Fork 0
Code Releases Activity

Add standalone reading (#1448)

Browse Source 
* Add option

* Update display

* Hide redundant readings

* Improve label and description
This commit is contained in:
toasted-nutbread 2021-02-27 14:04:52 -05:00 committed by GitHub
parent 9e7a76a1f1
commit 1a7c264165
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 79 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
ext/css/display.css
View File

@ -25,6 +25,8 @@
--disambiguation-separator: ', ';
--disambiguation-reading-separator: ':';
--expression-separator: '\3001';
/* Layout */
--font-size-no-units: 14;
--font-size: calc(1px * var(--font-size-no-units));
@ -32,6 +34,9 @@
--query-parser-font-size: calc(1em * var(--query-parser-font-size-no-units));
--expression-font-size-no-units: 2;
--expression-font-size: calc(1em * var(--expression-font-size-no-units));
--expression-reading-font-size-scale: 0.75;
--expression-reading-font-size: calc(var(--expression-reading-font-size-scale) * var(--expression-font-size));
--expression-reading-space: 0.5em;
--h2-font-size-no-units: 1.25;
--h2-font-size: calc(1em * var(--h2-font-size-no-units));
@ -790,18 +795,41 @@ button.action-button[data-icon=source-term]::before {
}
.term-expression-text-container {
display: inline-block;
margin-left: calc(-1 * var(--expression-reading-space));
}
.term-expression-text-outer {
display: inline-block;
position: relative;
margin-left: var(--expression-reading-space);
}
.term-expression-reading-outer {
display: none;
position: relative;
margin-left: var(--expression-reading-space);
}
.term-expression-text {
color: var(--kanji-text-color);
font-size: var(--expression-font-size);
display: inline-block;
position: relative;
}
.term-expression-reading {
color: var(--kanji-text-color);
font-size: var(--expression-reading-font-size);
}
.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text-outer::after {
content: var(--expression-separator);
font-size: var(--expression-font-size);
}
.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-reading-outer::after {
content: var(--expression-separator);
font-size: var(--expression-reading-font-size);
}
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-text,
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .term-expression-reading,
.entry[data-expression-multi=true] .term-expression[data-frequency=popular] .kanji-link {
color: var(--kanji-popular-text-color);
}
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-text,
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .term-expression-reading,
.entry[data-expression-multi=true] .term-expression[data-frequency=rare] .kanji-link {
color: var(--kanji-rare-text-color);
}
@ -842,9 +870,6 @@ button.action-button[data-icon=source-term]::before {
.term-expression-details>.frequencies {
display: none;
}
.term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after {
content: '\3001';
}
.term-details {
display: inline;
}
@ -854,6 +879,25 @@ button.action-button[data-icon=source-term]::before {
.entry[data-expression-multi=true] .term-details {
display: block;
}
:root[data-term-display-mode=ruby-and-reading] .term-expression-text-outer::after,
:root[data-term-display-mode=term-and-reading] .term-expression-text-outer::after {
display: none;
}
:root[data-term-display-mode=ruby-and-reading] .term-expression-reading-outer,
:root[data-term-display-mode=term-and-reading] .term-expression-reading-outer {
display: inline-block;
}
:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after,
:root[data-term-display-mode=term-and-reading] .term-expression[data-reading-is-same=true] .term-expression-text-outer::after {
display: inline-block;
}
:root[data-term-display-mode=ruby-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer,
:root[data-term-display-mode=term-and-reading] .term-expression[data-reading-is-same=true] .term-expression-reading-outer {
display: none;
}
:root[data-term-display-mode=term-and-reading] .term-expression-text>ruby>rt {
display: none;
}
/* Entry indicator */

5
ext/data/schemas/options-schema.json
View File

@ -276,6 +276,11 @@
"type": "string",
"enum": ["tags", "tags-grouped", "split-tags", "split-tags-grouped", "inline-list", "list"],
"default": "split-tags-grouped"
},
"termDisplayMode": {
"type": "string",
"enum": ["ruby", "ruby-and-reading", "term-and-reading"],
"default": "ruby"
}
}
},

8
ext/display-templates.html
View File

@ -35,9 +35,13 @@
<div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
</div></template>
<template id="term-expression-template" data-remove-whitespace-text="true"><div class="term-expression">
<div class="term-expression-text-container">
<span class="term-expression-text source-text">
<div class="term-expression-text-container" lang="ja">
<span class="term-expression-text-outer source-text">
<span class="term-expression-current-indicator"></span>
<span class="term-expression-text"></span>
</span>
<span class="term-expression-reading-outer">
<span class="term-expression-reading"></span>
</span>
</div>
<div class="term-expression-details">

2
ext/js/data/options-util.js
View File

@ -741,8 +741,10 @@ class OptionsUtil {
_updateVersion9(options) {
// Version 9 changes:
// Added general.frequencyDisplayMode.
// Added general.termDisplayMode.
for (const profile of options.profiles) {
profile.options.general.frequencyDisplayMode = 'split-tags-grouped';
profile.options.general.termDisplayMode = 'ruby';
}
return options;
}

2
ext/js/display/display-generator.js
View File

@ -243,7 +243,7 @@ class DisplayGenerator {
node.dataset.readingIsSame = `${!reading || reading === expression}`;
node.dataset.frequency = termFrequency;
expressionContainer.lang = 'ja';
this._setTextContent(node.querySelector('.term-expression-reading'), reading.length > 0 ? reading : expression);
this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
this._appendMultiple(tagContainer, this._createTag.bind(this), termTags);

1
ext/js/display/display.js
View File

@ -813,6 +813,7 @@ class Display extends EventDispatcher {
data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
data.compactTags = `${options.general.compactTags}`;
data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`;
data.termDisplayMode = `${options.general.termDisplayMode}`;
data.enableSearchTags = `${options.scanning.enableSearchTags}`;
data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
data.showPitchAccentPositionNotation = `${options.general.showPitchAccentPositionNotation}`;

13
ext/settings.html
View File

@ -677,6 +677,19 @@
<label class="toggle"><input type="checkbox" data-setting="general.debugInfo"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div>
</div></div>
<div class="settings-item advanced-only"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Term display style</div>
<div class="settings-item-description">Change how terms and their readings are displayed.</div>
</div>
<div class="settings-item-right">
<select data-setting="general.termDisplayMode">
<option value="ruby">Term furigana</option>
<option value="ruby-and-reading">Term furigana and reading</option>
<option value="term-and-reading">Raw term and reading</option>
</select>
</div>
</div></div>
<div class="settings-item advanced-only"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Frequency display style</div>

3
test/test-options-util.js
View File

@ -295,7 +295,8 @@ function createProfileOptionsUpdatedTestData1() {
popupCurrentIndicatorMode: 'triangle',
popupActionBarVisibility: 'auto',
popupActionBarLocation: 'top',
frequencyDisplayMode: 'split-tags-grouped'
frequencyDisplayMode: 'split-tags-grouped',
termDisplayMode: 'ruby'
},
audio: {
enabled: true,