Add messaging widget

This commit is contained in:
syuilo
2017-11-14 00:54:16 +09:00
parent 0a994e5b98
commit ab2293aa4c
14 changed files with 186 additions and 7 deletions

View File

@ -4,6 +4,7 @@ import activateMe from './i';
import activateApi from './api';
import ServerStreamManager from '../scripts/server-stream-manager';
import RequestsStreamManager from '../scripts/requests-stream-manager';
import MessagingIndexStream from '../scripts/messaging-index-stream-manager';
export default (me, stream) => {
activateMe(me);
@ -13,4 +14,5 @@ export default (me, stream) => {
(riot as any).mixin('server-stream', { serverStream: new ServerStreamManager() });
(riot as any).mixin('requests-stream', { requestsStream: new RequestsStreamManager() });
(riot as any).mixin('messaging-index-stream', { messagingIndexStream: new MessagingIndexStream(me) });
};

View File

@ -0,0 +1,20 @@
import StreamManager from './stream-manager';
import Connection from './messaging-index-stream';
export default class ServerStreamManager extends StreamManager<Connection> {
private me;
constructor(me) {
super();
this.me = me;
}
public getConnection() {
if (this.connection == null) {
this.connection = new Connection(this.me);
}
return this.connection;
}
}

View File

@ -0,0 +1,14 @@
import Stream from './stream';
/**
* Messaging index stream connection
*/
class Connection extends Stream {
constructor(me) {
super('messaging-index', {
i: me.token
});
}
}
export default Connection;

View File

@ -1,5 +1,5 @@
<mk-messaging>
<div class="search">
<mk-messaging data-compact={ opts.compact }>
<div class="search" if={ !opts.compact }>
<div class="form">
<label for="search-input"><i class="fa fa-search"></i></label>
<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
@ -36,6 +36,31 @@
:scope
display block
&[data-compact]
font-size 0.8em
> .history
> a
&:last-child
border-bottom none
&:not([data-is-me]):not([data-is-read])
> div
background-image none
border-left solid 4px #3aa2dc
> div
padding 16px
> header
> mk-time
font-size 1em
> .avatar
width 42px
height 42px
margin 0 12px 0 0
> .search
display block
position -webkit-sticky
@ -75,7 +100,7 @@
> input
margin 0
padding 0 12px 0 38px
padding 0 0 0 38px
width 100%
font-size 1em
line-height 38px
@ -299,22 +324,59 @@
this.mixin('i');
this.mixin('api');
this.mixin('messaging-index-stream');
this.connection = this.messagingIndexStream.getConnection();
this.connectionId = this.messagingIndexStream.use();
this.searchResult = [];
this.registerMessage = message => {
message.is_me = message.user_id == this.I.id;
message._click = () => {
this.trigger('navigate-user', message.is_me ? message.recipient : message.user);
};
};
this.on('mount', () => {
this.connection.on('message', this.onMessage);
this.connection.on('read', this.onRead);
this.api('messaging/history').then(history => {
this.isLoading = false;
history.forEach(message => {
message.is_me = message.user_id == this.I.id
message._click = () => {
this.trigger('navigate-user', message.is_me ? message.recipient : message.user);
};
this.registerMessage(message);
});
this.history = history;
this.update();
});
});
this.on('unmount', () => {
this.connection.off('message', this.onMessage);
this.connection.off('read', this.onRead);
this.messagingIndexStream.dispose(this.connectionId);
});
this.onMessage = message => {
this.history = this.history.filter(m => !(
(m.recipient_id == message.recipient_id && m.user_id == message.user_id) ||
(m.recipient_id == message.user_id && m.user_id == message.recipient_id)));
this.registerMessage(message);
this.history.unshift(message);
this.update();
};
this.onRead = ids => {
ids.forEach(id => {
const found = this.history.find(m => m.id == id);
if (found) found.is_read = true;
});
this.update();
};
this.search = () => {
const q = this.refs.search.value;
if (q == '') {

View File

@ -0,0 +1,50 @@
<mk-messaging-home-widget>
<virtual if={ data.design == 0 }>
<p class="title"><i class="fa fa-comments"></i>%i18n:desktop.tags.mk-messaging-home-widget.title%</p>
</virtual>
<mk-messaging ref="index" compact={ true }/>
<style>
:scope
display block
overflow hidden
background #fff
> .title
z-index 2
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color #888
box-shadow 0 1px rgba(0, 0, 0, 0.07)
> i
margin-right 4px
> mk-messaging
max-height 250px
overflow auto
</style>
<script>
this.data = {
design: 0
};
this.mixin('widget');
this.on('mount', () => {
this.refs.index.on('navigate-user', user => {
riot.mount(document.body.appendChild(document.createElement('mk-messaging-room-window')), {
user: user
});
});
});
this.func = () => {
if (++this.data.design == 2) this.data.design = 0;
this.save();
};
</script>
</mk-messaging-home-widget>

View File

@ -19,6 +19,7 @@
<option value="user-recommendation">おすすめユーザー</option>
<option value="recommended-polls">投票</option>
<option value="post-form">投稿フォーム</option>
<option value="messaging">メッセージ</option>
<option value="channel">チャンネル</option>
<option value="access-log">アクセスログ</option>
<option value="server">サーバー情報</option>

View File

@ -44,6 +44,7 @@ require('./home-widgets/channel.tag');
require('./home-widgets/timemachine.tag');
require('./home-widgets/post-form.tag');
require('./home-widgets/access-log.tag');
require('./home-widgets/messaging.tag');
require('./timeline.tag');
require('./messaging/window.tag');
require('./messaging/room-window.tag');