Update room.tag

This commit is contained in:
syuilo⭐️ 2017-02-20 11:31:18 +09:00
parent d042aa4fcb
commit 3211d90e09
1 changed files with 57 additions and 44 deletions

View File

@ -139,70 +139,82 @@
this.connection.event.on('message' this.onMessage); this.connection.event.on('message' this.onMessage);
this.connection.event.on('read' this.onRead); this.connection.event.on('read' this.onRead);
document.addEventListener 'visibilitychange' this.on-visibilitychange document.addEventListener('visibilitychange', this.onVisibilitychange);
this.api 'messaging/messages' do this.api('messaging/messages', {
user_id: @user.id user_id: this.user.id
.then (messages) => }).then(messages => {
this.init = false this.init = false;
this.messages = messages.reverse! this.messages = messages.reverse();
this.update(); this.update();
@scroll-to-bottom! this.scrollToBottom();
.catch (err) => });
console.error err });
this.on('unmount', () => { this.on('unmount', () => {
@connection.event.off 'message' this.on-message this.connection.event.off('message', this.onMessage);
@connection.event.off 'read' this.on-read this.connection.event.off('read', this.onRead);
@connection.close! this.connection.close();
document.removeEventListener 'visibilitychange' this.on-visibilitychange document.removeEventListener('visibilitychange', this.onVisibilitychange);
});
this.on('update', () => { this.on('update', () => {
@messages.forEach (message) => this.messages.forEach(message => {
date = (new Date message.created_at).getDate() const date = (new Date(message.created_at)).getDate();
month = (new Date message.created_at).getMonth() + 1 const month = (new Date(message.created_at)).getMonth() + 1;
message._date = date message._date = date;
message._datetext = month + '月 ' + date + '日' message._datetext = month + '月 ' + date + '日';
});
});
this.on-message = (message) => { this.onMessage = (message) => {
is-bottom = @is-bottom! const isbottom = this.isBottom();
@messages.push message this.messages.push(message);
if message.user_id != this.I.id and not document.hidden if (message.user_id != this.I.id && !document.hidden) {
@connection.socket.send JSON.stringify do this.connection.socket.send(JSON.stringify({
type: 'read' type: 'read',
id: message.id id: message.id
});
}
this.update(); this.update();
if is-bottom if (isBottom) {
// Scroll to bottom // Scroll to bottom
@scroll-to-bottom! this.scrollToBottom();
else if message.user_id != this.I.id } else if (message.user_id != this.I.id) {
// Notify // Notify
@notify '新しいメッセージがあります' this.notify('新しいメッセージがあります');
}
};
this.on-read = (ids) => { this.onRead = ids => {
if not Array.isArray ids then ids = [ids] if (!Array.isArray(ids)) ids = [ids];
ids.forEach (id) => ids.forEach(id => {
if (@messages.some (x) => x.id == id) if (this.messages.some(x => x.id == id)) {
exist = (@messages.map (x) -> x.id).index-of id const exist = this.messages.map(x => x.id).indexOf(id);
@messages[exist].is_read = true this.messages[exist].is_read = true;
this.update(); this.update();
}
}):
};
this.is-bottom = () => { this.isBottom = () => {
current = this.root.scroll-top + this.root.offset-height const current = this.root.scrollTop + this.root.offsetHeight;
max = this.root.scroll-height const max = this.root.scrollHeight;
current > (max - 32) return current > (max - 32);
};
this.scroll-to-bottom = () => { this.scroll-to-bottom = () => {
this.root.scroll-top = this.root.scroll-height this.root.scrollTop = this.root.scrollHeight;
};
this.notify = (message) => { this.notify = message => {
n = document.createElement 'p' const n = document.createElement('p');
n.inner-HTML = '<i class="fa fa-arrow-circle-down"></i>' + message n.innerHTML = '<i class="fa fa-arrow-circle-down"></i>' + message;
n.onclick = => n.onclick = () => {
@scroll-to-bottom! this.scrollToBottom();
n.parentNode.removeChild n n.parentNode.removeChild n
this.refs.notifications.appendChild n this.refs.notifications.appendChild n
@ -212,6 +224,7 @@
n.parentNode.removeChild n n.parentNode.removeChild n
, 1000ms , 1000ms
, 4000ms , 4000ms
};
this.on-visibilitychange = () => { this.on-visibilitychange = () => {
if document.hidden then return if document.hidden then return