Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #50 from github/preview

HTML page to preview the emoji database
  • Loading branch information...
commit e2ae300270e440f7cd5f63a9ea98a6c6667006aa 2 parents ef06de5 + bbfae32
@mislav mislav authored
Showing with 113 additions and 0 deletions.
  1. +113 −0 db/index.html
View
113 db/index.html
@@ -0,0 +1,113 @@
+<!doctype html>
+<title>Emoji preview</title>
+
+<style type="text/css">
+body {
+ font: 14px/18px Verdana, Arial, sans-serif;
+ padding: 2em;
+}
+ol {
+ list-style: none;
+ padding-left: 0;
+}
+li {
+ margin-left: 0;
+ margin-top: 5px;
+ clear: left;
+}
+li:first-child { display: none; }
+li > span {
+ display: block;
+}
+.emoji {
+ font-size: 50px;
+ line-height: 50px;
+ float: left;
+ margin-right: 20px;
+}
+.description {
+ font-style: italic;
+ color: gray;
+}
+.aliases span:before, .aliases span:after {
+ content: ":";
+ color: gray;
+}
+.tags {
+ font-size: 11px;
+}
+.tags span {
+ display: inline-block;
+ padding: 1px 5px 2px;
+ border-radius: 3px;
+ background: #dadada;
+ line-height: 11px;
+}
+</style>
+
+<p><input type=search placeholder="Search..."></p>
+
+<ol>
+ <li>
+ <span class="emoji"></span>
+ <span class="description"></span>
+ <span class="aliases"></span>
+ <span class="tags"></span>
+ </li>
+</ol>
+
+<script>
+ function renderEmoji(emojis) {
+ var item, els, template = document.querySelector('li')
+ for (var emoji, i=0; i < emojis.length; i++) {
+ emoji = emojis[i]
+ item = template.cloneNode(true)
+ els = item.querySelectorAll('span')
+ if (emoji.emoji) els[0].textContent = emoji.emoji
+ else {
+ var img = document.createElement('img')
+ img.src = "../images/emoji/" + emoji.aliases[0] + ".png"
+ els[0].appendChild(img)
+ }
+ els[1].textContent = emoji.description || ''
+ els[2].innerHTML = emoji.aliases.map(function(n){ return '<span>'+n+'</span>' }).join(' ')
+ els[3].innerHTML = emoji.tags.map(function(n){ return '<span>'+n+'</span>' }).join(' ')
+ template.parentNode.appendChild(item)
+
+ item._emojiText = (els[2].textContent + ' ' + els[3].textContent).replace(/_/g, '-')
+ }
+ }
+
+ xhr = new XMLHttpRequest
+ xhr.onreadystatechange = function() {
+ if (this.readyState == 4) {
+ json = JSON.parse(this.responseText)
+ renderEmoji(json)
+ }
+ }
+ xhr.open('GET', 'emoji.json', false)
+ xhr.send(null)
+
+ function searchEmoji(query) {
+ var el,
+ re = new RegExp('\\b' + query),
+ els = document.querySelectorAll('li')
+
+ for (var i=1; i < els.length; i++) {
+ el = els[i]
+ if ( !query || re.test(el._emojiText) ) {
+ el.style.display = 'list-item'
+ } else {
+ el.style.display = 'none'
+ }
+ }
+ }
+
+ var timeout, search = document.querySelector('input[type=search]')
+ search.addEventListener('input', function() {
+ var $this = this
+ if (timeout) clearTimeout(timeout)
+ timeout = setTimeout(function(){ searchEmoji($this.value) }, 200)
+ }, false)
+ search.focus()
+</script>
Please sign in to comment.
Something went wrong with that request. Please try again.