String to Slack letter emoji + clipboard.js

by jonahe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<div class="input-container">
  <label for="t_input">Raw text</label>
  <textarea tabindex="1" type="text" rows="4" id="t_input"></textarea>
</div>

<div class="output-container">
  <label for="t_output">Output</label>
  <textarea tabindex="2" rows="6" id="t_output"></textarea>
  <button id="manual_copy_btn" data-clipboard-target="#t_output">
    copy
 </button>
</div>


<div class="status-container">
  <label for="t_output">Copied to clipboard</label>
  <input id="clipboard_copy_status" />
</div>

CSS

body {
  background: snow;
}

div {
  margin: 20px;
  display: flex;
}

label {
  min-width: 120px;
}

input, textarea {
  padding: 4px;
  width: 100%;
}

.hidden {
  display: none;
}

JavaScript

const el_input = document.querySelector("#t_input");
const el_output = document.querySelector("#t_output");
const el_clipboard_copy_status = document.querySelector("#clipboard_copy_status");
const el_manual_copy_btn = document.querySelector("#manual_copy_btn");
el_output.value = "nothing here yet";
el_clipboard_copy_status.value = "not started";



const letterToSlackEmoji = l => {
	if("abcdefghijklmnopqrstuvwxyz".split("").includes(l)) {
  	return `:${l + l}:`;
  } else {
  	switch(l) {
    	case "å": return `:au:`;
      case "ä": return `:ae:`;
      case " ": return `   `;
      case "ö": return `:oe:`;
      case "!": return `:exclamation:`;
      case "?": return `:question:`;
      default: return l;
    } 
  }
}

const transformToSlackEmoji = msg => msg.toLowerCase().split("").map(letterToSlackEmoji).join("");

const handleTextUpdate = e => {
	el_clipboard_copy_status.value = "...";
	const srcText = e.target.value;
  const output = transformToSlackEmoji(srcText);
  el_output.value = output;
  el_manual_copy_btn.click()
  
}

el_input.onkeyup = handleTextUpdate;
el_input.change = handleTextUpdate;

const clipboard = new ClipboardJS('#manual_copy_btn');

clipboard.on('success', function(e) {
    e.clearSelection();
    el_input.focus();
    el_clipboard_copy_status.value = e.text;
});

clipboard.on('error', function(e) {
    el_input.focus();
    el_clipboard_copy_status.value = "FAILED!";
});