@angular-material-extensions/link-preview
Version:
Angular open source UI library to preview web links
264 lines (255 loc) • 9.84 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
*/
var MatLinkPreviewService = /** @class */ (function () {
function MatLinkPreviewService(http) {
var _this = this;
this.http = http;
this._accessKey = '5b54e80a65c77848ceaa4630331e8384950e09d392365';
this._apiURL = 'https://api.linkpreview.net/';
this.onLinkFound = new EventEmitter();
this.links = [];
this._subscription = this.onLinkFound.subscribe(function (links) { return _this.links = links; });
}
/**
* @return {?}
*/
MatLinkPreviewService.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._subscription) {
this._subscription.unsubscribe();
}
};
/**
* @param {?} url
* @return {?}
*/
MatLinkPreviewService.prototype.fetchLink = /**
* @param {?} url
* @return {?}
*/
function (url) {
console.log('fetching the following link: ', url);
/** @type {?} */
var params = new HttpParams()
.append('key', this._accessKey)
.append('q', url);
return this.http.get(this._apiURL, { params: params }).pipe(map(function (value) { return (value); }));
};
MatLinkPreviewService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
MatLinkPreviewService.ctorParameters = function () { return [
{ type: HttpClient }
]; };
return MatLinkPreviewService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatLinkPreviewDirective = /** @class */ (function () {
function MatLinkPreviewDirective(linkifyService, linkPreviewService) {
this.linkifyService = linkifyService;
this.linkPreviewService = linkPreviewService;
}
/**
* @return {?}
*/
MatLinkPreviewDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this._init();
};
/**
* @return {?}
*/
MatLinkPreviewDirective.prototype._init = /**
* @return {?}
*/
function () {
var _this = this;
fromEvent(document, 'input')
.pipe(debounceTime(2000), distinctUntilChanged(), map(function (event) {
/** @type {?} */
var data = event.target['value'];
/** @type {?} */
var links = _this.linkifyService.find(data);
console.log('data: ', data);
console.log('links: ', links);
// event.target['value'] = this.linkifyService.linkify(data);
return links;
})).subscribe(function (links) {
_this.linkPreviewService.onLinkFound.emit(links);
});
};
MatLinkPreviewDirective.decorators = [
{ type: Directive, args: [{
selector: '[matLinkPreview]'
},] },
];
/** @nocollapse */
MatLinkPreviewDirective.ctorParameters = function () { return [
{ type: NgxLinkifyjsService },
{ type: MatLinkPreviewService }
]; };
return MatLinkPreviewDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatLinkPreviewComponent = /** @class */ (function () {
function MatLinkPreviewComponent(linkPreviewService) {
this.linkPreviewService = linkPreviewService;
// forwarded from the container
this.color = 'primary';
this.showLoadingsProgress = true;
}
/**
* @return {?}
*/
MatLinkPreviewComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.link && !this.linkPreview) {
this.loaded = false;
this._subscription = this.linkPreviewService
.fetchLink(this.link.href)
.subscribe(function (value) {
_this.linkPreview = value;
_this.loaded = true;
});
}
};
/**
* @return {?}
*/
MatLinkPreviewComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this._subscription) {
this._subscription.unsubscribe();
}
};
MatLinkPreviewComponent.decorators = [
{ type: Component, args: [{
selector: 'mat-link-preview',
template: "\n <div class=\"center-auto\" *ngIf=\"!this.linkPreview && !this.loaded && this.showLoadingsProgress\">\n <mat-spinner></mat-spinner>\n </div>\n <mat-card>\n <mat-card-content>\n <div class=\"img-container\">\n <img mat-card-image [src]=\"linkPreview?.image\">\n </div>\n <div>\n <mat-card-title>{{linkPreview?.title}}</mat-card-title>\n <mat-card-subtitle>{{linkPreview?.description}}</mat-card-subtitle>\n <a [href]=\"linkPreview?.url\" mat-button [color]=\"color\">{{linkPreview?.url}}</a>\n </div>\n </mat-card-content>\n </mat-card>\n ",
styles: ["\n :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}\n "]
},] },
];
/** @nocollapse */
MatLinkPreviewComponent.ctorParameters = function () { return [
{ type: MatLinkPreviewService }
]; };
MatLinkPreviewComponent.propDecorators = {
link: [{ type: Input }],
linkPreview: [{ type: Input }],
color: [{ type: Input }],
showLoadingsProgress: [{ type: Input }]
};
return MatLinkPreviewComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatLinkPreviewContainerComponent = /** @class */ (function () {
function MatLinkPreviewContainerComponent(linkPreviewService) {
this.linkPreviewService = linkPreviewService;
// to forward
this.color = 'primary';
this.showLoadingsProgress = true;
}
/**
* @param {?} index
* @param {?} link
* @return {?}
*/
MatLinkPreviewContainerComponent.prototype.trackLinks = /**
* @param {?} index
* @param {?} link
* @return {?}
*/
function (index, link) {
return link ? link.href : undefined;
};
MatLinkPreviewContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'mat-link-preview-container',
template: "\n <ng-container *ngIf=\"!multiple && linkPreviewService.links.length > 0; then first else list\"></ng-container>\n\n <ng-template #first>\n <mat-link-preview [link]=\"linkPreviewService?.links[0]\"\n [showLoadingsProgress]=\"showLoadingsProgress\">\n </mat-link-preview>\n </ng-template>\n <ng-template #list>\n <div *ngFor=\"let link of linkPreviewService.links; trackBy: trackLinks\">\n <mat-link-preview [link]=\"link\"\n [showLoadingsProgress]=\"showLoadingsProgress\">\n </mat-link-preview>\n </div>\n </ng-template>\n ",
styles: ["\n :host{display:block}\n "]
},] },
];
/** @nocollapse */
MatLinkPreviewContainerComponent.ctorParameters = function () { return [
{ type: MatLinkPreviewService }
]; };
MatLinkPreviewContainerComponent.propDecorators = {
color: [{ type: Input }],
multiple: [{ type: Input }],
showLoadingsProgress: [{ type: Input }]
};
return MatLinkPreviewContainerComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatLinkPreviewModule = /** @class */ (function () {
function MatLinkPreviewModule() {
}
/**
* @return {?}
*/
MatLinkPreviewModule.forRoot = /**
* @return {?}
*/
function () {
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]
},] },
];
return MatLinkPreviewModule;
}());
/**
* @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.es5.js.map