An AngularJS filter for replacing emoji codes with emoticons
Switch branches/tags
Nothing to show
Clone or download
mendable Merge pull request #15 from TheBnl/css-in-main-files-1
Updated bower.json to include the css sheet
Latest commit 10d1215 Aug 10, 2016

README.md

AngularJS Emoji Filter

An AngularJS filter for replacing emoji codes with actual emoticons

Installation

The filter is available in a default form on Bower (you will need Bower 0.9 or greater). By default, each emoji is 21x21 pixels. You can install it the usual way:

bower install angular-emoji-filter

To customise the emoji dimensions, you will need to fork the repository and change the Gruntfile appropriately (if you haven't used Grunt before, I suggest reading the quick start guide on their website):

grunt.initConfig({
   // ...
   montage: {
        "21x21": {
            // ...
            options: {
                size: 21,                         // Width/height of each icon
                prefix: ".emoji",                 // Base CSS selector
                outputImage: "emoji.png",         // File name of sprite sheet
                outputStylesheet: "emoji.css",    // File name of stylesheet
                baseRules: {                      // CSS properties added to the base rule
                    "text-indent": "-9999px",
                    display: "inline-block"
                },
                magick: {                         // ImageMagick options
                    background: "none",
                    depth: 7
                }
            }
        }
    }
});

We are using the Grunt Montage plugin to generate the sprite sheet. Check the readme of the plugin for full configuration details. Once you have customised the Gruntfile, you can build production-ready assets by running the default Grunt task. This will generate the necessary files in the dist directory.

To get the filter working with your Angular app just include the stylesheet and JavaScript, and inject the emoji module into your app as shown in the example below.

Usage

Use it just like any Angular filter. Here's some very simple example markup:

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="emoji.min.css">
        <script src="angular.min.js"></script>
        <script src="emoji.min.js"></script>
    </head>
    <body ng-app="app" ng-controller="AppCtrl">
        <ul>
            <li ng-repeat="message in messages" ng-bind-html-unsafe="message | emoji"></li>
        </ul>
    </body>
</html>

And the associated example Angular app:

angular.module("app", ["emoji"]).controller("AppCtrl", function ($scope) {
    $scope.messages = [
        "Animals: :dog: :cat: :snake:",
        "People: :smile: :confused: :angry:",
        "Places: :house: :school: :hotel:"
    ];
});

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Licensing and Attribution

The AngularJS Emoji filter is released under the MIT license as detailed in the LICENSE file that should be distributed with this library; the source code is freely available.

The filter was developed by James Allardice during work on White Label Dating, while employed by Global Personals Ltd. Global Personals Ltd have kindly agreed to the extraction and release of this software under the license terms above.