From a43523d91f4aaa245d738a5df7dd2e7bcf143757 Mon Sep 17 00:00:00 2001
From: User <user@UserdeMacBook-Pro.local>
Date: Fri, 4 Jul 2025 11:28:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20show.html.erb=EF=BC=9Aken?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/universal_tables/show.html.erb      | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/app/views/admin/universal_tables/show.html.erb b/app/views/admin/universal_tables/show.html.erb
index 58af71f..9c1d110 100755
--- a/app/views/admin/universal_tables/show.html.erb
+++ b/app/views/admin/universal_tables/show.html.erb
@@ -113,8 +113,14 @@
                 <% ce.column_entry_files.desc(:sort_number).each do |entry_file| %>
                   <% next unless entry_file.choose_lang_display(locale) %>
                   <% if entry_file.file.content_type.start_with?('audio/') %>
-                    <%= entry_file.get_file_title %>
-                    <a class="voice-player" data-content="<%= entry_file.file.url %>" href="" title="播放讀音"><i class="fa fa-play" aria-hidden="true"></i></a>
+      <li class="pronunciation-wrapper">
+        <%= entry_file.get_file_title %>
+        <a class="voice-player" data-content="<%= entry_file.file.url %>" href="" title="播放讀音">
+          <i class="fa fa-play" aria-hidden="true"></i>
+        </a>
+      </li>
+
+
                   <% else %>
                     <li><%= link_to entry_file.get_file_title, entry_file.file.url, target: "_blank" %></li>
                   <% end %>
@@ -149,6 +155,35 @@
 </div>
 
 <script>
+$(document).ready(function () {
+ $('.ut-table ol').each(function () {
+  const $ol = $(this);
+  const nodes = Array.from($ol.contents());
+  let currentText = null;
+
+  nodes.forEach(function (node) {
+    // 如果是文字節點，暫存
+    if (node.nodeType === 3 && node.nodeValue.trim() !== '') {
+      currentText = node.nodeValue.trim();
+      node.remove(); // 移除原始文字節點
+    }
+
+    // 如果是 .voice-player，包進 wrapper 並包在 <li>
+    if (node.nodeType === 1 && node.classList.contains('voice-player')) {
+      const $wrapper = $('<div class="pronunciation-wrapper"></div>');
+      if (currentText) {
+        $wrapper.append(document.createTextNode(currentText));
+        currentText = null; // 清空暫存
+      }
+      $wrapper.append($(node));
+
+      const $li = $('<li></li>').append($wrapper);
+      $ol.append($li);
+    }
+  });
+});
+});
+
 $(".action").after($("#entry-status"));
 let audio;
 $(".voice-player").on("click", function(){