@angular-material-extensions/link-preview
Version:
Angular open source UI library to preview web links
275 lines (265 loc) • 8.37 kB
JavaScript
import { EventEmitter, Injectable, Directive, Component, Input, NgModule } from '@angular/core';
import { HttpClient, HttpParams, HttpClientModule } from '@angular/common/http';
import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { fromEvent } from 'rxjs';
import { NgxLinkifyjsService, NgxLinkifyjsModule } from 'ngx-linkifyjs';
import { CommonModule } from '@angular/common';
import { MatButtonModule, MatCardModule, MatProgressSpinnerModule } from '@angular/material';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MatLinkPreviewService {
/**
* @param {?} http
*/
constructor(http) {
this.http = http;
this._accessKey = '5b54e80a65c77848ceaa4630331e8384950e09d392365';
this._apiURL = 'https://api.linkpreview.net/';
this.onLinkFound = new EventEmitter();
this.links = [];
this._subscription = this.onLinkFound.subscribe((links) => this.links = links);
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._subscription) {
this._subscription.unsubscribe();
}
}
/**
* @param {?} url
* @return {?}
*/
fetchLink(url) {
console.log('fetching the following link: ', url);
/** @type {?} */
const params = new HttpParams()
.append('key', this._accessKey)
.append('q', url);
return this.http.get(this._apiURL, { params: params }).pipe(map(value => /** @type {?} */ (value)));
}
}
MatLinkPreviewService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
MatLinkPreviewService.ctorParameters = () => [
{ type: HttpClient }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MatLinkPreviewDirective {
/**
* @param {?} linkifyService
* @param {?} linkPreviewService
*/
constructor(linkifyService, linkPreviewService) {
this.linkifyService = linkifyService;
this.linkPreviewService = linkPreviewService;
}
/**
* @return {?}
*/
ngOnInit() {
this._init();
}
/**
* @return {?}
*/
_init() {
fromEvent(document, 'input')
.pipe(debounceTime(2000), distinctUntilChanged(), map(event => {
/** @type {?} */
const data = event.target['value'];
/** @type {?} */
const links = 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);
});
}
}
MatLinkPreviewDirective.decorators = [
{ type: Directive, args: [{
selector: '[matLinkPreview]'
},] },
];
/** @nocollapse */
MatLinkPreviewDirective.ctorParameters = () => [
{ type: NgxLinkifyjsService },
{ type: MatLinkPreviewService }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MatLinkPreviewComponent {
/**
* @param {?} linkPreviewService
*/
constructor(linkPreviewService) {
this.linkPreviewService = linkPreviewService;
// forwarded from the container
this.color = 'primary';
this.showLoadingsProgress = true;
}
/**
* @return {?}
*/
ngOnInit() {
if (this.link && !this.linkPreview) {
this.loaded = false;
this._subscription = this.linkPreviewService
.fetchLink(this.link.href)
.subscribe(value => {
this.linkPreview = value;
this.loaded = true;
});
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._subscription) {
this._subscription.unsubscribe();
}
}
}
MatLinkPreviewComponent.decorators = [
{ type: Component, args: [{
selector: 'mat-link-preview',
template: `
<div class="center-auto" *ngIf="!this.linkPreview && !this.loaded && this.showLoadingsProgress">
<mat-spinner></mat-spinner>
</div>
<mat-card>
<mat-card-content>
<div class="img-container">
<img mat-card-image [src]="linkPreview?.image">
</div>
<div>
<mat-card-title>{{linkPreview?.title}}</mat-card-title>
<mat-card-subtitle>{{linkPreview?.description}}</mat-card-subtitle>
<a [href]="linkPreview?.url" mat-button [color]="color">{{linkPreview?.url}}</a>
</div>
</mat-card-content>
</mat-card>
`,
styles: [`
:host{display:inline-block}mat-card-content{box-sizing:border-box;display:flex;flex-direction:row}mat-card-content a{padding-left:0;padding-right:0}.img-container{align-items:center;box-sizing:border-box;display:flex;flex:1 1 100%;flex-direction:row;margin-right:1rem;max-width:20%;padding:24px 16px;place-content:center}.center-auto{margin-left:auto!important;margin-right:auto!important}
`]
},] },
];
/** @nocollapse */
MatLinkPreviewComponent.ctorParameters = () => [
{ type: MatLinkPreviewService }
];
MatLinkPreviewComponent.propDecorators = {
link: [{ type: Input }],
linkPreview: [{ type: Input }],
color: [{ type: Input }],
showLoadingsProgress: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MatLinkPreviewContainerComponent {
/**
* @param {?} linkPreviewService
*/
constructor(linkPreviewService) {
this.linkPreviewService = linkPreviewService;
// to forward
this.color = 'primary';
this.showLoadingsProgress = true;
}
/**
* @param {?} index
* @param {?} link
* @return {?}
*/
trackLinks(index, link) {
return link ? link.href : undefined;
}
}
MatLinkPreviewContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'mat-link-preview-container',
template: `
<ng-container *ngIf="!multiple && linkPreviewService.links.length > 0; then first else list"></ng-container>
<ng-template #first>
<mat-link-preview [link]="linkPreviewService?.links[0]"
[showLoadingsProgress]="showLoadingsProgress">
</mat-link-preview>
</ng-template>
<ng-template #list>
<div *ngFor="let link of linkPreviewService.links; trackBy: trackLinks">
<mat-link-preview [link]="link"
[showLoadingsProgress]="showLoadingsProgress">
</mat-link-preview>
</div>
</ng-template>
`,
styles: [`
:host{display:block}
`]
},] },
];
/** @nocollapse */
MatLinkPreviewContainerComponent.ctorParameters = () => [
{ type: MatLinkPreviewService }
];
MatLinkPreviewContainerComponent.propDecorators = {
color: [{ type: Input }],
multiple: [{ type: Input }],
showLoadingsProgress: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class MatLinkPreviewModule {
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: MatLinkPreviewModule,
providers: [MatLinkPreviewService, NgxLinkifyjsService]
};
}
}
MatLinkPreviewModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
HttpClientModule,
NgxLinkifyjsModule,
MatCardModule,
MatButtonModule,
MatProgressSpinnerModule,
],
exports: [MatLinkPreviewComponent, MatLinkPreviewContainerComponent, MatLinkPreviewDirective],
declarations: [MatLinkPreviewComponent, MatLinkPreviewContainerComponent, MatLinkPreviewDirective]
},] },
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
export { MatLinkPreviewComponent, MatLinkPreviewContainerComponent, MatLinkPreviewDirective, MatLinkPreviewService, MatLinkPreviewModule };
//# sourceMappingURL=link-preview.js.map