Merge pull request #24 from rpaschoal/development

Merge from Development (1.0.1 changes)

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.
@@ -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:
 

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",

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",

src/ng-chat/ng-chat.component.html

@@ -45,12 +45,10 @@
                         <i class="user-icon"></i>
                     </div>
                     <img *ngIf="window.chattingTo.avatar && isAvatarVisible(window, message, i)" alt="" class="avatar" height="30" width="30" [src]="window.chattingTo.avatar" />
-                    <span>
-                        {{emojisEnabled ? (message.message | emojify) : message.message}}
-                    </span>
+                    <span [innerHtml]="message.message | emojify:emojisEnabled | linkfy:linkfyEnabled"></span>
                 </div>
             </div>
-            <input [ngModel]="emojisEnabled ? (window.newMessage | emojify) : window.newMessage" (ngModelChange)="window.newMessage=$event" type="text" (keypress)="onChatInputTyped($event, window)" [placeholder]="messagePlaceholder" (blur)="toggleWindowFocus(window)" (focus)="toggleWindowFocus(window)"/>            
+            <input [ngModel]="window.newMessage | emojify:emojisEnabled" (ngModelChange)="window.newMessage=$event" type="text" (keypress)="onChatInputTyped($event, window)" [placeholder]="messagePlaceholder" (blur)="toggleWindowFocus(window)" (focus)="toggleWindowFocus(window)"/>            
         </ng-container>
     </div>
 </div>

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[];

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 {

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;
   }

src/ng-chat/pipes/linkfy.pipe.ts

@@ -0,0 +1,33 @@
+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, 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, '<a href="$1" target="_blank">$1</a>');
+
+            // URLs starting with "www." (ignoring // before it).
+            replacePatternWWW = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+            replacedText = replacedText.replace(replacePatternWWW, '$1<a href="http://$2" target="_blank">$2</a>');
+
+            // Change email addresses to mailto:: links.
+            replacePatternMailTo = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
+            replacedText = replacedText.replace(replacePatternMailTo, '<a href="mailto:$1">$1</a>');
+
+            return replacedText;
+        }
+        else
+            return message;
+    } 
+}

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-chat",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",

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('👍');
     });

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('[email protected]', false);
+
+        expect(result).toBe('[email protected]');
+    });
+
+    it('Must replace www.{0} text with link', () => {       
+        let result = this.subject.transform('www.github.com/rpaschoal/ng-chat', true);
+
+        expect(result).toBe('<a href="http://www.github.com/rpaschoal/ng-chat" target="_blank">www.github.com/rpaschoal/ng-chat</a>');
+    });
+
+    it('Must replace http://{0} text with link', () => {       
+        let result = this.subject.transform('http://github.com/rpaschoal/ng-chat', true);
+
+        expect(result).toBe('<a href="http://github.com/rpaschoal/ng-chat" target="_blank">http://github.com/rpaschoal/ng-chat</a>');
+    });
+
+    it('Must replace https://{0} text with link', () => {       
+        let result = this.subject.transform('https://github.com/rpaschoal/ng-chat', true);
+
+        expect(result).toBe('<a href="https://github.com/rpaschoal/ng-chat" target="_blank">https://github.com/rpaschoal/ng-chat</a>');
+    });
+
+    it('Must replace ftp://{0} text with link', () => {       
+        let result = this.subject.transform('ftp://127.0.0.1', true);
+
+        expect(result).toBe('<a href="ftp://127.0.0.1" target="_blank">ftp://127.0.0.1</a>');
+    });
+
+    it('Must replace e-mail with mailto link', () => {       
+        let result = this.subject.transform('[email protected]', true);
+
+        expect(result).toBe('<a href="mailto:[email protected]">[email protected]</a>');
+    });
+});