Angular Smilies

Angular Smilies module exposes a filter and a directive for smilies parsing (replaced by an image) as well as a directive to display a "smiley picker".

Example

Edit the input and use the left picker and see the changes on the computed output.

<p ng-bind-html="message | smilies"></p>

<div class="input-group">
  <span class="input-group-addon"
        smilies-selector="message"
        smilies-placement="right"
        smilies-title="Smilies"></span>
  <input ng-model="message" focus-on-change="message" class="form-control">
</div>

Replacement is done in two ways:

:something: is replaced by the smiley something
Some preconfigured emojis are also replaced, see the full list bellow (case insensitive)

:D :-D :S :-S ;( ;-( OO <3 ^^ :| :-| :P :-P :( :-( :) :-) :O :-O ;) ;-)

Dependencies

ngSanitize

In order to use the filters (which outputs HTML) you will need the ngBindHtml directive which is part of ngSanitize module.

AngularUI Bootstrap or Angular Strap

The smiley picker uses Bootstrap Popover as Angular module. You can use either AngularUI Bootstrap or Angular Strap.

Includes

The module is available on Bower. Add angular-smilies to your bower.json file or install it manually with bower install angular-smilies --save.

Include the Javascript files...

<script src="dist/angular/angular.min.js"></script>
<script src="dist/angular-sanitize/angular-sanitize.min.js"></script>

<script src="dist/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<!-- OR -->
<script src="dist/angular-strap/dist/angular-strap.min.js"></script>
<script src="dist/angular-strap/dist/angular-strap.tpl.min.js"></script>

<script src="dist/angular-smilies/dist/angular-smilies.min.js"></script>

... and include the stylesheet as well as Bootstrap's one. The embed version contains the smilies sprite coded in base64 where the normal version relies on an external file. The embed version weighs a little more because of the coding but saves one HTTP request.

<link rel="stylesheet" href="dist/bootstrap/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="dist/angular-smilies/dist/angular-smilies.min.css">
<!-- OR -->
<link rel="stylesheet" href="dist/angular-smilies/dist/angular-smilies-embed.min.css">

Bootstrap

Add the necessary modules to your app definition.

var app = angular.module('app', [
  'ngSanitize',
  'ui.bootstrap', // OR mgcrea.ngStrap
  'angular-smilies'
]);

As filter

The module exposes to smilies filter useable with the ngBindHtml directive.

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

As directive

The module also exposes the smilies directive with data binding.

<div smilies="message"></div>

Smiley picker

The module includes a smiley selector based on Bootstrap Popover. It allows to display available smilies and append the corresponding code to a model.

Example with Bootstrap forms:

<div class="input-group">
  <span class="input-group-addon"
        smilies-selector="message"
        smilies-placement="right"
        smilies-title="Smilies"></span>
  <input ng-model="message" focus-on-change="message" class="form-control">
</div>

Notice the focusOnChange directive which allow to focus the input when the content changes.

You can add smiliesKeepOpen attribute to the selector to not automatically close the Popover when the user click on a smiley. The Popover is still closeable by clicking again on the selector and anywhere on the page (AngularUI Bootstrap only).