gitbot/twemoji
1
0
Fork 0
mirror of https://github.com/twitter/twemoji.git synced 2024-06-15 03:35:16 +00:00
Code Issues Projects Releases Wiki Activity

updating info to V2 and Unicode 8

Browse Source
This commit is contained in:
Andrea Giammarchi 2016-03-01 18:25:41 +00:00
parent 93e0461b16
commit 49fa419168
3 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
README.md
View File

@ -2,7 +2,35 @@
A simple library that provides standard Unicode [emoji](http://en.wikipedia.org/wiki/Emoji) support across all platforms. A simple library that provides standard Unicode [emoji](http://en.wikipedia.org/wiki/Emoji) support across all platforms.
## CDN Support ## Unicode 8.0 and Diversity
The **twemoji V2** adheres to the [8.0 Unicode version](http://unicode.org/versions/Unicode8.0.0/) and **supports** 1661 different emoji, including **[diversity](http://www.unicode.org/reports/tr51/#Diversity)**.
The previous twemoji V1 adheres to the [7.0 Unicode version](http://www.unicode.org/charts/PDF/Unicode-7.0/U70-1F300.pdf) and supports 872 different emoji.
## Version 2 CDN Support
The folks over at [MaxCDN](https://www.maxcdn.com) graciously provide CDN support for both version 1 and version 2.
For the latter one, use the following in the `<head>` tag of your HTML document(s):
```html
<script src="//twemoji.maxcdn.com/2/twemoji.min.js"></script>
```
## Breaking changes in V2
_TL;DR_: there's no `variant` anymore, all callbacks receives the transformed `iconId` and in some case the rawText too.
There are few potentially breaking changes in `twemoji` version 2:
* the `parse` invoked function signature is now `(iconId, options)` instead of `(icon, options, variant)`
* the `attributes` function will receives `(rawText, iconId)` instead of `(icon, variant)`
* the **default** remote protocol is now **https** regardless the current site is _http_ or even _file_
* the **default** PNG icon size is **72** pixels and **there are no other PNG assets** for 16 or 32.
* in order to access latest Unicode 8 ready assets you need to specify *folder* `2/72x72` or `2/svg`.
Everything else is pretty much the same so if you were using defaults, all you need to do is to add the version `2/` before the `twmoji.js` file you were using.
## Version 1 CDN Support
The folks over at [MaxCDN](https://www.maxcdn.com) graciously provide CDN support. The folks over at [MaxCDN](https://www.maxcdn.com) graciously provide CDN support.
@ -22,7 +50,7 @@ Alternatively you can use [cdnjs](https://cdnjs.com/) if you prefer:
Following all methods exposed through the `twemoji` namespace. Following all methods exposed through the `twemoji` namespace.
### twemoji.parse( ... ) ### twemoji.parse( ... ) V1
This is the main parsing utility and has 3 overloads per each parsing type. This is the main parsing utility and has 3 overloads per each parsing type.
@ -32,7 +60,7 @@ Each of them accept a callback to generate each image source or an options objec
Here is a walk through all parsing possibilities: Here is a walk through all parsing possibilities:
##### string parsing ##### string parsing (V1)
Given a generic string, it will replace all emoji with an `<img>` tag. Given a generic string, it will replace all emoji with an `<img>` tag.
While this can be used to inject via `innerHTML` emoji image tags, please note that this method does not sanitize the string or prevent malicious code from being executed. As an example, if the text contains a `<script>` tag, this **will not** be converted into `&lt;script&gt;` since it's out of this method scope to prevent these kind of attacks. While this can be used to inject via `innerHTML` emoji image tags, please note that this method does not sanitize the string or prevent malicious code from being executed. As an example, if the text contains a `<script>` tag, this **will not** be converted into `&lt;script&gt;` since it's out of this method scope to prevent these kind of attacks.
@ -180,7 +208,7 @@ function imageSourceGenerator(icon, options) {
} }
``` ```
##### attributes ##### attributes (V1)
The function to invoke in order to generate additional, custom attributes for the image tag. The function to invoke in order to generate additional, custom attributes for the image tag.
By default it is a function like the following one: By default it is a function like the following one:
@ -250,7 +278,7 @@ To properly support emoji, the document character must be set to UTF-8. This can
<meta charset="utf-8"> <meta charset="utf-8">
``` ```
#### Exclude Characters #### Exclude Characters (V1)
To exclude certain characters from being replaced by twemoji.js, call twemoji.parse() with a callback, returning false for the specific unicode icon. For example: To exclude certain characters from being replaced by twemoji.js, call twemoji.parse() with a callback, returning false for the specific unicode icon. For example:
@ -275,10 +303,6 @@ Once executed through `node twemoji-generator.js`, and after installing via `npm
This means that if you'd like to change or improve `twemoji`, you should probably do it inside the `createTwemoji` function at the bottom of `twemoji-generator.js` instead of directly in the library, unless it's not just for testing purpose. This means that if you'd like to change or improve `twemoji`, you should probably do it inside the `createTwemoji` function at the bottom of `twemoji-generator.js` instead of directly in the library, unless it's not just for testing purpose.
## Future Plans: Unicode 8.0 and Diversity
The twemoji project currently adheres to the [7.0 Unicode version](http://www.unicode.org/charts/PDF/Unicode-7.0/U70-1F300.pdf) and supports 872 different emoji. In the future, we hope to work with the community to support Unicode 8.0 additions like [Diversity](http://www.unicode.org/reports/tr51/#Diversity).
## Attribution Requirements ## Attribution Requirements
As an open source project, attribution is critical from a legal, practical and motivational perspective in our opinion. The graphics are licensed under the CC-BY 4.0 which has a pretty good guide on [best practices for attribution](https://wiki.creativecommons.org/Best_practices_for_attribution). As an open source project, attribution is critical from a legal, practical and motivational perspective in our opinion. The graphics are licensed under the CC-BY 4.0 which has a pretty good guide on [best practices for attribution](https://wiki.creativecommons.org/Best_practices_for_attribution).

8
index.html
View File

@ -33,8 +33,8 @@
</head> </head>
<body> <body>
<h1>twem&#x2764;ji</h1> <h1>twem&#x2764;ji</h1>
<p>sharing Twitter emoji <a href="preview.html">everywhere</a></p> <p>sharing Twitter emoji <a href="2/test/preview.html">everywhere</a></p>
<a href="https://github.com/twitter/twemoji">grab me on GitHub &#x2197;</a> <p><strong>Version 2 Is Out!</strong><a href="https://github.com/twitter/twemoji">grab me on GitHub &#x2197;</a></p>
<p> <p>
<a href="https://twitter.com/intent/tweet?button_hashtag=twemojiparty&text=thank%20you%20Twitter%20for%20the%20emoji" class="twitter-hashtag-button" data-size="large" data-related="twitteross" data-url="http://twitter.github.io/twemoji/">Tweet #twemojiparty</a> <a href="https://twitter.com/intent/tweet?button_hashtag=twemojiparty&text=thank%20you%20Twitter%20for%20the%20emoji" class="twitter-hashtag-button" data-size="large" data-related="twitteross" data-url="http://twitter.github.io/twemoji/">Tweet #twemojiparty</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
@ -43,10 +43,10 @@
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>Code licensed under MIT. Graphics licensed under CC-BY</p> <p>Code licensed under MIT. Graphics licensed under CC-BY</p>
<script src="//twemoji.maxcdn.com/twemoji.min.js"></script> <script src="//twemoji.maxcdn.com/2/twemoji.min.js"></script>
<script> <script>
// I \u2764 emoji! // I \u2764 emoji!
twemoji.parse(document.body, {size: 72}); twemoji.parse(document.body);
</script> </script>
</body> </body>
</html> </html>

6
package.json
View File

@ -1,8 +1,8 @@
{ {
"version": "1.4.2", "version": "2.0.0",
"name": "twemoji", "name": "twemoji",
"license": ["MIT", "CC-BY-4.0"], "license": ["MIT", "CC-BY-4.0"],
"description": "A Unicode standard based way to implement emoji across all platforms.", "description": "A Unicode 8 standard based way to implement emoji across all platforms.",
"homepage": "https://github.com/twitter/twemoji", "homepage": "https://github.com/twitter/twemoji",
"keywords": [ "keywords": [
"emoji", "emoji",
@ -25,7 +25,7 @@
"type": "git", "type": "git",
"url": "git://github.com/twitter/twemoji.git" "url": "git://github.com/twitter/twemoji.git"
}, },
"main": "./twemoji.npm.js", "main": "./2/twemoji.npm.js",
"scripts": { "scripts": {
"test": "phantomjs testrunner.js" "test": "phantomjs testrunner.js"
} }