├── .gitignore ├── README.md ├── bower.json ├── demo └── index.html ├── emoji-text.html ├── emoji-text.js ├── hero.svg ├── index.html └── test ├── basic-test.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # emoji-text 2 | 3 | An element that inline-translates text to emoji. Based on [emoji-translate](https://github.com/notwaldorf/emoji-translate) by @notwaldorf. 4 | 5 | ## Dependencies 6 | 7 | Element dependencies are managed via [Bower](http://bower.io/). You can 8 | install that via: 9 | 10 | npm install -g bower 11 | 12 | Then, go ahead and download the element's dependencies: 13 | 14 | bower install 15 | 16 | 17 | ## Playing With Your Element 18 | 19 | If you wish to work on your element in isolation, we recommend that you use 20 | [Polyserve](https://github.com/PolymerLabs/polyserve) to keep your element's 21 | bower dependencies in line. You can install it via: 22 | 23 | npm install -g polyserve 24 | 25 | And you can run it via: 26 | 27 | polyserve 28 | 29 | Once running, you can preview your element at 30 | `http://localhost:8080/components/emoji-text/`, where `emoji-text` is the name of the directory containing it. 31 | 32 | 33 | ## Testing Your Element 34 | 35 | Simply navigate to the `/test` directory of your element to run its tests. If 36 | you are using Polyserve: `http://localhost:8080/components/emoji-text/test/` 37 | 38 | ### web-component-tester 39 | 40 | The tests are compatible with [web-component-tester](https://github.com/Polymer/web-component-tester). 41 | Install it via: 42 | 43 | npm install -g web-component-tester 44 | 45 | Then, you can run your tests on _all_ of your local browsers via: 46 | 47 | wct 48 | 49 | #### WCT Tips 50 | 51 | `wct -l chrome` will only run tests in chrome. 52 | 53 | `wct -p` will keep the browsers alive after test runs (refresh to re-run). 54 | 55 | `wct test/some-file.html` will test only the files you specify. 56 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "emoji-text", 3 | "version": "1.0.1", 4 | "description": "An element that inline translates text to emoji", 5 | "keywords": [ 6 | "web-component", 7 | "polymer", 8 | "emoji" 9 | ], 10 | "main": "emoji-text.html", 11 | "license": "http://polymer.github.io/LICENSE.txt", 12 | "homepage": "https://github.com/PolymerLabs/emoji-text/", 13 | "ignore": [ 14 | "/.*", 15 | "/test/" 16 | ], 17 | "dependencies": { 18 | "polymer": "Polymer/polymer#^1.0.0", 19 | "emojilib": "muan/emojilib#master" 20 | }, 21 | "devDependencies": { 22 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", 23 | "web-component-tester": "*" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | emoji-text Demo 16 | 17 | 18 | 19 | 51 | 52 | 53 | 54 |

An example of <emoji-text>:

55 | 56 | 57 |
58 | 59 | Enter text to translate: 60 | 61 | 66 | 67 | I think my cat ate all of my cake and donuts. 68 | 69 | Sorry I can't pay my rent this month. I bought an apple at the airport. 70 | 71 | It's embarrassing that 95% of my Google history is just words I forgot how to spell. 72 | 73 |
74 | 75 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /emoji-text.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 25 | 26 | 27 | 33 | 34 | 38 | 39 | 40 | 41 | 114 | -------------------------------------------------------------------------------- /emoji-text.js: -------------------------------------------------------------------------------- 1 | var allEmojis; 2 | var SYMBOLS = '!"#$%&\'()*+,-./:;<=>?@[]^_`{|}~'; 3 | 4 | (function() { 5 | var request = new XMLHttpRequest(); 6 | request.open('GET', '../../emojilib/emojis.json', true); 7 | request.onload = function() { 8 | if (request.status >= 200 && request.status < 400) { 9 | allEmojis = JSON.parse(request.response); 10 | } 11 | }; 12 | request.send(); 13 | })(); 14 | 15 | function translateWord(word) { 16 | var node = document.createElement('span'); 17 | 18 | // Punctuation blows. Get all the punctuation at the start and end of the word. 19 | var firstSymbol = ''; 20 | var lastSymbol = ''; 21 | 22 | while (SYMBOLS.indexOf(word[0]) != -1) { 23 | firstSymbol += word[0]; 24 | word = word.slice(1, word.length); 25 | } 26 | 27 | while (SYMBOLS.indexOf(word[word.length - 1]) != -1) { 28 | lastSymbol += word[word.length - 1]; 29 | word = word.slice(0, word.length - 1); 30 | } 31 | 32 | var emoji = getMeAnEmoji(word); 33 | if (emoji != '') { 34 | node.title = word; 35 | // Emoji in bold text isn't rendered in Chrome :sob: 36 | node.style.fontWeight = 'normal'; 37 | node.style.fontFamily = 'AppleColorEmoji'; 38 | node.style.letterSpacing = '0.1em'; 39 | node.innerHTML = emoji; 40 | } else { 41 | node.innerHTML = word; 42 | } 43 | 44 | // Reapply the punctuation. 45 | node.innerHTML = firstSymbol + node.innerHTML + lastSymbol + ' '; 46 | return node; 47 | } 48 | 49 | function getMeAnEmoji(keyword) { 50 | keyword = keyword.trim().toLowerCase(); 51 | 52 | if (!keyword || keyword === '' || keyword === 'it') 53 | return ''; 54 | 55 | // Maybe this is a plural word but the keyword is the singular? 56 | // Don't do it for two letter words since "as" would become "a" etc. 57 | var maybeSingular = ''; 58 | if (keyword.length > 2 && keyword[keyword.length - 1] == 's') 59 | maybeSingular = keyword.slice(0, keyword.length - 1); 60 | 61 | // Maybe this is a singular word but the keyword is the plural? 62 | // Don't do this for single letter since that will pluralize crazy things. 63 | var maybePlural = (keyword.length == 1) ? '' : keyword + 's'; 64 | 65 | // Go through all the things and find the first one that matches. 66 | for (var emoji in allEmojis) { 67 | var keywords = allEmojis[emoji].keywords; 68 | if (emoji == keyword || emoji == maybeSingular || emoji == maybePlural || 69 | (keywords && keywords.indexOf(keyword) >= 0) || 70 | (keywords && keywords.indexOf(maybeSingular) >= 0) || 71 | (keywords && keywords.indexOf(maybePlural) >= 0)) 72 | return allEmojis[emoji].char; 73 | } 74 | return ''; 75 | }; 76 | -------------------------------------------------------------------------------- /hero.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /test/basic-test.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 26 | 27 | 28 | --------------------------------------------------------------------------------