hassankhan/emojify.js — pull request #98 by adam-lynch (2014-10-30 22:12:26+00:00)
Title: DO NOT MERGE: Generation of spritesheets

This isn't ready yet but worth discussing. This closes #24 but depends on being #95 merged.

With this PR, the following are now put in `/dist`:

![a](https://cloud.githubusercontent.com/assets/1427241/4852558/11749468-607d-11e4-8422-d36af769d289.png)

Overall I think this is much better. Much clearer. We should then document each usage method in the README.

## More details

### Basic
This is for the default usage with images and `src` attributes.

The LESS file from gh-pages is now stored at `/src/css/basic/emojify.css` and copied to `/dists/css/basic/emojify.css`. Also, the individual images are now stored under `/src/images` and are copied over to `/dists/images/basic/`.

### Data URI

`/dists/css/data-uri/emojify.css` and `/dists/css/data-uri/emojify-emoticons.css` contain the data-URI CSS.

### Sprites

`/dists/css/sprites/emojify.css` and `/dists/css/sprites/emojify-emoticons.css` contain the CSS for the sprites. In each stylesheet, the path to the spritesheet only exists in two places which makes it easier for users to store the spritesheet wherever they want.

Along with the following images:

- `/dists/images/sprites/emojify.png`
- `/dists/images/sprites/emojify-x2.png` (Retina). Actually not sure why [css-sprite](https://github.com/aslansky/css-sprite) chose `-x2` instead of the `@2x` convention, but anyway...
- `/dists/images/sprites/emojify-emoticons.png`
- `/dists/images/sprites/emojify-emoticons-x2.png`

Note: one small problem is that `+1.png` will need to be converted to `.emoji-plus1` or something since `.emoji-+1` is invalid CSS.

I tried to see how easily I could get sprite usage working with the existing code. I had to make some modifications (stored my hacked emojify.js & `index.html` in an `example` folder). In the end what I have is:

```html
emojify.setConfig({
emojify_tag_type: 'span',
replacer: function(emoji, emojiName){
return '';
}
});
emojify.run();
```
See `/example/src/emojify.js` for the implementation.

Notice the `replacer` function. This isn't supported right now but I definitely think it should be. It's mad that `.replace` can have a custom replacer but not the default way of using emojify. So, now I'm thinking both `.replace` and `emojify.run` should just use this same config property. (But in the case of run, as you can see here, it's only used to change the *contents* of the new emoji element, not the element, that's done with `emojify_tag_type`. I guess you should be able to edit the whole emoji element but I'm not sure how that can be done).

So anyway maybe we should have a property like `mode: 'sprites'` which will change the default replacing functions for sprite-complaint ones so the user doesn't have to pass config like above.

---

I've also added an `.npmignore` in this PR too.

---

# To do

[ ] - Fix `.emoji-+1` problem.
[ ] - See if css-sprite will switch to `@2x` convention.
[ ] - Common `config.replacer` option for both `.run` & `.replace`. Tested too.
[ ] - A `mode` config option or something like that which sets things up nicely for working with sprites.