ngx-wachat
Version:
Chat UI Component for Angular Applications.
113 lines • 12.2 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ChatService } from '../../services/chat.service';
export class NgxWachatContentComponent {
/**
* @param {?} chatService
*/
constructor(chatService) {
this.chatService = chatService;
this.placeholder = '';
this.sendMessage = new EventEmitter();
this.control = new FormControl(null);
this.messages = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.listenChangeMessages();
this.messages = this.filterMessages(this.chatService.messages);
this.scrollToBottom();
}
/**
* @return {?}
*/
listenChangeMessages() {
this.chatService.change.subscribe((/**
* @param {?} messages
* @return {?}
*/
(messages) => {
this.messages = this.filterMessages(messages);
this.scrollToBottom();
}));
}
/**
* @param {?} collection
* @return {?}
*/
filterMessages(collection) {
return collection.filter((/**
* @param {?} item
* @return {?}
*/
(item) => (item.origin.id === this.origin.id) && (item.destination.id === this.destination.id) ||
(item.origin.id === this.destination.id) && (item.destination.id === this.origin.id)));
}
/**
* @return {?}
*/
onKeyEnter() {
if (this.control.value) {
this.sendMessage.emit(this.control.value);
this.control.setValue('');
}
}
/**
* @return {?}
*/
scrollToBottom() {
setTimeout((/**
* @return {?}
*/
() => this.scrollContent.nativeElement.scrollTop = this.scrollContent.nativeElement.scrollHeight), 100);
}
}
NgxWachatContentComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-wachat-content',
template: "<div class=\"chat-content-wrapper\">\n\n <div class=\"chat-content\"\n #scrollContent\n [style.minHeight]=\"'calc(' + height + ' - 84px)'\"\n [style.maxHeight]=\"'calc(' + height + ' - 84px)'\">\n\n <ng-container *ngFor=\"let message of messages\">\n\n <ng-container *ngIf=\"message?.origin?.id === destination?.id\">\n <ng-container *ngTemplateOutlet=\"templateFrom; context: { message: message }\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"message?.origin?.id === origin?.id\">\n <ng-container *ngTemplateOutlet=\"templateTo; context: { message: message }\"></ng-container>\n </ng-container>\n\n </ng-container>\n\n </div>\n\n <textarea [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n (keydown.enter)=\"$event.preventDefault(); onKeyEnter()\"\n class=\"chat-input\">\n </textarea>\n\n</div>\n\n<ng-template #templateFrom let-message=\"message\">\n <div class=\"message-wrapper\">\n <div class=\"chat-from\">\n <p>{{ message.message }}</p>\n <p class=\"chat-date\">{{ message.date | date:'HH:ss' }}</p>\n </div>\n </div>\n</ng-template>\n\n<ng-template #templateTo let-message=\"message\">\n <div class=\"message-wrapper-to\">\n <div class=\"chat-to\">\n <p>{{ message.message }}</p>\n <p class=\"chat-date\">{{ message.date | date:'HH:ss' }}</p>\n </div>\n </div>\n</ng-template>\n",
styles: [".chat-content-wrapper{min-height:calc(400px - 44px);position:relative;font-family:\"Segoe UI\",serif;font-size:14px}.chat-content-wrapper p{margin:0}.chat-content-wrapper .chat-content{padding:10px;display:-webkit-box;display:flex;box-sizing:border-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;overflow-y:auto}.chat-content-wrapper .chat-content::-webkit-scrollbar-thumb{background:#e6e6e6}.chat-content-wrapper .chat-content::-webkit-scrollbar-track{background:#f5f5f5}.chat-content-wrapper .chat-content::-webkit-scrollbar{width:5px}.chat-content-wrapper .message-wrapper{display:-webkit-box;display:flex;-webkit-animation:.3s forwards showIn;animation:.3s forwards showIn}.chat-content-wrapper .message-wrapper-to{-webkit-box-align:center;align-items:center;place-content:flex-end;display:-webkit-box;display:flex;-webkit-animation:.3s forwards showIn;animation:.3s forwards showIn}.chat-content-wrapper .chat-from{background:#fff;padding:10px;border-radius:5px;box-shadow:1px 1px 3px 0 #dedede;margin:5px 0;color:#565656}.chat-content-wrapper .chat-from>.chat-date{font-size:10px;text-align:right;margin-top:5px;color:#888}.chat-content-wrapper .chat-to{background:#d8e4db;padding:10px;border-radius:5px;box-shadow:1px 1px 3px 0 #dedede;margin:5px 0;color:#565656}.chat-content-wrapper .chat-to>.chat-date{font-size:10px;text-align:right;margin-top:5px;color:#888}.chat-content-wrapper .chat-input{position:absolute;bottom:0;width:100%;box-shadow:1px 0 1px #cccccc7a;border:0;resize:none;outline:0;box-sizing:border-box;font-family:\"Segoe UI\",serif;padding:10px 10px 0;color:#333}@-webkit-keyframes showIn{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes showIn{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}"]
}] }
];
/** @nocollapse */
NgxWachatContentComponent.ctorParameters = () => [
{ type: ChatService }
];
NgxWachatContentComponent.propDecorators = {
origin: [{ type: Input }],
destination: [{ type: Input }],
height: [{ type: Input }],
placeholder: [{ type: Input }],
sendMessage: [{ type: Output }],
scrollContent: [{ type: ViewChild, args: ['scrollContent', { static: true },] }]
};
if (false) {
/** @type {?} */
NgxWachatContentComponent.prototype.origin;
/** @type {?} */
NgxWachatContentComponent.prototype.destination;
/** @type {?} */
NgxWachatContentComponent.prototype.height;
/** @type {?} */
NgxWachatContentComponent.prototype.placeholder;
/** @type {?} */
NgxWachatContentComponent.prototype.sendMessage;
/** @type {?} */
NgxWachatContentComponent.prototype.scrollContent;
/** @type {?} */
NgxWachatContentComponent.prototype.control;
/** @type {?} */
NgxWachatContentComponent.prototype.messages;
/**
* @type {?}
* @private
*/
NgxWachatContentComponent.prototype.chatService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC13YWNoYXQvIiwic291cmNlcyI6WyJjb21wb25lbnRzL2NoYXQtY29udGVudC9jaGF0LWNvbnRlbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDcEcsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBRzNDLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQU94RCxNQUFNLE9BQU8seUJBQXlCOzs7O0lBa0JwQyxZQUFxQixXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQVZwQyxnQkFBVyxHQUFHLEVBQUUsQ0FBQztRQUVoQixnQkFBVyxHQUF5QixJQUFJLFlBQVksRUFBRSxDQUFDO1FBSTFELFlBQU8sR0FBRyxJQUFJLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVoQyxhQUFRLEdBQWtCLEVBQUUsQ0FBQztJQUVjLENBQUM7Ozs7SUFFbkQsUUFBUTtRQUNOLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO1FBQzVCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQy9ELElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUN4QixDQUFDOzs7O0lBRUQsb0JBQW9CO1FBQ2xCLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLFNBQVM7Ozs7UUFBQyxDQUFDLFFBQXVCLEVBQUUsRUFBRTtZQUM1RCxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUUsUUFBUSxDQUFFLENBQUM7WUFDaEQsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3hCLENBQUMsRUFBQyxDQUFDO0lBQ0wsQ0FBQzs7Ozs7SUFFRCxjQUFjLENBQUUsVUFBeUI7UUFDdkMsT0FBTyxVQUFVLENBQUMsTUFBTTs7OztRQUFDLENBQUUsSUFBaUIsRUFBRyxFQUFFLENBQy9DLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEtBQUssSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxLQUFLLElBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO1lBQ3BGLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEtBQUssSUFBSSxDQUFDLFdBQVcsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxLQUFLLElBQUksQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLEVBQ3JGLENBQUM7SUFDSixDQUFDOzs7O0lBRUQsVUFBVTtRQUNSLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUU7WUFDdEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUMxQyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsQ0FBQztTQUMzQjtJQUNILENBQUM7Ozs7SUFFRCxjQUFjO1FBQ1osVUFBVTs7O1FBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLFlBQVksR0FBRSxHQUFHLENBQUMsQ0FBQztJQUNwSCxDQUFDOzs7WUF0REYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxvQkFBb0I7Z0JBQzlCLGc3Q0FBNEM7O2FBRTdDOzs7O1lBTk8sV0FBVzs7O3FCQVNoQixLQUFLOzBCQUVMLEtBQUs7cUJBRUwsS0FBSzswQkFFTCxLQUFLOzBCQUVMLE1BQU07NEJBRU4sU0FBUyxTQUFDLGVBQWUsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Ozs7SUFWNUMsMkNBQTZCOztJQUU3QixnREFBa0M7O0lBRWxDLDJDQUFnQjs7SUFFaEIsZ0RBQTBCOztJQUUxQixnREFBaUU7O0lBRWpFLGtEQUF3RTs7SUFFeEUsNENBQXVDOztJQUV2Qyw2Q0FBb0M7Ozs7O0lBRXZCLGdEQUFnQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCwgVmlld0NoaWxkfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Rm9ybUNvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7Q2hhdENvbnRhY3R9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvY2hhdC1jb250YWN0LmludGVyZmFjZSc7XG5pbXBvcnQge0NoYXRNZXNzYWdlfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2NoYXQtbWVzc2FnZS5pbnRlcmZhY2UnO1xuaW1wb3J0IHtDaGF0U2VydmljZX0gZnJvbSAnLi4vLi4vc2VydmljZXMvY2hhdC5zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmd4LXdhY2hhdC1jb250ZW50JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2NoYXQtY29udGVudC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2NoYXQtY29udGVudC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE5neFdhY2hhdENvbnRlbnRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gIEBJbnB1dCgpIG9yaWdpbjogQ2hhdENvbnRhY3Q7XG5cbiAgQElucHV0KCkgZGVzdGluYXRpb246IENoYXRDb250YWN0O1xuXG4gIEBJbnB1dCgpIGhlaWdodDtcblxuICBASW5wdXQoKSBwbGFjZWhvbGRlciA9ICcnO1xuXG4gIEBPdXRwdXQoKSBzZW5kTWVzc2FnZTogRXZlbnRFbWl0dGVyPHN0cmluZz4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgQFZpZXdDaGlsZCgnc2Nyb2xsQ29udGVudCcsIHsgc3RhdGljOiB0cnVlIH0pIHNjcm9sbENvbnRlbnQ6IEVsZW1lbnRSZWY7XG5cbiAgcHVibGljIGNvbnRyb2wgPSBuZXcgRm9ybUNvbnRyb2wobnVsbCk7XG5cbiAgcHVibGljIG1lc3NhZ2VzOiBDaGF0TWVzc2FnZVtdID0gW107XG5cbiAgY29uc3RydWN0b3IoIHByaXZhdGUgY2hhdFNlcnZpY2U6IENoYXRTZXJ2aWNlICkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5saXN0ZW5DaGFuZ2VNZXNzYWdlcygpO1xuICAgIHRoaXMubWVzc2FnZXMgPSB0aGlzLmZpbHRlck1lc3NhZ2VzKHRoaXMuY2hhdFNlcnZpY2UubWVzc2FnZXMpO1xuICAgIHRoaXMuc2Nyb2xsVG9Cb3R0b20oKTtcbiAgfVxuXG4gIGxpc3RlbkNoYW5nZU1lc3NhZ2VzKCkge1xuICAgIHRoaXMuY2hhdFNlcnZpY2UuY2hhbmdlLnN1YnNjcmliZSgobWVzc2FnZXM6IENoYXRNZXNzYWdlW10pID0+IHtcbiAgICAgIHRoaXMubWVzc2FnZXMgPSB0aGlzLmZpbHRlck1lc3NhZ2VzKCBtZXNzYWdlcyApO1xuICAgICAgdGhpcy5zY3JvbGxUb0JvdHRvbSgpO1xuICAgIH0pO1xuICB9XG5cbiAgZmlsdGVyTWVzc2FnZXMoIGNvbGxlY3Rpb246IENoYXRNZXNzYWdlW10gKSB7XG4gICAgcmV0dXJuIGNvbGxlY3Rpb24uZmlsdGVyKCggaXRlbTogQ2hhdE1lc3NhZ2UgKSA9PlxuICAgICAgKGl0ZW0ub3JpZ2luLmlkID09PSB0aGlzLm9yaWdpbi5pZCkgJiYgKGl0ZW0uZGVzdGluYXRpb24uaWQgPT09IHRoaXMuZGVzdGluYXRpb24uaWQpIHx8XG4gICAgICAoaXRlbS5vcmlnaW4uaWQgPT09IHRoaXMuZGVzdGluYXRpb24uaWQpICYmIChpdGVtLmRlc3RpbmF0aW9uLmlkID09PSB0aGlzLm9yaWdpbi5pZClcbiAgICApO1xuICB9XG5cbiAgb25LZXlFbnRlcigpIHtcbiAgICBpZiAodGhpcy5jb250cm9sLnZhbHVlKSB7XG4gICAgICB0aGlzLnNlbmRNZXNzYWdlLmVtaXQodGhpcy5jb250cm9sLnZhbHVlKTtcbiAgICAgIHRoaXMuY29udHJvbC5zZXRWYWx1ZSgnJyk7XG4gICAgfVxuICB9XG5cbiAgc2Nyb2xsVG9Cb3R0b20oKSB7XG4gICAgc2V0VGltZW91dCgoKSA9PiB0aGlzLnNjcm9sbENvbnRlbnQubmF0aXZlRWxlbWVudC5zY3JvbGxUb3AgPSB0aGlzLnNjcm9sbENvbnRlbnQubmF0aXZlRWxlbWVudC5zY3JvbGxIZWlnaHQsIDEwMCk7XG4gIH1cblxufVxuIl19