EmojiRating is an open source library to use rate using emoticons. Use UTF-8 and Unicode characters to create amazing custom combinations.
Import the jquery and emoji.js files to your html.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="emoji.js"></script>
<link rel="stylesheet" type="text/css" href="csshake.min.css">
Add a div, to render your emoji control.
<div id="emoji-div"></div>
That's all you need to render your emojis.
Now, we have to use jQuery to initialize the the EmojiRating plugin.
$("#emoji-div").emoji();
You can invoke it from a method, or from your onLoad for javascript or onReady for jQuery
$(function() {
$("#emoji-div").emoji();
});
And, that's all!!!
Now, you have a control like this
Do you want to use custom emojis? Call them by their names:
var emojis = ['poop','unlike', 'like', 'star', 'inlove'];
$("#emoji-div").emoji({emojis: emojis });
Do you want to set 1 emoticon and repeat it N times? That is possible with the count property
var emojis = ['inlove'];
$("#emoji-div").emoji({ emojis: emojis, count: 8 });
Do you want use unicode characters? Do it!, it's possible
var emojis = ['😠','😞','😐','😊','😃', '☠'];
$("#emoji-div").emoji({emojis: emojis });
Do you want to combine emoticions names and unicode characters? Feel free to do it!
var emojis = ['skull','happy','cloud','😊','😃', '☠'];
$("#emoji-div").emoji({emojis: emojis });
Do you want your emojis bigger?
$("#emoji-div").emoji({ width: '50px' }); //Using pixels
$("#emoji-div").emoji({ width: '50em' }); //Using em
$("#emoji-div").emoji({ width: 50 }); //As number
Do you want to set an initial value?
$("#emoji-div").emoji({ value: 4 });
Do you want to set color to your emojis?
- Using the color name.
var emojis = ['heart'];
$("#emoji-div").emoji({ emojis:emojis, count: 8, color: 'red' });
- Using the HexColor.
var emojis = ['heart'];
$("#emoji-div").emoji({ emojis: emojis, count: 8, color: '#123abc' });
- Using the RGB value.
var emojis = ['heart'];
$("#emoji-div").emoji({ emojis: emojis, count: 8, color: 'rgb(255, 0, 0)' });
Do you want to use your own resources? It's possible from external and internal resources (.png, .jpg and .svg)
var emojis = ['img/star.png', 'img/tree.svg', 'img/santa.svg', 'img/reindeer.png'];
$("#emoji-div").emoji({ emojis: emojis });
If the images are very small, you can make them bigger with:
var emojis = ['img/star.png', 'img/tree.svg', 'img/santa.svg', 'img/reindeer.png'];
$("#emoji-div").emoji({ emojis: emojis, width: 50 });
Do you want to combine URL resources, emoji names and UTF-8 in a single rate control? It's awesomely possible and simple.
var emojis = ['img/star.png', 'img/tree.svg', 'img/santa.svg', 'img/reindeer.png', '😺', 'skull', 'happy'];
$("#emoji-div").emoji({ emojis: emojis, width: 100 });
Do you want to disabled your emoji interaction?
$("#emoji-div").emoji({ disabled: true });
Do you want to remove the meta tag to exclude UTF-8?
$("#emoji-div").emoji({ UTF8: false });
By default, EmojiRaiting plugin add the meta tag: <meta charset="utf-8" /> to your DOM, if you want omit it, set the UTF8 key to false.
For animations, EmojiRaiting plugins uses: @elrumordelaluz - CSShake.
Add animations is very easy with:
$("#emoji-div").emoji({ width: 50, animation: 'shake-crazy' });
Some other options are: shake, shake-slow, shake-hard, shake-horizontal, shake-vertical, shake-rotate, shake-opacity, shake-crazy, shake-chunk
$("#emoji-div").emoji({
opacity: 0.5, //Opacity for no-selected emojis. [The value should be between 0 and 1 (like 0.5)]
value: 4, //Selected value
width: '35px', //With of each emoji.
event: 'click', //Event "click" or "mouseover".
color: 'red', //Use color name (red, blue, black, etc.), HexColor (#abc123, #cecece, #b35c22) or RGB like rgb(255, 0, 0)
emojis: emojis //In case you want to define your own list of emojis
count: 7, //VERY OPTIONAL - In case you want set 1 emoji in the array and display N number of them.
animation: '', //shake, shake-slow, shake-hard, shake-horizontal, shake-vertical, shake-rotate, shake-opacity, shake-crazy, shake-chunk
UTF8: true, //By default, the EmojiRaiting plugin insert the meta tag to your code.
callback: myFunctionName, //Returns event and currentValue in the change event
debug: false //Boolean value
});
Enable emoji control: $("#emoji-div").emoji("enable");
Disable emoji control: $("#emoji-div").emoji("disable");
Get emoji control value: $("#emoji-div").emoji("getvalue");
Set emoji control value: $("#emoji-div").emoji("setvalue", 5);
Now, you can use the callback to identify the onChange event. The callback returns:
- The event that you're using.
- The value after the
onChangeevent.
$(function() {
$("#emoji-div").emoji({callback: notifyMe });
});
function notifyMe(event, value){
alert("Event: " + event + " - Current value: " + value);
}
Or, if you want to use the mouseover event:
$(function() {
$("#emoji-div").emoji({callback: notifyMe, event: 'mouseover' });
});
function notifyMe(event, value){
alert("Event: " + event + " - Current value: " + value);
}
If you want to use a predefined emoticion is enough to add into your custom emoji array, the name of the emoticion.
For example:
var emojis = ['angry','men','happy'];
Check the complete list included in the pluging.
angry 😠 😠
disappointed 😞 😞
meh 😐 😐
happy 😊 😊
smile 😃 😃
wink 😉 😉
laughing 😆 😆
inlove 😍 😍
crying 😢 😢
star ⭐ ⭐
poop 💩 💩
cat 😺 😺
like 👍 👍
unlike 👎 👎
heart ❤ ❤
dislike 👎 👎
cloud ☁ `☁
blackstart ★ ★
comet ☄ ☄
umbrella ☔ ☔
skull ☠ ☠
radioactive ☢ ☢
biohazard ☣ ☣
aries ♈ ♈
taurus ♉ ♉
gemini ♊ ♊
cancer ♋ ♋
leo ♌ ♌
virgo ♍ ♍
libra ♎ ♎
scorpius ♏ ♏
sagittarius ♐ ♐
capricorn ♑ ♑
aquarius ♒ ♒
pisces ♓ ♓
Not enough? Check a list, try this UTF-8 emoji list: https://www.w3schools.com/charsets/ref_utf_misc_symbols.asp
If you want to debug, you have to set the debug key to true:
$(function() {
$("#emoji-div").emoji({ value: 7, debug: true, event: 'hover', animation: 'chake' });
});
For example, the plugin has some wrong configurations.
- The
valuewas set the default to 7 and the number of emojis is 5. The selected value is higher to the number of emoji elements, this producehandled errorin your code. - The
eventwas configured ashoverinstead ofmouseoverorclick. That produces a warning. - The
animationis wrong,chakeinstead ofshake. That produces a warning.
Then, in your browser console, you going to get:
Feel free to write issues or new actions you want to get in this pluging.
Features for version 0.7
- Animation for maximization of the selected item.
Features for version 0.8
- Display all the emoticons while you haven't selected anyone. Contraction once you select one (like a horizontal accordion).
Features for version 0.9
- Emoji with custom message in a popup box in a generic position.
Features for version 1.0
- Double state. From the dark side to the light side. Depending of the rate, emoticons should be displayed. If you have a bad rate, all the emoticons are sad, right?, but if you get a good reputation, some of them should are jealous, right?
This plugin is under construction, now, it accepts "id", but in a close future, we going to accept multiple initializations with classes.
For animations, EmojiRaiting plugins uses: @elrumordelaluz - CSShake.
Feel free to use this javascript library whatever you want, but, please, keep your codes open to the world.