wdt-emoji-bundle

:lollipop:

Slack like emoji picker with
apple, twitter, google, emojione, facebook, messenger
support.

Documentation

Apple Google Twitter Emojione Facebook Messenger

↓

↓

;) Hey! check :heart_eyes: this. :dog: :cat: :hamster:

↓

DOCUMENTATION

Installation

Download bundle from Github and upload the files to your server.

Or via NPM npm i wdt-emoji-bundle

Or via BOWER bower i wdt-emoji-bundle

Add this markup to DOM 

<div class="wdt-emoji-popup">
  <a href="#" class="wdt-emoji-popup-mobile-closer"> × </a>
  <div class="wdt-emoji-menu-content">
    <div id="wdt-emoji-menu-header">
      <a class="wdt-emoji-tab active" data-group-name="Recent"></a>
      <a class="wdt-emoji-tab" data-group-name="People"></a>
      <a class="wdt-emoji-tab" data-group-name="Nature"></a>
      <a class="wdt-emoji-tab" data-group-name="Foods"></a>
      <a class="wdt-emoji-tab" data-group-name="Activity"></a>
      <a class="wdt-emoji-tab" data-group-name="Places"></a>
      <a class="wdt-emoji-tab" data-group-name="Objects"></a>
      <a class="wdt-emoji-tab" data-group-name="Symbols"></a>
      <a class="wdt-emoji-tab" data-group-name="Flags"></a>
      <a class="wdt-emoji-tab" data-group-name="Custom"></a>
    </div>
    <div class="wdt-emoji-scroll-wrapper">
      <div id="wdt-emoji-menu-items">
        <input id="wdt-emoji-search" type="text" placeholder="Search">
        <h3 id="wdt-emoji-search-result-title">Search Results</h3>
        <div class="wdt-emoji-sections"></div>
        <div id="wdt-emoji-no-result">No emoji found</div>
      </div>
    </div>
    <div id="wdt-emoji-footer">
      <div id="wdt-emoji-preview">
        <span id="wdt-emoji-preview-img"></span>
        <div id="wdt-emoji-preview-text">
          <span id="wdt-emoji-preview-name"></span><br>
          <span id="wdt-emoji-preview-aliases"></span>
        </div>
      </div>
      <div id="wdt-emoji-preview-bundle">
        <span>WDT Emoji Bundle</span>
      </div>
    </div>
  </div>
</div>

Include emoji.min.js 

<script type="text/javascript" src="emoji.min.js"></script>

Include wdt-emoji-bundle.min.js 

<script type="text/javascript" src="wdt-emoji-bundle.min.js"></script>

Initializing the bundle

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

Options / Configs

You can change sheet's urls, I recommend use a CDN, they are huge. wdtEmojiBundle.defaults.emojiSheets.apple = './sheet_apple.png'; wdtEmojiBundle.defaults.emojiSheets.google = './sheet_google.png'; wdtEmojiBundle.defaults.emojiSheets.twitter = './sheet_twitter.png'; wdtEmojiBundle.defaults.emojiSheets.emojione = './sheet_emojione.png';

Default emoji set, available sets: ['apple', 'google', 'twitter', 'emojione'] wdtEmojiBundle.defaults.type = 'apple';

Hover color classes for picker's emoji's wdtEmojiBundle.defaults.pickerColors = [
  'green', 'pink', 'yellow', 'blue', 'gray'
]; Bundle picks a random element from this array and adds to emojis classlist. Sample css selector for 'other-color': .wdt-emoji.other-color:hover {background-color: #######;}

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 :) 🙊'); output will be ↓ Change to → Apple, Google, Twitter, Emojione, Facebook, Messenger

  • Better documentation. :neutral_face:
  • Responsive Improvements. :wink:
  • Better popup positioning :+1:
  • Open on colon support for contenteditables :candy:
  • Frequently used emoji list with localstorage and/or API. :robot_face:
  • Provide more events; open, close, pickeropen, pickerclose etc. :tada:
  • Custom emoji support. :wine_glass:
  • Skin color support for apple/ios. :lion_face:
  • Better contenteditable support, WYSIWYG? :nerd_face:
  • Check browser compatibilities. :joystick:


I :heart: opensource.

×

Search Results

No emoji found