needim / wdt-emoji-bundle

Slack like emoji picker with apple/ios, twitter/twemoji, google, emojione, facebook, messenger emoji support
http://ned.im/wdt-emoji-bundle
MIT License
419 stars 87 forks source link

add another button beside wdt-emoji-picker #37

Open himadrinath opened 6 years ago

himadrinath commented 6 years ago

@needim i want to add other buttons with my wdt-emoji-picker inside form-group wdt-emoji-picker-parent

like this

text

do u have any method for that?

needim commented 6 years ago

Currently, it appends picker as a child to input's parent.

Here is a quick solution;

1- Add a parameter to init function named "container"; https://github.com/needim/wdt-emoji-bundle/blob/714c82beb95094519a14169c83d9e694fbbd799c/wdt-emoji-bundle.js#L54

wdtEmojiBundle.init = function (selector, container) {

2- Pass this parameter to addPicker function on line 138; https://github.com/needim/wdt-emoji-bundle/blob/714c82beb95094519a14169c83d9e694fbbd799c/wdt-emoji-bundle.js#L138

self.addPicker(self.elements[i], container); 

2- Select correct container in addPicker function.

  wdtEmojiBundle.addPicker = function (element, container) {

    container = container || false;

    var self = this;
    if (!hasClass(element, 'wdt-emoji-picker-ready')) {
      var p = document.createElement('div');
      addClass(p, 'wdt-emoji-picker');
      p.innerHTML = self.emoji.replace_colons(':smile:');
      p.addEventListener('click', wdtEmojiBundle.openPicker);

      var parent = element.parentNode;
      addClass(parent, 'wdt-emoji-picker-parent');

      if (container) {
          parent.querySelector(container).appendChild(p);
      } else {
          parent.appendChild(p);
      }

      if (hasClass(element, 'wdt-emoji-open-on-colon')) {
        parent.addEventListener('keyup', wdtEmojiBundle.onKeyup)
      }
      addClass(element, 'wdt-emoji-picker-ready');
    }
  };
needim commented 6 years ago

Usage should be like this;

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

Container must be child of input's parent.