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

angular-emoji-picker-extended

v0.3.8

Published

AngularJS Emoji picker

Downloads

41

Readme

AngularJS Emoji Picker Extended

AngularJS Emoji Picker Extended is a simple AngularJs module which allows you to add emoji images to your model value. This project is a fork of Angular Emoji Picker, with some improvements.

Installation

Npm

The simplest way to install Emoji Picker is use Npm.

npm install angular-emoji-picker-extended

This will install the latest release.

Manual

You can also just download the contents of the dist/ folder and add dependencies manually.

Usage

angular.module('myModule', ['vkEmojiPicker']);

By default Emoji Picker uses its own popover, which, to be honest, has not a very great realization. But you have an option - you can use external dependencies: Angular Strap, Angular-UI Bootstrap and Bootstrap. In that case you have to include additional scripts on your page:

Emoji Picker Directive

Add the emoji-picker attribute to an element to drop in the emoji button and picker in your template. Clicking the element will open a popover listing the available emoji for a user to select.

Basic Example:

<input type="text" ng-model="keyword"/>
<span emoji-picker="keyword" placement="right" title="Emoji"></span>

Full Example

<textarea ng-model="message" ng-change="messageUpdated()">{{message}}</textarea>
<span emoji-picker="message"
      placement="right" 
      title="Emoji"
      recent-limit="10"
      output-format="unicode"
      on-change-func="messageUpdated"></span>

Options:

  • emoji-picker - the bound property to which selected emoji should be added

  • placement (optional) - determines where the popover shows relative to the button element

    top (default), bottom, left, right, right-relative

  • title (optional) - the header text shown in the popover window

  • recent-limit (optional) - the number of recently-selected emoji to show in the popover window

  • output-format (optional) - the format to add selected emoji

    alias (default), unicode

  • on-change-func (optional) - a function to be called when the user selects or removes an emoji

Angular Strap

<link rel="stylesheet" href="/path/to/bootstrap/dist/css/bootstrap.min.css">
<script src="/path/to/angular-strap/dist/angular-strap.min.js"></script>
<script src="/path/to/angular-strap/dist/angular-strap.tpl.min.js"></script>
angular.module('myModule', ['vkEmojiPicker', 'mgcrea.ngStrap']);
angular.module('myModule', ['vkEmojiPicker', 'ui.bootstrap.popover']);

Also Emoji Picker provides a couple handy directives:

  • emojify - converts an emoji string into image

<div ng-bind-html="message | emojify"></div>

  • hexify - converts an emoji string into UTF-8 characters

<div ng-bind-html="message | hexify"></div>

Bugs and feature requests

If you found a bug or have an idea feel free to open a new issue.

Contributing

  1. Fork it ( https://github.com/newwaybrazil/angular-emoji-picker/fork )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Create a feature and add tests if required
  4. Commit your changes (git commit -am 'Add some feature')
  5. Push to the branch (git push origin my-new-feature)
  6. Create a new Pull Request

Also the eslint and editorconfig need to be configured.

Building

The files in the dist/ folder, plus dependencies, are all you need to use Emoji Picker. But if you'd like to build it yourself, you have to use grunt.

First off, you need to have nodejs installed. Then install all dependencies of the project with npm, then install grunt and run the default task.

$ npm install
$ sudo npm install -g grunt-cli
$ grunt

The task compiles all source files.

You can also run grunt watch:dev to have it rebuild on change.

Tests

Unit tests are run with karma and written using mocha, chai and sinon

To run the tests:

  1. Install all dependencies via npm
  2. Install the karma cli
  3. Run the tests using karma or npm
$ npm install
$ sudo npm install -g karma-cli
$ karma start karma.conf.js OR npm test