Add copy message to web page

WGUNDERWOOD · Jan 12, 2025 · 5679ae1 · 5679ae1
1 parent 98db077
commit 5679ae1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/web/index.html b/web/index.html
@@ -58,6 +58,7 @@
       padding-bottom: 3px;
       padding-left: 14px;
       padding-right: 14px;
+      cursor: pointer;
     }
     .textRow {
       display: flex;
@@ -96,6 +97,11 @@
       margin-top: 0px;
       margin-bottom: 0px;
     }
+    .copyMessage {
+      color: var(--col-light);
+      margin-left: 12px;
+      font-size: 18px;
+    }
     @media (max-width: 800px) {
       .logo {
         display: none;
@@ -115,6 +121,7 @@ <h2> An extremely fast LaTeX formatter </h2>
       <div>
         <button id="formatButton">Format</button>
         <button id="copyButton">Copy output to clipboard</button>
+        <span class=copyMessage id="copyMessage"></span>
       </div>
     </div>
 

diff --git a/web/index.js b/web/index.js
@@ -15,6 +15,8 @@ import init, { main } from './pkg/tex_fmt.js';
 // Submit button logic
 document.getElementById('formatButton').addEventListener(
   'click', async () => {
+    const copyMessage = document.getElementById('copyMessage');
+    copyMessage.innerText = ""
     const inputText = document.getElementById('inputText').value;
     const outputText = document.getElementById('outputText');
     const logText = document.getElementById('logText');
@@ -38,7 +40,9 @@ document.getElementById('copyButton').addEventListener(
     outputText.setSelectionRange(0, 99999);
     try {
       document.execCommand('copy');
-      alert('Copied to clipboard:\n\n' + outputText.value);
+      const copyMessage = document.getElementById('copyMessage');
+      copyMessage.innerText = "Copied!"
+      outputText.blur();
     } catch (err) {
       console.error('Failed to copy text: ', err);
     }