/
messages.ts
96 lines (77 loc) · 2.46 KB
/
messages.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import {Component, OnInit, OnDestroy, ElementRef} from "@angular/core";
import { NavParams } from "ionic-angular";
import { Chat, Message } from "api/models/whatsapp-models";
import { Messages } from "api/collections/whatsapp-collections";
import { Observable } from "rxjs";
import { MeteorObservable } from "meteor-rxjs";
@Component({
selector: "messages-page",
templateUrl: "messages.html"
})
export class MessagesPage implements OnInit, OnDestroy {
selectedChat: Chat;
title: string;
picture: string;
messages: Observable<Message[]>;
message: string = "";
autoScroller: MutationObserver;
senderId: string;
constructor(navParams: NavParams, element: ElementRef) {
this.selectedChat = <Chat>navParams.get('chat');
this.title = this.selectedChat.title;
this.picture = this.selectedChat.picture;
this.senderId = Meteor.userId();
}
private get messagesPageContent(): Element {
return document.querySelector('.messages-page-content');
}
private get messagesPageFooter(): Element {
return document.querySelector('.messages-page-footer');
}
private get messagesList(): Element {
return this.messagesPageContent.querySelector('.messages');
}
private get messageEditor(): HTMLInputElement {
return <HTMLInputElement>this.messagesPageFooter.querySelector('.message-editor');
}
private get scroller(): Element {
return this.messagesList.querySelector('.scroll-content');
}
ngOnInit() {
this.messages = Messages.find(
{chatId: this.selectedChat._id},
{sort: {createdAt: 1}}
).map((messages: Message[]) => {
messages.forEach((message: Message) => {
message.ownership = this.senderId == message.senderId ? 'mine' : 'other';
});
return messages;
});
this.autoScroller = this.autoScroll();
}
ngOnDestroy() {
this.autoScroller.disconnect();
}
onInputKeypress({keyCode}: KeyboardEvent): void {
if (keyCode == 13) {
this.sendMessage();
}
}
sendMessage(): void {
MeteorObservable.call('addMessage', this.selectedChat._id, this.message).zone().subscribe(() => {
this.message = '';
});
}
autoScroll(): MutationObserver {
const autoScroller = new MutationObserver(this.scrollDown.bind(this));
autoScroller.observe(this.messagesList, {
childList: true,
subtree: true
});
return autoScroller;
}
scrollDown(): void {
this.scroller.scrollTop = this.scroller.scrollHeight;
this.messageEditor.focus();
}
}