Windows (muan#14): ⚡ Searches now lightening fast again, even with Tw…

…itter SVG emoji.

app/search.js

@@ -8,6 +8,7 @@ var indexKeys = Object.keys(index)
 var emojikeyIndexTable = buildEmojikeyIndexTable()
 var searching = false
 var searchInput = document.querySelector('.js-search')
+var containerElement = document.querySelector('.js-results')
 var directions = {
  37: 'left',
  38: 'up',
@@ -17,7 +18,7 @@ var directions = {
 
 searchInput.dataset.isSearchInput = true
 searchInput.focus()
-search('')
+search('') // Initialize container now. Further results are simply filtered.
 searchInput.addEventListener('input', function () {
  search(this.value.toLowerCase())
 })
@@ -139,42 +140,52 @@ function search (query) {
  results.unshift(query)
  }
 
- renderResults(results, document.querySelector('.js-results'))
+ renderResults(results)
  if (document.querySelector('.emoji')) document.querySelector('.emoji').scrollIntoViewIfNeeded()
  }, 80)
 }
 
-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)
-
- // For consistent retrieval, if no image could be parsed/generated.
- resultElement.setAttribute('data-char', 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)
+function renderResults (emojiNameArray) {
+ if (containerElement.childNodes.length > 0) {
+ // Already initialized, just hide all and show only matches.
+ let all = document.querySelectorAll('button');
+ all.forEach(function(button) {
+ button.classList.toggle('hide', emojiNameArray.indexOf(button.id) === -1);
+ });
+
+ } else {
+ // Initialize container contents.
+ containerElement.innerHTML = ''
+ var fragment = document.createDocumentFragment()
+
+ emojiNameArray.forEach(function (name) {
+ var unicode = (emojilib[name]['char'] || '--')
+ var resultElement = document.createElement('button')
+ resultElement.type = 'button'
+ resultElement.className = 'emoji'
+ resultElement.id = name;
+ resultElement.setAttribute('aria-label', name)
+
+ // For consistent retrieval, if no image could be parsed/generated.
+ resultElement.setAttribute('data-char', 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)
+ }
 }
 
 function buildEmojikeyIndexTable () {
@@ -211,12 +222,12 @@ function isWord (charCode) {
 }
 
 function jumpto (destination) {
- var container = document.getElementsByClassName('js-results')[0]
- var all = document.querySelectorAll('button.emoji')
+ var containerElement = document.getElementsByClassName('js-results')[0]
+ var all = document.querySelectorAll('button.emoji:not(.hide)')
  var focusedElement = document.querySelector('.emoji:focus')
  var nodeIndex = Array.prototype.indexOf.call(all, focusedElement)
- var resultPerRow = Math.floor(container.clientWidth / all[0].clientWidth)
- var resultPerCol = Math.floor(container.clientHeight / all[0].clientHeight)
+ var resultPerRow = Math.floor(containerElement.clientWidth / all[0].clientWidth)
+ var resultPerCol = Math.floor(containerElement.clientHeight / all[0].clientHeight)
  var newTarget
 
  if (destination === 'up') {

app/style.css

@@ -81,6 +81,10 @@ button {
  height: 70%;
 }
 
+.hide {
+ display: none;
+}
+
 .on-preference {
  overflow: hidden;
 }