Added mode option & .run custom replacer parameter

Ranks · e9b5b0e17c57146aff8991bd340ead91030564eb · adam-lynch committed Oct 30, 2014 · Oct 30, 2014 · e9b5b0e
1 parent 48b57d3
commit e9b5b0e17c57146aff8991bd340ead91030564eb
@@ -1,5 +1,4 @@
 node_modules
-css
 vendor
 tests.browserified.js
 
@@ -0,0 +1,5 @@
+*
+!dist
+!README.md
+!LICENSE.md
+!LICENSE-IMAGES.md
@@ -23,12 +23,13 @@ Go to this project's [GitHub pages](http://hassankhan.github.com/emojify.js) to
 
 - Fast
 - Awesome
-- Made from unicorn blood
-- Available on a CDN **(gasp)**
 - Converts emoticons like `:) :( :'(`
 - Allows customisation of processed emoji
+- Multiple modes; `img`, sprites and data-URI
+- Available on a CDN **(gasp)**
 - Includes a [sample `.htaccess` file](.htaccess) for caching Javascript and CSS
 - Switchable emoji sets **(SOON!)**
+- Made from unicorn blood
 
 ## Installation
 
@@ -58,7 +59,8 @@ Then add this to your Javascript code:
 
 Option | Default | Description
 --- | --- | ---
-`emojify_tag_type` | `null` | When set, emojify uses this element with the class `emoji emoji-#{emojiname}` instead of an `img` with a `src` attribute.  Example valid values: `div`, `span`
+`mode` | `img` | By default, emojify will output an `img` with a `src` attribute for each emoji found. But if `mode` is set to `sprite` or `data-uri`, then `span`s with classes are outputted. Don't forget to include the appropriate CSS for your choice though, see the `/dist` directory.
+`emojify_tag_type` | `null` | When set, emojify uses this element with the class `emoji emoji-#{emojiname}` instead of an `img` with a `src` attribute.  Example valid values: `div`, `span`. This takes precedence over the `mode` option. Note: if you're not using `img`s, `.emoji-+1` isn't a valid class, so `.emoji-plus1` is used instead.
 `only_crawl_id` | `null` | Restricts searching for emojis to a specified element & it's children. If null, and no object is passed to `run()`, `document.body` is used
 `img_dir` | `'images/emoji'` | Defines the path to the emoji images
 `ignore_emoticons` | `false` | If `true`, only convert emoji like `:smile:` and ignore emoticons like `:)`
@@ -77,12 +79,21 @@ emojify.setConfig({emojify_tag_type : 'div'});
 
 #### Parameters
 - `element` - Optional HTML element to restrict the emojification to.
+- `replacer` - Optional Function to override emoji replacement behaviour with your own. The function will receive two arguments, the emoji pattern found (`emoji`), and the emoji name (`name`). In the case of emoticons, for example, `emoji = ':)'` and `name = 'smile'`. Your function must return a HTMLElement.
 
 #### Usage
 ```js
 emojify.run();
 // OR
 emojify.run(document.getElementById('my-element'))
+// OR
+emojify.run(null, function(emoji, emojiName){
+  var span = document.createElement('span');
+  span.className = 'emoji emoji-'  + emojiName;
+  span.innerHTML = emoji + ' replaced';
+  return span;
+});
+
 ```
 
 ---
@@ -99,7 +110,7 @@ emojify.run(document.getElementById('my-element'))
 
 By default, emojify.js uses the internal function `defaultReplacer()` to replace emoji. You can override this behaviour by supplying your own callback function.
 
-Your callback function will receive two parameters, the emoji pattern found (`emoji`), and the emoji name (`name`). In the case of emoticons, for example, `emoji = ':)'` and `name = 'smile'`.
+Your callback function will receive two arguments, the emoji pattern found (`emoji`), and the emoji name (`name`). In the case of emoticons, for example, `emoji = ':)'` and `name = 'smile'`.
 
 The context in which your replacer function is run will have the config available. So you can access properties such as `img_dir` at `this.config.img_dir`.
 
@@ -114,6 +125,8 @@ replacer = function(emoji, name) {
 emojify.replace('I am happy :)', replacer);
 ```
 
+
+
 ### Excluding elements from being processed
 
 To exclude tags from being emojified, add `no-emojify` to their `class` attributes.
@@ -1,6 +1,6 @@
 {
   "name": "emojify.js",
-  "main": "emojify.js",
+  "main": "dist/js/emojify.js",
   "version": "0.9.5",
   "homepage": "https://github.com/hassankhan/emojify.js",
   "authors": [
@@ -0,0 +1,24 @@
+{{#sprite}}
+    {{class}} {
+        background-image: url('{{{escaped_image}}}');
+        display: inline-block;
+    }
+
+{{/sprite}}
+{{#retina}}
+    @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
+        {{class}} {
+            background-image: url('{{{escaped_image}}}');
+            background-size: {{px.total_width}} {{px.total_height}};
+        }
+    }
+
+{{/retina}}
+{{#items}}
+    {{class}} {
+        background-position: {{px.offset_x}} {{px.offset_y}};
+        width: {{px.width}};
+        height: {{px.height}};
+    }
+
+{{/items}}
@@ -0,0 +1,6 @@
+.emoji {
+  width: 1.5em;
+  height: 1.5em;
+  display: inline-block;
+  margin-bottom: -0.25em;
+}
@@ -0,0 +1 @@
+.emoji{width:1.5em;height:1.5em;display:inline-block;margin-bottom:-.25em}
@@ -0,0 +1,120 @@
+    .emoji {
+        background-image: url('../../images/sprites/emojify-emoticons.png');
+        display: inline-block;
+    }
+
+    @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
+        .emoji {
+            background-image: url('../../images/sprites/emojify-emoticons-x2.png');
+            background-size: 185px 148px;
+        }
+    }
+
+    .emoji-rage {
+        background-position: -2px -2px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-broken_heart {
+        background-position: -39px -2px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-flushed {
+        background-position: -2px -39px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-frowning {
+        background-position: -39px -39px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-grinning {
+        background-position: -76px -2px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-heart {
+        background-position: -76px -39px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-kissing_heart {
+        background-position: -2px -76px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-mask {
+        background-position: -39px -76px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-pensive {
+        background-position: -76px -76px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-confounded {
+        background-position: -113px -2px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-relaxed {
+        background-position: -113px -39px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-scream {
+        background-position: -113px -76px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-smile {
+        background-position: -2px -113px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-smirk {
+        background-position: -39px -113px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-sob {
+        background-position: -76px -113px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-stuck_out_tongue_closed_eyes {
+        background-position: -113px -113px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-stuck_out_tongue_winking_eye {
+        background-position: -150px -2px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .emoji-wink {
+        background-position: -150px -39px;
+        width: 32px;
+        height: 32px;
+    }
+
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <link rel="stylesheet" href="css/sprites/emojify.css">
+    <script src="js/emojify.js"></script>
+</head>
+<body>
+    <p>Hello :smiley: </p>
+    <script>
+        emojify.setConfig({
+            mode: 'sprite'
+        });
+        emojify.run(null);
+    </script>
+</body>
+</html>