https://github.com/globaldev/angular-emoji-filter

An AngularJS filter for replacing emoji codes with emoticons
https://github.com/globaldev/angular-emoji-filter

Last synced: 3 months ago
JSON representation

An AngularJS filter for replacing emoji codes with emoticons

• Host: GitHub
• URL: https://github.com/globaldev/angular-emoji-filter
• Owner: globaldev
• License: other
• Created: 2013-07-05T10:25:57.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2016-11-18T13:00:35.000Z (about 8 years ago)
• Last Synced: 2024-08-21T22:30:32.827Z (4 months ago)
• Language: JavaScript
• Homepage: http://dev.venntro.com/angular-emoji-filter/
• Size: 7.66 MB
• Stars: 125
• Watchers: 55
• Forks: 35
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# AngularJS Emoji Filter

> An AngularJS filter for replacing [emoji codes](http://www.emoji-cheat-sheet.com) with actual emoticons

## Installation

The filter is available in a default form on [Bower](http://bower.io) (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](http://gruntjs.com/getting-started) on their website):

```js

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](https://github.com/globaldev/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

    

        

        

        

        

    

    

        


            


        

    


```

And the associated example Angular app:

```js

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](http://gruntjs.com/).

## 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](http://github.com/globaldev/angular-emoji-filter).

The filter was developed by [James Allardice](http://jamesallardice.com) during work on [White Label Dating](http://www.whitelabeldating.com/), while employed by [Global Personals Ltd](http://www.globalpersonals.co.uk).  Global Personals Ltd have kindly agreed to the extraction and release of this software under the license terms above.