diff --git a/emoji/CNAME b/emoji/CNAME new file mode 100644 index 0000000..9eeab64 --- /dev/null +++ b/emoji/CNAME @@ -0,0 +1 @@ +emoji.muan.co \ No newline at end of file diff --git a/emoji/CONTRIBUTING.md b/emoji/CONTRIBUTING.md new file mode 100644 index 0000000..cabf0e5 --- /dev/null +++ b/emoji/CONTRIBUTING.md @@ -0,0 +1,25 @@ +# CONTRIBUTING + +Thanks for thinking about contributing to this project. :heart_eyes: + +## What do you want to do? + +#### JavaScript changes + +Change the files in `/javascripts`. + +#### CSS changes + +The CSS is currently compiled from SCSS, so you will need to install and develop in SASS, then include the compiled CSS file in your commits. + +## Coding Style + +When in doubt, follow https://github.com/styleguide. + +## Commiting, sending the pull request + +- Make sure you have a good description in the pull request if your changes contain more than keyword changes.
+ :x: `Update html`
+ :o: `Change a typo in the toggle text button` + +- Include at least one emoji in your pull request description. diff --git a/emoji/LICENSE b/emoji/LICENSE new file mode 100644 index 0000000..6368e26 --- /dev/null +++ b/emoji/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Mu-An Chiou + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/emoji/README.md b/emoji/README.md new file mode 100644 index 0000000..96e1b0e --- /dev/null +++ b/emoji/README.md @@ -0,0 +1,20 @@ +## Emoji finder [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard) + +:heart: me some emoji. Go to https://emoji.muan.co/ + +![unicorn](http://cl.ly/image/1p110H2M0r0O/unicorn.gif) + +:octopus: :zap: :cat: = :octocat:
+Find the emoji that echoes your heart using keywords + +:raised_hands::gun::moneybag::police_car::boom::hospital::syringe::skull:
+Tell a story + +:oden::spaghetti::cookie::stew::ice_cream::icecream::sushi::curry::custard::dango::pizza::ramen::fried_shrimp::fries::chocolate_bar::hamburger:
+View emoji in groups and food-attack hungry people + +#### Please contribute :pray: + +**As of 2015/07/10, the emoji keyword library has been migrated to its own repository [muan/emojilib](https://github.com/muan/emojilib).** + +There are almost 900 emoji, more keywords let you find emoji more easily. Go to [`emojis.json`](https://github.com/muan/emojilib/blob/master/emojis.json) for the list of emoji & keywords. diff --git a/emoji/appicon.png b/emoji/appicon.png new file mode 100644 index 0000000..708653a Binary files /dev/null and b/emoji/appicon.png differ diff --git a/emoji/fav.png b/emoji/fav.png new file mode 100644 index 0000000..c308283 Binary files /dev/null and b/emoji/fav.png differ diff --git a/emoji/index.html b/emoji/index.html new file mode 100644 index 0000000..609382e --- /dev/null +++ b/emoji/index.html @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + Emoji searcher + + + + + + +
+ + + + ❌ + + 😃 + + + 🤚 + + + 🐤 + + + 🚗 + + + 🍱 + + + 🏫 + + + ⬆️ + + + 🈳 + + + 1️⃣ + + + 🏳️‍🌈 + + + +
+ +
+ + +
+ Loading + +
+ +
+ 😭 +
No results
+

+ Help your future self by adding + + to the library. +

+

+ Contribute to emojilib +

