From 6455aa8060223e1c1414ff58cb16abb4682c3d29 Mon Sep 17 00:00:00 2001 From: Rafael Carvalho Date: Wed, 3 Jan 2018 16:28:19 +1300 Subject: [PATCH 1/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ebdf5e5..e069dcc 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ [![npm](https://img.shields.io/npm/v/ng-chat.svg)](https://www.npmjs.com/package/ng-chat) [![npm downloads](https://img.shields.io/npm/dm/ng-chat.svg)](https://npmjs.org/ng-chat) -[![Build Status](https://travis-ci.org/rpaschoal/ng-chat.svg?branch=master)](https://travis-ci.org/rpaschoal/ng-chat) +[![Build Status](https://travis-ci.org/rpaschoal/ng-chat.svg?branch=development)](https://travis-ci.org/rpaschoal/ng-chat) [![codecov](https://codecov.io/gh/rpaschoal/ng-chat/branch/master/graph/badge.svg)](https://codecov.io/gh/rpaschoal/ng-chat) A simple facebook/linkedin lookalike chat module for Angular applications. From 64a3dc31426d23f18e05a20397b92eb3bd76681e Mon Sep 17 00:00:00 2001 From: Rafael Carvalho Date: Thu, 4 Jan 2018 17:00:30 +1300 Subject: [PATCH 2/6] Added Linkfy pipe. --- src/ng-chat/pipes/linkfy.pipe.ts | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/ng-chat/pipes/linkfy.pipe.ts diff --git a/src/ng-chat/pipes/linkfy.pipe.ts b/src/ng-chat/pipes/linkfy.pipe.ts new file mode 100644 index 0000000..44e15b1 --- /dev/null +++ b/src/ng-chat/pipes/linkfy.pipe.ts @@ -0,0 +1,28 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +/* + * Transforms text containing URLs or E-mails to valid links/mailtos +*/ +@Pipe({name: 'linkfy'}) +export class LinkfyPipe implements PipeTransform { + transform(message: string): string { + let replacedText; + let replacePatternProtocol; + let replacePatternWWW; + let replacePatternMailTo; + + // URLs starting with http://, https://, or ftp:// + replacePatternProtocol = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim; + replacedText = message.replace(replacePatternProtocol, '$1'); + + // URLs starting with "www." (ignoring // before it). + replacePatternWWW = /(^|[^\/])(www\.[\S]+(\b|$))/gim; + replacedText = replacedText.replace(replacePatternWWW, '$1$2'); + + // Change email addresses to mailto:: links. + replacePatternMailTo = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim; + replacedText = replacedText.replace(replacePatternMailTo, '$1'); + + return replacedText; + } +} From 01a9cb81eebc03383c35a200245a5aadd483f02f Mon Sep 17 00:00:00 2001 From: Rafael Carvalho Date: Thu, 4 Jan 2018 18:25:01 +1300 Subject: [PATCH 3/6] Finished implementing linkfy pipe and used it in ng-chat component. --- src/ng-chat/ng-chat.component.html | 6 ++--- src/ng-chat/ng-chat.component.ts | 3 +++ src/ng-chat/ng-chat.module.ts | 3 ++- src/ng-chat/pipes/emojify.pipe.ts | 16 +++++++------- src/ng-chat/pipes/linkfy.pipe.ts | 35 +++++++++++++++++------------- 5 files changed, 35 insertions(+), 28 deletions(-) diff --git a/src/ng-chat/ng-chat.component.html b/src/ng-chat/ng-chat.component.html index 286cfc5..ba20119 100644 --- a/src/ng-chat/ng-chat.component.html +++ b/src/ng-chat/ng-chat.component.html @@ -45,12 +45,10 @@ - - {{emojisEnabled ? (message.message | emojify) : message.message}} - + - + diff --git a/src/ng-chat/ng-chat.component.ts b/src/ng-chat/ng-chat.component.ts index 17a64f0..887a137 100644 --- a/src/ng-chat/ng-chat.component.ts +++ b/src/ng-chat/ng-chat.component.ts @@ -49,6 +49,9 @@ export class NgChat implements OnInit { @Input() public emojisEnabled: boolean = true; + @Input() + public linkfyEnabled: boolean = true; + public searchInput: string = ""; private users: User[]; diff --git a/src/ng-chat/ng-chat.module.ts b/src/ng-chat/ng-chat.module.ts index e727e80..40574ba 100644 --- a/src/ng-chat/ng-chat.module.ts +++ b/src/ng-chat/ng-chat.module.ts @@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms'; import { NgChat } from './ng-chat.component'; import { EmojifyPipe } from './pipes/emojify.pipe'; +import { LinkfyPipe } from './pipes/linkfy.pipe'; @NgModule({ imports: [CommonModule, FormsModule], - declarations: [NgChat, EmojifyPipe], + declarations: [NgChat, EmojifyPipe, LinkfyPipe], exports: [NgChat] }) export class NgChatModule { diff --git a/src/ng-chat/pipes/emojify.pipe.ts b/src/ng-chat/pipes/emojify.pipe.ts index f1d0409..9b1105d 100644 --- a/src/ng-chat/pipes/emojify.pipe.ts +++ b/src/ng-chat/pipes/emojify.pipe.ts @@ -23,14 +23,14 @@ let emojiDictionary = [ */ @Pipe({name: 'emojify'}) export class EmojifyPipe implements PipeTransform { - transform(message: string): string { - if (message && message.length > 1) { - emojiDictionary.forEach(emoji => { - emoji.patterns.forEach(pattern => { - message = message.replace(pattern, emoji.unicode); - }) - }); - } + transform(message: string, pipeEnabled: boolean): string { + if (pipeEnabled && message && message.length > 1) { + emojiDictionary.forEach(emoji => { + emoji.patterns.forEach(pattern => { + message = message.replace(pattern, emoji.unicode); + }) + }); + } return message; } diff --git a/src/ng-chat/pipes/linkfy.pipe.ts b/src/ng-chat/pipes/linkfy.pipe.ts index 44e15b1..5fabc06 100644 --- a/src/ng-chat/pipes/linkfy.pipe.ts +++ b/src/ng-chat/pipes/linkfy.pipe.ts @@ -5,24 +5,29 @@ import { Pipe, PipeTransform } from '@angular/core'; */ @Pipe({name: 'linkfy'}) export class LinkfyPipe implements PipeTransform { - transform(message: string): string { - let replacedText; - let replacePatternProtocol; - let replacePatternWWW; - let replacePatternMailTo; + transform(message: string, pipeEnabled: boolean): string { + if (pipeEnabled && message && message.length > 1) + { + let replacedText; + let replacePatternProtocol; + let replacePatternWWW; + let replacePatternMailTo; - // URLs starting with http://, https://, or ftp:// - replacePatternProtocol = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim; - replacedText = message.replace(replacePatternProtocol, '$1'); + // URLs starting with http://, https://, or ftp:// + replacePatternProtocol = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim; + replacedText = message.replace(replacePatternProtocol, '$1'); - // URLs starting with "www." (ignoring // before it). - replacePatternWWW = /(^|[^\/])(www\.[\S]+(\b|$))/gim; - replacedText = replacedText.replace(replacePatternWWW, '$1$2'); + // URLs starting with "www." (ignoring // before it). + replacePatternWWW = /(^|[^\/])(www\.[\S]+(\b|$))/gim; + replacedText = replacedText.replace(replacePatternWWW, '$1$2'); - // Change email addresses to mailto:: links. - replacePatternMailTo = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim; - replacedText = replacedText.replace(replacePatternMailTo, '$1'); + // Change email addresses to mailto:: links. + replacePatternMailTo = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim; + replacedText = replacedText.replace(replacePatternMailTo, '$1'); - return replacedText; + return replacedText; + } + else + return message; } } From 957c819635389ae22a1f34050d373b08cdd215fe Mon Sep 17 00:00:00 2001 From: Rafael Carvalho Date: Thu, 4 Jan 2018 18:42:48 +1300 Subject: [PATCH 4/6] Added unit tests for the linkfy pipe. --- src/spec/emojify.pipe.spec.ts | 14 +++++-- src/spec/linkfy.pipe.spec.ts | 73 +++++++++++++++++++++++++++++++++++ 2 files changed, 83 insertions(+), 4 deletions(-) create mode 100644 src/spec/linkfy.pipe.spec.ts diff --git a/src/spec/emojify.pipe.spec.ts b/src/spec/emojify.pipe.spec.ts index 33bd9f6..03193d8 100644 --- a/src/spec/emojify.pipe.spec.ts +++ b/src/spec/emojify.pipe.spec.ts @@ -6,27 +6,33 @@ describe('EmojifyPipe', () => { }); it('Must work on empty messages', () => { - let result = this.subject.transform(''); + let result = this.subject.transform('', true); expect(result).toBe(''); }); + it('Must not replace with emoji when piple is disabled', () => { + let result = this.subject.transform(':)', false); + + expect(result).toBe(':)'); + }); + it('Must not replace the message text when no emoji is found', () => { let message = 'Test message'; - let result = this.subject.transform(message); + let result = this.subject.transform(message, true); expect(result).toBe(message); }); it('Must replace message text with emoji unicode 😃', () => { - let result = this.subject.transform(':)'); + let result = this.subject.transform(':)', true); expect(result).toBe('😃'); }); it('Must replace message text with emoji unicode 👍', () => { - let result = this.subject.transform(':+1'); + let result = this.subject.transform(':+1', true); expect(result).toBe('👍'); }); diff --git a/src/spec/linkfy.pipe.spec.ts b/src/spec/linkfy.pipe.spec.ts new file mode 100644 index 0000000..1e517c7 --- /dev/null +++ b/src/spec/linkfy.pipe.spec.ts @@ -0,0 +1,73 @@ +import { LinkfyPipe } from '../ng-chat/pipes/linkfy.pipe'; + +describe('LinkfyPipe', () => { + beforeEach(() => { + this.subject = new LinkfyPipe(); + }); + + it('Must work on empty messages', () => { + let result = this.subject.transform('', true); + + expect(result).toBe(''); + }); + + it('Must not replace with link when piple is disabled', () => { + let result = this.subject.transform('www.github.com/rpaschoal/ng-chat', false); + + expect(result).toBe('www.github.com/rpaschoal/ng-chat'); + }); + + it('Must not replace with HTTP link when piple is disabled', () => { + let result = this.subject.transform('http://github.com/rpaschoal/ng-chat', false); + + expect(result).toBe('http://github.com/rpaschoal/ng-chat'); + }); + + it('Must not replace with HTTPs link when piple is disabled', () => { + let result = this.subject.transform('https://github.com/rpaschoal/ng-chat', false); + + expect(result).toBe('https://github.com/rpaschoal/ng-chat'); + }); + + it('Must not replace with FTP link when piple is disabled', () => { + let result = this.subject.transform('ftp://127.0.0.1', false); + + expect(result).toBe('ftp://127.0.0.1'); + }); + + it('Must not replace e-mail with mailto link when piple is disabled', () => { + let result = this.subject.transform('test@email.com', false); + + expect(result).toBe('test@email.com'); + }); + + it('Must replace www.{0} text with link', () => { + let result = this.subject.transform('www.github.com/rpaschoal/ng-chat', true); + + expect(result).toBe('www.github.com/rpaschoal/ng-chat'); + }); + + it('Must replace http://{0} text with link', () => { + let result = this.subject.transform('http://github.com/rpaschoal/ng-chat', true); + + expect(result).toBe('http://github.com/rpaschoal/ng-chat'); + }); + + it('Must replace https://{0} text with link', () => { + let result = this.subject.transform('https://github.com/rpaschoal/ng-chat', true); + + expect(result).toBe('https://github.com/rpaschoal/ng-chat'); + }); + + it('Must replace ftp://{0} text with link', () => { + let result = this.subject.transform('ftp://127.0.0.1', true); + + expect(result).toBe('ftp://127.0.0.1'); + }); + + it('Must replace e-mail with mailto link', () => { + let result = this.subject.transform('test@email.com', true); + + expect(result).toBe('test@email.com'); + }); +}); From 6736cf7e7bf6af48e0a0a774d891624296e38261 Mon Sep 17 00:00:00 2001 From: Rafael Carvalho Date: Thu, 4 Jan 2018 18:45:39 +1300 Subject: [PATCH 5/6] Updated package version to 1.0.1 --- demo/aspnetcore_signalr/package.json | 2 +- demo/offline_bot/package.json | 2 +- src/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/demo/aspnetcore_signalr/package.json b/demo/aspnetcore_signalr/package.json index 832145f..242ee5a 100644 --- a/demo/aspnetcore_signalr/package.json +++ b/demo/aspnetcore_signalr/package.json @@ -29,7 +29,7 @@ "bootstrap": "^3.3.7", "core-js": "^2.4.1", "jquery": "3.2.1", - "ng-chat": "1.0.0", + "ng-chat": "1.0.1", "ng2-loading-bar": "0.0.6", "reflect-metadata": "^0.1.10", "rxjs": "5.4.2", diff --git a/demo/offline_bot/package.json b/demo/offline_bot/package.json index 099b267..4e940c5 100644 --- a/demo/offline_bot/package.json +++ b/demo/offline_bot/package.json @@ -24,7 +24,7 @@ "core-js": "^2.4.1", "rxjs": "^5.4.2", "zone.js": "^0.8.14", - "ng-chat": "1.0.0" + "ng-chat": "1.0.1" }, "devDependencies": { "@angular/cli": "1.3.2", diff --git a/src/package.json b/src/package.json index c0567df..cf92f97 100644 --- a/src/package.json +++ b/src/package.json @@ -1,6 +1,6 @@ { "name": "ng-chat", - "version": "1.0.0", + "version": "1.0.1", "peerDependencies": { "@angular/common": "*", "@angular/core": "*", From 69d6cd3804828c7cee0df90a37e35dd7e3ef524d Mon Sep 17 00:00:00 2001 From: Rafael Carvalho Date: Thu, 4 Jan 2018 18:48:19 +1300 Subject: [PATCH 6/6] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e069dcc..6fefed9 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,7 @@ __Additional Settings__ * [pollingInterval]{number}: Configures the long poll interval in milliseconds. Default is 5000. * [historyEnabled]{boolean}: Defines whether the component should call the "getMessageHistory" from the chat-adapter. Default is true. * [emojisEnabled]{boolean}: Enables emoji parsing on the messages. Default is true. +* [linkfyEnabled]{boolean}: Transforms links within the messages to valid HTML links. Default is true. #### Implement your ChatAdapter: