add. ime for real

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "heonian-ime"]
+	path = heonian-ime
+	url = https://git.succubi.services/heonian.org/heonian-ime

heonian-ime

@@ -0,0 +1 @@
+Subproject commit 76bc6baf11f2b21f365e6f2ef36c05b00ea04c84

index.html

@@ -37,6 +37,7 @@
 
         </main>
         
+        <script src="./heonian-ime/ime.js"></script>
         <script src="./main.js"></script>
     </body>
 </html>

main.css

@@ -32,19 +32,33 @@
 :root {
     --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
     --font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif;
-    --nice-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    --fg: rgb(0,0,0);
-    --grey: rgb(226, 226, 226);
+    --bg: rgb(255,255,255);
-    --darkgrey: rgb(150, 150, 150);
+    --grey: rgb(152, 152, 152);
+    --darkgrey: rgb(100, 100, 100);
+    --link: rgb(27 120 151);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --fg: rgb(255,255,255);
+        --bg: rgb(0,0,0);
+        --grey: rgb(226, 226, 226);
+        --darkgrey: rgb(215, 215, 215);
+        --link: rgb(27 120 151);
+    }
 }
 
 body {
     margin: 0;
     padding: 0;
     font-family: var(--font);
+    color: var(--fg);
+    background-color: var(--bg);
 }
 
 a {
-    color: rgb(27 120 151);
+    color: var(--link);
     text-decoration: none;
 }
 
@@ -87,6 +101,9 @@ header #search button {
     text-align: center;
     height: 2rem;
     border-left: 1px solid var(--grey);
+    color: var(--grey);
+    transition: 0.3s color ease;
+    cursor: pointer;
 }
 
 header input {
@@ -100,6 +117,8 @@ header input {
     font-weight: 100;
     transition: border-color 0.3s;
     width: calc(100% - 52px - 24px);
+    background-color: var(--bg);
+    color: var(--fg);
 }
 
 header input:focus {
@@ -145,7 +164,7 @@ main {
     opacity: 0;
     max-width: 600px;
     margin: auto;
-    margin-top: 1rem;
+    margin-top: calc(1rem + 24px);
     padding-left: 1rem;
     padding-right: 1rem;
 }
@@ -168,6 +187,10 @@ main {
     border-bottom: 1px solid var(--darkgrey);
 }
 
+.result:first-child {
+    padding-top: 0;
+}
+
 .result-meaning {
     padding-bottom: 8px;
 }

main.js

@@ -5,6 +5,19 @@ let searchDictionary = {};
 let header = null;
 let main = null;
 
+let ime = null;
+
+function toggleIME() {
+    if (ime == null) {
+        ime = new HeonianIME(header.querySelector("input"));
+        header.querySelector("#search button").style.color = "var(--fg)";
+    } else {
+        ime.imeDetach();
+        ime = null;
+        header.querySelector("#search button").style.color = "var(--grey)";
+    }
+}
+
 function animateHeader(inout = false) {
     //todo: debounce this
     if (inout) {
@@ -47,10 +60,14 @@ document.addEventListener("keydown", (e) => {
         if (!header.querySelector("input").matches(":focus") && !header.classList.contains("fullscreen")) {
             e.preventDefault();
             animateHeader(true);
+        } else if (header.querySelector("input").matches(":focus") && ime != null) {
+            toggleIME();
+        } else if (header.querySelector("input").matches(":focus")) {
+            header.querySelector("input").value = "";
         }
     }
     if (e.keyCode === 13) {
-        if (header.querySelector("input").matches(":focus")) {
+        if (header.querySelector("input").matches(":focus") && ime == null) {
             //search
             e.preventDefault();
             if (header.classList.contains("fullscreen")) {
@@ -262,5 +279,6 @@ function doSearch() {
 window.onload = () => {
     header = document.querySelector("header");
     main = document.querySelector("main");
+    header.querySelector("#search button").onclick = () => {toggleIME();};
     loadDictionary();
 }