This commit is contained in:
こぴなたみぽ 2018-02-20 09:48:30 +09:00
parent 45c55604cf
commit e707c3d5e3
3 changed files with 125 additions and 127 deletions

View file

@ -1,125 +0,0 @@
<mk-mentions-home-widget>
<header><span data-is-active={ mode == 'all' } @click="setMode.bind(this, 'all')">すべて</span><span data-is-active={ mode == 'following' } @click="setMode.bind(this, 'following')">フォロー中</span></header>
<div class="loading" v-if="isLoading">
<mk-ellipsis-icon/>
</div>
<p class="empty" v-if="isEmpty">%fa:R comments%<span v-if="mode == 'all'">あなた宛ての投稿はありません。</span><span v-if="mode == 'following'">あなたがフォローしているユーザーからの言及はありません。</span></p>
<mk-timeline ref="timeline">
<yield to="footer">
<template v-if="!parent.moreLoading">%fa:moon%</template>
<template v-if="parent.moreLoading">%fa:spinner .pulse .fw%</template>
</yield/>
</mk-timeline>
<style lang="stylus" scoped>
:scope
display block
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> header
padding 8px 16px
border-bottom solid 1px #eee
> span
margin-right 16px
line-height 27px
font-size 18px
color #555
&:not([data-is-active])
color $theme-color
cursor pointer
&:hover
text-decoration underline
> .loading
padding 64px 0
> .empty
display block
margin 0 auto
padding 32px
max-width 400px
text-align center
color #999
> [data-fa]
display block
margin-bottom 16px
font-size 3em
color #ccc
</style>
<script lang="typescript">
this.mixin('i');
this.mixin('api');
this.isLoading = true;
this.isEmpty = false;
this.moreLoading = false;
this.mode = 'all';
this.on('mount', () => {
document.addEventListener('keydown', this.onDocumentKeydown);
window.addEventListener('scroll', this.onScroll);
this.fetch(() => this.$emit('loaded'));
});
this.on('unmount', () => {
document.removeEventListener('keydown', this.onDocumentKeydown);
window.removeEventListener('scroll', this.onScroll);
});
this.onDocumentKeydown = e => {
if (e.target.tagName != 'INPUT' && tag != 'TEXTAREA') {
if (e.which == 84) { // t
this.$refs.timeline.focus();
}
}
};
this.fetch = cb => {
this.$root.$data.os.api('posts/mentions', {
following: this.mode == 'following'
}).then(posts => {
this.update({
isLoading: false,
isEmpty: posts.length == 0
});
this.$refs.timeline.setPosts(posts);
if (cb) cb();
});
};
this.more = () => {
if (this.moreLoading || this.isLoading || this.$refs.timeline.posts.length == 0) return;
this.update({
moreLoading: true
});
this.$root.$data.os.api('posts/mentions', {
following: this.mode == 'following',
until_id: this.$refs.timeline.tail().id
}).then(posts => {
this.update({
moreLoading: false
});
this.$refs.timeline.prependPosts(posts);
});
};
this.onScroll = () => {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.more();
};
this.setMode = mode => {
this.update({
mode: mode
});
this.fetch();
};
</script>
</mk-mentions-home-widget>

View file

@ -0,0 +1,123 @@
<template>
<div class="mk-mentions">
<header>
<span :data-is-active="mode == 'all'" @click="mode = 'all'">すべて</span>
<span :data-is-active="mode == 'following'" @click="mode = 'following'">フォロー中</span>
</header>
<div class="fetching" v-if="fetching">
<mk-ellipsis-icon/>
</div>
<p class="empty" v-if="posts.length == 0 && !fetching">
%fa:R comments%
<span v-if="mode == 'all'">あなた宛ての投稿はありません</span>
<span v-if="mode == 'following'">あなたがフォローしているユーザーからの言及はありません</span>
</p>
<mk-posts :posts="posts" ref="timeline"/>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
fetching: true,
moreFetching: false,
mode: 'all',
posts: []
};
},
watch: {
mode() {
this.fetch();
}
},
mounted() {
document.addEventListener('keydown', this.onDocumentKeydown);
window.addEventListener('scroll', this.onScroll);
this.fetch(() => this.$emit('loaded'));
},
beforeDestroy() {
document.removeEventListener('keydown', this.onDocumentKeydown);
window.removeEventListener('scroll', this.onScroll);
},
methods: {
onDocumentKeydown(e) {
if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
if (e.which == 84) { // t
(this.$refs.timeline as any).focus();
}
}
},
onScroll() {
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.more();
},
fetch(cb?) {
this.fetching = true;
this.posts = [];
(this as any).api('posts/mentions', {
following: this.mode == 'following'
}).then(posts => {
this.posts = posts;
this.fetching = false;
if (cb) cb();
});
},
more() {
if (this.moreFetching || this.fetching || this.posts.length == 0) return;
this.moreFetching = true;
(this as any).api('posts/mentions', {
following: this.mode == 'following',
until_id: this.posts[this.posts.length - 1].id
}).then(posts => {
this.posts = this.posts.concat(posts);
this.moreFetching = false;
});
}
}
});
</script>
<style lang="stylus" scoped>
.mk-mentions
background #fff
border solid 1px rgba(0, 0, 0, 0.075)
border-radius 6px
> header
padding 8px 16px
border-bottom solid 1px #eee
> span
margin-right 16px
line-height 27px
font-size 18px
color #555
&:not([data-is-active])
color $theme-color
cursor pointer
&:hover
text-decoration underline
> .fetching
padding 64px 0
> .empty
display block
margin 0 auto
padding 32px
max-width 400px
text-align center
color #999
> [data-fa]
display block
margin-bottom 16px
font-size 3em
color #ccc
</style>

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-timeline"> <div class="mk-timeline">
<mk-friends-maker v-if="alone"/> <mk-friends-maker v-if="alone"/>
<div class="loading" v-if="fetching"> <div class="fetching" v-if="fetching">
<mk-ellipsis-icon/> <mk-ellipsis-icon/>
</div> </div>
<p class="empty" v-if="posts.length == 0 && !fetching">%fa:R comments%自分の投稿や自分がフォローしているユーザーの投稿が表示されます</p> <p class="empty" v-if="posts.length == 0 && !fetching">%fa:R comments%自分の投稿や自分がフォローしているユーザーの投稿が表示されます</p>
@ -106,7 +106,7 @@ export default Vue.extend({
> .mk-following-setuper > .mk-following-setuper
border-bottom solid 1px #eee border-bottom solid 1px #eee
> .loading > .fetching
padding 64px 0 padding 64px 0
> .empty > .empty