UNPKG

ng2-emojify

Version:

An angular 2 module to support built-in and custom emoji

github.com/sauravgaursmith/ng2-emojify

sauravgaursmith/ng2-emojify

106 lines (104 loc) • 11.9 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
{ "_args": [ [ { "raw": "ng2-emojify", "scope": null, "escapedName": "ng2-emojify", "name": "ng2-emojify", "rawSpec": "", "spec": "latest", "type": "tag" }, "C:\\Users\\srvsingh\\data\\saurav\\a2-plugin" ] ], "_from": "ng2-emojify@latest", "_id": "ng2-emojify@1.0.17", "_inCache": true, "_location": "/ng2-emojify", "_nodeVersion": "6.9.1", "_npmOperationalInternal": { "host": "packages-12-west.internal.npmjs.com", "tmp": "tmp/ng2-emojify-1.0.17.tgz_1485351027935_0.28371190116740763" }, "_npmUser": { "name": "sauravgaursmith", "email": "saurav.gaur011@gmail.com" }, "_npmVersion": "4.0.2", "_phantomChildren": { "symbol-observable": "1.0.4" }, "_requested": { "raw": "ng2-emojify", "scope": null, "escapedName": "ng2-emojify", "name": "ng2-emojify", "rawSpec": "", "spec": "latest", "type": "tag" }, "_requiredBy": [ "#USER", "/" ], "_resolved": "https://registry.npmjs.org/ng2-emojify/-/ng2-emojify-1.0.17.tgz", "_shasum": "fa69065bfd0b86f8a762a7dab8a1e03012864865", "_shrinkwrap": null, "_spec": "ng2-emojify", "_where": "C:\\Users\\srvsingh\\data\\saurav\\a2-plugin", "author": { "name": "Saurav Singh", "email": "saurav.gaur011@gmail.com", "url": "https://github.com/sauravgaursmith" }, "bugs": { "url": "https://github.com/sauravgaursmith/ng2-emojify/issues" }, "dependencies": { }, "description": "An angular 2 module to support built-in and custom emoji ", "devDependencies": { }, "directories": {}, "dist": { "shasum": "fa69065bfd0b86f8a762a7dab8a1e03012864865", "tarball": "https://registry.npmjs.org/ng2-emojify/-/ng2-emojify-1.0.17.tgz" }, "gitHead": "dd0c077c8518984561cab3d1e0636c03dce520d5", "homepage": "https://github.com/sauravgaursmith/ng2-emojify#readme", "keywords": [ "emoji", "emojify", "emotion", "angular", "chat", "application", "emo", "built-in", "custom", "ng2", "ng2-emojify" ], "license": "MIT", "main": "ng2-emojify.js", "maintainers": [ { "name": "sauravgaursmith", "email": "saurav.gaur011@gmail.com" } ], "name": "ng2-emojify", "optionalDependencies": {}, "readme": "## This is an angular 2 module to support built-in and custom emoji in an angular 2 project.\n\nYou can see [Live Demo application](https://ng2-emojify-example.firebaseapp.com), or [run on local system](https://github.com/sauravgaursmith/ng2-emojify-example/blob/master/README.md)\n\n### Prerequisite \n * Angular-cli: 1.0.0-beta.18 or higher\n * NPM : 4.0.2 or higher\n * Node: v6.9.1 or higher\n\n### Installation\n```sh\nnpm install ng2-emojify --save\n or\nyarn add ng2-emojify --save\n```\n### use\n\nDevelopers can use this module in angular 2 projects for built-in or custom emoji or both.\nSteps to use :\n\n##### Put `emoji` folder into the `assets` folder\nGoto the `node_modules/ng2-emojify/emoji` in your Angualr 2 Project and Copy/Cut the `emoji` folder from there and\npaste this `emoji` folder to your `assets` folder inside your Angular 2 project.\n\n##### Add `Ng2EmojifyModule` to the module in which your `component` is declared like this.\n\n```js\nimport {Ng2EmojifyModule} from 'ng2-emojify';\n\n@NgModule({\n ...\n imports: [\n Ng2EmojifyModule // like it.\n ],\n ...\n})\nexport class AppModule {\n}\n\n```\n##### Add the following css to your component `.css` file.\n```css\n:host >>> .emogi-image {\n height: 60px;\n width: 60px;\n border-radius: 50%;\n}\n\n```\nYou can customize this css according to your need.\n\n##### Add `emojify` pipe to `message` in your component `template`. Like it ...\n\n```html\n <div [innerHTML]=\"message | emojify\"></div>\n ```\n \n Here `message` is any message like - `I'm so happy today. :happy:`. In this message `:happy:`\n is an emoji identity. It will be converted to an image tag after passing through `emojify` pipe.\n \n#### To use custom emoji\n\n##### Add `CustomEmotion` service to your component `.ts` file. \n\n```js\nimport {CustomEmotion} from 'ng2-emojify';\n\n...\n\nconstructor(private customEmotion: CustomEmotion) {\n /* Mandatory to keep in constructor */\n \n /* ***************************************************************************\n * @ CustomEmotion\n * `emojiId` - This is the id which will be used to convert into emoji.\n * `emojiUrl` - This is the path to that image/gif which is to be used as emoji.\n * `title` - This is the `title` to be shown as `tooltip`.\n * *************************************************************************** */\n \n this.customEmotion.AddCustomEmotions([\n {\n emojiId: 'myemojiId',\n emojiUrl: 'assets/emoji/my-emoji.jpg',\n title: 'My Emoji'\n }\n ]);\n}\n...\n```\nHere `emojiUrl` is path to the image which is to be used as emoji. An emoji file may be `.jpg`, `.png` and\n`.gif` file. `assets/emoji/` is `default` path used by this module. However, you are free to give any full path\nto your emoji file.\nNow if you `message` like this- `this is my custom emoji. :myemojiId:`. `:myemojiId:` will be converted into your\ncustom emoji image.\n\n###### `IMPORTANT: Please note if you use \"emojiId\" that is reserved for the built-in emoji. It will override the built-in`\n\n### To use emoji menu \n\nThere is a tradition to use menu to select an emoji to send as message. Like in `Facebook`, `Twitter`, `WatsApp`\nand ` Hangout` and so on. `ng2-emojify` has a built-in support for the same. To use built-in menu support do this...\n\n##### Add `Emotion` service to your component `.ts` file\n```js\nimport {CustomEmotion, Emotion} from 'ng2-emojify';\n\n...\n\nconstructor(private customEmotion: CustomEmotion, private emotion: Emotion) {\n /* Mandatory to keep in constructor */\n \n /* ***************************************************************************\n * @ CustomEmotion\n * `emojiId` - This is the id which will be used to convert into emoji.\n * `emojiUrl` - This is the path to that image/gif which is to be used as emoji.\n * `title` - This is the `title` to be shown as `tooltip`.\n * *************************************************************************** */\n \n this.customEmotion.AddCustomEmotions([\n {\n emojiId: 'myemojiId',\n emojiUrl: 'assets/emoji/my-emoji.jpg',\n title: 'My Emoji'\n }\n ]);\n\n\n /* ********************************************************************************\n * @ Emotion\n * `emojiIdentity` - This is the simple string like `:happy:` or `:smile:` of the\n emoji that has been clicked in the emoji menu.\n * *************************************************************************** */\n \n this.emotion.CaptureEmojiClick().subscribe((emojiIdentity: string) => {\n // write your logic here\n });\n}\n...\n```\nYou can write your own logic in `CaptureEmojiClick()` to add this `emojiIdentity` to your message string to send directly it in message like in `Facebook` when emoji is clicked by user. You can write your code to add emoji to your `input` or `textarea` like `Skype` and then can send in message all at once.\n\n##### Add `[emotion-menu]` directive and `<emoji-menu></emoji-menu>` component to your component `.template`.\n```html\n <div [innerHTML]=\"message | emojify\"></div>\n <button [emotion-menu] id=\"btn\">Menu</button>\n <emoji-menu></emoji-menu>\n ```\nHere, when `button` is clicked it will display emoji menu with built-in and custom emojis. when an emoji is clicked, \nits id `(emojiIdentity)` can be listen in `CaptureEmojiClick()` in your component `constructor`. When you click outside\n`emoji menu`, it gets closed.\n\n###### ` IMPORTANT: Please give a unique id to the HTML element on which you have added the [emotion-menu] directive`\n\n##### To customize emoji-menu css\nThere are three main HTML tags that constitutes the emoji-menu, two of them are `<div>` and one `<img>`. You can write your\ncustom css for all of these. `There is one main div that contains whole menu. second div contains the image and third is itself image`. To write css for all of these, Youcan write as...\n\n####### make a separate file with extension `.ts` to contain css\nYou can name it whatever you like. such as `custom-emoji-menu-css.ts`. It may be surprising to you but soon it will be clear to you later. Now write your css like this in your `.ts` file.\n```js\n/* ***********************************************\n * custom css declarations\n * *********************************************** */\n \n export const emotionCss = {\n customEmotionMenuCss: {\n position: 'fixed',\n 'border-radius': '10px 10px 10px 0px',\n width: 520 + 'px',\n height: 200 + 'px',\n 'background-color': 'lightblue',\n border: '1px solid blue',\n 'z-index': 1,\n 'overflow-x': 'hidden'\n },\n customEmotionContainerCss: {\n float: 'left',\n width: 80 + 'px',\n height: 80 + 'px',\n margin: '15px'\n },\n \n customEmotionImageCss: {\n width: '100%',\n height: '100%',\n margin: '0px',\n 'border-radius': '50%'\n }\n };\n```\nHere `customEmotionMenuCss` is css for main `div` that holds the emojis, `customEmotionContainerCss` is css for the second `div` inside the main `div` and `customEmotionImageCss` is css for the emoji image (`img` tag) it self.\n\nNow, you have written your custom css. import it in the main component `.ts` file and use like this...\n\n```js\nimport {CustomEmotion, Emotion} from 'ng2-emojify';\nimport {emotionCss} from './custom-emoji-menu-css.ts';\n\n...\n\ncustomEmotionCss: any;\n\nconstructor(private customEmotion: CustomEmotion, private emotion: Emotion) {\n\n /* initialize the customEmotionCss value */\n this.customEmotionCss = emotionCss; // <---------------- like this.\n\n /* ***************************************************************************\n * @ CustomEmotion\n * `emojiId` - This is the id which will be used to convert into emoji.\n * `emojiUrl` - This is the path to that image/gif which is to be used as emoji.\n * `title` - This is the `title` to be shown as `tooltip`.\n * *************************************************************************** */\n \n this.customEmotion.AddCustomEmotions([\n {\n emojiId: 'myemojiId',\n emojiUrl: 'assets/emoji/my-emoji.jpg',\n title: 'My Emoji'\n }\n ]);\n\n\n /* ********************************************************************************\n * @ Emotion\n * `emojiIdentity` - This is the simple string like `:happy:` or `:smile:` of the\n emoji that has been clicked in the emoji menu.\n * *************************************************************************** */\n \n this.emotion.CaptureEmojiClick().subscribe((emojiIdentity: string) => {\n // write your logic here\n });\n}\n...\n```\n\nNow you have to provide css to the `[emotion-menu]` directive in your `template` file as here...\n```html\n <div [innerHTML]=\"message | emojify\"></div>\n <button [emotion-menu] =\"customEmotionCss\" id=\"btn\">Menu</button> \n <emoji-menu></emoji-menu>\n ```\n### Congrats\nThis is all about this module.\n\n###### Report issues [here](https://github.com/sauravgaursmith/ng2-emojify/issues)\n###### Feel free to sent your comments, queries and suggestions at `js.tech.feedback@gmail.com`\n\n### License\n\n[MIT](LICENSE)\n", "readmeFilename": "README.md", "repository": { "type": "git", "url": "git+https://github.com/sauravgaursmith/ng2-emojify.git" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "version": "2.0.7" }