@angular-material-extensions/link-preview
Version:
Angular open source UI library to preview web links
270 lines (259 loc) • 11.6 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common/http'), require('rxjs/operators'), require('rxjs'), require('ngx-linkifyjs'), require('@angular/common'), require('@angular/material')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common/http', 'rxjs/operators', 'rxjs', 'ngx-linkifyjs', '@angular/common', '@angular/material'], factory) :
(factory((global.angularMaterialExtensionsLinkPreview = {}),global.ng.core,global.http,global.operators,global.rxjs,global.ngxLinkifyjs,global.ng.common,global.ng.material));
}(this, (function (exports,core,http,operators,rxjs,ngxLinkifyjs,common,material) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var MatLinkPreviewService = /** @class */ (function () {
function MatLinkPreviewService(http$$1) {
var _this = this;
this.http = http$$1;
this._accessKey = '5b54e80a65c77848ceaa4630331e8384950e09d392365';
this._apiURL = 'https://api.linkpreview.net/';
this.onLinkFound = new core.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 http.HttpParams()
.append('key', this._accessKey)
.append('q', url);
return this.http.get(this._apiURL, { params: params }).pipe(operators.map(function (value) { return (value); }));
};
MatLinkPreviewService.decorators = [
{ type: core.Injectable },
];
/** @nocollapse */
MatLinkPreviewService.ctorParameters = function () { return [
{ type: http.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;
rxjs.fromEvent(document, 'input')
.pipe(operators.debounceTime(2000), operators.distinctUntilChanged(), operators.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: core.Directive, args: [{
selector: '[matLinkPreview]'
},] },
];
/** @nocollapse */
MatLinkPreviewDirective.ctorParameters = function () { return [
{ type: ngxLinkifyjs.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: core.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: core.Input }],
linkPreview: [{ type: core.Input }],
color: [{ type: core.Input }],
showLoadingsProgress: [{ type: core.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: core.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: core.Input }],
multiple: [{ type: core.Input }],
showLoadingsProgress: [{ type: core.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, ngxLinkifyjs.NgxLinkifyjsService]
};
};
MatLinkPreviewModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
http.HttpClientModule,
ngxLinkifyjs.NgxLinkifyjsModule,
material.MatCardModule,
material.MatButtonModule,
material.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
*/
exports.MatLinkPreviewComponent = MatLinkPreviewComponent;
exports.MatLinkPreviewContainerComponent = MatLinkPreviewContainerComponent;
exports.MatLinkPreviewDirective = MatLinkPreviewDirective;
exports.MatLinkPreviewService = MatLinkPreviewService;
exports.MatLinkPreviewModule = MatLinkPreviewModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=link-preview.umd.js.map