search

jeff-collins / ment.io

Mentions and Macros for Angular
http://jeff-collins.github.io/ment.io
MIT License
1.13k stars 221 forks source link

Extending emoticons support #15

Open pratik60 opened 10 years ago

pratik60 commented 10 years ago

Angular does not have a good repository for converting emoticons, and this could definitely be integrated into this app.

We attempted angular emoticons (pratik60/angular-emoticons), which would convert the emoticons after posting a message. What it does is searches with regex for the emoticons, adds a css class, which has a background image attached to it. But I like the possibility more with this package.

In the macros, we have converted (smile), by replacing it with an img src. Would you prefer handling it with css-class which has a background-image, or rather directly as images? How do you think we should go about it, and would you like to see this feature in your package?

Is there any library/api we could hook into for emoticons easily or just integrate a css file here? Thoughts....I hope I wasn't all over the place :-)

jeff-collins commented 10 years ago

I think I understand the request. Do you envision that the ment.io widget should provide the emoticon images themselves? Or just help with the translation visually in the input field? If you see it as useful for ment.io to provide the images, should they be "standard" from other apps that do this?

As far as how to translate - i do like the background image idea with css. But it requires a span that can show the whole image since I'd imagine we lose sizing information at that point. It might be reasonable to support a directive that would do the rewriting.

pratik60 commented 10 years ago

@jeff-collins Dude this is black magic...How did you suddenly end up on 400+ stars? :-) :-)

It was just like 12-15 one or two months back. Did an entire company just start working on this repo or something? Way to go, mate :-)

About the request, I do think ment.io widget should provide emoticon images themselves. It already does the translation visually....I think the emoticons should be from a standard library -: Apple/International Style,Google Hangouts Style,Twitter Style but I'm not sure how we can integrate this. Slack does a really good job at it, and I wonder if they are using any API's. Let me do some research and see if I can find out any api that we can hook into?

jeff-collins commented 10 years ago

The power of dailyjs. Got a mention on Friday.

So, because of Chrome not supporting Emoji's I can't just use the native display on Mac/Win/Android it appears. I could use something like this: https://github.com/iamcal/php-emoji/blob/master/emoji.png. Any suggestions for what would work?

pratik60 commented 10 years ago

@jeff-collins - I have found something for this. Basically all the emoticons that github uses.

http://www.emoji-cheat-sheet.com/

I am going to try and send a pull request by the weekend.

jeff-collins commented 10 years ago

I have a few of those. I think the choice we need to make is whether to use unicode characters in the case where the browser is NOT Chrome desktop. Every other browser and even Android Chrome supports unicode emoticons. This is why people keep implementing the image approach. To support Chrome desktop, we will end up with an emoji image ref with a crop. But that should probably be browser-specific. Thoughts?

pratik60 commented 10 years ago

I completely got lost with other issues, and forgot about this.

Last I remember -: I was trying to add this as a dependency, https://github.com/hassankhan/emojify.js, and had integrated emojify.run() when the directive during the scope watch. It wasn't really clean, so I stuck to our old library we used for emoticons. Can you take it on and see if you like how emojify.js works?

Plus, I would also like to know if one has an edit functionality on posts, how would they transform things back? Because in the mongodb (in our case), the post gets saved with 'This is awesome ' and if the user wants to edit it, we have to re-transform the image back to the smiley.

jeff-collins commented 10 years ago

I'm very inclined to use native emoticon support (unicode chars). But that doesn't work in chrome desktop. Wdyt?

pratik60 commented 10 years ago

The only reason Chrome doesn't support unicode characters on Windows, is because windows comes with fonts with bare minimal unicode support.

What's I'd like to know is why can't we just load a font which supports it into the system?

Btw, does this help? http://apps.timwhitlock.info/emoji/tables/unicode

jeff-collins commented 10 years ago

Actually, i thought Firefox and others do support native emoji on windows. On the other hand, Mac Chrome doesn't support native emoji either.

It feels like when you use macros, you are really doing an intentionally permanent translation. The alternative to that is separating the view from the model, and having a translation in and out.

thoughtpalette commented 10 years ago

:+1: for emoji support