alex/yomichan
1
Fork 0
Code Releases Activity

Improve frequency display (#1209)

Browse Source 
* Disable old frequencies

* Update layout

* Implement new frequency display

* Update count info
This commit is contained in:
toasted-nutbread 2021-01-09 10:41:17 -05:00 committed by GitHub
parent b20622b2c8
commit 06d23f59d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 241 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
ext/mixed/css/display.css
View File

@ -249,6 +249,12 @@ h3 {
margin: 0.25em 0 0.375em; margin: 0.25em 0 0.375em;
padding: 0; padding: 0;
} }
h5 {
font-size: calc(12em / 14);
margin: 0;
padding: 0;
font-weight: normal;
}
a { a {
color: var(--link-color); color: var(--link-color);
text-decoration: underline; text-decoration: underline;
@ -693,27 +699,6 @@ button.action-button[data-icon=source-term]::before {
.tag-inner { .tag-inner {
display: block; display: block;
} }
.tag-frequency-separator::before {
content: ':';
}
.tag-frequency-disambiguation-separator::before {
content: ':';
}
.tag-frequency-disambiguation::before {
content: '(';
}
.tag-frequency-disambiguation::after {
content: ') ';
}
.frequencies .tag[data-reading-is-same=true] .tag-frequency-disambiguation-separator,
.frequencies .tag[data-reading-is-same=true] .tag-frequency-disambiguation-reading,
.entry[data-unique-expression-count='1'] .tag-frequency-disambiguation-separator,
.entry[data-unique-expression-count='1'] .tag-frequency-disambiguation-expression,
.entry[data-unique-reading-count='1'] .tag-frequency-disambiguation-separator,
.entry[data-unique-reading-count='1'] .tag-frequency-disambiguation-reading,
.entry[data-unique-expression-count='1'][data-unique-reading-count='1'] .tag-frequency-disambiguation {
display: none;
}
/* Entries */ /* Entries */
@ -949,16 +934,6 @@ button.action-button[data-icon=source-term]::before {
bottom: -0.5em; bottom: -0.5em;
white-space: nowrap; white-space: nowrap;
} }
.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.frequencies {
display: block;
position: absolute;
left: 0;
bottom: -1.9em;
white-space: nowrap;
}
.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.frequencies .tag-frequency-disambiguation {
display: none;
}
/* Definitions */ /* Definitions */
@ -1008,24 +983,106 @@ button.action-button[data-icon=source-term]::before {
opacity: 0; opacity: 0;
white-space: pre-wrap; white-space: pre-wrap;
} }
.term-special-tags>.frequencies { .entry-body {
display: inline; margin-top: -0.5em;
} }
.term-entry-body[data-section-count='0'] .term-entry-body-section-header, .entry-body-section {
.term-entry-body[data-section-count='1'] .term-entry-body-section-header { margin-top: 0.5em;
}
.entry[data-definition-count='0'] .entry-body-section[data-section-type=definitions],
.entry[data-frequency-count='0'] .entry-body-section[data-section-type=frequencies],
.entry[data-pitch-accent-count='0'] .entry-body-section[data-section-type=pitch-accents] {
display: none; display: none;
} }
.entry[data-pitch-accent-count='0'][data-frequency-count='0'] .entry-body-section[data-section-type=definitions]>h5 {
display: none;
}
/* Frequencies */
.frequency-group-list {
margin: 0;
padding: 0 0 0 var(--list-padding1);
list-style-type: decimal;
}
.frequency-group-list[data-count='0'],
.frequency-group-list[data-count='1'] {
padding-left: 0;
list-style-type: none;
}
.frequency-list {
margin: 0;
padding: 0 0 0 var(--list-padding2);
list-style-type: circle;
}
.frequency-list[data-count='0'],
.frequency-list[data-count='1'] {
padding-left: 0;
list-style-type: none;
}
.frequency-group-item::marker,
.frequency-item::marker {
color: var(--text-color-light);
}
.frequency-disambiguation {
color: var(--text-color-light);
}
.frequency-separator::before {
content: '';
}
.frequency-disambiguation-separator::before {
content: ':';
}
.frequency-disambiguation::before {
content: '(';
}
.frequency-disambiguation::after {
content: ' only) ';
}
.entry[data-unique-expression-count='1'] .frequency-item[data-has-reading=false] .frequency-disambiguation,
.entry[data-unique-reading-count='1'][data-unique-expression-count='1'] .frequency-disambiguation,
.frequency-item[data-reading-is-same=true] .frequency-disambiguation-separator,
.frequency-item[data-reading-is-same=true] .frequency-disambiguation-reading,
.frequency-item[data-has-reading=false] .frequency-disambiguation-separator,
.frequency-item[data-has-reading=false] .frequency-disambiguation-reading,
.entry[data-unique-expression-count='1'] .frequency-disambiguation-separator,
.entry[data-unique-expression-count='1'] .frequency-disambiguation-expression,
.entry[data-unique-reading-count='1'] .frequency-disambiguation-separator,
.entry[data-unique-reading-count='1'] .frequency-disambiguation-reading {
display: none;
}
:root[data-glossary-layout-mode=compact] .frequency-group-list,
:root[data-glossary-layout-mode=compact] .frequency-list,
.frequency-list[data-count='1'] {
display: inline;
list-style: none;
padding-left: 0;
}
:root[data-glossary-layout-mode=compact] .frequency-group-item {
display: inline-block;
margin-right: 1em;
}
:root[data-glossary-layout-mode=compact] .entry-body-section[data-section-type=frequencies] {
margin-right: -1em;
}
:root[data-glossary-layout-mode=compact] .frequency-item,
.frequency-list[data-count='1'] .frequency-item {
display: inline-block;
}
:root[data-glossary-layout-mode=compact] .frequency-item:not(:first-child)::before,
.frequency-list[data-count='1'] .frequency-item:not(:first-child)::before {
white-space: pre-wrap;
content: var(--compact-list-separator);
display: inline;
color: var(--text-color-light);
}
:root[data-glossary-layout-mode=compact] .frequency-tag-list,
.frequency-group-item[data-count='1'] .frequency-tag-list {
display: inline;
}
/* Pitch accent styles */ /* Pitch accent styles */
.entry[data-pitch-accent-count='0'] .term-pitch-accent-container {
display: none;
}
.term-pitch-accent-container {
border-bottom: var(--thin-border-size) solid var(--light-border-color);
padding-bottom: 0.25em;
margin-bottom: 0.25em;
}
.term-pitch-accent-group-list { .term-pitch-accent-group-list {
margin: 0; margin: 0;
padding: 0 0 0 var(--list-padding1); padding: 0 0 0 var(--list-padding1);
@ -1582,17 +1639,15 @@ button.footer-notification-close-button:active {
display: inline; display: inline;
color: var(--text-color-light); color: var(--text-color-light);
} }
:root[data-glossary-layout-mode=compact] .entry:not([data-expression-multi=true]) .term-special-tags {
:root[data-glossary-layout-mode=compact] .entry-body-section>h5 {
display: none; display: none;
} }
:root[data-glossary-layout-mode=compact] .term-expression-details>.frequencies { :root[data-glossary-layout-mode=compact] .entry-body {
display: inline; margin-top: 0;
} }
:root[data-glossary-layout-mode=compact] .entry-body-section {
:root[data-glossary-layout-mode=compact] .term-pitch-accent-container { margin-top: 0;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
} }
:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count='0'], :root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation-list[data-expression-count='0'],
:root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] { :root[data-show-pitch-accent-downstep-notation=true] .term-pitch-accent-disambiguation[data-type=reading] {

58
ext/mixed/display-templates.html
View File

@ -17,11 +17,20 @@
</div> </div>
<div class="term-reasons"></div> <div class="term-reasons"></div>
</div> </div>
<div class="term-special-tags"><div class="frequencies tag-list"></div></div>
</div> </div>
<div class="term-entry-body"> <div class="entry-body">
<div class="term-entry-body-section term-pitch-accent-container"><ol class="term-entry-body-section-content term-pitch-accent-group-list"></ol></div> <div class="entry-body-section" data-section-type="frequencies">
<div class="term-entry-body-section term-definition-container"><ol class="term-entry-body-section-content term-definition-list"></ol></div> <h5>Frequencies</h5>
<ol class="entry-body-section-content frequency-group-list"></ol>
</div>
<div class="entry-body-section" data-section-type="pitch-accents">
<h5>Pitch Accents</h5>
<ol class="entry-body-section-content term-pitch-accent-group-list"></ol>
</div>
<div class="entry-body-section" data-section-type="definitions">
<h5>Definitions</h5>
<ol class="entry-body-section-content term-definition-list"></ol>
</div>
</div> </div>
<div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div> <div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
</div></template> </div></template>
@ -34,7 +43,6 @@
<div class="term-expression-details"> <div class="term-expression-details">
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button> <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio"></button>
<div class="tags tag-list"></div> <div class="tags tag-list"></div>
<div class="frequencies tag-list"></div>
</div> </div>
</div></template> </div></template>
<template id="term-definition-item-template"><li class="term-definition-item"><div class="term-definition-tag-list tag-list"></div><div class="term-definition-disambiguation-list"></div><ul class="term-glossary-list"></ul></li></template> <template id="term-definition-item-template"><li class="term-definition-item"><div class="term-definition-tag-list tag-list"></div><div class="term-definition-disambiguation-list"></div><ul class="term-glossary-list"></ul></li></template>
@ -43,6 +51,21 @@
<template id="term-glossary-item-image-template"><li class="term-glossary-item click-scannable" data-has-image="true"><span class="term-glossary-separator"> </span><span class="term-glossary"><a class="term-glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="term-glossary-image-container"><span class="term-glossary-image-aspect-ratio-sizer"></span><img class="term-glossary-image" alt="" /><span class="term-glossary-image-container-overlay"></span></span><span class="term-glossary-image-link-text">Image</span></a> <span class="term-glossary-image-description"></span></span></li></template> <template id="term-glossary-item-image-template"><li class="term-glossary-item click-scannable" data-has-image="true"><span class="term-glossary-separator"> </span><span class="term-glossary"><a class="term-glossary-image-link" target="_blank" rel="noreferrer noopener"><span class="term-glossary-image-container"><span class="term-glossary-image-aspect-ratio-sizer"></span><img class="term-glossary-image" alt="" /><span class="term-glossary-image-container-overlay"></span></span><span class="term-glossary-image-link-text">Image</span></a> <span class="term-glossary-image-description"></span></span></li></template>
<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template> <template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
<!-- Frequency templates -->
<template id="frequency-group-item-template"><li class="frequency-group-item"><div class="frequency-tag-list tag-list"></div><ul class="frequency-list"></ul></li></template>
<template id="term-frequency-item-template" data-remove-whitespace-text="true"><li class="frequency-item" data-frequency-type="term">
<span class="frequency-disambiguation">
<span class="frequency-disambiguation-expression"></span>
<span class="frequency-disambiguation-separator"></span>
<span class="frequency-disambiguation-reading"></span>
</span>
<span class="frequency-separator"></span>
<span class="frequency-value"></span>
</li></template>
<template id="kanji-frequency-item-template" data-remove-whitespace-text="true"><li class="frequency-item" data-frequency-type="kanji">
<span class="frequency-value"></span>
</li></template>
<!-- Pitch accent templates --> <!-- Pitch accent templates -->
<template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <template id="term-pitch-accent-static-template"><svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<defs> <defs>
@ -73,9 +96,13 @@
</div> </div>
</div> </div>
</div> </div>
<div class="frequencies"></div>
</div> </div>
<div class="tags tag-list"></div> <div class="tags tag-list"></div>
<div class="entry-body">
<div class="entry-body-section" data-section-type="frequencies">
<ol class="entry-body-section-content frequency-group-list"></ol>
</div>
</div>
<table class="kanji-glyph-data"><tbody> <table class="kanji-glyph-data"><tbody>
<tr> <tr>
<th>Glossary</th> <th>Glossary</th>
@ -104,25 +131,6 @@
<!-- Tag templates --> <!-- Tag templates -->
<template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template> <template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
<template id="term-tag-frequency-template" data-remove-whitespace-text="true"><span class="tag" data-category="frequency">
<span class="tag-inner">
<span class="tag-frequency-disambiguation">
<span class="tag-frequency-disambiguation-expression"></span>
<span class="tag-frequency-disambiguation-separator"></span>
<span class="tag-frequency-disambiguation-reading"></span>
</span>
<span class="tag-frequency-dictionary-name"></span>
<span class="tag-frequency-separator"></span>
<span class="tag-frequency-value"></span>
</span>
</span></template>
<template id="kanji-tag-frequency-template" data-remove-whitespace-text="true"><span class="tag" data-category="frequency">
<span class="tag-inner">
<span class="tag-frequency-dictionary-name"></span>
<span class="tag-frequency-separator"></span>
<span class="tag-frequency-value"></span>
</span>
</span></template>
<!-- Extra --> <!-- Extra -->
<template id="footer-notification-template"><div class="footer-notification"> <template id="footer-notification-template"><div class="footer-notification">

55
ext/mixed/js/dictionary-data-util.js
View File

@ -16,6 +16,48 @@
*/ */
class DictionaryDataUtil { class DictionaryDataUtil {
static groupTermFrequencies(frequencies) {
const map1 = new Map();
for (const {dictionary, expression, reading, hasReading, frequency} of frequencies) {
let map2 = map1.get(dictionary);
if (typeof map2 === 'undefined') {
map2 = new Map();
map1.set(dictionary, map2);
}
const readingKey = hasReading ? reading : null;
const key = JSON.stringify([expression, readingKey], null, 0);
let frequencyData = map2.get(key);
if (typeof frequencyData === 'undefined') {
frequencyData = {expression, reading: readingKey, frequencies: new Set()};
map2.set(key, frequencyData);
}
frequencyData.frequencies.add(frequency);
}
return this._createFrequencyGroupsFromMap(map1);
}
static groupKanjiFrequencies(frequencies) {
const map1 = new Map();
for (const {dictionary, character, frequency} of frequencies) {
let map2 = map1.get(dictionary);
if (typeof map2 === 'undefined') {
map2 = new Map();
map1.set(dictionary, map2);
}
let frequencyData = map2.get(character);
if (typeof frequencyData === 'undefined') {
frequencyData = {character, frequencies: new Set()};
map2.set(character, frequencyData);
}
frequencyData.frequencies.add(frequency);
}
return this._createFrequencyGroupsFromMap(map1);
}
static getPitchAccentInfos(definition) { static getPitchAccentInfos(definition) {
if (definition.type === 'kanji') { return []; } if (definition.type === 'kanji') { return []; }
@ -73,6 +115,19 @@ class DictionaryDataUtil {
// Private // Private
static _createFrequencyGroupsFromMap(map) {
const results = [];
for (const [dictionary, map2] of map.entries()) {
const frequencyDataArray = [];
for (const frequencyData of map2.values()) {
frequencyData.frequencies = [...frequencyData.frequencies];
frequencyDataArray.push(frequencyData);
}
results.push({dictionary, frequencyData: frequencyDataArray});
}
return results;
}
static _findExistingPitchAccentInfo(reading, position, tags, pitchAccentInfoList) { static _findExistingPitchAccentInfo(reading, position, tags, pitchAccentInfoList) {
for (const pitchInfo of pitchAccentInfoList) { for (const pitchInfo of pitchAccentInfoList) {
if ( if (

80
ext/mixed/js/display-generator.js
View File

@ -47,15 +47,15 @@ class DisplayGenerator {
const expressionsContainer = node.querySelector('.term-expression-list'); const expressionsContainer = node.querySelector('.term-expression-list');
const reasonsContainer = node.querySelector('.term-reasons'); const reasonsContainer = node.querySelector('.term-reasons');
const pitchesContainer = node.querySelector('.term-pitch-accent-group-list'); const pitchesContainer = node.querySelector('.term-pitch-accent-group-list');
const frequenciesContainer = node.querySelector('.frequencies'); const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
const definitionsContainer = node.querySelector('.term-definition-list'); const definitionsContainer = node.querySelector('.term-definition-list');
const bodyContainer = node.querySelector('.term-entry-body');
const {expressions, type, reasons, frequencies} = details; const {expressions, type, reasons, frequencies} = details;
const definitions = (type === 'term' ? [details] : details.definitions); const definitions = (type === 'term' ? [details] : details.definitions);
const merged = (type === 'termMerged' || type === 'termMergedByGlossary'); const merged = (type === 'termMerged' || type === 'termMergedByGlossary');
const pitches = DictionaryDataUtil.getPitchAccentInfos(details); const pitches = DictionaryDataUtil.getPitchAccentInfos(details);
const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0); const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0);
const groupedFrequencies = DictionaryDataUtil.groupTermFrequencies(frequencies);
const uniqueExpressions = new Set(); const uniqueExpressions = new Set();
const uniqueReadings = new Set(); const uniqueReadings = new Set();
@ -72,15 +72,12 @@ class DisplayGenerator {
node.dataset.pitchAccentCount = `${pitchCount}`; node.dataset.pitchAccentCount = `${pitchCount}`;
node.dataset.uniqueExpressionCount = `${uniqueExpressions.size}`; node.dataset.uniqueExpressionCount = `${uniqueExpressions.size}`;
node.dataset.uniqueReadingCount = `${uniqueReadings.size}`; node.dataset.uniqueReadingCount = `${uniqueReadings.size}`;
node.dataset.frequencyCount = `${frequencies.length}`;
bodyContainer.dataset.sectionCount = `${ node.dataset.groupedFrequencyCount = `${groupedFrequencies.length}`;
(definitions.length > 0 ? 1 : 0) +
(pitches.length > 0 ? 1 : 0)
}`;
this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions); this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions);
this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), reasons); this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), reasons);
this._appendMultiple(frequenciesContainer, this._createTermFrequencyTag.bind(this), frequencies); this._appendMultiple(frequencyGroupListContainer, this._createFrequencyGroup.bind(this), groupedFrequencies, false);
this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches); this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches);
this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitions); this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitions);
@ -91,7 +88,7 @@ class DisplayGenerator {
const node = this._templates.instantiate('kanji-entry'); const node = this._templates.instantiate('kanji-entry');
const glyphContainer = node.querySelector('.kanji-glyph'); const glyphContainer = node.querySelector('.kanji-glyph');
const frequenciesContainer = node.querySelector('.frequencies'); const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
const tagContainer = node.querySelector('.tags'); const tagContainer = node.querySelector('.tags');
const glossaryContainer = node.querySelector('.kanji-glossary-list'); const glossaryContainer = node.querySelector('.kanji-glossary-list');
const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese'); const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese');
@ -102,8 +99,9 @@ class DisplayGenerator {
const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices'); const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices');
glyphContainer.textContent = details.character; glyphContainer.textContent = details.character;
const groupedFrequencies = DictionaryDataUtil.groupKanjiFrequencies(details.frequencies);
this._appendMultiple(frequenciesContainer, this._createKanjiFrequencyTag.bind(this), details.frequencies); this._appendMultiple(frequencyGroupListContainer, this._createFrequencyGroup.bind(this), groupedFrequencies, true);
this._appendMultiple(tagContainer, this._createTag.bind(this), details.tags); this._appendMultiple(tagContainer, this._createTag.bind(this), details.tags);
this._appendMultiple(glossaryContainer, this._createKanjiGlossaryItem.bind(this), details.glossary); this._appendMultiple(glossaryContainer, this._createKanjiGlossaryItem.bind(this), details.glossary);
this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi); this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi);
@ -128,7 +126,7 @@ class DisplayGenerator {
// Private // Private
_createTermExpression(details) { _createTermExpression(details) {
const {termFrequency, furiganaSegments, expression, reading, termTags, frequencies} = details; const {termFrequency, furiganaSegments, expression, reading, termTags} = details;
const searchQueries = []; const searchQueries = [];
if (expression) { searchQueries.push(expression); } if (expression) { searchQueries.push(expression); }
@ -138,7 +136,6 @@ class DisplayGenerator {
const expressionContainer = node.querySelector('.term-expression-text'); const expressionContainer = node.querySelector('.term-expression-text');
const tagContainer = node.querySelector('.tags'); const tagContainer = node.querySelector('.tags');
const frequencyContainer = node.querySelector('.frequencies');
node.dataset.readingIsSame = `${!reading || reading === expression}`; node.dataset.readingIsSame = `${!reading || reading === expression}`;
node.dataset.frequency = termFrequency; node.dataset.frequency = termFrequency;
@ -146,7 +143,6 @@ class DisplayGenerator {
this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this)); this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
this._appendMultiple(tagContainer, this._createTag.bind(this), termTags); this._appendMultiple(tagContainer, this._createTag.bind(this), termTags);
this._appendMultiple(tagContainer, this._createSearchTag.bind(this), searchQueries); this._appendMultiple(tagContainer, this._createSearchTag.bind(this), searchQueries);
this._appendMultiple(frequencyContainer, this._createTermFrequencyTag.bind(this), frequencies);
return node; return node;
} }
@ -467,36 +463,54 @@ class DisplayGenerator {
path.setAttribute('d', `M${pathPoints.join(' L')}`); path.setAttribute('d', `M${pathPoints.join(' L')}`);
} }
_createTermFrequencyTag(details) { _createFrequencyGroup(details, kanji) {
const {expression, reading, dictionary, frequency} = details; const {dictionary, frequencyData} = details;
const node = this._templates.instantiate('term-tag-frequency'); const node = this._templates.instantiate('frequency-group-item');
node.querySelector('.tag-frequency-disambiguation-expression').textContent = expression; const tagList = node.querySelector('.frequency-tag-list');
node.querySelector('.tag-frequency-disambiguation-reading').textContent = reading; const tag = this._createTag({notes: '', name: dictionary, category: 'frequency'});
node.querySelector('.tag-frequency-dictionary-name').textContent = dictionary; tagList.appendChild(tag);
node.querySelector('.tag-frequency-value').textContent = frequency;
node.dataset.expression = expression; const frequencyListContainer = node.querySelector('.frequency-list');
node.dataset.reading = reading; const createItem = (kanji ? this._createKanjiFrequency.bind(this) : this._createTermFrequency.bind(this));
node.dataset.readingIsSame = `${reading === expression}`; this._appendMultiple(frequencyListContainer, createItem, frequencyData, dictionary);
node.dataset.dictionary = dictionary;
node.dataset.frequency = frequency; node.dataset.count = `${frequencyData.length}`;
node.dataset.details = `${dictionary}: ${frequency}`;
return node; return node;
} }
_createKanjiFrequencyTag(details) { _createTermFrequency(details, dictionary) {
const {character, dictionary, frequency} = details; const {expression, reading, frequencies} = details;
const node = this._templates.instantiate('kanji-tag-frequency'); const node = this._templates.instantiate('term-frequency-item');
node.querySelector('.tag-frequency-dictionary-name').textContent = dictionary; const frequency = frequencies.join(', ');
node.querySelector('.tag-frequency-value').textContent = frequency;
node.querySelector('.frequency-disambiguation-expression').textContent = expression;
node.querySelector('.frequency-disambiguation-reading').textContent = (reading !== null ? reading : '');
node.querySelector('.frequency-value').textContent = frequency;
node.dataset.expression = expression;
node.dataset.reading = reading;
node.dataset.hasReading = `${reading !== null}`;
node.dataset.readingIsSame = `${reading === expression}`;
node.dataset.dictionary = dictionary;
node.dataset.frequency = `${frequency}`;
return node;
}
_createKanjiFrequency(details, dictionary) {
const {character, frequencies} = details;
const node = this._templates.instantiate('kanji-frequency-item');
const frequency = frequencies.join(', ');
node.querySelector('.frequency-value').textContent = frequency;
node.dataset.character = character; node.dataset.character = character;
node.dataset.dictionary = dictionary; node.dataset.dictionary = dictionary;
node.dataset.frequency = frequency; node.dataset.frequency = `${frequency}`;
node.dataset.details = `${dictionary}: ${frequency}`;
return node; return node;
} }