diff --git a/bun.lockb b/bun.lockb index 9ec4073..03d6652 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/src/index.tsx b/src/index.tsx index d0ca44c..f4b4d8b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,12 @@ -import { Database } from "bun:sqlite"; -import { randomUUID } from "node:crypto"; -import { rmSync } from "node:fs"; -import { mkdir, unlink } from "node:fs/promises"; import cookie from "@elysiajs/cookie"; import { html } from "@elysiajs/html"; import { jwt } from "@elysiajs/jwt"; import { staticPlugin } from "@elysiajs/static"; +import { Database } from "bun:sqlite"; import { Elysia, t } from "elysia"; +import { randomUUID } from "node:crypto"; +import { rmSync } from "node:fs"; +import { mkdir, unlink } from "node:fs/promises"; import { BaseHtml } from "./components/base"; import { Header } from "./components/header"; import { @@ -473,27 +473,101 @@ const app = new Elysia({ ))} */} -
+
- + + +
+ + + {/* Hidden element which determines the format to convert the file too and the converter to use */} + +
@@ -507,24 +581,82 @@ const app = new Elysia({ "/conversions", ({ body }) => { return ( - + <> + + + + ); }, { body: t.Object({ fileType: t.String() }) }, diff --git a/src/public/script.js b/src/public/script.js index 0838f65..0a04630 100644 --- a/src/public/script.js +++ b/src/public/script.js @@ -3,7 +3,75 @@ const fileInput = document.querySelector('input[type="file"]'); const fileNames = []; let fileType; -const selectContainer = document.querySelector("form > article"); +const selectContainer = document.querySelector("form .select_container"); + +const updateSearchBar = () => { + const convertToInput = document.querySelector( + "input[name='convert_to_search']", + ); + const convertToPopup = document.querySelector(".convert_to_popup"); + const convertToGroupElements = document.querySelectorAll(".convert_to_group"); + const convertToGroups = {}; + const convertToElement = document.querySelector("select[name='convert_to']"); + + const showMatching = (search) => { + for (const [targets, groupElement] of Object.values(convertToGroups)) { + let matchingTargetsFound = 0; + for (const target of targets) { + if (target.dataset.target.includes(search)) { + matchingTargetsFound++; + target.hidden = false; + } else { + target.hidden = true; + } + } + + if (matchingTargetsFound === 0) { + groupElement.hidden = true; + } else { + groupElement.hidden = false; + } + } + }; + + for (const groupElement of convertToGroupElements) { + const groupName = groupElement.dataset.converter; + + const targetElements = groupElement.querySelectorAll(".target"); + const targets = Array.from(targetElements); + + for (const target of targets) { + target.onclick = () => { + convertToElement.value = target.dataset.value; + convertToInput.value = `${target.dataset.target} using ${target.dataset.converter}`; + showMatching(""); + }; + } + + convertToGroups[groupName] = [targets, groupElement]; + } + + convertToInput.addEventListener("input", (e) => { + showMatching(e.target.value.toLowerCase()); + }); + + convertToInput.addEventListener("blur", (e) => { + // Keep the popup open even when clicking on a target button + // for a split second to allow the click to go through + if (e?.relatedTarget?.classList?.contains("target")) { + setTimeout(() => { + convertToPopup.hidden = true; + }, 100); + return; + } + + convertToPopup.hidden = true; + }); + + convertToInput.addEventListener("focus", () => { + convertToPopup.hidden = false; + }); +}; // const convertFromSelect = document.querySelector("select[name='convert_from']"); @@ -49,6 +117,7 @@ fileInput.addEventListener("change", (e) => { .then((res) => res.text()) .then((html) => { selectContainer.innerHTML = html; + updateSearchBar(); }) .catch((err) => console.log(err)); } @@ -123,3 +192,5 @@ formConvert.addEventListener("submit", (e) => { const hiddenInput = document.querySelector("input[name='file_names']"); hiddenInput.value = JSON.stringify(fileNames); }); + +updateSearchBar(); diff --git a/src/public/style.css b/src/public/style.css index 41c1065..cff90bd 100644 --- a/src/public/style.css +++ b/src/public/style.css @@ -12,4 +12,48 @@ div.center { display: flex; justify-content: center; align-items: center; -} \ No newline at end of file +} + +@media (max-width: 99999999999px) { + .convert_to_popup { + width: 50vw !important; + height: 50vh; + } +} + +@media (max-width: 850px) { + .convert_to_popup { + width: 60vw !important; + height: 60vh; + } +} + +@media (max-width: 575px) { + .convert_to_popup { + width: 80vw !important; + height: 75vh; + } +} + +@media (max-height: 1000px) { + .convert_to_popup { + height: 40vh; + } +} +@media (max-height: 650px) { + .convert_to_popup { + height: 30vh; + } +} + +@media (max-height: 500px) { + .convert_to_popup { + height: 25vh; + } +} + +@media (max-height: 400px) { + .convert_to_popup { + height: 15vh; + } +}