needim / wdt-emoji-bundle Goto Github PK

Is there a way to make the emoji container/box scroll with the rest of the page?

I just re-cloned the fresh pack to make sure none of my edits messed with it, not sure if it's a spelling mistake or was renamed in the update.

:showman: does not exist.

Hello,

When my textarea has value coming from the post data:

<textarea class="wdt-emoji-bundle-enabled wdt-emoji-open-on-colon" id="comment" name="comment" placeholder="Something..." type="textarea" autofocus>some text</textarea>

Then I manually remove the text completely and I insert and emoji, I get :smiley: some text instead of just :smiley:

EDIT: I just confirmed the bug exists in https://ned.im/wdt-emoji-bundle/ as well for the textarea input only.

Thanks for the high quality work.

The component is really nice but it is clear that it was not designed from the beginning to be used for efficient memory usage or for adding dynamically. If I add input editors dynamically and have many of them in my app, the picker's code is duplicated for every input taking up unnecessary memory. A better approach is to have just one instance created that can be opened and repositioned anywhere in the app and opened by a simple method.

Another criticism I have is that you hardcoded the the english text that you search for when someone searches for an emoji. WTF?? This is 2018 dude, not 1985 when developers hardcoded their text and english was in their minds the only language on the planet. If you're going to go through the hassle of writing open source, at least do it properly.

I get this error on wdt-emoji-bundle.js:70:
"Cannot read property 'querySelector' of null"

We have a long string of emoji data in emoji.min.js and again but different in defaults.emojiData. Can we have just one? Where does the latter come from? Did you create the latter one yourself, or could it be a dependency?

• emoji.min.js -> js-emoji
• defaults.emojiData
  • Looks like emoji-data/emoji_pretty.json but with added categories.

I think you could deprecate the dependency on js-emoji and use emojiData to define images in the layout.

E.g. in stead of

self.emoji.replace_colons(':smile:');

use separate function for something like

(self.emojiData.filter(function(el){el.short_name == 'smile'})[0] || {}).image;

it returns the image (or undefined)

Hi

I keep getting 404 on some images located in /emoji-data/img-apple-64/IMAGENAME.png

Can u please upload emoji.js also, it is hard to debug only in emoji.min.js

But Thanks alot for your awesome work.

Best regards Hac

Hi there,

Thank you for this amazing job.
How can in integrate the picker with angularjs application ?

i Hope to see an angular version.

Thanks !

Internet explorer doesn't support the Event constructor at all. To support IE (which many developers need to) you'll need to use document.createEvent('Event').

Here is an example:

      var ce = document.createEvent('Event');
      ce.initEvent('input', true, true);
      wdtEmojiBundle.input.dispatchEvent(ce);
      wdtEmojiBundle.close();

Here is a reference https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

On the latest version of chrome (Version 55.0.2883.87 m, windows) I am getting this error on emoji.min.js -
"Uexpected identifier".

This causes emojis to break. Can someone please provide a solution?

Documentation says:

Set emoji set default sheet

wdtEmojiBundle.defaults.type = 'emojione';

This didnt work for me

Instead i used

wdtEmojiBundle.defaults.emojiType = 'emojione';

see the attachment

When user selects an emoji from the picker then In textarea insted of shortcode I want show unicode in textarea.

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

like this

do u have any method for that?

Does the API provide a way to change the icon used to trigger the emoji picker? If not, would you be interested in accepting a PR to add this functionality?

i don't know what to do on this error please any one who help, i will deeply appreciate . Thanks in advance.

Is there a way to close popover outside the click of emoji selection or the popover selector ?

Hi Needim,

It looks like there is an emoji.min.js file in the repo, but no emoji.js file. It would be nice to have the original source file, because then I could easily add some modifications/features that I need. Any chance that the original, non-minified source file could be added to the git repo?

Thank!

Im user 'on' to bind select event.

wdtEmojiBundle.on('select', function (event) {
	XXXXXXXX
});

can do I unbind it?
is there an off() function?

Thanks.

Problem:
Items in contenteditable div are sometimes set as next-to-last, even if the cursor was set at the end.

Reproduce:

• Go to https://ned.im/wdt-emoji-bundle/#apple
• Select the contenteditable div
• Set the cursor to the right end of the line
• Select multiple Emojis
• Notice that your last selected emoji is the next-to-last item in your div

Note:
Seems not to happen for input fields.

Setup:
Google-Chrome Version 60.0.3112.113 (Official Build) Ubuntu 16 (64-Bit)

While trying to import 'wdt-emoji-bundle'; I've ran into the following error:

Module not found: Error: Can't resolve 'js-emoji'

I think this is similar to #12. Any idea what the issue might be?

Thanks for the great work :)

Many emojis have been added since the last updated to wdt-emoji-bundle

(for example, the England flag!)

I notice that https://github.com/iamcal/emoji-data has a complete list

Would it be possible to add all of the new emojis here? Or could you explain how to do it and I'll do it?

:)

Thanks!

In old version, works well and then when scrolling, automatically go to flag section.
In ie11 and edge works now.

wdtEmojiBundle.emoji.replace_unified() not correctly replace emoji with variation modifiers in "emoji.min.js" but is working correctly in "emoji.js".

Probably cause by the minifier incorrectly converting the unicode characters on this line:
self.rx_unified = new RegExp('(' + a.join('|') + ')(\uD83C[\uDFFB-\uDFFF])?', "g");

I'm doing this import

const wdtEmojiBundle = require('/node_modules/wdt-emoji-bundle/wdt-emoji-bundle');

after that in code i'm doing

wdtEmojiBundle.init('.message-input-box');

And it throws an error

How to properly import this package from NodeJS?

As far as I know this did not happen before, but it does now and I have not updated versions. Maybe something in chrome changed?

