JSFiddle - React, Tailwind, and code Playground
by levchenko_d
HTML
<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
<div class="content __wait">
<div class="links">
<a href="https://twitter.com/intent/tweet?url=https://github.com/LevchenkoD/twemoji-input&text=The%20thing%20that%20helps%20use%20twemoji%20on%20any%20website%20%F0%9F%91%8C%20&hashtags=twemojiInput,twemoji,emoji" target="_blank">Tweet if you like ๐</a>
<a href="https://github.com/LevchenkoD/twemoji-input" target="_blank">Pull if you want <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" widht="18" height="18" x="0px" y="0px"
viewBox="0 0 18 18" enable-background="new 0 0 18 18" xml:space="preserve">
<g>
<path d="M11.8,17.7c-0.4,0.1-0.6-0.2-0.6-0.4c0-0.3,0-1.2,0-2.4c0-0.8-0.3-1.3-0.6-1.6c1.9-0.2,3.9-0.9,3.9-4.2
c0-0.9-0.3-1.7-0.9-2.3c0.1-0.2,0.4-1.1-0.1-2.3c-0.7-0.2-2.4,0.9-2.4,0.9c-0.7-0.2-1.4-0.3-2.1-0.3S7.6,5.3,6.9,5.5
c0,0-1.6-1.1-2.4-0.9c-0.5,1.2-0.2,2-0.1,2.3C3.9,7.4,3.6,8.2,3.6,9.2c0,3.3,2,4,3.9,4.2C7.3,13.6,7,14,6.9,14.5
c-0.5,0.2-1.7,0.6-2.5-0.7C4,13,3.2,12.9,3.2,12.9c-0.8,0-0.1,0.5-0.1,0.5C3.7,13.7,4,14.7,4,14.7c0.5,1.5,2.9,1,2.9,1
c0,0.7,0,1.4,0,1.6c0,0.2-0.2,0.5-0.6,0.4C3,16.6,0.5,13.4,0.5,9.6C0.5,4.9,4.3,1,9.1,1s8.6,3.8,8.6,8.6
C17.6,13.4,15.2,16.6,11.8,17.7z"/>
</g>
</svg></a>
</div>
<h1>Twemoji</h1>
<h3>input plugin</h3>
<div class="_secondary">
<div class="form">
<button class="post">Send</button>
<input id="name" placeholder="Your Name Goes Here...">
<textarea class="_twemoji_input" rows="7"></textarea>
<p class="_disclaimer">๐ Show your message to the world ๐</p>
</div>
<ul class="messages"></ul>
<button class="_huge load_more_msgs">Show more ๐</button>
</div>
</div>CSS
div._twemoji_textarea {
min-height: 150px;
width: 350px;
border: solid 1px silver;
}
div._twemoji_wrap{
display: inline-block;
position: relative;
}
div._twemoji_box{
opacity: 0.8;
position: absolute;
z-index: 9;
top: 10px;
right: 10px;
padding: 10px;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAABACAYAAAB7jnWuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYxJREFUeNrsWKFuwzAQTdupJDy8wxkZChkqGgkPL89XbKgkvF8xXl400pKShWwk3Hzn6SpZlu2c3XSTpvekp9QX+/wcX87pZRkAAH+MWeK4ilgS7w3bB/FEPNxSgJ54QywCfQbiTiokRkBLXEf03xO7sU4LoTO96ufIp6W3Jye+hzrNBY4eiLVlU56+tr3m8VcJaK223t/GYW/ZvhsZHyVg5Qi4N772HPUZX3vr/gUF+0kSUDlsjSGu5N+lMUkj9PODu4Qc0Hgm6VISyjz7HRRTClDGftvoORG5klOSANdAneFePP21/TilAJezNSeYV8PxwO3cky2P16RiVwpW/L7vLWEbFiFOyTNhAHUOx2Y8rAL329AWLIRB90V8ctxbssClZ+yWeJ7iMPrklT4GJrNFbyVHcuz3QM77XAUe+YHjQ93yi+hySpZG+xSKdgAAAABAfQD1AdQHUB9AfQD1AdQH/m19oHbkh6j6gCQIh8AKCuNfc+Z5NYepTsOKV5MLKiSKJ0d9AACAUXwLMAAao3x5Lx1DVwAAAABJRU5ErkJggg==');
background-repeat: no-repeat;
background-position: center -6px;
cursor: pointer;
}
div._twemoji_box:hover, div._twemoji_wrap.__open div._twemoji_box{
opacity: 0.8;
}
div._twemoji_box:active, div._twemoji_wrap.__open div._twemoji_box:active{
opacity: 1;
background-position: center -38px;
}
div._twemoji_popover{
display: none;
position: absolute;
top: 45px;
right: 10px;
width: 185px;
height: 150px;
background: rgba(0,0,0,0.8);
z-index: 9;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
-webkit-border-radius: 5px 0 5px 5px;
-moz-border-radius: 5px 0 5px 5px;
border-radius: 5px 0 5px 5px;
}
div._twemoji_popover::before {
content: '';
position: absolute;
border-bottom: solid 10px rgba(0,0,0,0.8);
border-right: solid 9px transparent;
border-left: solid 9px transparent;
top: -10px;
right: 0px;
}
div._twemoji_wrap.__open...JavaScript
/* Usage:
var tmi = new TwemojiInput(document.getElementById('twemoji-textarea'));
*/
var TwemojiInput = function(obj){
/* Declarative Part */
var Emoji =...