diff --git a/package-lock.json b/package-lock.json index 5cc5fa3..3b268bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@angular-material-extensions/link-preview", - "version": "1.1.1", + "version": "1.1.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 1d38f59..3c5cc9f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@angular-material-extensions/link-preview", "description": "Angular open source UI library to preview web links", - "version": "1.1.1", + "version": "1.1.3", "homepage": "https://github.com/angular-material-extensions/link-preview", "author": { "name": "Anthony Nahas", diff --git a/src/module/directives/mat-link-preview.directive.ts b/src/module/directives/mat-link-preview.directive.ts index e86a30e..6cf0001 100644 --- a/src/module/directives/mat-link-preview.directive.ts +++ b/src/module/directives/mat-link-preview.directive.ts @@ -1,6 +1,4 @@ -import {Directive, OnInit} from '@angular/core'; -import {fromEvent} from 'rxjs'; -import {debounceTime, distinctUntilChanged, map} from 'rxjs/operators'; +import {Directive, ElementRef, Input, OnInit} from '@angular/core'; import {Link, NgxLinkifyjsService} from 'ngx-linkifyjs'; import {MatLinkPreviewService} from '../../module/service/mat-link-preview.service'; @@ -8,31 +6,21 @@ import {MatLinkPreviewService} from '../../module/service/mat-link-preview.servi selector: '[matLinkPreview]', exportAs: '[matLinkPreview]', }) -export class MatLinkPreviewDirective implements OnInit { +export class MatLinkPreviewDirective implements OnInit { constructor(public linkifyService: NgxLinkifyjsService, - public linkPreviewService: MatLinkPreviewService) { + public linkPreviewService: MatLinkPreviewService, + private _elemRef: ElementRef) { } - ngOnInit(): void { - this._init(); - } - - private _init() { - fromEvent(document, 'input') - .pipe( - debounceTime(2000), - distinctUntilChanged(), - map(event => { - const data = event.target['value']; - const links: Link[] = this.linkifyService.find(data); - console.log('data: ', data); - console.log('links: ', links); - // event.target['value'] = this.linkifyService.linkify(data); - return links; - })).subscribe((links) => { - this.linkPreviewService.onLinkFound.emit(links); - }); + ngOnInit() { + this._elemRef.nativeElement.oninput = (inputEvent: any) => { + setTimeout( () => { + const data = inputEvent.target.value; + const links: Link[] = this.linkifyService.find(data); + this.linkPreviewService.onLinkFound.emit(links); + }, 2000) + }; } } diff --git a/src/module/service/link-preview.service.spec.ts b/src/module/service/link-preview.service.spec.ts index f5be72f..c416f39 100644 --- a/src/module/service/link-preview.service.spec.ts +++ b/src/module/service/link-preview.service.spec.ts @@ -35,7 +35,7 @@ describe('MatLinkPreviewService', () => { return req.url === 'https://api.linkpreview.net/' && req.method === 'GET' - && params.get('key') === '5b54e80a65c77848ceaa4630331e8384950e09d392365' + && params.get('key') === '' && params.get('q') === 'github.com'; }, `Get link info from api`); }))); diff --git a/src/module/service/mat-link-preview.service.ts b/src/module/service/mat-link-preview.service.ts index c4048bc..0e1371e 100644 --- a/src/module/service/mat-link-preview.service.ts +++ b/src/module/service/mat-link-preview.service.ts @@ -8,7 +8,7 @@ import {LinkPreview} from '../..'; @Injectable() export class MatLinkPreviewService { - private _accessKey = '5b54e80a65c77848ceaa4630331e8384950e09d392365'; + private _accessKey = ''; private _apiURL = 'https://api.linkpreview.net/'; onLinkFound: EventEmitter> = new EventEmitter>(); @@ -19,12 +19,13 @@ export class MatLinkPreviewService { this.onLinkFound.subscribe((links: Array) => this.links = links); } + setAccessKey(accessKey: string) { + this._accessKey = accessKey; + } + fetchLink(url: string): Observable { - console.log('fetching the following link: ', url); - const params = new HttpParams() - .append('key', this._accessKey) - .append('q', url); + const body = { key: this._accessKey, q: url }; - return this.http.get(this._apiURL, {params: params}).pipe(map(value => value as LinkPreview)); + return this.http.post(this._apiURL, body).pipe(map(value => value as LinkPreview)); } }