See in the gif from the demo page that when clicking some of the tabs the widget scrolls all the way to the bottom. I spent a long time debugging this but was not able to find a solution.

Hi Guys,
Congrats for the project, it's awesome!
I suggest implement this plugin to fix the popup scrolling, It'll prevent the page scroll together:

$.fn.isolatedScroll = function() {
    this.bind('mousewheel DOMMouseScroll', function (e) {
        var delta = e.wheelDelta || (e.originalEvent && e.originalEvent.wheelDelta) || -e.detail,
            bottomOverflow = this.scrollTop + $(this).outerHeight() - this.scrollHeight >= 0,
            topOverflow = this.scrollTop <= 0;
        if ((delta < 0 && bottomOverflow) || (delta > 0 && topOverflow)) {
            e.preventDefault();
        }
    });
    return this;
};

So just need to put: $('.wdt-emoji-scroll-wrapper').isolatedScroll()

Hi

I want to add this to an Angular 4 app that we are making. Is that possible and/or what is the best way of going about this?

Thanks

Hello guys.
i've done npm install --save wdt-emoji-bundle emoji-js
And now i'm doing this import:
import WdtEmojiBundle from "wdt-emoji-bundle/wdt-emoji-bundle";

In the constructor i have this
constructor(private wdtEmojiBundle: WdtEmojiBundler) {}

And ionic inform me that
Uncaught (in promise): Error: Can't resolve all parameters for ChatRoomPage: (?);

I'm stuck right now, can you help me ?

EDIT : I solve it with removing the constructor 'wdtEmojiBundle' arg

I keep having this issue:
Uncaught TypeError: EmojiConvertor is not a constructor at Object.wdtEmojiBundle.init (wdt-emoji-bundle.js:60) at submit:40

This is the line:
self.emoji = new EmojiConvertor();

I don't understand the recent tab. It doesn't include anything and when you click on it, it doesn't get selected.

Is there any documentation about it or is this a bug?

In wdt-emoji-bundle.js: {"has_img_apple":true,"has_img_google":true,"has_img_twitter":true,"has_img_emojione":false,"name":"SNOWMAN","short_name":"showman","short_names":["showman"],"sort_order":137}

name: SNOWMAN
short_name: showman

EDIT:
Turns out the emoji snowman (as SNOWMAN WITHOUT SNOW) is already present, the showman (as SNOWMAN) is a duplicate which should be deleted.

Im doing

wdtEmojiBundle.init('.txt1'); wdtEmojiBundle.init('.txt2');
`

When clicking the emoticon on .txt2 it shows the error Cannot read property 'getAttribute' of null

Is there any way to apply emoticon on multiple textarea which are added dynamically using ajax/jquery etc

var getSelection = function (el) {
var result = {};

if (el.getAttribute('contenteditable')) { //####error in this line here
  return {
    el: el,
    ce: true
  }
}

I wonder why there is no Unicode display support in this library? 😂

Some of the characters display just out of the box, the other may require an extra font, but at least images are not needed.

See how they display it here http://unicode.org/emoji/charts/full-emoji-list.html (the Browser column)

It would be awesome if this https://github.com/mervick/emojionearea is implemented but unlike this plugin the original classnames/attributes of the inpu text should be kept.

Hey, thanks for the hard work - the library is great! When I try to use the library with ES6 imports like below

import wdtEmojiBundle from "wdt-emoji-bundle";

function addEmoji(){
    wdtEmojiBundle.init('.my-selector');
}

I get the error Uncaught ReferenceError: EmojiConvertor is not defined. I'm assuming this is because I haven't imported emoji.min.js, but why wouldn't the bundle import that module itself? Why do we need to create an extra global definition for that object?

In order to use the library I had to do the following:

import EmojiConvertor from "./../../../node_modules/wdt-emoji-bundle/emoji.min";
window.EmojiConvertor = EmojiConvertor;
import wdtEmojiBundle from "wdt-emoji-bundle";

function addEmoji(){
    wdtEmojiBundle.init('.my-selector');
}

Intermittently sometimes I see emojis dont load and requests are going out load assets that don't exist

[WRONG]

[CORRECT]

I haven't been able to pin-point exactly what causes this bug, can't repro it in the demo page so it must be something with my implementation, but perhaps the library could do something to handle this better

Hello,

Thanks for the great library!

Are you planning on updating it to use the last 2.X Emojione version (2.2.7)? it includes quite a few new Emojis (like 🤠 or 🤣).

Thing is that since the current version used in the library, they have changed Emojione to use absolute background positioning for emojis instead of percentual, which makes scaling emojis more difficult since you can't set width and height and have to use an approach with zoom (which does not work on Firefox) or transform: scale().

I was wondering if you though about it and are planning to update or you are not planning to do it at the moment.

Thanks!

If some place doesn't support certain emojis (e.g. all flags) if would be nice if we can disable them.

When I click on the recent section in the emoji popover, it's doesn't work

if (stickers.length) { for (var i = 0; i < stickers.length; i++) { //sticky(stickers[i]); buggy } }

This code is buggy after page reload. Tabs don't work as should.

Also Recent tab is not working after some clicks on tab.

When I type :+1, then this error occurs.

Invalid regular expression: /+1/: Nothing to repeat

The behavior looks fine. Just javascript error occurs.

Discord has a feature where hovering over an emoji someone used, it shows the code to use it yourself. Would this be possible? I'm aware it shows you the code in the menu when hovering over it.

This isn't an issue with the actual code, but more of a plea for help. I'm using the original commit code, and it was modified to change the popup location, and size by a friend. I want to upgrade to the newest bundle but testing it out, it's unusable in my application due to the stock placement. I just need need the location of the code where it determines the popup placement. Thanks.

old modified:

new current code as of today:

(new code popoff is off screen).