npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

onesignal-emoji-picker

v1.0.0

Published

Add a slick emoji selector to input fields and textareas on your website.

Downloads

483

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

jennantillaonesignaljennantillaonesignalfhboswellonesignalfhboswellonesignalbrismithersbrismithersnan-linan-likastenkastenrgomezprgomezpsherwin-onesignalsherwin-onesignal

Keywords

emojijquery-emojitextareainputemoticonsiconsjquery-plugin

Readme

Emoji Picker

:heart_eyes: :stuck_out_tongue_winking_eye: :joy: :stuck_out_tongue: Instantly add Emoji support to input fields on your website! :boom: :sparkles: :thumbsup: :metal:

Example Screenshot

Demo: http://onesignal.github.io/emoji-picker/

#Installation & Usage:

On Robustness: This library isn't super robust, so if you find any issues, please report it so it can be fixed (or feel free to fix it yourself). Code quality improvements are also welcome, always looking to make it better!

On CDN & Multiple Files: Currently, the number of JavaScript files you have to include is not ideal (6 files). The files will eventually be concatenated and minified, but it might be a bit until this happens. When that's complete, it'll be added to CDNJs as well.

  1. In your <head> section, add the following stylesheet links. Adjust the lib/css path to match yours.
  <link href="lib/css/nanoscroller.css" rel="stylesheet">
  <link href="lib/css/emoji.css" rel="stylesheet">
  1. Before the end of your <body> section, add the following JavaScript links. This library depends on jQuery, so jQuery must also be included, before these scripts are run. Once again, adjust the lib/css path to match yours.
  <!-- ** Don't forget to Add jQuery here ** -->
  <script src="lib/js/nanoscroller.min.js"></script>
  <script src="lib/js/tether.min.js"></script>
  <script src="lib/js/config.js"></script>
  <script src="lib/js/util.js"></script>
  <script src="lib/js/jquery.emojiarea.js"></script>
  <script src="lib/js/emoji-picker.js"></script>

  1. On any input field, add the data attribute data-emojiable="true".

  2. That's all you need for the default options. Play around with the demo to see what the default options give you.

#Configuring Options

I want the Emoji selector to input Unicode characters instead of images

Add data-emoji-input="unicode" to your input field. Only the unicode value is checked for; entering anything else has no effect.

I want to limit my input field to a certain number of characters (maxlength)

The maxlength property is mostly supported. Character input and emoji input each count as one character, so it'll stop you from entering more than the max length. Unfortunately, you can paste more than the maxlength number of characters, so that needs to be fixed.

I want classes from my original input field to be copied over to the rich emoji input area

They are!

#Trivia

###You get:

  • Input fields converted to contenteditable rich text areas with emoji support
  • A happy face icon on the top right of each rich text area, which brings up the menu on click
  • An emoji selection menu, with recently selected emojis at the top (thanks to angular-emoji-popup's author)
  • Text area values can be easily converted between Unicode and HTML (Unicode+Image Tags)

###What happens under the hood:

  • When you call new EmojiPicker().discover(), all elements with the data attribute data-emojiable="true" are found, a contenteditable div is created after each one, and the original input field is hidden.
  • When you type text into this contenteditable div, events are triggered upon each keypress/text change as well as each emoji selection, and the contents of this contenteditable div are copied to the original (now hidden) input field
  • Text entered into this contenteditable div is plain text; selected emojis are actually <img> tags
  • To get the value of the contenteditable div, call element.val() on the underlying hidden input field. The <img> emojis will be converted into Unicode emojis (plain text)

###Credits: This is a slightly modified version of angular-emoji-popup, which was written based on jquery-emojiarea (converts input fields to rich emoji input areas) and uses nanoScrollerJs (for the popup's custom-skinned scrollbar). This version removes AngularJS as a dependency.

###Improvements from the original forks:

  • The top-right smiley face that allows you to bring up the emoji picker menu
  • The smiley face shifts left appropriately when text entered exceeds the height and causes a scrollbar to appear
  • The maxlength property of input fields is respected (emoji selections count as a single character)
  • CSS classes from the original input field are copied over to the new contenteditable div

We built this to power emoji selection for OneSignal, our multi-platform push notification service.