This commit is contained in:
syuilo
2017-08-28 00:03:57 +09:00
parent f228788fcb
commit 3b77bc8299
6 changed files with 132 additions and 83 deletions

View File

@ -1,7 +1,9 @@
<mk-post-page>
<mk-ui ref="ui">
<main>
<main if={ !parent.fetching }>
<a if={ parent.post.next } href={ parent.post.next }><i class="fa fa-angle-up"></i>%i18n:desktop.tags.mk-post-page.next%</a>
<mk-post-detail ref="detail" post={ parent.post }/>
<a if={ parent.post.prev } href={ parent.post.prev }><i class="fa fa-angle-down"></i>%i18n:desktop.tags.mk-post-page.prev%</a>
</main>
</mk-ui>
<style>
@ -10,6 +12,19 @@
main
padding 16px
text-align center
> a
display inline-block
&:first-child
margin-bottom 4px
&:last-child
margin-top 4px
> i
margin-right 4px
> mk-post-detail
margin 0 auto
@ -18,16 +33,23 @@
<script>
import Progress from '../../../common/scripts/loading';
this.post = this.opts.post;
this.mixin('api');
this.fetching = true;
this.post = null;
this.on('mount', () => {
Progress.start();
this.refs.ui.refs.detail.on('post-fetched', () => {
Progress.set(0.5);
});
this.api('posts/show', {
post_id: this.opts.post
}).then(post => {
this.update({
fetching: false,
post: post
});
this.refs.ui.refs.detail.on('loaded', () => {
Progress.done();
});
});

View File

@ -1,8 +1,5 @@
<mk-post-detail title={ title }>
<div class="fetching" if={ fetching }>
<mk-ellipsis-icon/>
</div>
<div class="main" if={ !fetching }>
<div class="main">
<button class="read-more" if={ p.reply_to && p.reply_to.reply_to_id && context == null } title="会話をもっと読み込む" onclick={ loadContext } disabled={ contextFetching }>
<i class="fa fa-ellipsis-v" if={ !contextFetching }></i>
<i class="fa fa-spinner fa-pulse" if={ contextFetching }></i>
@ -71,13 +68,11 @@
padding 0
width 640px
overflow hidden
text-align left
background #fff
border solid 1px rgba(0, 0, 0, 0.1)
border-radius 8px
> .fetching
padding 64px 0
> .main
> .read-more
@ -262,56 +257,41 @@
this.mixin('api');
this.mixin('user-preview');
this.fetching = true;
this.contextFetching = false;
this.context = null;
this.post = null;
this.post = this.opts.post;
this.isRepost = this.post.repost != null;
this.p = this.isRepost ? this.post.repost : this.post;
this.p.reactions_count = this.p.reaction_counts ? Object.keys(this.p.reaction_counts).map(key => this.p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
this.title = dateStringify(this.p.created_at);
this.on('mount', () => {
this.api('posts/show', {
post_id: this.opts.post
}).then(post => {
const isRepost = post.repost != null;
const p = isRepost ? post.repost : post;
p.reactions_count = p.reaction_counts ? Object.keys(p.reaction_counts).map(key => p.reaction_counts[key]).reduce((a, b) => a + b) : 0;
if (this.p.text) {
const tokens = this.p.ast;
this.update({
fetching: false,
post: post,
isRepost: isRepost,
p: p,
title: dateStringify(p.created_at)
this.refs.text.innerHTML = compile(tokens);
this.refs.text.children.forEach(e => {
if (e.tagName == 'MK-URL') riot.mount(e);
});
this.trigger('loaded');
if (this.p.text) {
const tokens = this.p.ast;
this.refs.text.innerHTML = compile(tokens);
this.refs.text.children.forEach(e => {
if (e.tagName == 'MK-URL') riot.mount(e);
// URLをプレビュー
tokens
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
.map(t => {
riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
url: t.url
});
});
}
// URLをプレビュー
tokens
.filter(t => (t.type == 'url' || t.type == 'link') && !t.silent)
.map(t => {
riot.mount(this.refs.text.appendChild(document.createElement('mk-url-preview')), {
url: t.url
});
});
}
// Get replies
this.api('posts/replies', {
post_id: this.p.id,
limit: 8
}).then(replies => {
this.update({
replies: replies
});
// Get replies
this.api('posts/replies', {
post_id: this.p.id,
limit: 8
}).then(replies => {
this.update({
replies: replies
});
});
});