Initial Commit

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,4 @@
+dist
+build
+node_modules
+

README.md

@@ -0,0 +1,101 @@
+# Angular EmojiOne
+
+EmojiOne for Angular 2+.
+
+# Usage
+
+To use this library, install both emojione and this library, angular-emojione, from npm.
+
+```shell
+$ npm install --save emojione angular-emojione
+```
+
+It is highly recommended you include the EmojiOne stylesheet to properly size the emoji in your app. Include the following `<link>` tag in your `index.html`.
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/emojione/2.2.7/assets/css/emojione.min.css"/>
+```
+
+Import the `EmojiModule` into your `app.module.ts` and add it to your `imports` array:
+
+```ts
+//...
+import { EmojiModule } from 'angular-emojione';
+
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    //...
+    EmojiModule
+  ]
+})
+export class AppModule {}
+```
+
+You're now ready to go! Check out the documentation below for using the various pieces of this library.
+
+## Component
+
+You can use the component for a single shortcode-to-emoji rendering. Simply use the markup below:
+
+```html
+<emoji [shortname]="myVar"></emoji>
+```
+
+Where `myVar` is bound to a string with a single shortcode, such as `:poop:`. That component will then render the emoji.
+
+## Directive
+
+IN PROGRESS...
+
+## Pipe
+
+Using the pipe is simple. Below is a sample component that makes use of the EmojiPipe.
+
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div [innerHTML]="text | emoji"></div>
+  `
+})
+export class AppComponent {
+  text: string;
+
+  constructor() {
+    this.text = `This will be converted to EmojiOne emojis! :thumbsup: ❤️`;
+  }
+}
+```
+
+The pipe will then convert the text and the output will look like the following:
+
+![Pipe](./assets/pipe.png)
+
+As EmojiOne simply replaces shortcodes and native unicode emoji, you will need to bind your output to the `innerHTML` attribute, as is shown in the example above.
+
+## Service
+
+If you'd rather do conversions yourself, this library provides an easy to use service with various methods for managing your emoji!
+
+### shortnameToImage()
+
+This function takes a shortname, such as `:thumbsup:`, and returns an `<img>` tag with the corresponding EmojiOne emoji.
+
+### unicodeToShortname()
+
+This function takes a native unicode emoji, like `❤️`, and returns a the corresponding shortname, in this case, `:heart:`.
+
+### unicodeToImage()
+
+This function takes a native unicode emoji, like `❤️`, and returns an `<img>` tag with the corresponding EmojiOne emoji.
+
+### convertText()
+
+This function takes a string and replaces all instances of native unicode emoji and shortnames with `<img>` tags with their corresponding EmojiOne emoji. This is what the angular-emojione library uses for its EmojiPipe.

build.sh

@@ -0,0 +1,35 @@
+# Clean up previous distributions
+echo "CLEAN - Previous distributions"
+rm -rf dist
+rm -rf build
+
+# Variables
+NGC="node node_modules/.bin/ngc"
+TSC="node node_modules/.bin/tsc"
+ROLLUP="node node_modules/.bin/rollup"
+
+# Run Angular Compiler
+echo "NGC - Build ES2015"
+$NGC -p src/tsconfig-build.json
+
+# Rollup angular-emojione.js
+echo "ROLLUP - Build ES2015"
+$ROLLUP -e @angular/core,emojione,emojione/index -f es build/angular-emojione.js -o dist/angular-emojione.js
+
+# Run Angular Compiler to ES5
+echo "NGC - Build ES5"
+$NGC -p src/tsconfig-es5.json
+
+# Rollup angular-emojione.js
+echo "ROLLUP - Build ES5"
+$ROLLUP -e @angular/core,emojione,emojione/index -f es build/angular-emojione.js -o dist/angular-emojione.es5.js
+
+# Copy non-js files from build
+echo "COPY - Non-js Files"
+rsync -a --exclude=*.js build/ dist
+
+# Copy library package.json
+echo "COPY - package.json"
+cp ./src/package.json dist/package.json
+
+echo "*** BUILD SUCCESSFUL ***"

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "angular-emojione",
+  "version": "0.1.0",
+  "description": "EmojiOne for Angular 2+",
+  "author": "John Woodruff <johnwoodruff91@gmail.com>",
+  "license": "MIT",
+  "module": "dist/angular-emojione.es5.js",
+  "es2015": "dist/angular-emojione.js",
+  "typings": "dist/angular-emojione.d.ts",
+  "scripts": {
+    "lint": "tslint ./src/**/*.ts -t verbose",
+    "build": "npm run lint && ./build.sh",
+    "prepublish": "npm run build"
+  },
+  "files": [
+    "dist/**"
+  ],
+  "devDependencies": {
+    "@angular/compiler": "^4.0.2",
+    "@angular/compiler-cli": "^4.0.2",
+    "@angular/core": "^4.0.2",
+    "@types/emojione": "^2.2.1",
+    "@types/jasmine": "^2.5.47",
+    "@types/node": "^7.0.12",
+    "rollup": "^0.41.6",
+    "rxjs": "^5.3.0",
+    "systemjs": "^0.20.12",
+    "tslint": "^5.1.0",
+    "typescript": "^2.2.2",
+    "zone.js": "^0.8.5"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=4.0.0 <5.0.0 || >=4.0.0-beta <5.0.0",
+    "rxjs": "^5.3.0",
+    "zone.js": "^0.8.5",
+    "emojione": "^2.2.7"
+  }
+}

src/components/emoji.component.ts

@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EmojiService } from '../services/emoji.service';
+
+@Component({
+  selector: 'emoji',
+  template: `
+    <span [innerHTML]="image"></span>
+  `
+})
+export class EmojiComponent implements OnInit {
+  @Input() shortname: string;
+  image: string;
+
+  constructor(public emojiService: EmojiService) {}
+
+  ngOnInit() {
+    this.image = this.emojiService.shortnameToImage(this.shortname);
+  }
+}

src/directives/emoji.directive.ts

@@ -0,0 +1,12 @@
+import { Directive, ElementRef, Input, OnInit, OnChanges } from '@angular/core';
+import { EmojiService } from '../services/emoji.service';
+
+@Directive({
+  selector: '[emoji]'
+})
+export class EmojiDirective implements OnInit {
+
+  constructor(private el: ElementRef, private emojiService: EmojiService) {}
+
+  ngOnInit() {}
+}

src/emoji.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { EmojiService } from './services/emoji.service';
+import { EmojiPipe } from './pipes/emoji.pipe';
+import { EmojiComponent } from './components/emoji.component';
+
+@NgModule({
+  providers: [EmojiService],
+  declarations: [
+    EmojiPipe,
+    EmojiComponent
+  ],
+  exports: [
+    // Export directives, components, and pipes here
+    EmojiPipe,
+    EmojiComponent
+  ]
+})
+export class EmojiModule {}

src/index.ts

@@ -0,0 +1,3 @@
+export * from './emoji.module';
+export * from './services/emoji.service';
+export * from './pipes/emoji.pipe';

src/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "angular-emojione",
+  "version": "0.1.0",
+  "description": "EmojiOne for Angular 2+",
+  "author": "John Woodruff <johnwoodruff91@gmail.com>",
+  "license": "MIT",
+  "module": "dist/angular-emojione.es5.js",
+  "es2015": "dist/angular-emojione.js",
+  "typings": "dist/angular-emojione.d.ts",
+  "peerDependencies": {
+    "@angular/core": ">=4.0.0 <5.0.0 || >=4.0.0-beta <5.0.0",
+    "rxjs": "^5.3.0",
+    "zone.js": "^0.8.5",
+    "emojione": "^2.2.7"
+  }
+}

src/pipes/emoji.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { EmojiService } from '../services/emoji.service';
+
+@Pipe({
+  name: 'emoji'
+})
+export class EmojiPipe implements PipeTransform {
+  constructor(public emojiService: EmojiService) {}
+
+  transform(text: string): string {
+    return this.emojiService.convertText(text);
+  }
+}

src/services/emoji.service.spec.ts

@@ -0,0 +1,21 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { EmojiService } from './emoji.service';
+
+describe('EmojiService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [EmojiService]
+    });
+  });
+
+  it('should create service', inject([EmojiService], (service: EmojiService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should return 42 from getMeaning', inject([EmojiService], (service: EmojiService) => {
+    expect(service.shortnameToImage(':heart:')).toEqual(
+      '<img class="emojione" alt="❤" title=":heart:" src="https://cdn.jsdelivr.net/emojione/assets/png/2764.png?v=2.2.7"/>'
+    );
+  }));
+});

src/services/emoji.service.ts

@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+import * as EmojiOne from 'emojione';
+
+@Injectable()
+export class EmojiService {
+  constructor() {}
+
+  /**
+   * Convert a shortname, like :thumbsup:, to an EmojiOne image.
+   * 
+   * @param {string} shortname 
+   * @returns {string} <img> tag
+   * 
+   * @memberOf EmojiService
+   */
+  public shortnameToImage(shortname: string) {
+    return EmojiOne.shortnameToImage(shortname);
+  }
+
+  /**
+   * Convert a native unicode emoji to a shortname
+   * 
+   * @param {string} unicode 
+   * @returns {string} <img> tag
+   * 
+   * @memberOf EmojiService
+   */
+  public unicodeToShortname(unicode: string) {
+    return EmojiOne.toShort(unicode);
+  }
+
+  /**
+   * Convert a native unicode emoji to an EmojiOne image
+   * 
+   * @param {string} unicode 
+   * @returns {string} <img> tag
+   * 
+   * @memberOf EmojiService
+   */
+  public unicodeToImage(unicode: string) {
+    return EmojiOne.unicodeToImage(unicode);
+  }
+
+  /**
+   * Replace shortcodes and/or native emoji in a blob of text to EmojiOne images
+   * 
+   * @param {string} text 
+   * @returns {string} text with EmojiOne images
+   * 
+   * @memberOf EmojiService
+   */
+  public convertText(text: string) {
+    return EmojiOne.toImage(text);
+  }
+}

src/tsconfig-build.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "module": "es2015",
+    "target": "es2015",
+    "baseUrl": ".",
+    "stripInternal": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "outDir": "../build",
+    "rootDir": ".",
+    "lib": ["es2015", "dom"],
+    "skipLibCheck": true,
+    // don't auto-discover @types/node, it results in a ///<reference in the .d.ts output
+    "types": []
+  },
+  "files": [
+    "./index.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "skipTemplateCodegen": true,
+    "flatModuleOutFile": "angular-emojione.js",
+    "flatModuleId": "angular-emojione"
+  }
+}