index.html

<meta charset="utf-8"><script type="module">
import { css, add, h1, style, link, create } from "https://js.sabae.cc/stdom.js";
import { MojiKiban } from "./MojiKiban.js";

onload = async () => {
  css();
  style({ body: { "text-align": "center", "max-width": "85vw" }, input: { width: "80%", "font-size": "150%", margin: "1em", padding: ".3em" }});

  h1("漢字検索、異体字検索");
  const inpkana = add("input");
  inpkana.placeholder = "漢字または読み";
  const divres = add("div");

  let slast = "";
  inpkana.onkeyup = inpkana.onchange = () => {
    const s = inpkana.value;
    if (s.length == 0 || slast == s) {
      return;
    }
    slast = s;
    location.hash = s;

    const hits = MojiKiban.search(s);
    console.log(hits);
    divres.innerHTML = "";
    divres.style.textAlign = "left";
    divres.style.display = "inline-block";
    divres.style.margin = "1em 1em 1em 10vw";
    const max = 100;
    const tonum = d => d.lines + (d.jis ? 0 : 1000);
    hits.sort((a, b) => {
      return tonum(a) - tonum(b);
    });
    for (let i = 0; i < Math.min(max, hits.length); i++) {
      const d = hits[i];
      const div = create("div");
      div.innerHTML = `<a href=${MojiKiban.getLink(d)} target=_blank><img src=${MojiKiban.getImageLink(d)} style="height: 2em; margin-bottom: -.5em; margin-right: 1em"></a> ${d.kanji} : ${d.lines}画 : ${d.yomi} : ${d.shrink} : ${d.jis ? d.jis + "(JIS X 2013)" : ""}`;
      div.style.padding = ".2em 0";
      divres.appendChild(div);
    }
  }
  add("br");
  link("MJ縮退デモ", "./shrink.html");
  add("br");
  link("文字情報＆フォント - 文字情報基盤", "https://moji.or.jp/mojikiban/");
  link("MojiKiban by Code for FUKUI", "https://github.com/code4fukui/mojikiban");
  link("一日一創", "https://fukuno.jig.jp/3242");

  await MojiKiban.init();
  const key = location.hash.substring(1);
  if (key) {
    inpkana.value = decodeURIComponent(key);
    inpkana.onchange();
  }
};
</script>