feat: Give user option to either type out emoji or copy

virejdasani · Jul 6, 2021 · e8e6d3a · e8e6d3a
1 parent c2b4d5d
commit e8e6d3a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,8 @@
                     Use 'Control + E' to summon Geniemoji</br></br>
                     Navigation:</br>
                     Use Arrow Keys to go up and down</br>
-                    Press Enter to type the Emoji
+                    Press Enter to type the Emoji,
+                    Press Shift + Enter to copy the Emoji
                 </div>
             </div>
         </form>

diff --git a/src/index.js b/src/index.js
@@ -41,13 +41,13 @@ function search() {
             currentEmojiLength = i
             // All the matching emojis are appended into answerEmojis. the '.char' is from the emoji.js file
             answerEmojis += `
-                <button type="button" onclick="typeEmoji('${item.char}')" class="emojiButton" tabindex="${i + 2}">
+                <button type="button" onclick="typeEmoji(event, '${item.char}')" class="emojiButton" tabindex="${i + 2}">
                     ${item.char}
                     ${item.name}
                 </button>
                 </br>
             ` // item.char is the emoji and item.name is the emoji name, both from the emojis.js file
-    })
+        })
 
     // If there are no matching emojis, it returns undefined. To not display 'undefined', we do the following
     if (typeof (answerEmojis) !== 'string') {
@@ -74,8 +74,33 @@ document.getElementById('commandInput').addEventListener('keydown', (e) => {
 })
 
 // This is executed when an emoji button is pressed
-function typeEmoji(text) {
-    electron.ipcRenderer.send('typeEmoji', text);
+function typeEmoji(event, text) {
+    if (event.shiftKey) {
+        // User held down Shift key while selecting this emoji, let's copy it
+        copy(text);
+    } else {
+        // User selected emoji with no Shift key, type out selected emoji
+        electron.ipcRenderer.send('typeEmoji', text)
+    }
+}
+
+// Function to copy text to clipboard
+function copy(text) {
+    // To copy, a text area is created, the emojiChar is added to the text area. This is then selected and copied. After it is copied, the text area is deleted
+    var textarea = document.createElement("textarea")
+    textarea.value = text
+    document.body.appendChild(textarea)
+    textarea.select()
+    document.execCommand("copy")
+    document.body.removeChild(textarea)
+    document.getElementById('answer').innerHTML = `
+        <div id="info">
+            Copied emoji to clipboard!</br></br>
+            Press Escape to close this window</br></br>
+            <a href="https://virejdasani.github.io/Geniemoji/" target="_blank">Geniemoji</a> (${appVersion})</br>
+            Developed by <a href="https://virejdasani.github.io/virej/" target="_blank">Virej Dasani</a>
+        </div>
+    `
 }
 
 // For arrow key navigation
@@ -90,7 +115,7 @@ document.addEventListener("keydown", (event) => {
         // circle through emojis
         // ArrowUp and focus on input field? -> select last emoji
         if (tabIndex < 1) {
-            tabIndex = currentEmojiLength + 2   // '+2': tabIndex starts with 1, 1 = input
+            tabIndex = currentEmojiLength + 2 // '+2': tabIndex starts with 1, 1 = input
         }
         // ArrowDown and focus on last emoji? -> select input field
         if (tabIndex > currentEmojiLength + 2) {
@@ -101,4 +126,4 @@ document.addEventListener("keydown", (event) => {
         // set focus on element to select
         newEl.focus()
     }
-})
+})