refactor result card creation and close floating window functionality

poychang · Nov 16, 2024 · e3e0707 · e3e0707
1 parent af9597f
commit e3e0707
Showing 1 changed file with 38 additions and 22 deletions.
diff --git 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/[email protected]/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,26 +150,20 @@ <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();
                     }
                 });
             })
             .catch(error => {
                 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>