add. ime for real

index.html

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

main.css

@@ -101,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 {

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();
 }