summaryrefslogtreecommitdiff
path: root/ext/mixed/js/display-generator.js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-09 10:41:17 -0500
committerGitHub <noreply@github.com>2021-01-09 10:41:17 -0500
commit06d23f59d83ef89ebda89db547195ecf2a1c6ebf (patch)
tree0b0088003dbc0b27fd1aad4fa86b67d0c47f2217 /ext/mixed/js/display-generator.js
parentb20622b2c84ce3ca1781c7bf8e10fed0af1e5001 (diff)
Improve frequency display (#1209)
* Disable old frequencies * Update layout * Implement new frequency display * Update count info
Diffstat (limited to 'ext/mixed/js/display-generator.js')
-rw-r--r--ext/mixed/js/display-generator.js72
1 files changed, 43 insertions, 29 deletions
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 6a8c03e3..a47a65ee 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -47,15 +47,15 @@ class DisplayGenerator {
const expressionsContainer = node.querySelector('.term-expression-list');
const reasonsContainer = node.querySelector('.term-reasons');
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 bodyContainer = node.querySelector('.term-entry-body');
const {expressions, type, reasons, frequencies} = details;
const definitions = (type === 'term' ? [details] : details.definitions);
const merged = (type === 'termMerged' || type === 'termMergedByGlossary');
const pitches = DictionaryDataUtil.getPitchAccentInfos(details);
const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0);
+ const groupedFrequencies = DictionaryDataUtil.groupTermFrequencies(frequencies);
const uniqueExpressions = new Set();
const uniqueReadings = new Set();
@@ -72,15 +72,12 @@ class DisplayGenerator {
node.dataset.pitchAccentCount = `${pitchCount}`;
node.dataset.uniqueExpressionCount = `${uniqueExpressions.size}`;
node.dataset.uniqueReadingCount = `${uniqueReadings.size}`;
-
- bodyContainer.dataset.sectionCount = `${
- (definitions.length > 0 ? 1 : 0) +
- (pitches.length > 0 ? 1 : 0)
- }`;
+ node.dataset.frequencyCount = `${frequencies.length}`;
+ node.dataset.groupedFrequencyCount = `${groupedFrequencies.length}`;
this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions);
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(definitionsContainer, this._createTermDefinitionItem.bind(this), definitions);
@@ -91,7 +88,7 @@ class DisplayGenerator {
const node = this._templates.instantiate('kanji-entry');
const glyphContainer = node.querySelector('.kanji-glyph');
- const frequenciesContainer = node.querySelector('.frequencies');
+ const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
const tagContainer = node.querySelector('.tags');
const glossaryContainer = node.querySelector('.kanji-glossary-list');
const chineseReadingsContainer = node.querySelector('.kanji-readings-chinese');
@@ -102,8 +99,9 @@ class DisplayGenerator {
const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices');
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(glossaryContainer, this._createKanjiGlossaryItem.bind(this), details.glossary);
this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi);
@@ -128,7 +126,7 @@ class DisplayGenerator {
// Private
_createTermExpression(details) {
- const {termFrequency, furiganaSegments, expression, reading, termTags, frequencies} = details;
+ const {termFrequency, furiganaSegments, expression, reading, termTags} = details;
const searchQueries = [];
if (expression) { searchQueries.push(expression); }
@@ -138,7 +136,6 @@ class DisplayGenerator {
const expressionContainer = node.querySelector('.term-expression-text');
const tagContainer = node.querySelector('.tags');
- const frequencyContainer = node.querySelector('.frequencies');
node.dataset.readingIsSame = `${!reading || reading === expression}`;
node.dataset.frequency = termFrequency;
@@ -146,7 +143,6 @@ class DisplayGenerator {
this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
this._appendMultiple(tagContainer, this._createTag.bind(this), termTags);
this._appendMultiple(tagContainer, this._createSearchTag.bind(this), searchQueries);
- this._appendMultiple(frequencyContainer, this._createTermFrequencyTag.bind(this), frequencies);
return node;
}
@@ -467,36 +463,54 @@ class DisplayGenerator {
path.setAttribute('d', `M${pathPoints.join(' L')}`);
}
- _createTermFrequencyTag(details) {
- const {expression, reading, dictionary, frequency} = details;
- const node = this._templates.instantiate('term-tag-frequency');
+ _createFrequencyGroup(details, kanji) {
+ const {dictionary, frequencyData} = details;
+ const node = this._templates.instantiate('frequency-group-item');
+
+ const tagList = node.querySelector('.frequency-tag-list');
+ const tag = this._createTag({notes: '', name: dictionary, category: 'frequency'});
+ tagList.appendChild(tag);
+
+ const frequencyListContainer = node.querySelector('.frequency-list');
+ const createItem = (kanji ? this._createKanjiFrequency.bind(this) : this._createTermFrequency.bind(this));
+ this._appendMultiple(frequencyListContainer, createItem, frequencyData, dictionary);
+
+ node.dataset.count = `${frequencyData.length}`;
+
+ return node;
+ }
+
+ _createTermFrequency(details, dictionary) {
+ const {expression, reading, frequencies} = details;
+ const node = this._templates.instantiate('term-frequency-item');
- node.querySelector('.tag-frequency-disambiguation-expression').textContent = expression;
- node.querySelector('.tag-frequency-disambiguation-reading').textContent = reading;
- node.querySelector('.tag-frequency-dictionary-name').textContent = dictionary;
- node.querySelector('.tag-frequency-value').textContent = frequency;
+ const frequency = frequencies.join(', ');
+
+ 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;
- node.dataset.details = `${dictionary}: ${frequency}`;
+ node.dataset.frequency = `${frequency}`;
return node;
}
- _createKanjiFrequencyTag(details) {
- const {character, dictionary, frequency} = details;
- const node = this._templates.instantiate('kanji-tag-frequency');
+ _createKanjiFrequency(details, dictionary) {
+ const {character, frequencies} = details;
+ const node = this._templates.instantiate('kanji-frequency-item');
+
+ const frequency = frequencies.join(', ');
- node.querySelector('.tag-frequency-dictionary-name').textContent = dictionary;
- node.querySelector('.tag-frequency-value').textContent = frequency;
+ node.querySelector('.frequency-value').textContent = frequency;
node.dataset.character = character;
node.dataset.dictionary = dictionary;
- node.dataset.frequency = frequency;
- node.dataset.details = `${dictionary}: ${frequency}`;
+ node.dataset.frequency = `${frequency}`;
return node;
}