Need help with wdt-emoji-bundle?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

needim
409 Stars 88 Forks MIT License 44 Commits 30 Opened issues

Description

Slack like emoji picker with apple/ios, twitter/twemoji, google, emojione, facebook, messenger emoji support

Services available

!
?

Need anything else?

Contributors list

# 98,590
html5
emoji-p...
messeng...
faceboo...
19 commits
# 8,432
JavaScr...
CSS
messeng...
faceboo...
11 commits
# 48,022
Electro...
PHP
messeng...
Twitter
2 commits
# 342,198
CSS
PHP
emoji-p...
messeng...
1 commit
# 34,650
Flask
Socket....
JavaScr...
vuejs
1 commit
# 342,711
CSS
PHP
emoji-p...
messeng...
1 commit
# 343,301
CSS
PHP
emoji-p...
messeng...
1 commit

wdt-emoji-bundle

Slack like emoji selector with apple/ios, twitter/twemoji, google, emojione, facebook, messenger and custom emoji support. I :heart: opensource.

Thanks to Cal Henderson @iamcal.

Demo

wdt-emoji-bundle gif

Installation

Use one of the following: * npm

npm i wdt-emoji-bundle
* bower
bower i wdt-emoji-bundle
* pull in the source directly, load
wdt-emoji-bundle.min.js
,
wdt-emoji-bundle.css
and the
sheets/
directory

Initialize

wdtEmojiBundle.init('.your-inputs-selector');

Advanced configuration

Tell the widget where to get the sheets from

wdtEmojiBundle.defaults.emojiSheets.apple = './sheet_apple.png';        // default /sheets/sheet_apple_64.png
wdtEmojiBundle.defaults.emojiSheets.google = './sheet_google.png';      // default /sheets/sheet_google_64.png
wdtEmojiBundle.defaults.emojiSheets.twitter = './sheet_twitter.png';    // default /sheets/sheet_twitter_64.png
wdtEmojiBundle.defaults.emojiSheets.emojione = './sheet_emojione.png';  // default /sheets/sheet_emojione_64.png
wdtEmojiBundle.defaults.emojiSheets.facebook = './sheet_facebook.png';  // default /sheets/sheet_facebook_64.png
wdtEmojiBundle.defaults.emojiSheets.messenger = './sheet_messenger.png';  // default /sheets/sheet_messenger_64.png

===

Set emoji set default sheet (this has to be done before the init)

wdtEmojiBundle.defaults.emojiType = 'apple';

otherwise use

wdtEmojiBundle.changeType(emojiType);

===

Hover color classes for picker's emoji's

wdtEmojiBundle.defaults.pickerColors = [
  'green', 'pink', 'yellow', 'blue', 'gray'
];

===

Picker tab section's orders, higher is first. Bundle render the sections according to this values.

wdtEmojiBundle.defaults.sectionOrders = { 
  'Recent'  : 10, 
  'Custom'  : 9, 
  'People'  : 8, 
  'Nature'  : 7, 
  'Foods'   : 6, 
  'Activity': 5, 
  'Places'  : 4, 
  'Objects' : 3, 
  'Symbols' : 2, 
  'Flags'   : 1
};

API

Render function takes any html string and convert to emojies based on the current bundle emoji type. (apple, google, twitter, emojione)

var output = wdtEmojiBundle.render('Lorem ipsum :) :speak_no_evil:');

===

Event listeners: 'select', 'afterSelect', 'afterPickerOpen'

wdtEmojiBundle.on('afterSelect', function (event) {
  console.log('element', event.el);
  console.log('emoji', event.emoji);
})

===

Auto open the emoji picker when the user types the colon key

:
in the input:
  • Add class '.wdt-emoji-open-on-colon' to the input field that is going to have the emoji picker

TODO:

  • Better documentation :)
  • Responsive Improvements.
  • Better popup positioning.
  • Open on colon support for contenteditables.
  • Frequently used emoji list with localstorage and/or API.
  • Provide more events; open, close, pickeropen, pickerclose etc.
  • Custom emoji support.
  • Skin color support for apple icons.
  • Better contenteditable support, WYSIWYG?
  • Check browser compatibilities.

http://ned.im/wdt-emoji-bundle

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.