+
+
+ + + + + + diff --git a/emoji/javascripts/search.js b/emoji/javascripts/search.js new file mode 100644 index 0000000..9f9119e --- /dev/null +++ b/emoji/javascripts/search.js @@ -0,0 +1,54 @@ +var filter = document.querySelector('.speedy-filter') + +function searchHash() { + if (window.location.hash.length) { + filter.value = window.location.hash.substr(1) + search(filter.value) + } else { + search() + } +} +document.addEventListener('emoji:ready', searchHash) + +function search (keyword) { + keyword = typeof keyword === 'undefined' ? '' : keyword + document.querySelector('.keyword').textContent = keyword + keyword = keyword.trim() + + if (window.speedyKeyword !== keyword) { + window.speedyKeyword = keyword + for (const result of document.querySelectorAll('.result')) { + result.hidden = keyword.length > 0 ? result.getAttribute('title').toLowerCase().indexOf(keyword.toLowerCase()) < 0 : false + } + } + setRelatedDOMVisibility(keyword) +} + +function setRelatedDOMVisibility (keyword) { + var foundSomething = !!document.querySelector('.result:not([hidden])') + document.querySelector('.no-results').hidden = foundSomething +} + +function updateHashWithInputValue() { + window.location.hash = filter.value.replace(' ', '_') +} + +filter.addEventListener('input', updateHashWithInputValue) + +document.addEventListener('click', event => { + if (event.target.classList.contains('group')) { + filter.value = event.target.href.substr(1) + search(filter.value) + } else if (event.target.classList.contains('js-clear-search')) { + filter.value = '' + } +}) + +window.onhashchange = function () { + searchHash() + for (const link of document.querySelectorAll('.active[href^="#"]')) { + link.classList.remove('active') + } + var active = document.querySelector("[href='#{window.location.hash}']") + if (active) active.classList.add('active') +} diff --git a/emoji/javascripts/stuff.js b/emoji/javascripts/stuff.js new file mode 100644 index 0000000..08df0c8 --- /dev/null +++ b/emoji/javascripts/stuff.js @@ -0,0 +1,72 @@ +/* global $, localStorage */ +var searchField = document.querySelector('.input-search') +var container = document.querySelector('.emojis-container') +var url = '//unpkg.com/emojilib@^3.0.0' + +document.addEventListener('click', function (evt) { + const emoji = evt.target.closest('.js-emoji') + if (emoji) { + getSelection().removeAllRanges() + var range = document.createRange() + const node = emoji.querySelector('.js-emoji-char') + range.selectNodeContents(node) + getSelection().addRange(range) + document.execCommand('copy') + alertCopied(node.getAttribute('data-emoji')) + } else if (evt.target.classList.contains('js-twemoji')) { + prepareTwemoji() + evt.target.hidden = true + document.querySelector('.js-remove-twemoji').hidden = false + localStorage.setItem('twemoji-display', 'true') + } else if (evt.target.classList.contains('js-remove-twemoji')) { + localStorage.setItem('twemoji-display', 'false') + window.location.reload() + } +}) + +function prepareTwemoji () { + var twemojiScript = document.createElement('script') + twemojiScript.src = '//twemoji.maxcdn.com/2/twemoji.min.js?2.2.3' + twemojiScript.onload = function () { + twemoji.parse(document.body) + document.body.classList.add('twemojified') + } + document.head.append(twemojiScript) +} + +function alertCopied (emoji) { + var alert = document.createElement('div') + alert.classList.add('alert') + alert.textContent = `Copied ${emoji}` + document.body.append(alert) + setTimeout(function() { + alert.remove() + }, 1000) +} + +document.addEventListener('keydown', event => { + if (event.key === '/' && searchField) { + if (searchField.value.length) { + searchField.selectionStart = 0 + searchField.selectionEnd = searchField.value.length + } + searchField.focus() + event.preventDefault() + } +}) + +const showingTwemoji = localStorage.getItem('twemoji-display') === 'true' +document.querySelector('.js-remove-twemoji').hidden = !showingTwemoji +document.querySelector('.js-twemoji').hidden = showingTwemoji + +fetch(url).then(data => data.json()).then(json => { + var html + if (showingTwemoji) prepareTwemoji() + for (emoji in json) { + html += `
  • +
    ${emoji}
    • ` + } + container.innerHTML = html + document.querySelector('.loading').remove() + document.dispatchEvent(new CustomEvent('emoji:ready')) +}) diff --git a/emoji/opensearch.xml b/emoji/opensearch.xml new file mode 100644 index 0000000..76c02de --- /dev/null +++ b/emoji/opensearch.xml @@ -0,0 +1,7 @@ + + Emoji searcher + Find the emoji that echoes your mind. + https://emoji.muan.co/fav.png + + + diff --git a/emoji/stylesheets/style.css b/emoji/stylesheets/style.css new file mode 100644 index 0000000..756ad56 --- /dev/null +++ b/emoji/stylesheets/style.css @@ -0,0 +1,294 @@ +form { margin: 0; } +.pull-right { float: right; position: relative; } +input:invalid { visibility: hidden; } +[data-clipboard-text] { cursor: pointer; } +.text-big { font-size: 20px; } +[hidden] { display: none !important; } + +body, +input, +button { + font-family: andalemono, menlo, monospace; + font-size: 12px; +} + +body { + line-height: 1.6em; + padding: 10px; + margin: 0; + color: #333; + background-color: #fff; +} + +input, +div, +a, +footer { + box-sizing: border-box; +} + +.container, +.list, +.site-header, +.site-footer { + width: 100%; + max-width: 780px; + margin: 0 auto; +} + +.site-header { + white-space: nowrap; + position: relative; + line-height: 1; + margin-bottom: 10px; + padding-bottom: 10px; + border-bottom: 1px solid #ddd; +} + +.site-footer { + margin-top: 10px; + padding-top: 10px; + border-top: 1px solid #ddd; + text-align: center; +} + +.list { + overflow: hidden; +} + +.loading { + background-color: #fff; + padding: 100px 0 120px; + text-align: center; + text-transform: uppercase; + color: #999; + letter-spacing: 2px; + font-weight: bold; +} + +.loading + .no-results { display: none; } + +.mojigroup { + margin: 0 0 10px 5px; + padding: 3px 4px 1px; +} + +.mojigroup.active { + background-color: #f9f9f9; + border-color: #58b2ee; +} + +a { + text-decoration: none; + cursor: pointer; + color: #08c; +} + +ul { + text-align: left; + padding: 0; + margin: 0; +} + +.plain { + appearance: none; + -webkit-appearance: none; + border: 0; + box-shadow: none; + background-color: transparent; +} + +.plain:focus { + box-shadow: none; outline: none; +} + +.emoji-group { + display: block; + width: 100%; + font-weight: bold; + font-size: 20px; + padding: 10px 0; +} + +.emojis-container { + font-size: 0; + line-height: 0; +} + +.emoji-code { + cursor: pointer; + padding: 10px; +} + +/* Twemoji */ +.emoji { + width: 18px; + height: 18px; +} + +.emoji-wrapper { + display: inline-block; + width: 25%; + overflow: hidden; + white-space: nowrap; +} + +.keywords { + font-size: 0; +} + +::selection { + background-color: transparent; +} + +.emoji-wrapper:hover { + background: #f5f5f5; +} + +.emoji-wrapper { + width: auto; + padding: 8px; + position: relative; +} + +ul, li { + list-style-type: none; +} + +.button { + background: none; + line-height: 1; + padding: 10px 10px 9px; + margin-left: 5px; + display: inline-block; + vertical-align: top; + border-radius: 35px; + border: 1px solid #ccc; + font-size: 11px; + color: #777; + text-transform: uppercase; + font-weight: bold; +} + +.button:hover { + border-color: #36a; +} + +.button.clear-search { + color: #ee9d9d; +} +.button.clear-search:hover { + border-color: #ee9d9d; +} + +.input-search { + min-height: 32px; + padding: 7px 15px; + outline: none; + color: #333; + border: 1px solid #ddd; + margin: 0; + width: 150px; + border-radius: 15px; + appearance: textfield; +} + +.input-search::-webkit-search-cancel-button, +.input-search::-webkit-search-decoration { + -webkit-appearance: none; +} + +.input-search:focus { + border-color: #51a7e8; + box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5); +} + +.alert { + font-size: 13px; + white-space: nowrap; + overflow: hidden; + position: fixed; + margin: auto; + left: 50%; + transform: translateX(-50%); + bottom: 10px; + background: rgba(0, 0, 0, .8); + color: #fff; + font-weight: bold; + padding: 7px 20px; + text-align: center; + border-radius: 50px; +} + +.native-emoji { + display: inline-block; + vertical-align: middle; + cursor: pointer; +} + +.twemojified .native-emoji { + padding: 0; +} + +.twemojified .mojigroup, +.twemojified .clear-search { + padding: 5px 7px; +} + +.native-emoji { + font-size: 19px; + padding: 10px 2px; + font-family: AppleColorEmoji; +} + +.no-results { + background-color: #f9f9f9; + padding: 50px 30px; + text-align: center; + border-radius: 3px; +} + +.no-results-text { + font-weight: bold; + color: #555; + border-bottom: 1px solid #aaa; + display: inline-block; + padding-bottom: 2px; + text-transform: uppercase; +} + +.contribute-button { + background-color: #36a; + border-color: #36a; + color: #fff; +} + +code { + background-color: #f8f8f8; + border: 1px solid #aaa; + padding: 0 2px; + border-radius: 3px; color: #666; + font-family: Monaco, monospace; + font-size: 11px; +} + +.tips { + color: #777; +} + +@media (max-width: 480px) { + .input-search { + width: 100%; + } + + .clear-search, + .mojigroup { + display: none; + } + + input { font-size: 14px; } + + ul { padding: 0; } + + .emoji-wrapper { padding: 0; } +}