From 801342e03adbaee60f82dfc44ebb9680d68e00f9 Mon Sep 17 00:00:00 2001
From: Yukari Hafner <shinmera@tymoon.eu>
Date: Thu, 29 Aug 2024 18:18:13 +0200
Subject: [PATCH] Add compose box to index.

---
 index.css  | 21 ++++++++++++++++++---
 index.ctml | 39 ++++++++++++++++++++++++---------------
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/index.css b/index.css
index 4d5c662..702f746 100644
--- a/index.css
+++ b/index.css
@@ -77,9 +77,9 @@ a.button:hover {
 }
 main {
     background: #EEEEEE;
-    padding: 4em 0;
+    padding: 2em 0;
 }
-.search {
+input.search {
     box-sizing: border-box;
     font-size: 1.5em;
     width: 20em;
@@ -89,6 +89,21 @@ main {
     border: 1px solid #CCCCCC;
     border-radius: 0.2em;
 }
+input.compose {
+    box-sizing: border-box;
+    font-family: promptfont;
+    font-size: 1.5em;
+    width: 100%;
+    display: block;
+    margin: 0 auto 1em auto;
+    padding: 0.2em 0.5em;
+    background: rgba(0,0,0,0.1);
+    border: none;
+    text-align: center;
+}
+input.compose:focus {
+    outline: none;
+}
 .glyphsection {
     display: flex;
     flex-wrap: wrap;
@@ -179,7 +194,7 @@ img{
     background: #303030;
     color: #EFEFEF;
 }
-#popup .copy:hover{
+#popup .copy:hover, #popup .compose:hover{
     color: orange;
     cursor: pointer;
 }
diff --git a/index.ctml b/index.ctml
index 7141264..8cce342 100644
--- a/index.ctml
+++ b/index.ctml
@@ -30,6 +30,7 @@
       </p>
     </header>
     <main>
+      <input class="compose" placeholder="Compose..." spellcheck="false">
       <input class="search" type="search" placeholder="Search..." spellcheck="false" autofocus>
       <c:splice iterate="sections">
         <section class="glyphsection" lquery="(attr :id name)">
@@ -54,40 +55,41 @@
     <div id="popup" class="hidden">
       <div class="box">
         <nav>
-          <i class="copy" title="Copy glyph" data-value="character">&#x0021;</i>
-          <code class="copy" title="Copy unicode" data-value="code">U+0021</code>
-          <h2 class="copy" title="Copy name" data-value="name">Exclamation mark</h2>
+          <i class="copy" title="Copy glyph" data-text="character">&#x0021;</i>
+          <code class="copy" title="Copy unicode" data-text="code">U+0021</code>
+          <h2 class="copy" title="Copy name" data-text="name">Exclamation mark</h2>
+          <span class="compose" title="Add to compose box" data-value="character">Compose</span>
         </nav>
-        <div class="preview black"><i data-value="character">&#x0021;</i></div>
-        <div class="preview white"><i data-value="character">&#x0021;</i></div>
+        <div class="preview black"><i data-text="character">&#x0021;</i></div>
+        <div class="preview white"><i data-text="character">&#x0021;</i></div>
         <div class="info">
           <div class="row">
             <label>Category:</label>
-            <span data-value="category">ascii</span>
+            <span data-text="category">ascii</span>
           </div>
           <div class="row">
             <label>Name:</label>
-            <span data-value="name" class="copy" title="Copy name">!</span>
+            <span data-text="name" class="copy" title="Copy name">!</span>
           </div>
           <div class="row">
             <label>Code Name:</label>
-            <code data-value="codeName" class="copy" title="Copy code name">exclamation</code>
+            <code data-text="codeName" class="copy" title="Copy code name">exclamation</code>
           </div>
           <div class="row">
             <label>Glyph:</label>
-            <span data-value="character" class="copy" title="Copy glyph">&#x0021;</span>
+            <span data-text="character" class="copy" title="Copy glyph">&#x0021;</span>
           </div>
           <div class="row">
             <label>Unicode:</label>
-            <code data-value="code" class="copy" title="Copy unicode">U+0021</code>
+            <code data-text="code" class="copy" title="Copy unicode">U+0021</code>
           </div>
           <div class="row">
             <label>Codepoint:</label>
-            <span data-value="codepoint" class="copy" title="Copy codepoint">33</span>
+            <span data-text="codepoint" class="copy" title="Copy codepoint">33</span>
           </div>
           <div class="row">
             <label>Tags:</label>
-            <span data-value="tags">ascii</span>
+            <span data-text="tags">ascii</span>
           </div>
         </div>
       </div>
@@ -123,9 +125,10 @@
       popup.addEventListener("click", ()=>popup.classList.add("hidden"));
       popup.querySelector(".box").addEventListener("click", (ev)=>ev.stopPropagation());
       let showPopup = (glyph)=>{
-          for(let el of popup.querySelectorAll("[data-value]")){
-              el.innerText = glyph.dataset[el.dataset.value];
-          }
+          for(let el of popup.querySelectorAll("[data-text]"))
+              el.innerText = glyph.dataset[el.dataset.text];
+          for(let el of popup.querySelectorAll("[data-value]"))
+              el.setAttribute("value", glyph.dataset[el.dataset.value]);
           popup.classList.remove("hidden");
       };
       for(let el of popup.querySelectorAll(".copy")){
@@ -133,6 +136,12 @@
               copyToClipboard(el.innerText);
           });
       }
+      for(let el of popup.querySelectorAll(".compose")){
+          el.addEventListener("click", ()=>{
+              document.querySelector("input.compose").value += el.getAttribute("value");
+              popup.classList.add("hidden");
+          });
+      }
       
       for(let el of document.querySelectorAll(".glyph")){
           el.addEventListener("click", ()=>showPopup(el));