Sharkey/src/client/app/mobile/views/components/notifications.vue

197 lines
5 KiB
Vue
Raw Normal View History

2018-02-15 10:08:48 +02:00
<template>
<div class="mk-notifications">
2018-10-14 04:16:02 +03:00
<div class="placeholder" v-if="fetching">
2018-10-14 03:47:38 +03:00
<template v-for="i in 10">
<mk-note-skeleton :key="i"/>
</template>
</div>
2018-06-22 12:03:08 +03:00
<!-- トランジションを有効にするとなぜかメモリリークする -->
2018-09-16 15:40:48 +03:00
<component :is="!$store.state.device.reduceMotion ? 'transition-group' : 'div'" name="mk-notifications" class="transition notifications">
2018-02-15 10:08:48 +02:00
<template v-for="(notification, i) in _notifications">
<mk-notification :notification="notification" :key="notification.id"/>
2018-04-27 15:06:28 +03:00
<p class="date" :key="notification.id + '_date'" v-if="i != notifications.length - 1 && notification._date != _notifications[i + 1]._date">
<span><fa icon="angle-up"/>{{ notification._datetext }}</span>
<span><fa icon="angle-down"/>{{ _notifications[i + 1]._datetext }}</span>
2018-02-15 10:08:48 +02:00
</p>
</template>
</component>
2018-04-27 15:06:28 +03:00
2018-02-22 10:57:14 +02:00
<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
2018-11-13 15:45:28 +02:00
<template v-if="fetchingMoreNotifications"><fa icon="spinner" pulse fixed-width/></template>
{{ fetchingMoreNotifications ? $t('@.loading') : $t('@.load-more') }}
2018-02-15 10:08:48 +02:00
</button>
2018-04-27 15:06:28 +03:00
<p class="empty" v-if="notifications.length == 0 && !fetching">{{ $t('empty') }}</p>
2018-02-15 10:08:48 +02:00
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
2018-02-15 10:08:48 +02:00
export default Vue.extend({
i18n: i18n('mobile/views/components/notifications.vue'),
2018-02-15 10:08:48 +02:00
data() {
return {
fetching: true,
fetchingMoreNotifications: false,
notifications: [],
moreNotifications: false,
connection: null
2018-02-15 10:08:48 +02:00
};
},
2018-02-15 10:08:48 +02:00
computed: {
_notifications(): any[] {
return (this.notifications as any).map(notification => {
2018-03-29 08:48:47 +03:00
const date = new Date(notification.createdAt).getDate();
const month = new Date(notification.createdAt).getMonth() + 1;
2018-02-15 10:08:48 +02:00
notification._date = date;
notification._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
2018-02-15 10:08:48 +02:00
return notification;
});
}
},
2018-02-15 10:08:48 +02:00
mounted() {
2018-10-08 09:42:21 +03:00
window.addEventListener('scroll', this.onScroll, { passive: true });
2018-11-09 01:13:34 +02:00
this.connection = this.$root.stream.useSharedConnection('main');
2018-02-15 10:08:48 +02:00
this.connection.on('notification', this.onNotification);
const max = 10;
2018-11-09 01:13:34 +02:00
this.$root.api('i/notifications', {
2018-02-15 10:08:48 +02:00
limit: max + 1
}).then(notifications => {
if (notifications.length == max + 1) {
this.moreNotifications = true;
notifications.pop();
}
this.notifications = notifications;
this.fetching = false;
2018-02-22 10:57:14 +02:00
this.$emit('fetched');
2018-02-15 10:08:48 +02:00
});
},
2018-02-15 10:08:48 +02:00
beforeDestroy() {
2018-10-08 09:42:21 +03:00
window.removeEventListener('scroll', this.onScroll);
this.connection.dispose();
2018-02-15 10:08:48 +02:00
},
2018-02-15 10:08:48 +02:00
methods: {
fetchMoreNotifications() {
2018-10-09 16:48:45 +03:00
if (this.fetchingMoreNotifications) return;
2018-02-15 10:08:48 +02:00
this.fetchingMoreNotifications = true;
const max = 30;
2018-11-09 01:13:34 +02:00
this.$root.api('i/notifications', {
2018-02-15 10:08:48 +02:00
limit: max + 1,
2018-03-29 08:48:47 +03:00
untilId: this.notifications[this.notifications.length - 1].id
2018-02-15 10:08:48 +02:00
}).then(notifications => {
if (notifications.length == max + 1) {
this.moreNotifications = true;
notifications.pop();
} else {
this.moreNotifications = false;
}
this.notifications = this.notifications.concat(notifications);
this.fetchingMoreNotifications = false;
});
},
2018-02-15 10:08:48 +02:00
onNotification(notification) {
// TODO: ユーザーが画面を見てないと思われるとき(ブラウザやタブがアクティブじゃないなど)は送信しない
2018-11-09 01:13:34 +02:00
this.$root.stream.send('readNotification', {
2018-02-15 10:08:48 +02:00
id: notification.id
});
this.notifications.unshift(notification);
2018-10-08 09:42:21 +03:00
},
onScroll() {
if (this.$store.state.settings.fetchOnScroll !== false) {
// 親要素が display none だったら弾く
// https://github.com/syuilo/misskey/issues/1569
// http://d.hatena.ne.jp/favril/20091105/1257403319
if (this.$el.offsetHeight == 0) return;
const current = window.scrollY + window.innerHeight;
if (current > document.body.offsetHeight - 8) this.fetchMoreNotifications();
}
2018-02-15 10:08:48 +02:00
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-27 10:49:18 +03:00
.mk-notifications
2018-04-27 15:06:28 +03:00
margin 0 auto
2018-09-27 10:49:18 +03:00
background var(--face)
2018-02-15 10:08:48 +02:00
border-radius 8px
2018-04-29 02:51:17 +03:00
box-shadow 0 0 2px rgba(#000, 0.1)
overflow hidden
2018-02-15 10:08:48 +02:00
@media (min-width 500px)
2018-04-29 02:51:17 +03:00
box-shadow 0 8px 32px rgba(#000, 0.1)
2018-04-27 15:06:28 +03:00
.transition
.mk-notifications-enter
.mk-notifications-leave-to
opacity 0
transform translateY(-30px)
> *
transition transform .3s ease, opacity .3s ease
2018-02-15 10:08:48 +02:00
> .notifications
> .mk-notification:not(:last-child)
2018-09-26 18:54:37 +03:00
border-bottom solid 1px var(--faceDivider)
2018-02-15 10:08:48 +02:00
> .date
display block
margin 0
line-height 32px
text-align center
font-size 0.8em
2018-09-27 10:49:18 +03:00
color var(--dateDividerFg)
background var(--dateDividerBg)
2018-09-26 18:54:37 +03:00
border-bottom solid 1px var(--faceDivider)
2018-02-15 10:08:48 +02:00
span
margin 0 16px
[data-icon]
2018-02-15 10:08:48 +02:00
margin-right 8px
> .more
display block
width 100%
padding 16px
2018-10-08 09:43:43 +03:00
color var(--text)
2018-04-29 02:51:17 +03:00
border-top solid 1px rgba(#000, 0.05)
2018-02-15 10:08:48 +02:00
> [data-icon]
2018-02-15 10:08:48 +02:00
margin-right 4px
> .empty
margin 0
padding 16px
text-align center
color #aaa
2018-10-14 04:16:02 +03:00
> .placeholder
2018-02-15 10:08:48 +02:00
padding 16px
2018-10-14 03:47:38 +03:00
opacity 0.3
2018-02-15 10:08:48 +02:00
2018-10-14 03:47:38 +03:00
@media (min-width 500px)
padding 32px
2018-02-15 10:08:48 +02:00
</style>