Document dropdown

Author: hermanzdosilovic

index.html

@@ -108,7 +108,7 @@
         </div>
         <div class="max-md:hidden judge0-showSelectLanguage judge0-dropdown">
             <button class="flex items-center justify-between h-8 px-2 text-sm text-left bg-transparent border rounded-md judge0-dropdown-btn dark:border-zinc-800 focus-visible:outline-none focus-visible:ring-2">
-                <span class="overflow-hidden text-nowrap"></span>
+                <span class="overflow-hidden text-nowrap judge0-dropdown-value"></span>
                 <i class="pl-2 text-xs fa-solid fa-chevron-down"></i>
             </button>
             <div class="absolute hidden mt-1 overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:rounded-md [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-md [&::-webkit-scrollbar-thumb]:bg-zinc-200 dark:[&::-webkit-scrollbar-track]:bg-transparent dark:[&::-webkit-scrollbar-thumb]:bg-zinc-700 text-sm bg-white border rounded-md shadow-md judge0-dropdown-menu max-h-1/2 dark:border-zinc-800 dark:bg-black z-50">

js/site.js

@@ -4,21 +4,34 @@ document.addEventListener("DOMContentLoaded", function () {
     document.getElementById("judge0-year").innerText = new Date().getFullYear();
 });
 
+/**
+ * Dropdown component consists of the following elements:
+ * 1. A wrapper div with class "judge0-dropdown".
+ * 2. A button with class "judge0-dropdown-btn".
+ * 3. A span with class "judge0-dropdown-value".
+ * 4. A div with class "judge0-dropdown-menu" that contains the dropdown options.
+ * 5. A list of options with class "judge0-dropdown-option".
+ *
+ * If the dropdown is not select dropdown then classes (3) and (5) are not required.
+ */
 document.body.addEventListener("click", function (event) {
     const dropdown = event.target.closest(".judge0-dropdown");
     const dropdownBtn = event.target.closest(".judge0-dropdown-btn");
 
     if (event.target && dropdownBtn && dropdownBtn.contains(event.target)) {
         dropdown.querySelector(".judge0-dropdown-menu").classList.toggle("hidden");
     } else if (event.target && event.target.classList.contains("judge0-dropdown-option")) {
-        const span = dropdown.querySelector("span");
+        const span = dropdown.querySelector("span.judge0-dropdown-value");
         span.innerText = event.target.innerText;
         dropdown.querySelector(".judge0-dropdown-menu").classList.toggle("hidden");
     }
 
-    // For each dropdown menu check if it needs to be hidden.
-    // If the click is outside of the dropdown menu and if that dropdown menu is not
-    // the dropdown menu of the just clicked dropdown button, hide it.
+    /**
+     * For each dropdown menu check if it needs to be hidden.
+     * Hide the dropdown menu if all applies:
+     * 1. The click is outside of the dropdown menu.
+     * 2. The dropdown menu is not the dropdown menu of the just clicked dropdown button.
+     */
     document.querySelectorAll(".judge0-dropdown-menu").forEach(function (dropdownMenu) {
         if (!dropdownMenu.contains(event.target) && dropdown !== dropdownMenu.closest(".judge0-dropdown")) {
             dropdownMenu.classList.add("hidden");