angular-emoji-picker-extended
v0.3.8
Published
AngularJS Emoji picker
Downloads
41
Maintainers
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
- Fork it ( https://github.com/newwaybrazil/angular-emoji-picker/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Create a feature and add tests if required
- Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - 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:
- Install all dependencies via npm
- Install the karma cli
- Run the tests using karma or npm
$ npm install
$ sudo npm install -g karma-cli
$ karma start karma.conf.js OR npm test