diff --git a/locales/en.yml b/locales/en.yml index 9cc5df317..b4c94ad47 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -45,6 +45,8 @@ common: mk-messaging-room: empty: "No conversations" + more: "More" + no-history: "There is no more history" resize-form: "Drag to resize" new-message: "New message" diff --git a/locales/ja.yml b/locales/ja.yml index 5ed1d4f1e..db247f8e5 100644 --- a/locales/ja.yml +++ b/locales/ja.yml @@ -45,6 +45,8 @@ common: mk-messaging-room: empty: "このユーザーと話したことはありません" + more: "もっと読む" + no-history: "これより過去の履歴はありません" resize-form: "ドラッグしてフォームの広さを調整" new-message: "新しいメッセージがあります" diff --git a/src/web/app/common/tags/messaging/room.tag b/src/web/app/common/tags/messaging/room.tag index 93f07f2ce..5c7f76936 100644 --- a/src/web/app/common/tags/messaging/room.tag +++ b/src/web/app/common/tags/messaging/room.tag @@ -2,6 +2,10 @@
%i18n:common.loading%
%i18n:common.tags.mk-messaging-room.empty%
+0 && !moreMessagesIsInStock }>%i18n:common.tags.mk-messaging-room.no-history%
+{ messages[i + 1]._datetext }
@@ -42,6 +46,27 @@ i margin-right 4px + > .more + display block + margin 16px auto + padding 0 12px + line-height 24px + color #fff + background rgba(0, 0, 0, 0.3) + border-radius 12px + + &:hover + background rgba(0, 0, 0, 0.4) + + &:active + background rgba(0, 0, 0, 0.5) + + &.fetching + cursor wait + + > i + margin-right 4px + > .message // something @@ -142,11 +167,8 @@ document.addEventListener('visibilitychange', this.onVisibilitychange); - this.api('messaging/messages', { - user_id: this.user.id - }).then(messages => { + this.fetchMessages().then(() => { this.init = false; - this.messages = messages.reverse(); this.update(); this.scrollToBottom(); }); @@ -201,6 +223,39 @@ }); }; + this.fetchMoreMessages = () => { + this.update({ + fetchingMoreMessages: true + }); + this.fetchMessages().then(() => { + this.update({ + fetchingMoreMessages: false + }); + }); + }; + + this.fetchMessages = () => new Promise((resolve, reject) => { + const max = this.moreMessagesIsInStock ? 20 : 10; + + this.api('messaging/messages', { + user_id: this.user.id, + limit: max + 1, + max_id: this.moreMessagesIsInStock ? this.messages[0].id : undefined + }).then(messages => { + if (messages.length == max + 1) { + this.moreMessagesIsInStock = true; + messages.pop(); + } else { + this.moreMessagesIsInStock = false; + } + + this.messages.unshift.apply(this.messages, messages.reverse()); + this.update(); + + resolve(); + }); + }); + this.isBottom = () => { const asobi = 32; const current = this.isNaked