Display pronunciation refactor (#1835)

* Simplify svg and container styles

* Rename pitch-accent-details to pitch-accent-graph-container

* Rename pitch-accent-graph* to pronunciation-graph*

* Remove unused template

* Omit quotes

* Rename pitch-accent-character to pronunciation-mora

* Simplify names

* Replace pronunciation-mora-inner with pronunciation-character

* Improve grouping of nasal characters

* Simplify character replacement

* Replace pseudo-elements with real elements

* Use an element rather than a fragment

* Rename functions

* Add wrapper

* Rename pitch-accent-characters to pronunciation-text-container

* Update test data

* Update downstep notation generation

* Rename pitch-accent-position to pronunciation-downstep-notation-container

* Space

* Wrap pronunciations in a container node

* Update preview

* Embed pitch accent styles directly

1 files changed, 7 insertions, 7 deletions

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 15c5787d..2421b88a 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -470,20 +470,20 @@ class DisplayGenerator {
         if (devoicePositions.length > 0) { node.dataset.devoiceMoraPosition = devoicePositions.join(' '); }
         node.dataset.tagCount = `${tags.length}`;
 
-        let n = node.querySelector('.pitch-accent-position');
-        this._setTextContent(n, `${position}`, '');
-
-        n = node.querySelector('.pitch-accent-tag-list');
+        let n = node.querySelector('.pitch-accent-tag-list');
         this._appendMultiple(n, this._createTag.bind(this), tags);
 
         n = node.querySelector('.pitch-accent-disambiguation-list');
         this._createPitchAccentDisambiguations(n, exclusiveTerms, exclusiveReadings);
 
-        n = node.querySelector('.pitch-accent-characters');
+        n = node.querySelector('.pronunciation-downstep-notation-container');
+        n.appendChild(this._pronunciationGenerator.createPronunciationDownstepNotation(position));
+
+        n = node.querySelector('.pronunciation-text-container');
         n.lang = 'ja';
-        n.appendChild(this._pronunciationGenerator.createPitchAccentHtml(morae, position, nasalPositions, devoicePositions));
+        n.appendChild(this._pronunciationGenerator.createPronunciationText(morae, position, nasalPositions, devoicePositions));
 
-        node.querySelector('.pitch-accent-details').appendChild(this._pronunciationGenerator.createPitchGraph(morae, position));
+        node.querySelector('.pronunciation-graph-container').appendChild(this._pronunciationGenerator.createPronunciationGraph(morae, position));
 
         return node;
     }