Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Jason Pang committed Aug 31, 2015
1 parent 8915857 commit ee2dddd
Showing 1 changed file with 5 additions and 7 deletions.
12 changes: 5 additions & 7 deletions README.md
Expand Up @@ -49,29 +49,27 @@ The `maxlength` property is mostly supported. Character input and emoji input ea

They are!

#Trivia

#You get:
###You get:
- Input fields converted to contenteditable rich text areas with emoji support
- A happy face icon on the top right of each rich text area, which brings up the menu on click
- An emoji selection menu, with recently selected emojis at the top (thanks to angular-emoji-popup's author)
- Text area values can be easily converted between Unicode and HTML (Unicode+Image Tags)

#What happens under the hood:
###What happens under the hood:
- When you call `new EmojiPicker().discover()`, all elements with the data attribute `data-emojiable="true"` are found, a contenteditable div is created after each one, and the original input field is hidden.
- When you type text into this contenteditable div, events are triggered upon each keypress/text change as well as each emoji selection, and the contents of this contenteditable div are copied to the original (now hidden) input field
- Text entered into this contenteditable div is plain text; selected emojis are actually `<img>` tags
- To get the value of the contenteditable div, call `element.val()` on the underlying hidden input field. The `<img>` emojis will be converted into Unicode emojis (plain text)

#Credits:
###Credits:
This is a slightly modified version of [angular-emoji-popup](https://github.com/Coraza/angular-emoji-popup), which was written based on [jquery-emojiarea](https://github.com/diy/jquery-emojiarea) (converts input fields to rich emoji input areas) and uses [nanoScrollerJs](https://github.com/jamesflorentino/nanoScrollerJS) (for the popup's custom-skinned scrollbar). This version removes AngularJS as a dependency.

#Improvements from the original forks:
###Improvements from the original forks:
- The top-right smiley face that allows you to bring up the emoji picker menu
- The smiley face shifts left appropriately when text entered exceeds the height and causes a scrollbar to appear
- The `maxlength` property of input fields is respected (emoji selections count as a single character)
- CSS classes from the original input field are copied over to the new contenteditable div

We built this to power emoji selection for [OneSignal](https://onesignal.com), our multi-platform push notification service.

#Custom options
To get Unicode emoji input instead of images, simply add `data-emoji-input="unicode"` to your input field's property. You can see that on the second textarea on the demo page.

0 comments on commit ee2dddd

Please sign in to comment.