タイムラインの投稿をダブルクリックすることで詳細な情報が見れるように

This commit is contained in:
syuilo 2017-08-28 10:11:23 +09:00
parent 3075467e2f
commit baab3e7ad8
4 changed files with 90 additions and 2 deletions

View file

@ -4,7 +4,8 @@ ChangeLog
unreleased unreleased
---------- ----------
* Improvement: 投稿ページに次の投稿/前の投稿リンクを作成 (#734) * Improve: 投稿ページに次の投稿/前の投稿リンクを作成 (#734)
* Improve: タイムラインの投稿をダブルクリックすることで詳細な情報が見れるように
* Fix: モバイル版でおすすめユーザーをフォローしてもタイムラインが更新されない (#736) * Fix: モバイル版でおすすめユーザーをフォローしてもタイムラインが更新されない (#736)
2380 2380

View file

@ -0,0 +1,80 @@
<mk-detailed-post-window>
<div class="bg" ref="bg" onclick={ bgClick }></div>
<div class="main" ref="main" if={ !fetching }>
<mk-post-detail ref="detail" post={ post }/>
</div>
<style>
:scope
display block
opacity 0
> .bg
display block
position fixed
z-index 1000
top 0
left 0
width 100%
height 100%
background rgba(0, 0, 0, 0.7)
> .main
display block
position fixed
z-index 1000
top 20%
left 0
right 0
margin 0 auto 0 auto
padding 0
width 638px
text-align center
> mk-post-detail
margin 0 auto
</style>
<script>
import anime from 'animejs';
this.mixin('api');
this.fetching = true;
this.post = null;
this.on('mount', () => {
anime({
targets: this.root,
opacity: 1,
duration: 100,
easing: 'linear'
});
this.api('posts/show', {
post_id: this.opts.post
}).then(post => {
this.update({
fetching: false,
post: post
});
});
});
this.close = () => {
this.refs.bg.style.pointerEvents = 'none';
this.refs.main.style.pointerEvents = 'none';
anime({
targets: this.root,
opacity: 0,
duration: 300,
easing: 'linear',
complete: () => this.unmount()
});
};
this.bgClick = () => {
this.close();
};
</script>
</mk-detailed-post-window>

View file

@ -91,3 +91,4 @@ require('./user-following-window.tag');
require('./user-followers-window.tag'); require('./user-followers-window.tag');
require('./list-user.tag'); require('./list-user.tag');
require('./ui-notification.tag'); require('./ui-notification.tag');
require('./detailed-post-window.tag');

View file

@ -1,4 +1,4 @@
<mk-timeline-post tabindex="-1" title={ title } onkeydown={ onKeyDown }> <mk-timeline-post tabindex="-1" title={ title } onkeydown={ onKeyDown } dblclick={ onDblClick }>
<div class="reply-to" if={ p.reply_to }> <div class="reply-to" if={ p.reply_to }>
<mk-timeline-post-sub post={ p.reply_to }/> <mk-timeline-post-sub post={ p.reply_to }/>
</div> </div>
@ -473,6 +473,12 @@
if (shouldBeCancel) e.preventDefault(); if (shouldBeCancel) e.preventDefault();
}; };
this.onDblClick = () => {
riot.mount(document.body.appendChild(document.createElement('mk-detailed-post-window')), {
post: this.p.id
});
};
function focus(el, fn) { function focus(el, fn) {
const target = fn(el); const target = fn(el);
if (target) { if (target) {