iamcal / js-emoji Goto Github PK
View Code? Open in Web Editor NEWA JS Emoji conversion library
License: MIT License
A JS Emoji conversion library
License: MIT License
Hello @iamcal,
First of all, its a amazing plugin. Thanks.
I've been using this plugin and it shows all the emoji's perfectly except the new Apple color emoji variations
Basically, I'm looping it through a series of strings containing the Unicode for the emoji. It converts almost all the Unicode strings except the new Apple color variations.
Here's the code which is generating the emoji's
emoji.img_path = '../emoji/img-apple-64/';
emoji.sheet_path = '../emoji/sheet_apple_64.png';
emoji.use_sheet = true;
emoji.init_env();
var auto_mode = emoji.replace_mode;
var thoughtString = jsonTextWithMarkup;
thoughtString = emoji.replace_unified(thoughtString);
$(function() {
emoji.img_path = "https://server.com/assets/emoji";
alert(emoji.replace_colons(':smile:'));
});
Should return
<span class="emoji emoji-sizer" style="background-image:url('https://server.com/assets/emoji/img-apple-64/1f604.png')"></span>
But instead returns:
<span class="emoji emoji-sizer" style="background-image:url(/emoji-data/img-apple-64/1f604.png)"</span>
Also the filenames (img-apple-64) etc. don't seem to match up with the suggested emoji set:
https://github.com/github/gemoji/tree/master/images/emoji/unicode
which has hex-type filenames like 1f19a.png.
I'm probably doing some things completely wrong.
To get bower working you should tag the releases using semver notation. This means v3.0.0
instead of v3.0
.
I looked through the sub-module setup a bit, but for some reason js-emoji pulls an older version of your emoji-data repo. It pulls the version that has an SSH submodule reference which causes builds to fail for this module. If you can update it to pull master (or at least since that issue has been fixed) that would be great.
Hi @iamcal,
I updated my emoji sheets and images to the latest files. Since then when I try to use the minified version of emoji.js, it will not show the correct emoji.
I'm using it with requirejs. First I thought it must be some issue caused by r.js optimizer but I tested it with both optimized and unoptimized versions.
Here are 2 screenshots of with and without minified js
Hi. I stuck on replacing emoji to unified sign.
When i set emoji.replace_mode = 'unified'
before replace, it always changed in emoji.init_env
Any help will be appreciated.
Maybe I've missed it, but I can't see a license file for the js and css. Was hoping you could add one in or clarify what the license is.
I followed the instruction of your demo at demo
When I test In iphone 6, it works just fine if I convert emojis that are very common. But there are still some emojis I can't convert to colon style, their output are still emojis.
For example
my code:
var emoji = new EmojiConvertor();
emoji.img_sets = {
'apple' : {'path' : '/js-emoji/build/emoji-data/img-apple-64/' , 'sheet' : '/js-emoji/build/emoji-data/sheet_apple_64.png', 'mask' : 1 },
'google' : {'path' : '/js-emoji/build/emoji-data/img-google-64/' , 'sheet' : '/js-emoji/build/emoji-data/sheet_google_64.png', 'mask' : 2 },
'twitter' : {'path' : '/js-emoji/build/emoji-data/img-twitter-64/' , 'sheet' : '/js-emoji/build/emoji-data/sheet_twitter_64.png', 'mask' : 4 },
'emojione' : {'path' : '/js-emoji/build/emoji-data/img-emojione-64/', 'sheet' : '/js-emoji/build/emoji-data/sheet_emojione_64.png', 'mask' : 8 }
};
emoji.use_sheet = true;
emoji.init_env();
emoji.img_set = 'apple';
emoji.replace_mode = 'unified';
emoji.text_mode = false;
emoji.colons_mode = true;
var str_out = emoji.replace_unified(str_in);
I've got 404 th error when i try open the demo link!Please check this
βοΈ
I understand that the sprite sheets are probably a more optimized approach to delivering emoji images, but I have a situation where I need to inject the emoji images into a contenteditable div and the nested structure of the spans returned by replace_colons has proven difficult.
If I wanted to use the individual images what would be the best way to do so?
It seemed like they were named according to their codepoints 1f171.png
, but some appeared to be named according to surrogate pairs like 0032-20e3.png
.
as pointed out in PR #58:
the usage guide includes emoji.css, which made me believe that the project might export a CSS file that needs to be imported, but I can only find the one used by the example. Should that be removed, or is the css file in /demo intended to always be required?
Hello,
I tried to import in a Angular 2 / Typescript project.
import * as emoji from 'emoji-js';
There is no error.
// console.log(emoji);
Ζ (){
var self = this;
/**
* The set of images to use for graphical emoji.
*
* @memberof emoji
* @type {string}
*/
self.img_set = 'apple';
/**
* Configuration details for dβ¦
But when I do a emoji.init_env()
for example I got this error :
TypeError: __WEBPACK_IMPORTED_MODULE_7_emoji_js__.init_env is not a function
Can you help me please ? Thank you
I can't find which specific version of Chrome brought in Emoji support but I do know it's working in v41. The update was made earlier this year: http://thenextweb.com/google/2015/01/11/emoji-support-finally-coming-google-chrome-os-x/
It also appears to be working in Firefox.
Great project!
As a result of this Firefox issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=548397
this line in emoji.js:
var st = window.getComputedStyle(document.body);
causes an exception on the next line if the code is executed within a hidden iframe.
My site only works with css support anyways, so I can patch it for myself easily enough, but I'm not sure what a good fix is in general.
When I convert emoji's like :man-kiss-man: / :man-man-girl-girl: : etc to Unified/Unicode (:man-man-girl-girl: -> π¨βπ¨βπ§βπ§) that works fine.
But if I then execute replace_unified on π¨βπ¨βπ§βπ§ it doesn't work.
It shows
instead of
(it does work when I paste that Unicode on Slack though).
Is this a bug in the code or am I doing it wrong?
Please include a bower.json making it easy to pin versions. I was bitten by img_path
being replaced by the new img_sets
.
When converting β, EmojiConvertor converts it to :umbrella_with_rain_drops:
however it should be :umbrella:
I installed the npm install but did not find the emoji.css file that is mentioned in demo.
Hi, I need replace from unified to colons, like this: Hello world π
-> Hello world :grin:
, how do it?
The category is available in the initial json from emoji-data. Do you think it would be interesting to add the information in the js library as well?
the problem is upstream in https://github.com/iamcal/emoji-data/blob/master/build/catalog_text_toemoji.txt#L23 but it means we don't detect it correctly
need to add tests, fix in emoji-data and then update js-emoji to pass tests
Hi there,
I need a feature to keep the original unicode emoji after a replace.
I'm using replace_unified to replace my unicode emojis. But after clicking on one smiley I need to add this smiley to a chat-text-input.
For this I changed the function emoji.prototype.replacement:
if (self.supports_css) { if (self.use_sheet && px != null && py != null){ var mul = 100 / (self.sheet_size - 1); var style = 'background: url('+self.img_sets[img_set].sheet+');background-position:'+(mul*px)+'% '+(mul*py)+'%;background-size:'+self.sheet_size+'00%'; return '<span class="emoji-outer emoji-sizer" data-unicode-smiley="' + self.data[idx][0][0] + '"><span class="emoji-inner" style="' + style + '"' + title + '>' + text + '</span></span>' + extra; }else if (self.use_css_imgs){ return '<span class="emoji emoji-' + idx + '"' + title + ' data-unicode-smiley="' + self.data[idx][0][0] + '">' + text + '</span>' + extra; }else{ return '<span class="emoji emoji-sizer" data-unicode-smiley="' + self.data[idx][0][0] + '" style="background-image:url(' + img + ')"' + title + '>' + text + '</span>' + extra; } } return '<img src="' + img + '" class="emoji" ' + title + ' data-unicode-smiley="' + self.data[idx][0][0] + '"/>' + extra;
In the data-unicode-smiley attribute I can now catch the original unicode smiley and add in to the text box. Of cource it will not work, if I call the replace_unified function again. Right now the with the emoji will be inserted into the attribute, which destroys the html - I think that such cases should be catched by this library, too!?
The SHA of emoji-data that is referenced by this project is a commit that doesn't take into account iamcal/emoji-data#51, so Travis builds are still failing. Would it be possible to cut a release/update that SHA? I think that's the last thing we need to get this all worked out :)
Update: Confirmed β that fixes it! Passing build here which relies on a fork.
Hello, an example, I have a feeling there are plenty of others:
I notice the current shipped emoji.js has a mapping for '0023' to #οΈβ£ but if I rebuild all the data afresh from all the submodules I end up with a mapping for '0023-fe0f-20e3'. The three byte version seems to be what OS X sends, while iOS7 sends a 2-byte version ''0023-20e3'.
Older versions of iOS send yet further versions, e.g. this page suggests iOS2-4 used 'e210', and I see that's covered by the softbank lookup in emoji.js (gets lost when I rebuild), though I have much less interest in supporting pre-iOS5 than I do current OS X 10.9.2 and iOS7
The images from the latest gemoji have both 2 and 3-byte versions (0023-20e3.png is a symlink to 0023-fe0f-20e3.png, but there's no 0023.png) and I'd like to support both versions, but not sure how I can get a mapping that includes them both in emoji.js.
A separate example that breaks in a different way is
iOS 5-6: 263a
iOS 7 and OSX 10.9.2: 263a-fe0f
emoji.js mapping (current and rebuilt): 263a, results in
gemoji: 263a.png and 263a-fe0f.png
Thanks!
Is there a reason why all the method names are snake case instead of the conventional js camelCase?
Right now including this package in a package.json requires checking out the entire emoji-data repo which has a large amount of history. I know #28 discusses creating an npm package and there is https://www.npmjs.com/package/front-js-emoji by a 3rd party but not sure if a stop gap of not the full history was considered (so non sub-module).
This is even though the final build size is only 90 megs.
hi
I can't find emoji-data and .png files
where I can find it?
thanks
I'm using AngularJS with RequireJS.
I tried every possible way to load the EmojiConvertor but without success...
require.config({
paths: {
'angular': 'bower_components/angular/angular.min',
'jquery': 'bower_components/jquery/dist/jquery.min',
'underscore': 'bower_components/underscore/underscore-min',
'emoji': 'bower_components/js-emoji/lib/emoji.min'
},
shim: {
'angular': {
deps: ['jquery'],
exports: 'angular'
},
'jquery': {
exports: '$'
},
'underscore': {
exports: '_'
},
'emoji': {
exports: 'EmojiConvertor'
}
},
waitSeconds: 0,
deps: [
'jquery',
'angular',
'underscore',
'emoji'
]
});
My Controller:
define(['common/controllers'], function(controllers) {
'use strict';
controllers.controller('feedController', ['$scope', '$config', function($scope, $config) {
var self = this;
var emoji = EmojiConvertor();
}])
});
And I'm getting Uncaught ReferenceError: EmojiConvertor is not defined
in my controller.
Any thoughts?
It looks like the docs could use some sprucing up. The options documented seem incomplete, and feature like jquery.emoji.js aren't mentioned at all atm.
I'd be down to help get this library fully documented if you think I could help out, @iamcal!
Can you update the current version to bower?
I'm capturing user input from a textarea. Before I throw that text to the server I'm converting emoji to colon syntax using:
var content = $('#post_reply_box textarea[name="reply_text"]').val()
emoji.text_mode = true;
content = emoji.replace_unified(content);
// send to server
Most of them are being converted properly from my iPhone, but several are not:
When I output to the resulting string to the console the heart is displaying as :heart" and then when they are converted back it shows the heart but it also appends the invalid character rectangle as well. Am I converting them wrong or is it something else? I'm on iOS 7.
OS X and iOS aren't the only 2 OSs that ship with an Emoji font, Windows 8+ does as well (And it was backported to Windows 7), as it stands the script unnecessarily converts the emoji to images for these platforms when they're capable of displaying them.
It looks like this happened in 1a86f2a, I added a line-note where the change occurred (I believe).
lib.text_mode = true;
emoji.replace_emoticons(':)')
returns :slightly_smiling_face:
emoji.replace_unified("π")
returns :)
emoji.replace_unified("ππΎπ½")
returns :)floppy_diskfilm_projector
I personally was expecting all 3 methods to return only colon names, but maybe I'm missing something something.
eg: [smile]
When I download this repo, there is nothing inside the emo-data folder... what am I doing wrong?
replace_unified only works when the emoji is encoded by unified,does this project has an method to handle SoftBank emoji??
:) is supposed to change into an emoji, right? It doesn't work. Am I supposed to enable a specific mode or configuration?
Thanks!
The 107 emoji with variant encoding are not being properly detected in replace_unified
when they are encoded using the variant version of their encoding.
For examples, you can view the following in Chrome on my staging server which I have upgraded to output variant encoded emoji from internal API methods:
http://staging.emojitracker.com/details/2B50
In the header/title, I am exporting unicode char with variant encoding 2B50-fe0f
. js-emoji is matching and replacing the first codepoint only (since it's the non-variant version of the same emoji glyph), leaving the naked fe0f
which renders as a broken box. If you look at the streaming tweets you can see that ones from people using iOS6 are replaced properly, but those sending tweets from iOS7 with variant encoding this problem occurs.
http://staging.emojitracker.com/details/0031-20E3
In the new version of js-emoji the keycaps0-9 characters all migrated from being bare 003*
to 003*-20E3
format. However, for some reason, the replace_unified
method doesn't seem to catch these at all anymore. (On this one, look in the header to see this, since the ones I am feeding into the live tweets are currently only ones that match the old format.)
Not quite sure what's going on here, I tried to figure it out in the source but didn't have any luck. Halp?
While trying out this library in a desktop browser, I was surprised by a 12MB download for the apple_64 image sheet.
Is there any straightforward way to support use cases that could do with smaller icons than the current 64x64 representations? In my own project, 16x16 would be more than enough.
Ideally, users could be able to specify a subset of emoji to support, but this would imply using single images instead of sheets -- and I suppose that would make this into a full-fledged feature request. It's just that the huge size of the sheet can make this library a tough choice to consider given the significant download size.
(I fully understand that this shortcoming is probably due to a design choice to be able to support the full set of emoji.)
which emoji version is used?
I'm missing some.
e.g. ping_pong, woman_playing_water_polo
life doesn't make any sense without WOMAN_PLAYING_WATER_POLO! :)
in map there are missing a couple of tags like :frowning2: or :hand_splayed:
I used your excellent library to build an emoji picker of my own here https://github.com/RobertMenke/rm-emoji-picker.
I've run into an issue when testing in IE11. On certain web pages I'll get the expected output of a span with sprite sheets using the background-position css properties, but on other pages the library will attempt to render emojis as images. My code basically looks like this:
const converter = new EmojiConvertor();
converter.init_env();
converter.img_sets.apple.sheet = sheets.apple;
converter.img_sets.google.sheet = sheets.google;
converter.img_sets.twitter.sheet = sheets.twitter;
converter.img_sets.emojione.sheet = sheets.emojione;
converter.use_sheet = true;
some_input.innerHTML = converter.replace_unified(some_string);
Is there a way I can force replace_unified and replace_colons to render as spans instead of images?
Could you shed some light on what causes js-emoji to use images rather than styled spans in this circumstance?
Thanks!!
Could you put js-emoji on npm as well? It'd be cool if we could keep track of js-emoji versions the same way we do with our other packages. (we'd prefer not to add bower just for js-emoji).
after fixing #46, test coverage is at 100%, since the minified code only has one line. this is super dumb. coverage needs to be from the non-minified version
Hey,
I've been having issues converting several emojis on IOS 10 from the emoji keyboard. Some of these include:
and many others.
I've confirmed the following aspects of this issue:
replace_unified
works as expected on a desktop web browser running Mac OSX or Windows.replace_unified
is completely blank on both Chrome and Safari on IOS 10 for certain emojis.Is this a known issue, or is there a way around this? I can create a JSFiddle if that would be helpful.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.