From e3e0707bb4933721602b7ec66fabce15caff3ee6 Mon Sep 17 00:00:00 2001
From: Poy Chang <poypost@gmail.com>
Date: Sat, 16 Nov 2024 10:40:00 +0800
Subject: [PATCH] refactor result card creation and close floating window
 functionality

---
 index.html | 60 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 3b41c5d..777e8dc 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,16 @@ <h1 class="card-title text-center mb-4">Microsoft Terminology Lookup</h1>
                 <div id="result" class="mt-4"></div>
             </div>
         </div>
+        <div class="pb-5"></div>
+        <div class="pb-5"></div>
+        <div class="pb-5"></div>
     </div>
+    <footer class="text-center mt-3 fixed-bottom bg-light py-3">
+        <p>Made by Poy Chang with ChatGPT</p>
+        <p>Data Source: <a
+                href="https://download.microsoft.com/download/b/2/d/b2db7a7c-8d33-47f3-b2c1-ee5e6445cf45/MicrosoftTermCollection.zip"
+                target="_blank" class="text-decoration-none">Microsoft Term Collection</a></p>
+    </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>
     <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.min.js" defer></script>
@@ -78,16 +87,7 @@ <h1 class="card-title text-center mb-4">Microsoft Terminology Lookup</h1>
                         if (results.length > 0) {
                             let resultHTML = "";
                             results.forEach(result => {
-                                const item = result.item;
-                                resultHTML += `
-                                    <div class='card mb-3'>
-                                        <div class='card-body'>
-                                            <h5 class='card-title'>${item.english} / ${item.chinese}</h5>
-                                            <p class='card-text'><strong>Definition:</strong> ${item.definition}</p>
-                                            <a href="#" class="text-decoration-none translate-link" data-url="https://www.bing.com/translator?text=${item.definition}&from=en&to=zh-Hant">Translate Definition with Bing</a>
-                                        </div>
-                                    </div>
-                                `;
+                                resultHTML += createResultCard(result.item);
                             });
                             document.getElementById("result").innerHTML = resultHTML;
                         } else {
@@ -96,6 +96,28 @@ <h5 class='card-title'>${item.english} / ${item.chinese}</h5>
                     }
                 }
 
+                // Function to create a result card.
+                function createResultCard(item) {
+                    return `
+                        <div class='card mb-3'>
+                            <div class='card-body'>
+                                <h5 class='card-title'>${item.english} / ${item.chinese}</h5>
+                                <p class='card-text'><strong>Definition:</strong> ${item.definition}</p>
+                                <a href="#" class="text-decoration-none translate-link" data-url="https://www.bing.com/translator?text=${item.definition}&from=en&to=zh-Hant">Translate Definition with Bing</a>
+                            </div>
+                        </div>
+                    `;
+                }
+
+                // Function to close the floating window.
+                function closeFloatingWindow() {
+                    const floatingWindow = document.getElementById("floatingWindow");
+                    floatingWindow.style.display = "none";
+                    // Remove the iframe.
+                    const iframe = document.getElementById("floatingIframe");
+                    if (iframe) iframe.remove();
+                }
+
                 // Event listener for the search button.
                 document.getElementById("searchButton").addEventListener("click", performSearch);
 
@@ -128,13 +150,13 @@ <h5 class='card-title'>${item.english} / ${item.chinese}</h5>
 
                 // Event listener to close the floating window.
                 document.getElementById("closeFloatingWindow").addEventListener("click", function () {
-                    const floatingWindow = document.getElementById("floatingWindow");
-                    floatingWindow.style.display = "none";
+                    closeFloatingWindow();
+                });
 
-                    // Remove the iframe.
-                    const iframe = document.getElementById("floatingIframe");
-                    if (iframe) {
-                        iframe.remove();
+                // Event listener for the ESC key to close the floating window.
+                document.addEventListener("keydown", function (e) {
+                    if (e.key === "Escape") {
+                        closeFloatingWindow();
                     }
                 });
             })
@@ -142,12 +164,6 @@ <h5 class='card-title'>${item.english} / ${item.chinese}</h5>
                 console.error('Error fetching terms.xml:', error);
             });
     </script>
-    <footer class="text-center mt-5 fixed-bottom bg-light py-3">
-        <p>Made by Poy Chang with ChatGPT</p>
-        <p>Data Source: <a
-                href="https://download.microsoft.com/download/b/2/d/b2db7a7c-8d33-47f3-b2c1-ee5e6445cf45/MicrosoftTermCollection.zip"
-                target="_blank" class="text-decoration-none">Microsoft Term Collection</a></p>
-    </footer>
 </body>
 
 </html>
\ No newline at end of file