This Module allows you to use Emoji in your Web application interface.
If Emoji are natively supported by user's paltform, it will be rendered as-is. Otherwhise Module will provide fallback images.
To use Emoji in your interface, follow this steps.
- Include
specc-emoji.js
on your site. Bottom of the<body>
tag prefered. - Mark all Elements which may content Emoji with
js-emoji-included
class name. - Fire
Emoji.parse();
That's it.
😏
First of all it checks for native Emoji supporting. You can access this feature by Emoji.supported
property
if ( Emoji.supported ){
console.log('Emoji natively supported.');
} else {
console.log('Emoji does not supported.');
}
If user's platform does not supports Emoji, Module will find and relpace all smiles with fallback images that looks like
<em class="emoji" data-emoji="😏"></em>
Cutted Unicode symbols stores in data-emoji
attribute. Next, CSS class emoji.css
will stylize this <em>
tag with fallback images.
Note that Module requires special CSS file emoji.css
, which placed in ../css/
(from original script) directory. If you need to specify your own style location, open specc-emoji.js
and change CSS_FILE_PATH
property to your path.
/**
* @private
* Path where styles stored
*/
var CSS_FILE_PATH = 'css/emoji.css';
Same thing with CSS file: it uses fallback images by ../emoji/<FILENAME>
address.
Open example.html
file.
Fell free to give me a feedback on specc.dev@gmail.com 😼