Author: | DIYgod |
---|---|
Views Total: | 966 views |
Official Page: | Go to website |
Last Update: | May 2, 2016 |
License: | MIT |
Preview:

Description:
OωO is a very small and dependency-free JavaScript library that appends an emoji picker to your textarea or input field. All the emoji icons & descriptions are stored in a JSON file and will be fetched by OωO via AJAX request.
How to use it:
Add references to OwO.min.css and OwO.min.js into your webpage.
<link rel="stylesheet" href="OwO.min.css"> <script src="OwO.min.js"></script>
Create a textarea element on the webpage.
<textarea class="OwO-textarea" style="width: 100%; height: 50px; margin-bottom: 10px; padding: 10px;"></textarea>
Create an empty container for the emoji picker.
<div class="OwO"></div>
Add your custom emoji icons, text faces into a JSON file as follows:
{ "Faces": { "type": "emoticon", "container": [ { "icon": "OωO", "text": "Author: DIYgod" }, { "icon": "|´・ω・)ノ", "text": "Hi" }, { "icon": "(๑•̀ㅁ•́ฅ)", "text": "Hi" } ] }, "Emoji": { "type": "emoji", "container": [ { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "? ", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "? ", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" }, { "icon": "?", "text": "" } ] }, }
Create a new OwO object and specify the path to the JSON file.
var OwO_demo = new OwO({ logo: 'OωO', container: document.getElementsByClassName('OwO')[0], target: document.getElementsByClassName('OwO-textarea')[0], api: 'OwO.json' });
More options.
var OwO_demo = new OwO({ logo: 'OωO', container: document.getElementsByClassName('OwO')[0], target: document.getElementsByClassName('OwO-textarea')[0], api: 'OwO.json', position: 'down', width: '100%', maxHeight: '250px', });