Fix frequency tags (#1080)

* Rename term-frequency to tag-frequency

* Move tag styles

* Expand

* Use separate templates for terms vs kanji

3 files changed, 64 insertions, 32 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 5e3f2f9e..71396940 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -553,6 +553,27 @@ button.action-button {
 .tag-inner {
     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 */
@@ -644,27 +665,6 @@ button.action-button {
 .term-expression-list>.term-expression:not(:last-of-type)>.term-expression-text-container>.term-expression-text::after {
     content: "\3001";
 }
-.term-frequency-separator::before {
-    content: ":";
-}
-.term-frequency-disambiguation-separator::before {
-    content: ":";
-}
-.term-frequency-disambiguation::before {
-    content: "(";
-}
-.term-frequency-disambiguation::after {
-    content: ") ";
-}
-.frequencies .tag[data-reading-is-same=true] .term-frequency-disambiguation-separator,
-.frequencies .tag[data-reading-is-same=true] .term-frequency-disambiguation-reading,
-.entry[data-unique-expression-count="1"] .term-frequency-disambiguation-separator,
-.entry[data-unique-expression-count="1"] .term-frequency-disambiguation-expression,
-.entry[data-unique-reading-count="1"] .term-frequency-disambiguation-separator,
-.entry[data-unique-reading-count="1"] .term-frequency-disambiguation-reading,
-.entry[data-unique-expression-count="1"][data-unique-reading-count="1"] .term-frequency-disambiguation {
-    display: none;
-}
 
 
 /* Merged term styles */
@@ -708,7 +708,7 @@ button.action-button {
     bottom: -1.9em;
     white-space: nowrap;
 }
-.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.frequencies .term-frequency-disambiguation {
+.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.frequencies .tag-frequency-disambiguation {
     display: none;
 }
 
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 2e2cc32c..3953098d 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -97,6 +97,24 @@
 
 <!-- Tag templates -->
 <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-disambiguation"><span class="term-frequency-disambiguation-expression"></span><span class="term-frequency-disambiguation-separator"></span><span class="term-frequency-disambiguation-reading"></span></span><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></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>
 
 </body></html>
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 82f6199b..1810000b 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -80,7 +80,7 @@ class DisplayGenerator {
 
         this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions);
         this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), reasons);
-        this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), frequencies);
+        this._appendMultiple(frequenciesContainer, this._createTermFrequencyTag.bind(this), frequencies);
         this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches);
         this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitions);
 
@@ -103,7 +103,7 @@ class DisplayGenerator {
 
         glyphContainer.textContent = details.character;
 
-        this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies);
+        this._appendMultiple(frequenciesContainer, this._createKanjiFrequencyTag.bind(this), details.frequencies);
         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);
@@ -138,7 +138,7 @@ 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._createFrequencyTag.bind(this), frequencies);
+        this._appendMultiple(frequencyContainer, this._createTermFrequencyTag.bind(this), frequencies);
 
         return node;
     }
@@ -458,14 +458,14 @@ class DisplayGenerator {
         path.setAttribute('d', `M${pathPoints.join(' L')}`);
     }
 
-    _createFrequencyTag(details) {
+    _createTermFrequencyTag(details) {
         const {expression, reading, dictionary, frequency} = details;
-        const node = this._templates.instantiate('tag-frequency');
+        const node = this._templates.instantiate('term-tag-frequency');
 
-        node.querySelector('.term-frequency-disambiguation-expression').textContent = expression;
-        node.querySelector('.term-frequency-disambiguation-reading').textContent = reading;
-        node.querySelector('.term-frequency-dictionary-name').textContent = dictionary;
-        node.querySelector('.term-frequency-value').textContent = frequency;
+        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;
 
         node.dataset.expression = expression;
         node.dataset.reading = reading;
@@ -476,6 +476,20 @@ class DisplayGenerator {
         return node;
     }
 
+    _createKanjiFrequencyTag(details) {
+        const {character, dictionary, frequency} = details;
+        const node = this._templates.instantiate('kanji-tag-frequency');
+
+        node.querySelector('.tag-frequency-dictionary-name').textContent = dictionary;
+        node.querySelector('.tag-frequency-value').textContent = frequency;
+
+        node.dataset.character = character;
+        node.dataset.dictionary = dictionary;
+        node.dataset.frequency = frequency;
+
+        return node;
+    }
+
     _appendKanjiLinks(container, text) {
         const jp = this._japaneseUtil;
         let part = '';