Improve frequency display (#1438)

* Add frequencyDisplayMode option

* Update tests

* Add setting

* Update frequency display styles

* Improve wrapping

2 files changed, 15 insertions, 6 deletions

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 9b451995..da1b053a 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -581,16 +581,21 @@ class DisplayGenerator {
 
     _createFrequencyGroup(details, kanji) {
         const {dictionary, frequencyData} = details;
+
         const node = this._templates.instantiate('frequency-group-item');
+        const body = node.querySelector('.tag-body-content');
 
-        const tagList = node.querySelector('.frequency-tag-list');
-        const tag = this._createTag({notes: '', name: dictionary, category: 'frequency'});
-        tagList.appendChild(tag);
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
+        node.dataset.details = dictionary;
 
-        const frequencyListContainer = node.querySelector('.frequency-list');
-        const createItem = (kanji ? this._createKanjiFrequency.bind(this) : this._createTermFrequency.bind(this));
-        this._appendMultiple(frequencyListContainer, createItem, frequencyData, dictionary);
+        for (let i = 0, ii = frequencyData.length; i < ii; ++i) {
+            const item = frequencyData[i];
+            const itemNode = (kanji ? this._createKanjiFrequency(item, dictionary) : this._createTermFrequency(item, dictionary));
+            itemNode.dataset.index = `${i}`;
+            body.appendChild(itemNode);
+        }
 
+        body.dataset.count = `${frequencyData.length}`;
         node.dataset.count = `${frequencyData.length}`;
 
         return node;
@@ -600,6 +605,8 @@ class DisplayGenerator {
         const {expression, reading, frequencies} = details;
         const node = this._templates.instantiate('term-frequency-item');
 
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
+
         const frequency = frequencies.join(', ');
 
         this._setTextContent(node.querySelector('.frequency-disambiguation-expression'), expression, 'ja');
@@ -622,6 +629,7 @@ class DisplayGenerator {
 
         const frequency = frequencies.join(', ');
 
+        this._setTextContent(node.querySelector('.tag-label-content'), dictionary);
         this._setTextContent(node.querySelector('.frequency-value'), frequency, 'ja');
 
         node.dataset.character = character;
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 30a8e294..be402ec3 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -812,6 +812,7 @@ class Display extends EventDispatcher {
         data.ankiEnabled = `${options.anki.enable}`;
         data.glossaryLayoutMode = `${options.general.glossaryLayoutMode}`;
         data.compactTags = `${options.general.compactTags}`;
+        data.frequencyDisplayMode = `${options.general.frequencyDisplayMode}`;
         data.enableSearchTags = `${options.scanning.enableSearchTags}`;
         data.showPitchAccentDownstepNotation = `${options.general.showPitchAccentDownstepNotation}`;
         data.showPitchAccentPositionNotation = `${options.general.showPitchAccentPositionNotation}`;