Add language dropdown

hermanzdosilovic · hermanzdosilovic · commit 6a081c92db01 · 2025-02-16T03:12:01.000+01:00
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en-US" class="w-full h-full">
+<html lang="en-US" class="size-full">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -78,13 +78,24 @@
     <meta name="theme-color" content="#ffffff">
 </head>
 
-<body class="flex flex-col w-full h-full text-black bg-white dark:bg-black dark:text-white" style="opacity: 0 !important;">
+<body class="flex flex-col text-black bg-white size-full dark:bg-black dark:text-white" style="opacity: 0 !important;">
     <header class="flex items-center p-1 space-x-1 judge0-showNavigation">
         <a href="https://judge0.com" target="_blank" rel="noopener" tabindex="-1" class="w-8 h-8 rounded-md judge0-showLogo">
             <img src="./images/icon_var2_rounded_512.png">
         </a>
-        <input id="judge0-compiler-options" class="h-8 px-3 py-2 text-sm bg-transparent border rounded-md dark:border-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 placeholder:text-sm judge0-showCompilerOptions" placeholder="Compiler options" type="text">
-        <input id="judge0-command-line-arguments" class="h-8 px-3 py-2 text-sm bg-transparent border rounded-md dark:border-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 placeholder:text-sm judge0-showCommandLineArguments" placeholder="Command line arguments" type="text">
+        <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>
+                <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">
+                <ul class="py-2">
+                    <li class="hidden px-4 py-1 mx-2 rounded-md cursor-pointer judge0-dropdown-option hover:bg-zinc-100 dark:hover:bg-zinc-800"></li>
+                </ul>
+            </div>
+        </div>
+        <input id="judge0-compiler-options" class="h-8 px-2 text-sm bg-transparent border rounded-md dark:border-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 placeholder:text-sm judge0-showCompilerOptions" placeholder="Compiler options" type="text">
+        <input id="judge0-command-line-arguments" class="h-8 px-2 text-sm bg-transparent border rounded-md dark:border-zinc-800 max-md:hidden focus-visible:outline-none focus-visible:ring-2 placeholder:text-sm judge0-showCommandLineArguments" placeholder="Command line arguments" type="text">
         <button id="judge0-run-btn" class="inline-flex items-center justify-center h-8 gap-2 px-4 text-sm font-semibold transition bg-blue-800 rounded-md focus-visible:outline-none focus-visible:ring-2 hover:bg-blue-900 dark:hover:bg-blue-700 text-blue-50 whitespace-nowrap judge0-showRunButton">
             <i class="fa-solid fa-play"></i>
             Run
diff --git a/js/site.js b/js/site.js
@@ -1,4 +1,24 @@
 "use strict";
+
 document.addEventListener("DOMContentLoaded", function () {
     document.getElementById("judge0-year").innerText = new Date().getFullYear();
 });
+
+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");
+        span.innerText = event.target.innerText;
+        dropdown.querySelector(".judge0-dropdown-menu").classList.toggle("hidden");
+    } else {
+        document.querySelectorAll(".judge0-dropdown-menu").forEach(function (dropdownMenu) {
+            if (!dropdownMenu.contains(event.target)) {
+                dropdownMenu.classList.add("hidden");
+            }
+        });
+    }
+});
