Windows (muan#14): Migrated to Twitter style emoji for better Windows…

… compatibility. Also adding title to hint user about keywords and copied. Added yarn since it's hella fast 😺

.editorconfig

@@ -0,0 +1,4 @@
+# 2 space indentation
+[*.js,*.html]
+indent_style = space
+indent_size = 2

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 Mojibar-darwin-x64
+.idea/

app/index.html

@@ -3,5 +3,6 @@
 <span class='prepend-mag' aria-hidden='true'>🔍</span>
 <input class='search js-search' type='search' placeholder='Type a keyword...' aria-label='Enter a keyword'>
 <div class='results js-results' role='menu'></div>
+<script type="text/javascript" src="../node_modules/twemoji/2/twemoji.min.js"></script>
 <script type="text/javascript" src="search.js"></script>
 <script type="text/javascript" src="settings.js"></script>

app/search.js

@@ -2,6 +2,7 @@ var emojilib = require('emojilib').lib
 var emojikeys = require('emojilib').ordered
 var clipboard = require('electron').clipboard
 var ipc = require('electron').ipcRenderer
+var wordwrap = require('wordwrap')
 var index = buildIndex()
 var indexKeys = Object.keys(index)
 var emojikeyIndexTable = buildEmojikeyIndexTable()
@@ -65,13 +66,23 @@ document.addEventListener('keydown', function (evt) {
   }
 })
 
-function copyFocusedEmoji (emoji, copyText) {
-  var data
+function copyFocusedEmoji (targetElement, copyText) {
+  var data, image
+
+  // Since focused target could be an image, retarget the parent button.
+  if (targetElement.tagName == 'IMG') {
+    image = targetElement
+    button = targetElement.parentNode
+  } else {
+    // Pull image from first child node instead.
+    image = targetElement.childNodes[0]
+  }
+
   // on enter: copy data and exit
   if (copyText) {
-    data = ':' + emoji.getAttribute('aria-label') + ':'
+    data = ':' + button.getAttribute('aria-label') + ':'
   } else {
-    data = emoji.innerText
+    data = image.alt
   }
   clipboard.writeText(data)
   searchInput.value = ''
@@ -90,6 +101,7 @@ document.addEventListener('keypress', function (evt) {
 // if click on and emoji item, copy emoji unicode char to clipboard on click or
 // copy emoji code if `shiftKey` is pressed
 document.addEventListener('click', function (evt) {
+  window.clickEvent = evt
   if (evt.target.classList.contains('emoji')) {
     copyFocusedEmoji(evt.target, evt.shiftKey)
   }
@@ -139,13 +151,28 @@ function search (query) {
 function renderResults (emojiNameArray, containerElement) {
   containerElement.innerHTML = ''
   var fragment = document.createDocumentFragment()
+
+  // TODO: Due to overhead of rendering elements from scratch, maybe faster to use CSS to toggle element in DOM (i.e. display: none).
   emojiNameArray.forEach(function (name) {
     var unicode = (emojilib[name]['char'] || '--')
     var resultElement = document.createElement('button')
     resultElement.type = 'button'
     resultElement.className = 'emoji'
     resultElement.setAttribute('aria-label', name)
-    resultElement.textContent = unicode
+
+    // Parse the Twitter version of this emoji.
+    var parsed = twemoji.parse(unicode, function(icon) {
+		return '../node_modules/twemoji/2/svg/' + icon + '.svg'
+	});
+    resultElement.innerHTML = parsed
+
+    // Setup title for mouse over to provide hints about what keywords trigger this emoji.
+    var keywords = emojilib[name].keywords.filter(function(val) {
+        return val != unicode
+    });
+    var title = ':' + name + ':\n\n(' + keywords.join(', ') + ')'
+    resultElement.title = wordwrap(50)(title)
+
     fragment.appendChild(resultElement)
   })
   containerElement.appendChild(fragment)
@@ -186,7 +213,7 @@ function isWord (charCode) {
 
 function jumpto (destination) {
   var container = document.getElementsByClassName('js-results')[0]
-  var all = document.getElementsByClassName('emoji')
+  var all = document.querySelectorAll('button.emoji')
   var focusedElement = document.querySelector('.emoji:focus')
   var nodeIndex = Array.prototype.indexOf.call(all, focusedElement)
   var resultPerRow = Math.floor(container.clientWidth / all[0].clientWidth)

app/style.css

@@ -62,14 +62,23 @@ button {
 .emoji {
   overflow: hidden;
   float: left;
-  padding: 10px;
+  padding: 0;
   width: 40px;
   height: 40px;
-  font-size: 20px;
-  font-family: AppleColorEmoji;
   -webkit-appearance: none;
   background: transparent;
   border: 0;
+  position: relative;
+}
+
+/* Make image relative to button size, centered x/y. */
+.emoji img {
+  width: 70%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  height: 70%;
 }
 
 .on-preference {

package.json

@@ -6,7 +6,9 @@
   "dependencies": {
     "electron-is-dev": "^0.1.2",
     "emojilib": "2.0.7",
-    "menubar": "^5.1.0"
+    "menubar": "^5.1.0",
+    "twemoji": "^2.2.5",
+    "wordwrap": "^1.0.0"
   },
   "devDependencies": {
     "electron": "^1.4.0",