Improve deck

This commit is contained in:
syuilo 2018-06-08 21:37:20 +09:00
parent 19300ca65c
commit 6152fd20bf
2 changed files with 52 additions and 2 deletions

View File

@ -31,7 +31,7 @@ import Vue from 'vue';
import XNote from './deck.note.vue'; import XNote from './deck.note.vue';
const displayLimit = 30; const displayLimit = 20;
export default Vue.extend({ export default Vue.extend({
components: { components: {

View File

@ -21,20 +21,27 @@
import Vue from 'vue'; import Vue from 'vue';
import XNotification from './deck.notification.vue'; import XNotification from './deck.notification.vue';
const displayLimit = 20;
export default Vue.extend({ export default Vue.extend({
components: { components: {
XNotification XNotification
}, },
inject: ['column', 'isScrollTop', 'count'],
data() { data() {
return { return {
fetching: true, fetching: true,
fetchingMoreNotifications: false, fetchingMoreNotifications: false,
notifications: [], notifications: [],
queue: [],
moreNotifications: false, moreNotifications: false,
connection: null, connection: null,
connectionId: null connectionId: null
}; };
}, },
computed: { computed: {
_notifications(): any[] { _notifications(): any[] {
return (this.notifications as any).map(notification => { return (this.notifications as any).map(notification => {
@ -46,12 +53,22 @@ export default Vue.extend({
}); });
} }
}, },
watch: {
queue(q) {
this.count(q.length);
}
},
mounted() { mounted() {
this.connection = (this as any).os.stream.getConnection(); this.connection = (this as any).os.stream.getConnection();
this.connectionId = (this as any).os.stream.use(); this.connectionId = (this as any).os.stream.use();
this.connection.on('notification', this.onNotification); this.connection.on('notification', this.onNotification);
this.column.$on('top', this.onTop);
this.column.$on('bottom', this.onBottom);
const max = 10; const max = 10;
(this as any).api('i/notifications', { (this as any).api('i/notifications', {
@ -66,10 +83,15 @@ export default Vue.extend({
this.fetching = false; this.fetching = false;
}); });
}, },
beforeDestroy() { beforeDestroy() {
this.connection.off('notification', this.onNotification); this.connection.off('notification', this.onNotification);
(this as any).os.stream.dispose(this.connectionId); (this as any).os.stream.dispose(this.connectionId);
this.column.$off('top', this.onTop);
this.column.$off('bottom', this.onBottom);
}, },
methods: { methods: {
fetchMoreNotifications() { fetchMoreNotifications() {
this.fetchingMoreNotifications = true; this.fetchingMoreNotifications = true;
@ -90,6 +112,7 @@ export default Vue.extend({
this.fetchingMoreNotifications = false; this.fetchingMoreNotifications = false;
}); });
}, },
onNotification(notification) { onNotification(notification) {
// TODO: () // TODO: ()
this.connection.send({ this.connection.send({
@ -97,7 +120,34 @@ export default Vue.extend({
id: notification.id id: notification.id
}); });
this.notifications.unshift(notification); this.prepend(notification);
},
prepend(notification) {
if (this.isScrollTop()) {
// Prepend the notification
this.notifications.unshift(notification);
//
if (this.notifications.length >= displayLimit) {
this.notifications = this.notifications.slice(0, displayLimit);
}
} else {
this.queue.push(notification);
}
},
releaseQueue() {
this.queue.forEach(n => this.prepend(n));
this.queue = [];
},
onTop() {
this.releaseQueue();
},
onBottom() {
this.fetchMoreNotifications();
} }
} }
}); });