needim / wdt-emoji-bundle Goto Github PK
View Code? Open in Web Editor NEWSlack like emoji picker with apple/ios, twitter/twemoji, google, emojione, facebook, messenger emoji support
Home Page: http://ned.im/wdt-emoji-bundle
License: MIT License
Slack like emoji picker with apple/ios, twitter/twemoji, google, emojione, facebook, messenger emoji support
Home Page: http://ned.im/wdt-emoji-bundle
License: MIT License
Is there a way to make the emoji container/box scroll with the rest of the page?
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.
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.
When I type :+1
, then this error occurs.
Invalid regular expression: /+1/: Nothing to repeat
The behavior looks fine. Just javascript error occurs.
@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?
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.
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
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");
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
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 !
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
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?
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()
Documentation says:
Set emoji set default sheet
wdtEmojiBundle.defaults.type = 'emojione';
This didnt work for me
Instead i used
wdtEmojiBundle.defaults.emojiType = 'emojione';
I get this error on wdt-emoji-bundle.js:70
:
"Cannot read property 'querySelector' of null"
Im user 'on' to bind select event.
wdtEmojiBundle.on('select', function (event) {
XXXXXXXX
});
can do I unbind it?
is there an off() function?
Thanks.
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!
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');
}
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
If some place doesn't support certain emojis (e.g. all flags) if would be nice if we can disable them.
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).
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
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
)
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
}
}
When user selects an emoji from the picker then In textarea insted of shortcode I want show unicode in textarea.
When I click on the recent section in the emoji popover, it's doesn't work
In old version, works well and then when scrolling, automatically go to flag section.
In ie11 and edge works now.
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?
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!
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?
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.
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();
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
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 ?
Problem:
Items in contenteditable div are sometimes set as next-to-last, even if the cursor was set at the end.
Reproduce:
Note:
Seems not to happen for input fields.
Setup:
Google-Chrome Version 60.0.3112.113 (Official Build) Ubuntu 16 (64-Bit)
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.
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?
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!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.