merged mode: support audio and tags for terms

2 files changed, 23 insertions, 7 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 04e6a326..147256bf 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -118,20 +118,34 @@ hr {
     font-size: 24px;
 }
 
-.expression a {
+.expression .kanji-link {
     border-bottom: 1px #777 dashed;
     color: #333;
     text-decoration: none;
 }
 
-.expression-popular, .expression-popular a {
+.expression-popular, .expression-popular .kanji-link {
     color: #0275d8;
 }
 
-.expression-rare, .expression-rare a {
+.expression-rare, .expression-rare .kanji-link {
     color: #999;
 }
 
+.expression .peek-wrapper {
+    font-size: 14px;
+    white-space: nowrap;
+    display: inline-block;
+    position: relative;
+    width: 0px;
+    height: 0px;
+    visibility: hidden;
+}
+
+.expression:hover .peek-wrapper {
+    visibility: visible;
+}
+
 .reasons {
     color: #777;
     display: inline-block;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 2dd95692..e54c8b18 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -71,8 +71,10 @@ class Display {
 
     onAudioPlay(e) {
         e.preventDefault();
-        const index = Display.entryIndexFind($(e.currentTarget));
-        this.audioPlay(this.definitions[index]);
+        const link = $(e.currentTarget);
+        const definitionIndex = Display.entryIndexFind(link);
+        const expressionIndex = $(e.currentTarget).closest('.entry').find('.expression .action-play-audio').index(link);
+        this.audioPlay(this.definitions[definitionIndex], expressionIndex);
     }
 
     onNoteAdd(e) {
@@ -380,11 +382,11 @@ class Display {
         }
     }
 
-    async audioPlay(definition) {
+    async audioPlay(definition, expressionIndex) {
         try {
             this.spinner.show();
 
-            let url = await apiAudioGetUrl(definition, this.options.general.audioSource);
+            let url = await apiAudioGetUrl(expressionIndex === -1 ? definition : definition.expressions[expressionIndex], this.options.general.audioSource);
             if (!url) {
                 url = '/mixed/mp3/button.mp3';
             }