simple search results stats

main.css

@@ -128,6 +128,9 @@ header input:focus {
 
 header span.heonian {
     font-size: 1.5rem;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 header.fullscreen {
@@ -145,6 +148,7 @@ header.fullscreen {
 
 header.fullscreen span.heonian {
     font-size: 8rem;
+    cursor: default;
 }
 
 header.fullscreen #search {
@@ -191,6 +195,10 @@ main {
     padding-top: 0;
 }
 
+.result:last-child {
+    border-bottom: none;
+}
+
 .result-meaning {
     padding-bottom: 8px;
 }
@@ -222,6 +230,17 @@ main {
     color: var(--darkgrey);
     margin-top: 6px;
     margin-bottom: 6px;
+    border-left: 3px solid var(--darkgrey);
+    padding-left: 4px;
+}
+
+.result-translation {
+    font-size: 0.9rem;
+    color: var(--darkgrey);
+}
+
+.result-translation::before {
+    content: " - ";
 }
 
 .result summary {
@@ -235,4 +254,12 @@ main {
     font-size: 1.25rem;
 }
 
+.results-header-count::after {
+    content: ", ";
+}
+
+.results-header-count:last-child::after {
+    content: "";
+}
+
 /* todo. organize this file better. this is a fucking mess */

main.js

@@ -164,19 +164,23 @@ function loadDictionary() {
                 let keys = Object.keys(json);
                 //prepare search. maybe async this if we're loading a specific word?
                 for (let i = 0; i < keys.length; i++) {
-                    //create array
+                    try {
-                    searchDictionary[keys[i]] = [];
+                        //create array
+                        searchDictionary[keys[i]] = [];
 
-                    //add: word
+                        //add: word
-                    searchDictionary[keys[i]].push(keys[i]);
+                        // searchDictionary[keys[i]].push(keys[i]);
 
-                    //add: romanized word
+                        //add: romanized word
-                    searchDictionary[keys[i]].push(stripWord(heonianToRoman(keys[i])));
+                        searchDictionary[keys[i]].push(stripWord(heonianToRoman(keys[i])));
 
-                    //add: translations, meanings
+                        //add: translations, meanings
-                    for (let o = 0; o < values[i].length; o++) {
+                        for (let o = 0; o < values[i].length; o++) {
-                        searchDictionary[keys[i]].push(stripWord(values[i][o]["meaning"]));
+                            if (values[i][o].hasOwnProperty("translation")) searchDictionary[keys[i]].push(stripWord(values[i][o]["translation"]));
-                        searchDictionary[keys[i]].push(stripWord(values[i][o]["translation"]));
+                            if (values[i][o].hasOwnProperty("meaning")) searchDictionary[keys[i]].push(stripWord(values[i][o]["meaning"]));                            
+                        }
+                    } catch (e) {
+                        console.log(keys[i] + " failed to load :/");
                     }
                 }
 
@@ -192,6 +196,7 @@ function loadDictionary() {
 
 function search(word) {
     word = stripWord(word);
+    word = heonianToRoman(word);
     let result = [];
     for (let key in searchDictionary) {
         for (let value in searchDictionary[key]) {
@@ -205,7 +210,8 @@ function search(word) {
 }
 
 function doSearch() {
-    let results = search(header.querySelector("input").value);
+    let val = header.querySelector("input").value;
+    let results = search(val);
     if (results.length == 0) {
         main.innerHTML = "no results lulw";
     } else {
@@ -213,6 +219,7 @@ function doSearch() {
         /*
         [words - 420 found / expressions - 69 found / wahtever else - ygettheidea] (click one to filter to just those)
         */
+        let types = {}
         for (let i = 0; i < results.length; i++) {
             let result = document.createElement("div");
             result.classList.add("result");
@@ -223,8 +230,10 @@ function doSearch() {
             header.innerHTML = results[i] + " <rt>" + heonianToRoman(results[i]) + "</rt>";
 
             // 2. add tags [tags like. common word, slang, formal???, type, etc]
+            // hhh how do i do this part, what tags. would i add. would this be. per word, or per definition?
 
             // 3. formal/nonformal versions, inflections button
+            // could try to work on this though
 
             // 4. audio clip if found
 
@@ -241,18 +250,23 @@ function doSearch() {
                 meaning.classList.add("result-meaning");
                 //ripping off jisho: Bold, word type (*required)
                 meaning.innerHTML += "<b class='capitalize'>"+json[results[i]][o]["type"]+"</b>";
+                if (types[json[results[i]][o]["type"]] == undefined) {
+                    types[json[results[i]][o]["type"]] = 0;
+                } else {
+                    types[json[results[i]][o]["type"]]++;
+                }
                 //number, meaning (*required)
                 meaning.innerHTML += "<br><span class='result-number'>"+(o+1)+"</span><span class='result-big'>"+json[results[i]][o]["meaning"]+"</span>";
                 //longer translation (below are not required, make sure to check for them)
-                if (json[results[i]][o]["translation"] != undefined) {
+                if (json[results[i]][o]["translation"] != undefined && json[results[i]][o]["translation"].toLowerCase() != json[results[i]][o]["meaning"].toLowerCase()) {
-                    meaning.innerHTML += "<br><details><summary>Translation</summary><p>"+json[results[i]][o]["translation"]+"</p></details>";
+                    meaning.innerHTML += "<span class='result-translation'>"+json[results[i]][o]["translation"]+"</span>";
                 }
                 //example
                 if (json[results[i]][o]["examples"] != undefined) {
                     let temp = ""
                     temp += "<details><summary>Examples</summary><p>";
                     for (let e in json[results[i]][o]["examples"]) {
-                        temp += "<span class='heonian'>"+e+"</span> - "+json[results[i]][o]["examples"][e];
+                        temp += "<span class='heonian'>"+e+"</span> - "+json[results[i]][o]["examples"][e]+"<br>";
                     }
                     temp += "</p></details>";
                     meaning.innerHTML += temp;
@@ -273,6 +287,14 @@ function doSearch() {
             }
             main.appendChild(result);
         }
+        types = sortObject(types);
+        let header = document.createElement("div");
+        header.classList.add("results-header");
+        header.innerHTML += "<span class='heonian'>search results for: " + val + "</span><br>";
+        for (let i in types) {
+            header.innerHTML += "<span class='results-header-count'>"+i+"s - "+types[i]+"</span>";
+        }
+        main.prepend(header);
     }
 }
 
@@ -280,5 +302,12 @@ window.onload = () => {
     header = document.querySelector("header");
     main = document.querySelector("main");
     header.querySelector("#search button").onclick = () => {toggleIME();};
+    header.querySelector("span.heonian").onclick = () => {
+        if (!header.classList.contains("fullscreen")) {
+            animateHeader(true);
+        }
+    };
     loadDictionary();
-}
+}
+
+const sortObject = obj => Object.keys(obj).sort().reduce((res, key) => (res[key] = obj[key], res), {})