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';
const displayLimit = 30;
const displayLimit = 20;
export default Vue.extend({
components: {

View file

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